Updated Unit test

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',
+      })
+    })
+  })
 })

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<MapLayer>()
 
@@ -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<void>()
 
   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,