feat(me): migrate spatial-extents map to use geo-sdk

geonetwork · Sep 15, 2024 · dd35954 · dd35954
1 parent 23fef10
commit dd35954
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 208 deletions.
diff --git a/...s/record-form/form-field/form-field-map-container/form-field-map-container.component.html b/...s/record-form/form-field/form-field-map-container/form-field-map-container.component.html
@@ -1,4 +1 @@
-<gn-ui-map-context
-  [context]="mapContext$ | async"
-  [mapConfig]="mapConfig"
-></gn-ui-map-context>
+<gn-ui-map-container [context]="mapContext$ | async"></gn-ui-map-container>
diff --git a/...ecord-form/form-field/form-field-map-container/form-field-map-container.component.spec.ts b/...ecord-form/form-field/form-field-map-container/form-field-map-container.component.spec.ts
@@ -1,118 +1,33 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-
 import { FormFieldMapContainerComponent } from './form-field-map-container.component'
-import {
-  defaultMapStyleFixture,
-  defaultMapStyleHlFixture,
-  MapContextModel,
-  MapFacade,
-  MapStyleService,
-  MapUtilsService,
-} from '@geonetwork-ui/feature/map'
-import { of } from 'rxjs'
-import { Style } from 'ol/style'
-import { StoreModule } from '@ngrx/store'
-import { EffectsModule } from '@ngrx/effects'
-import { Gn4Converter } from '@geonetwork-ui/api/metadata-converter'
-import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface'
-import { TranslateModule } from '@ngx-translate/core'
-import { Component, Input } from '@angular/core'
-import { MapConfig } from '@geonetwork-ui/util/app-config'
-import { CommonModule } from '@angular/common'
-import Map from 'ol/Map'
+import { MockBuilder } from 'ng-mocks'
+import { firstValueFrom } from 'rxjs'
+import { createViewFromLayer } from '@geospatial-sdk/core'
 
-class ResizeObserverMock {
-  observe = jest.fn()
-  unobserve = jest.fn()
-  disconnect = jest.fn()
-}
-;(window as any).ResizeObserver = ResizeObserverMock
-class Gn4MetadataMapperMock {
-  readRecords = jest.fn((records) =>
-    Promise.all(records.map((r) => this.readRecord(r)))
-  )
-  readRecord = jest.fn((record) => Promise.resolve(record))
-}
-class mapStyleServiceMock {
-  createDefaultStyle = jest.fn(() => new Style())
-  styles = {
-    default: defaultMapStyleFixture(),
-    defaultHL: defaultMapStyleHlFixture(),
-  }
-  createGeometryStyles = jest.fn(() => new Style())
-  createStyleFunction = jest.fn()
-}
-class MapFacadeMock {
-  addLayer = jest.fn()
-  removeLayer = jest.fn()
+jest.mock('@geospatial-sdk/core', () => ({
+  createViewFromLayer: jest.fn(() => {
+    return Promise.resolve({
+      zoom: 3,
+      center: [3, 4],
+    })
+  }),
+}))
 
-  layers$ = of([])
-}
-class MapUtilsServiceMock {
-  getLayerExtent = jest.fn(() => null)
-  createEmptyMap = jest.fn(() => new Map())
-}
-class PlatformServiceInterfaceMock {
-  searchKeywords = jest.fn(() =>
-    of([{ label: 'Africa', thesaurus: { id: '1' } }])
-  )
-  getMe = jest.fn(() => of({}))
-}
-@Component({
-  selector: 'gn-ui-map-context',
-  template: '<div></div>',
-})
-export class MockMapContextComponent {
-  @Input() context: MapContextModel
-  @Input() mapConfig: MapConfig
-}
-@Component({
-  selector: 'gn-ui-map',
-  template: '<div></div>',
-})
-export class MockMapComponent {
-  @Input() map: Map
-}
 describe('FormFieldMapContainerComponent', () => {
   let component: FormFieldMapContainerComponent
   let fixture: ComponentFixture<FormFieldMapContainerComponent>
-  let mapFacade: MapFacade
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [MockMapContextComponent, MockMapComponent],
-      imports: [
-        FormFieldMapContainerComponent,
-        EffectsModule.forRoot(),
-        StoreModule.forRoot({}),
-        TranslateModule.forRoot(),
-        CommonModule,
-      ],
-      providers: [
-        {
-          provide: MapUtilsService,
-          useClass: MapUtilsServiceMock,
-        },
-        {
-          provide: MapFacade,
-          useClass: MapFacadeMock,
-        },
-        {
-          provide: MapStyleService,
-          useClass: mapStyleServiceMock,
-        },
-        {
-          provide: Gn4Converter,
-          useClass: Gn4MetadataMapperMock,
-        },
-        {
-          provide: PlatformServiceInterface,
-          useClass: PlatformServiceInterfaceMock,
-        },
-      ],
-    }).compileComponents()
+    jest.clearAllMocks()
+  })
+
+  beforeEach(() => {
+    return MockBuilder(FormFieldMapContainerComponent)
+  })
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({}).compileComponents()
 
