feat: search map (#919)

* chore: stash

* chore: replace vector feature map with npm version

* feat: add search map

* chore: use bcgov/prp-map library

* test: add ol/style fill and stroke mocks

* test: remove map canvas in happo screenshot util

* chore: fix search results style regression

* refactor: organize search map components

* chore: test filter map features by id

* chore: set empty array if id list exists

* refactor: clean up map layer functions

Author: marcellmueller

public/frontend/e2e/constants.ts

@@ -3,3 +3,5 @@ import { MAX_VISIBLE_OPTIONS } from '@/components/search/filters/FilterGroup';
 export const BASE_URL = process.env.E2E_BASE_URL || 'http://localhost:3000';
 
 export const MAX_VISIBLE_FILTERS = MAX_VISIBLE_OPTIONS;
+
+export const MAP_CANVAS_SELECTOR = '#map-container';

public/frontend/e2e/pages/recResource.spec.ts

@@ -16,8 +16,6 @@ test.describe('Recreation Resource page', () => {
     await layout.verifyFooterContent();
     await recResourcePage.verifySectionsExistInPageMenu();
 
-    await recResourcePage.removeRecreationResourceFeatureMap();
-
     await recResourcePage.verifyPdfDocLinks();
 
     await utils.accessibility();

public/frontend/e2e/poms/pages/recResource.ts

@@ -6,8 +6,6 @@ import { waitForImagesToLoad } from 'e2e/utils';
 import { RecResource } from 'e2e/poms/pages/types';
 import { SectionTitles } from '@/components/rec-resource/enum';
 
-const MAP_CANVAS_SELECTOR = '#map-container';
-
 export class RecreationResourcePOM {
   readonly page: Page;
 
@@ -49,29 +47,6 @@ export class RecreationResourcePOM {
     }
   }
 
-  /**
-   * Remove the map canvas element
-   *
-   * @remarks
-   * Happo e2e automatically converts canvas elements to inline img elements
-   * with a URL that looks like  "_inlined/...png" without actually creating
-   * the file in the directory. When the tests are done, it then tries to
-   * package every URL in the asset bundle for the test review page and tries to
-   * resolve this non-existent url which ends up throwing the error.
-   */
-  async removeRecreationResourceFeatureMap() {
-    try {
-      await this.page
-        .locator(MAP_CANVAS_SELECTOR)
-        .waitFor({ state: 'visible', timeout: 5000 });
-      await this.page.evaluate((selector) => {
-        document.querySelector(selector)?.remove();
-      }, MAP_CANVAS_SELECTOR);
-    } catch (error) {
-      console.warn(`Map element not found: ${error}`);
-    }
-  }
-
   async verifyPdfDocLinks() {
     const pdfLink = this.page.getByRole('link', { name: /\[PDF\]/ });
     await expect(pdfLink).toHaveAttribute('href', /.*\.pdf$/);

public/frontend/e2e/poms/utils.ts

@@ -7,7 +7,7 @@ import {
   waitForNetworkRequest,
   waitForNetworkResponse,
 } from 'e2e/utils';
-import { BASE_URL } from 'e2e/constants';
+import { BASE_URL, MAP_CANVAS_SELECTOR } from 'e2e/constants';
 
 export class UtilsPOM {
   readonly page: Page;
@@ -44,6 +44,8 @@ export class UtilsPOM {
   }
 
   async screenshot(component: string, variant: string) {
+    // Remove the map canvas element if it exists as it breaks Happo
+    await this.removeVectorFeatureMap();
     await happoPlaywright.screenshot(this.page, this.pageContent, {
       component,
       variant,
@@ -62,4 +64,23 @@ export class UtilsPOM {
     await this.waitForNetworkRequest(url);
     await this.waitForNetworkResponse(statusCode);
   }
+
+  /**
+   * Remove the map canvas element
+   *
+   * @remarks
+   * Happo e2e automatically converts canvas elements to inline img elements
+   * with a URL that looks like  "_inlined/...png" without actually creating
+   * the file in the directory. When the tests are done, it then tries to
+   * package every URL in the asset bundle for the test review page and tries to
+   * resolve this non-existent url which ends up throwing the error.
+   */
+  async removeVectorFeatureMap() {
+    const canvas = this.page.locator(MAP_CANVAS_SELECTOR);
+    if ((await canvas.count()) > 0) {
+      await this.page.evaluate((selector) => {
+        document.querySelector(selector)?.remove();
+      }, MAP_CANVAS_SELECTOR);
+    }
+  }
 }

public/frontend/e2e/workflows/user/landing-search.spec.ts

@@ -54,8 +54,6 @@ test.describe('User flows from the landing page to searching for a rec resource'
 
     await utils.accessibility();
 
-    await recResourcePage.removeRecreationResourceFeatureMap();
-
     await utils.screenshot('Recreation Resource page', '10k cabin');
   });
 
@@ -96,8 +94,6 @@ test.describe('User flows from the landing page to searching for a rec resource'
 
     await utils.accessibility();
 
-    await recResourcePage.removeRecreationResourceFeatureMap();
-
     await utils.screenshot(
       'Recreation Resource page',
       '24 mile snowmobile area',

public/frontend/package-lock.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@bcgov/bc-sans": "^2.1.0",
+    "@bcgov/prp-map": "^0.0.4",
     "@digitalspace/bcparks-bootstrap-theme": "^1.4.6",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",