chore: fix broken tests for layer actions

.github/workflows/node.js.yml

@@ -7,7 +7,7 @@ on:
   push:
     branches: [main]
     tags:
-      - "*"
+      - '*'
   pull_request:
     branches: [main]
 
@@ -17,7 +17,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -26,7 +26,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
-          cache: "npm"
+          cache: 'npm'
       - name: Install dependencies
         run: npm ci
       - name: Test

src/components/MapComponent.vue

@@ -206,7 +206,6 @@ export default {
             if (!layerSelected) {
               return
             }
-            console.log(layer.id)
           }
           const mapboxLayer = {}
           Object.entries(layer.properties).forEach(([id, prop]) => {

src/lib/mapbox/styling/index.js

@@ -1,8 +1,5 @@
 export function decorateLayerStyling(layerData) {
-  if (
-    layerData.properties['deltares:source-layer'] &&
-    layerData.properties['deltares:type'] === 'circle'
-  ) {
+  if (layerData.properties['deltares:source-layer']) {
     const style = process.env.VUE_APP_MAPBOX_LAYERS_STYLE || ''
     const token = process.env.VUE_APP_MAPBOX_TOKEN || ''
     const target = layerData.properties['deltares:source-layer'] || ''
@@ -23,7 +20,7 @@
           return layerData
         })
         .catch(e => {
           console.error(e)
 
           return layerData
         })

src/store/map/index.js

@@ -239,27 +239,33 @@
     }
   },
 
-  loadLayerCollection(
+  async loadLayerCollection(
     { commit },
     { collectionUrl, setCollectionCommit, addLayerCommit, datasetId }
   ) {
-    // Retrieve a layer collection and it's underlaying collection
-    getCatalog(collectionUrl).then(dataset => {
-      dataset.layers = []
+    // Retrieve a layer collection and it's underlaying collectiongit
+    await getCatalog(collectionUrl).then(async dataset => {
       const itemLinks = _.get(dataset, 'links')
       const items = itemLinks.filter(child => child.rel === 'item')
       const layers = []
-      items.forEach((item, index) => {
-        getCatalog(item.href)
-          .then(decorateLayerStyling)
-          .then(layerData => {
-            layers.push(layerData)
-            if (index === items.length - 1) {
-              dataset.layers = layers
-              commit(setCollectionCommit, { id: datasetId, data: dataset })
-            }
-          })
-      })
+
+      await Promise.all(
+        items.map(async item =>
+          getCatalog(item.href)
+            .then(decorateLayerStyling)
+            .then(layerData => {
+              layers.push(layerData)
+            })
+        )
+      )
+
+      if (layers.length > 0) {
+        dataset.layers = layers
+        commit(setCollectionCommit, {
+          id: datasetId,
+          data: dataset
+        })
+      }
     })
   },
 
@@ -466,7 +472,7 @@
                   res.events.map(event => moment(event.timeStamp).format())
                 )
               })
               console.log({
                 id: datasetId,
                 data: {
                   [locationId]: {

tests/unit/store/map/index/actions.spec.js

@@ -2,6 +2,11 @@ import { actions } from '@/store/map/index.js'
 import getCatalog from '@/lib/request/get-catalog'
 
 jest.mock('@/lib/request/get-catalog')
+jest.mock('@/lib/mapbox/styling/index.js', () => ({
+  decorateLayerStyling: jest
+    .fn()
+    .mockImplementation(input => Promise.resolve(input))
+}))
 
 describe('loadDatasets', () => {
   test('fetches datasets and stores them', async () => {
@@ -218,12 +223,16 @@ describe('loadLayerCollection', () => {
     getCatalog.mockResolvedValueOnce(apiResult)
     getCatalog.mockResolvedValue('bar')
 
-    const childs = await actions.loadLayerCollection(
+    // Call the async function and await its resolution
+    await actions.loadLayerCollection(
       { commit },
       { collectionUrl: 'url', setCollectionCommit: 'foo', datasetId: 'par1' }
     )
-    await childs
+
+    // Modify apiResult after the async operation is done
     apiResult.layers = ['bar', 'bar']
+
+    // Expect commit to be called with the modified data
     expect(commit.mock.calls[0]).toEqual([
       'foo',
       { id: 'par1', data: apiResult }