-    mapFacade = TestBed.inject(MapFacade)
     fixture = TestBed.createComponent(FormFieldMapContainerComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
@@ -122,7 +37,12 @@ describe('FormFieldMapContainerComponent', () => {
     expect(component).toBeTruthy()
   })
 
-  it('should remove previous layer and add a new layer with geometries', () => {
+  it('initial context is null (default map)', async () => {
+    const context = await firstValueFrom(component.mapContext$)
+    expect(context).toEqual(null)
+  })
+
+  it('should remove previous layer and add a new layer with geometries', async () => {
     component.spatialExtents = [
       {
         geometry: {
@@ -139,28 +59,92 @@ describe('FormFieldMapContainerComponent', () => {
         },
       },
     ]
-    component.ngOnChanges()
-
-    expect(
-      mapFacade.layers$.subscribe((layers) => {
-        expect(layers.length).toEqual(1)
-      })
-    )
+    const context = await firstValueFrom(component.mapContext$)
+    expect(context).toEqual({
+      layers: [
+        {
+          data: {
+            features: [
+              {
+                geometry: {
+                  coordinates: [
+                    [
+                      [0, 0],
+                      [0, 1],
+                      [1, 1],
+                      [1, 0],
+                      [0, 0],
+                    ],
+                  ],
+                  type: 'Polygon',
+                },
+                properties: {},
+                type: 'Feature',
+              },
+            ],
+            type: 'FeatureCollection',
+          },
+          label: 'Spatial extents',
+          style: {
+            'stroke-color': 'black',
+            'stroke-width': 2,
+          },
+          type: 'geojson',
+        },
+      ],
+      view: {
+        center: [3, 4],
+        zoom: 3,
+      },
+    })
+    expect(createViewFromLayer).toHaveBeenCalledWith(context.layers[0])
   })
 
-  it('should remove previous layer and add a new layer with bbox', () => {
+  it('should remove previous layer and add a new layer with bbox', async () => {
     component.spatialExtents = [
       {
         bbox: [0, 0, 1, 1],
       },
     ]
-    component.ngOnChanges()
-
-    expect(
-      mapFacade.layers$.subscribe((layers) => {
-        expect(layers.length).toEqual(1)
-      })
-    )
+    const context = await firstValueFrom(component.mapContext$)
+    expect(context).toEqual({
+      layers: [
+        {
+          data: {
+            features: [
+              {
+                geometry: {
+                  coordinates: [
+                    [
+                      [0, 0],
+                      [0, 1],
+                      [1, 1],
+                      [1, 0],
+                      [0, 0],
+                    ],
+                  ],
+                  type: 'Polygon',
+                },
+                properties: {},
+                type: 'Feature',
+              },
+            ],
+            type: 'FeatureCollection',
+          },
+          label: 'Spatial extents',
+          style: {
+            'stroke-color': 'black',
+            'stroke-width': 2,
+          },
+          type: 'geojson',
+        },
+      ],
+      view: {
+        center: [3, 4],
+        zoom: 3,
+      },
+    })
+    expect(createViewFromLayer).toHaveBeenCalledWith(context.layers[0])
   })
 
   it('should transform bbox to geometry', () => {