topic Re: Angular developers: how are you unit testing classes which implement the ArcGIS API for JavaScript? in ArcGIS JavaScript Maps SDK Questions

Angular developers: how are you unit testing classes which implement the ArcGIS API for JavaScript?

mfcallahan — Sun, 12 Dec 2021 06:30:10 GMT

Some more info: I'm building an Angular 7 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
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

As mentioned above, I'm really struggling with how to mock out ArcGIS JS API classes. When testing my own code, I would implement a class from some interface and use DI to assist with testing, but I'm not seeing how I can test the ArcGIS API classes. Help me interwebs, you're my only hope...

Re: Angular developers: how are you unit testing classes which implement the ArcGIS API for JavaScript?

AndyGup — Wed, 09 Oct 2019 18:28:25 GMT

If you are concerned about HTTP calls to retrieve modules take a look at using webpack instead of esri-loader. If you can switch over to webpack then all your ArcGIS modules will be in the local bundles. Here's a repo to help get you started in that direction: https://github.com/Esri/angular-cli-esri-map/tree/arcgis-webpack-angular. Unfortunately the spec is broken on that branch, not sure why.

Re: Angular developers: how are you unit testing classes which implement the ArcGIS API for JavaScript?

mfcallahan — Wed, 16 Oct 2019 21:23:01 GMT

Thanks, this seems like the best way to go about it. I will experiment with the ArcGIS Webpack plugin and see if this will allow me to use another library to mock out the API classes.

Re: Angular developers: how are you unit testing classes which implement the ArcGIS API for JavaScript?

PanditSargar — Wed, 07 Oct 2020 10:27:34 GMT

Is there any specific technical difficulty, so that we are not supporting Unit test cases for the esri-loader?

Re: Angular developers: how are you unit testing classes which implement the ArcGIS API for JavaScript?

mfcallahan — Fri, 04 Dec 2020 17:01:50 GMT

For what it's worth I came up with a strategy, using the Dependency Inversion Principle and the Facade Pattern, to be able to mock ArcGIS JS API modules and eliminate the HTTP requests being made from loadModules().

I posted in greater detail on my blog here: https://seesharpdotnet.wordpress.com/2020/12/03/angular-and-arcgis-api-for-javascript-a-unit-testing-strategy-using-dependency-injection-and-the-facade-pattern/

A working sample application applying this approach and test coverage is available in this repository: https://github.com/mfcallahan/angular-cli-esri-map-unit-testing

Here is the summary from the repo's README file:

The problem
The esri-loader allows an application to load Dojo AMD Modules outside of the Dojo Toolkit. A module can be lazy loaded, improving the initial load performance of the application by waiting to fetch API resources until they are actually needed:

// MapService class to encapsulate ArcGIS API @Injectable({ providedIn: 'root' }) export class MapService { mapView?: esri.MapView; async initDefaultMap(): Promise<void> { // loadModules() will make HTTP requests to arcgis.com to fetch specified modules const [Map, MapView] = await loadModules(['esri/Map', 'esri/views/MapView']); this.mapView = new MapView({ map: new Map({ basemap: 'streets' }), center: [-112.077, 39.83], zoom: 5, }); } }

However, this can make unit testing difficult, as the system under test does not have any reference to the objects in an ArcGIS API module until an HTTP request is made to fetch it. A test for the initDefaultMap() method will call loadModules() and make HTTP requests to arcgis.com to fetch the resources needed. This may not be desirable for a few reasons:

The test becomes more like an integration test; we want to assert the component.mapView was correctly set inside loadModules(), not test that the application could connect to the internet and fetch dependencies.
Tests may be executed in an environment which may not have access to the ArcGIS CDN, such as an automated build pipeline or server.
Tests to ensure error responses from the request to load an ArcGIS API module (the unhappy path) are handled properly may be necessary.

// initDefaultMap() unit test it('should initialize a default map', async () => { await service.initDefaultMap(); // test will make actual HTTP requests! expect(service.mapView).not.toBeUndefined(); });

My solution
Difficult to mock code is difficult to test! By refactoring the application code to follow the Dependency Inversion Principle and leverage Dependency Injection, the tight coupling between the above initDefaultMap() method and the esri-loader can be eliminated. The Facade Pattern can be used, creating a wrapper class for loadModules() and others methods exported by esri-loader which can then be injected into the class that has a dependencies on ArcGIS API modules. The wrapper class exposes its own loadModules() method which can be easily mocked, eliminating HTTP requests to the ArcGIS CDN in a test suite. A library such as TypeMoq can be used to create mock instances of the various ArcGIS API modules.

// Singleton service wrapper class for esri-loader @Injectable({ providedIn: 'root' }) export class EsriLoaderWrapperService { constructor() {} public async loadModules(modules: string[]): Promise<any[]> { return await loadModules(modules); } public getInstance<T>(type: new (paramObj: any) => T, paramObj?: any): T { return new type(paramObj); } } // Updated MapService class @Injectable({ providedIn: 'root' }) export class MapService { mapView?: esri.MapView; constructor(readonly esriLoaderWrapperService: EsriLoaderWrapperService) {} async initDefaultMap(): Promise<void> { const [Map, MapView] = await this.esriLoaderWrapperService.loadModules(['esri/Map', 'esri/views/MapView']); const map = this.esriLoaderWrapperService.getInstance<esri.Map>(Map, { 'streets' }); this.mapView = this.esriLoaderWrapperService.getInstance<esri.MapView>(MapView, { map, center: [-112.077, 39.83], zoom: 5, }); } } // Updated initDefaultMap() unit test it('should initialize a default map', async () => { // Arrange const mockMap = TypeMoq.Mock.ofType<esri.Map>(); const mockMapView = TypeMoq.Mock.ofType<esri.MapView>(); const esriMockTypes = [mockMap, mockMapView]; const loadModulesSpy = spyOn(service.esriLoaderWrapperService, 'loadModules').and.returnValue( Promise.resolve(esriMockTypes) ); const getInstanceSpy = spyOn(service.esriLoaderWrapperService, 'getInstance').and.returnValues( ...esriMockTypes.map((mock) => mock.object) ); // Act await service.initDefaultMap(basemap, centerLon, centerLat, zoom, elementRef); // Assert expect(loadModulesSpy).toHaveBeenCalledTimes(1); expect(getInstanceSpy).toHaveBeenCalledTimes(esriMockTypes.length); expect(service.mapView).not.toBeUndefined(); expect(service.mapView).toBe(mockMapView.object); });

Re: Angular developers: how are you unit testing classes which implement the ArcGIS API for JavaScript?

rogenjh — Thu, 25 Feb 2021 13:44:31 GMT

I had to pop by and say THANK YOU for this. It's so well documented and explained.