Wednesday, 14 October 2020

how to do unit testing of classes which implement the ArcGIS API for Angular?

I'm building an Angular 8 application using the esri-loader and I'm really struggling with trying figure out the best way to mock ArcGIS JS API dependencies in my tests. I have come across very little sample code for applications built with frameworks other than dojo that use the ArcGIS JS API and also contain meaningful unit tests. Is anyone out there doing this successfully and able to provide some guidance?

For example, say I have a MapComponent class that looks like this:

export class MapComponent {
mapView: MapView;

public async initializeMap(lat: number, lon: number, zoom: number) {
const [Map, MapView] = await loadModules(['esri/Map', 'esri/views/MapView']);

this.mapView = new MapView({
   zoom: zoom,
   center: [lat, lon]
  map: new Map({
    basemap: 'streets'
  })
});
}

public async addPointToMap(lat: number, lon: number) {
const [Graphic] = await loadModules(['esri/Graphic']);
 
 const point = {
   type: "point",
   longitude: lon,
   latitude: lat
 };

 const markerSymbol = {
   type: "simple-marker",
   color: [226, 119, 40],
   outline: {
      color: [255, 255, 255],
      width: 2
   }
 };

 const pointGraphic = new Graphic({
   geometry: point,
   symbol: markerSymbol
 });
 
 this.mapView.graphics.add(pointGraphic);
 }
}

I want to test the initializeMap() and addPointToMap() functions, but what is the best way to do this without actually making an http request to get the required API modules and creating concrete instances of each class I need? A test class might look like this:

describe('MapComponent', () => {
let fixture: ComponentFixture<MapComponent>;
let component;

beforeEach(async () => {
 TestBed.configureTestingModule({
  declarations: [MapComponent],
}).compileComponents();
 
fixture = TestBed.createComponent(MapComponent);
component = fixture.debugElement.componentInstance;
});

it('should initialize map', async () => {
 // calling this function will fetch the ArcGIS JS API dependencies
// and create concrete instances of Map and MapView objects - need
// to mock these      
await component.initializeMap();
expect(component.mapService.mapView).toBeTruthy();
});

it('should add a point to the map', async () => {
await component.addPointToMap(32.7, -117.1);
// assert point is created in component.mapService.mapView object
   });
 });


from how to do unit testing of classes which implement the ArcGIS API for Angular?

No comments:

Post a Comment