feat: add map rendered class and push-analytics config and classes (#565

)

* feat: add class when map is rendered

* chore: code cleaning

* chore: code cleaning

* feat: check if bing layer is loaded

* chore: code cleaning

* fix: rendering timeout

* chore: refactor

* chore: change isLoading to within the trycatch

* fix: clear render timeout when data is fetched or received

* fix: restore check that returns if loading layers are encountered

* Revert "feat: add class when map is rendered and push-analytics helper files and classes (#552)"

This reverts commit c3830ac.

* fix: adjust test to changes

* chore: deduplicate node modules

* chore: add verify-app workflow

* fix: ensure mock Map class is an actual class

* fix: include error message when rejecting a promise

* fix: mock earth engine worker with class implementation

* fix: mock `getWorkerInstance` method instead of `getEarthEngineWorker` function

---------

Co-authored-by: Bjørn Sandvik <bjorn@mastermaps.com>
Co-authored-by: Jen Jones Arnesen <jennifer@dhis2.org>

.github/workflows/dhis2-verify-app.yml

@@ -0,0 +1,30 @@
+name: 'dhis2: verify (app)'
+
+on:
+    pull_request:
+        types: ['opened', 'edited', 'reopened', 'synchronize']
+
+concurrency:
+    group: ${{ github.workflow}}-${{ github.ref }}
+
+jobs:
+    verify:
+        if: "!contains(github.event.head_commit.message, '[skip ci]')"
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18.x
+
+            - name: Install
+              run: yarn install --frozen-lockfile
+
+            - name: Lint
+              run: yarn d2-style check
+
+            - name: Test
+              run: yarn test
+
+            - name: Build
+              run: yarn build

babel.config.js

@@ -24,7 +24,10 @@ module.exports = function (api) {
         ],
         env: {
             test: {
-                plugins: ['@babel/plugin-transform-runtime'],
+                plugins: [
+                    '@babel/plugin-transform-runtime',
+                    'babel-plugin-transform-import-meta',
+                ],
             },
         },
     }

package.json

@@ -44,6 +44,7 @@
         "@dhis2/cli-style": "^10.5.1",
         "@types/jest": "^29.4.0",
         "babel-jest": "^29.5.0",
+        "babel-plugin-transform-import-meta": "^2.2.1",
         "concurrently": "^7.6.0",
         "husky": "^8.0.3",
         "identity-obj-proxy": "^3.0.0",

src/__tests__/Map.spec.js

@@ -1,14 +1,17 @@
 import Map from '../Map'
 
-jest.mock('maplibre-gl', () => ({
-    Map: () => mockMapGL,
-    Evented: () => {},
-    Marker: () => {},
-    Popup: () => {},
-    AttributionControl: () => {},
-    NavigationControl: () => {},
-    FullscreenControl: () => {},
-}))
+jest.mock('maplibre-gl', () => {
+    const actualMapLibreGl = jest.requireActual('maplibre-gl')
+    class MockMap {
+        constructor() {
+            Object.assign(this, mockMapGL)
+        }
+    }
+    return {
+        ...actualMapLibreGl,
+        Map: MockMap,
+    }
+})
 
 jest.mock('../earthengine/ee_worker_loader', () => ({
     __esModule: true,
@@ -22,7 +25,7 @@ describe('DHIS2 Maps-gl Map', () => {
 
         expect(mapgl).not.toBe(undefined)
         expect(mapgl).toEqual(mockMapGL)
-        expect(mapgl.on).toHaveBeenCalledTimes(6)
+        expect(mapgl.on).toHaveBeenCalledTimes(10)
     })
 
     it('should set layer feature hover state', () => {

src/layers/EarthEngine.js

@@ -49,9 +49,9 @@ class EarthEngine extends Layer {
 
                         resolve()
                     })
-                    .catch(() => {
+                    .catch(error => {
                         this._isLoading = false
-                        reject()
+                        reject(error)
                     })
             } else {
                 resolve()
@@ -64,7 +64,7 @@ class EarthEngine extends Layer {
     }
 
     // Returns promise resolving a new worker instance
-    getWorkerInstance = () => {
+    getWorkerInstance() {
         if (!this._workerPromise) {
             this._workerPromise = new Promise((resolve, reject) =>
                 getEarthEngineWorker(this.options.getAuthToken)

src/layers/__tests__/EarthEngine.spec.js

@@ -3,15 +3,6 @@ import EarthEngine from '../EarthEngine'
 const urlFormat =
     'https://earthengine.googleapis.com/v1alpha/projects/earthengine-legacy/maps/.../tiles/{z}/{x}/{y}'
 
-// Mock out EE Worker - import.meta not supported in jest
-jest.mock('../../earthengine/ee_worker_loader', () => ({
-    __esModule: true,
-    default: async () => async () =>
-        new (class EarthEngineWorkerMock {
-            getTileUrl = async () => urlFormat
-        })(),
-}))
-
 const token = {
     access_token: 'abc',
     client_id: '123',
@@ -93,6 +84,28 @@ const options = {
 }
 
 describe('EarthEngine', () => {
+    beforeAll(() => {
+        /* Ideally the default export from 'earthengine/ee_worker_loader'
+         * should have been mocked instead of this, but since that function
+         * returns a proxy from the ComLink library, it was difficult to mock.
+         * If we ever want to add tests for the `getWorkerInstance` method
+         * itself we will have to find a way to mock that `getEarthEngineWorker`
+         * function. */
+        jest.spyOn(
+            EarthEngine.prototype,
+            'getWorkerInstance'
+        ).mockImplementation(async () => {
+            class EarthEngineWorkerMock {
+                getTileUrl = async () => urlFormat
+            }
+            const worker = new EarthEngineWorkerMock()
+            return Promise.resolve(worker)
+        })
+    })
+
+    afterAll(() => {
+        jest.restoreAllMocks()
+    })
     it('Should initialize', () => {
         const layer = new EarthEngine()