From d797e0d3491cfdc16822556ea0c50836962b6cc5 Mon Sep 17 00:00:00 2001 From: ronitjadhav Date: Mon, 6 May 2024 17:01:06 +0200 Subject: [PATCH] Updated Unit test --- .../add-layer-from-ogc-api.component.spec.ts | 97 ++++++++++++++++++- .../add-layer-from-ogc-api.component.ts | 35 ++++--- 2 files changed, 114 insertions(+), 18 deletions(-) diff --git a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.spec.ts b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.spec.ts index ab58f79785..8979e6e2b7 100644 --- a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.spec.ts +++ b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.spec.ts @@ -1,6 +1,5 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { AddLayerFromOgcApiComponent } from './add-layer-from-ogc-api.component' -import { MapFacade } from '../+state/map.facade' import { TranslateModule } from '@ngx-translate/core' import { NO_ERRORS_SCHEMA } from '@angular/core' import { MapContextLayerTypeEnum } from '../map-context/map-context.model' @@ -9,6 +8,9 @@ jest.mock('@camptocamp/ogc-client', () => ({ OgcApiEndpoint: class { constructor(private url) {} isReady() { + if (this.url === 'http://example.com/ogc') { + return Promise.resolve(this) + } if (this.url.indexOf('error') > -1) { return Promise.reject(new Error('Something went wrong')) } @@ -19,17 +21,57 @@ jest.mock('@camptocamp/ogc-client', () => ({ } return Promise.resolve(this) } - get featureCollections() { + get allCollections() { + if (this.url === 'http://example.com/ogc') { + return Promise.resolve([ + { + name: 'NaturalEarth:physical:ne_10m_lakes_pluvial', + hasVectorTiles: true, + hasMapTiles: true, + }, + { + name: 'NaturalEarth:physical:ne_10m_land_ocean_seams', + hasVectorTiles: true, + hasMapTiles: true, + }, + ]) + } if (this.url.includes('error')) { return Promise.reject(new Error('Simulated loading error')) } - return Promise.resolve(['layer1', 'layer2', 'layer3']) + return Promise.resolve([ + { + name: 'NaturalEarth:physical:ne_10m_lakes_pluvial', + hasVectorTiles: true, + hasMapTiles: true, + }, + { + name: 'NaturalEarth:physical:ne_10m_land_ocean_seams', + hasVectorTiles: true, + hasMapTiles: true, + }, + ]) } getCollectionItemsUrl(collectionId) { + if (this.url === 'http://example.com/ogc') { + return Promise.resolve( + `http://example.com/collections/${collectionId}/items` + ) + } return Promise.resolve( `http://example.com/collections/${collectionId}/items` ) } + getVectorTilesetUrl(collectionId) { + return Promise.resolve( + `http://example.com/collections/${collectionId}/tiles/vector` + ) + } + getMapTilesetUrl(collectionId) { + return Promise.resolve( + `http://example.com/collections/${collectionId}/tiles/map` + ) + } }, })) @@ -68,7 +110,18 @@ describe('AddLayerFromOgcApiComponent', () => { await component.loadLayers() expect(component.errorMessage).toBeFalsy() expect(component.loading).toBe(false) - expect(component.layers).toEqual(['layer1', 'layer2', 'layer3']) + expect(component.layers).toEqual([ + { + name: 'NaturalEarth:physical:ne_10m_lakes_pluvial', + hasVectorTiles: true, + hasMapTiles: true, + }, + { + name: 'NaturalEarth:physical:ne_10m_land_ocean_seams', + hasVectorTiles: true, + hasMapTiles: true, + }, + ]) }) it('should handle errors while loading layers', async () => { @@ -79,4 +132,40 @@ describe('AddLayerFromOgcApiComponent', () => { expect(component.layers.length).toBe(0) }) }) + + describe('Add Collection', () => { + it('should add feature type collection to map', async () => { + const layerAddedSpy = jest.spyOn(component.layerAdded, 'emit') + await component.addLayer('layer1', 'features') + expect(layerAddedSpy).toHaveBeenCalledWith({ + name: 'layer1', + url: 'http://example.com/collections/layer1/items', + type: MapContextLayerTypeEnum.OGCAPI, + layerType: 'features', + title: 'layer1', + }) + }) + it('should add vector tile collection to map', async () => { + const layerAddedSpy = jest.spyOn(component.layerAdded, 'emit') + await component.addLayer('layer1', 'vectorTiles') + expect(layerAddedSpy).toHaveBeenCalledWith({ + name: 'layer1', + url: 'http://example.com/collections/layer1/tiles/vector', + type: MapContextLayerTypeEnum.OGCAPI, + layerType: 'vectorTiles', + title: 'layer1', + }) + }) + it('should add map tile collection to map', async () => { + const layerAddedSpy = jest.spyOn(component.layerAdded, 'emit') + await component.addLayer('layer1', 'mapTiles') + expect(layerAddedSpy).toHaveBeenCalledWith({ + name: 'layer1', + url: 'http://example.com/collections/layer1/tiles/map', + type: MapContextLayerTypeEnum.OGCAPI, + layerType: 'mapTiles', + title: 'layer1', + }) + }) + }) }) diff --git a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts index bcf46431d6..9b0539e2cf 100644 --- a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts +++ b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts @@ -6,9 +6,10 @@ import { ChangeDetectionStrategy, Input, ChangeDetectorRef, + OnDestroy, } from '@angular/core' import { OgcApiEndpoint } from '@camptocamp/ogc-client' -import { Subject, debounceTime } from 'rxjs' +import { Subject, debounceTime, takeUntil } from 'rxjs' import { MapContextLayerModel, MapContextLayerTypeEnum, @@ -25,7 +26,7 @@ import { MapLayer } from '../+state/map.models' standalone: true, imports: [CommonModule, TranslateModule, UiInputsModule], }) -export class AddLayerFromOgcApiComponent implements OnInit { +export class AddLayerFromOgcApiComponent implements OnInit, OnDestroy { @Input() ogcUrl: string @Output() layerAdded = new EventEmitter() @@ -34,13 +35,22 @@ export class AddLayerFromOgcApiComponent implements OnInit { layers: any[] = [] errorMessage: string | null = null selectedLayerTypes: { [key: string]: DropdownChoice['value'] } = {} + private ogcEndpoint: OgcApiEndpoint + private destroy$ = new Subject() constructor(private changeDetectorRef: ChangeDetectorRef) {} ngOnInit() { - this.urlChange.pipe(debounceTime(700)).subscribe(() => { - this.loadLayers() - }) + this.urlChange + .pipe(debounceTime(700), takeUntil(this.destroy$)) + .subscribe(() => { + this.loadLayers() + }) + } + + ngOnDestroy() { + this.destroy$.next() + this.destroy$.complete() } async loadLayers() { @@ -51,8 +61,8 @@ export class AddLayerFromOgcApiComponent implements OnInit { this.layers = [] return } - const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl) - this.layers = await ogcEndpoint.allCollections + this.ogcEndpoint = new OgcApiEndpoint(this.ogcUrl) + this.layers = await this.ogcEndpoint.allCollections this.setDefaultLayerTypes() } catch (error) { const err = error as Error @@ -107,21 +117,18 @@ export class AddLayerFromOgcApiComponent implements OnInit { async addLayer(layer: string, layerType: any) { try { - console.log(layerType) - const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl) - let layerUrl + let layerUrl: string if (layerType === 'vectorTiles') { - layerUrl = await ogcEndpoint.getVectorTilesetUrl(layer) + layerUrl = await this.ogcEndpoint.getVectorTilesetUrl(layer) } else if (layerType === 'mapTiles') { - layerUrl = await ogcEndpoint.getMapTilesetUrl(layer) + layerUrl = await this.ogcEndpoint.getMapTilesetUrl(layer) } else { - layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer, { + layerUrl = await this.ogcEndpoint.getCollectionItemsUrl(layer, { outputFormat: 'json', }) } - // const layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer, {outputFormat: 'json'}) const layerToAdd: MapContextLayerModel = { name: layer, url: layerUrl,