Merge branch 'dev' into fix/load-external-layer

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

@@ -72,16 +72,23 @@ jobs:
 
             - name: Test
               run: yarn d2-app-scripts test
+              env:
+                  REPORTPORTAL_API_KEY: ${{ secrets.REPORTPORTAL_API_KEY }}
+                  REPORTPORTAL_ENDPOINT: ${{ vars.REPORTPORTAL_ENDPOINT }}
+                  REPORTPORTAL_PROJECT: ${{ vars.REPORTPORTAL_PROJECT }}
 
     call-workflow-e2e-prod:
         if: "!contains(github.event.head_commit.message, '[skip ci]')"
         needs: [build, lint, test]
-        uses: dhis2/line-listing-app/.github/workflows/e2e-prod.yml@master
+        uses: dhis2/workflows/.github/workflows/analytics-e2e-tests.yml@master
         secrets:
             baseurl: ${{ secrets.CYPRESS_DHIS2_BASE_URL_DEV }}
             username: ${{ secrets.CYPRESS_DHIS2_USERNAME }}
             password: ${{ secrets.CYPRESS_DHIS2_PASSWORD }}
             recordkey: ${{ secrets.CYPRESS_RECORD_KEY }}
+            reportportal_api_key: ${{ secrets.REPORTPORTAL_API_KEY }}
+            reportportal_endpoint: ${{ vars.REPORTPORTAL_ENDPOINT }}
+            reportportal_project: ${{ vars.REPORTPORTAL_PROJECT }}
 
     release:
         runs-on: ubuntu-latest

cypress.config.js

@@ -23,6 +23,34 @@ async function setupNodeEvents(on, config) {
 
 module.exports = defineConfig({
     projectId: 'r5jduj',
+    reporter: '@reportportal/agent-js-cypress',
+    reporterOptions: {
+        endpoint: process.env.REPORTPORTAL_ENDPOINT,
+        apiKey: process.env.REPORTPORTAL_API_KEY,
+        launch: 'maps_app',
+        project: process.env.REPORTPORTAL_PROJECT,
+        description: '',
+        autoMerge: true,
+        parallel: true,
+        debug: false,
+        restClientConfig: {
+            timeout: 360000,
+        },
+        attributes: [
+            {
+                key: 'version',
+                value: 'master',
+            },
+            {
+                key: 'app_name',
+                value: 'maps_app',
+            },
+            {
+                key: 'test_level',
+                value: 'e2e',
+            },
+        ],
+    },
     e2e: {
         setupNodeEvents,
         baseUrl: 'http://localhost:3000',

cypress/elements/layer.js

@@ -28,6 +28,15 @@ export class Layer {
         return this
     }
 
+    selectOuLevel(level) {
+        cy.getByDataTest('org-unit-level-select').click()
+
+        cy.contains(level).click()
+        cy.get('body').click() // Close the modal menu
+
+        return this
+    }
+
     typeStartDate(dateString) {
         cy.get('label')
             .contains('Start date')

cypress/integration/layers/multilayers.cy.js

@@ -0,0 +1,59 @@
+import { getMaps } from '../../elements/map_canvas.js'
+import { OrgUnitLayer } from '../../elements/orgunit_layer.js'
+import { ThematicLayer } from '../../elements/thematic_layer.js'
+
+const INDICATOR_NAME = 'ANC 1 Coverage'
+
+describe('Multiple Layers', () => {
+    beforeEach(() => {
+        cy.visit('/')
+    })
+
+    const TLayer = new ThematicLayer()
+    const OULayer = new OrgUnitLayer()
+
+    it('adds a thematic layer and an orgunit layer', () => {
+        TLayer.openDialog('Thematic')
+            .selectIndicatorGroup('ANC')
+            .selectIndicator(INDICATOR_NAME)
+            .selectTab('Period')
+            .selectPeriodType('Yearly')
+            .selectTab('Org Units')
+            .selectOu('Sierra Leone')
+            .selectOuLevel('District')
+            .addToMap()
+
+        TLayer.validateDialogClosed(true)
+
+        TLayer.validateCardTitle(INDICATOR_NAME)
+
+        getMaps().should('have.length', 1)
+
+        OULayer.openDialog('Org units')
+            .selectOu('Sierra Leone')
+            .selectOuLevel('District')
+            .addToMap()
+
+        OULayer.validateDialogClosed(true)
+
+        OULayer.validateCardTitle('Organisation units')
+        OULayer.validateCardItems(['District'])
+
+        cy.getByDataTest('sortable-layers-list')
+            .children()
+            .should('have.length', 2)
+
+        // confirm the order of the cards
+        cy.getByDataTest('sortable-layers-list')
+            .children()
+            .first()
+            .should('contain', 'Organisation units')
+
+        cy.getByDataTest('sortable-layers-list')
+            .children()
+            .last()
+            .should('contain', INDICATOR_NAME)
+
+        // TODO - add a test for drag/drop reordering of the layers
+    })
+})

cypress/integration/layers/thematiclayer.cy.js

@@ -108,6 +108,8 @@ context('Thematic Layers', () => {
         Layer.openDialog('Thematic')
             .selectIndicatorGroup('ANC')
             .selectIndicator('ANC 1 Coverage')
+            .selectTab('Org Units')
+            .selectOu('Sierra Leone')
             .selectTab('Period')
 
         cy.getByDataTest('relative-period-select-content').click()

cypress/plugins/excludeByVersionTags.js

@@ -34,7 +34,7 @@ const getExcludedTags = (v) => {
 
     if (currentInstanceVersion < MIN_DHIS2_VERSION) {
         throw new Error(
-            'Instance version is lower than the minimum supported version'
+            `Instance version ${v} is lower than the minimum supported version ${MIN_DHIS2_VERSION}`
         )
     }
 

jest.config.js

@@ -10,4 +10,34 @@ module.exports = {
     },
     testURL: 'http://localhost/',
     snapshotSerializers: ['enzyme-to-json/serializer'],
+
+    testRunner: 'jest-circus/runner',
+    reporters: [
+        'default',
+        [
+            '@reportportal/agent-js-jest',
+            {
+                apiKey: process.env.REPORTPORTAL_API_KEY,
+                endpoint: process.env.REPORTPORTAL_ENDPOINT,
+                project: process.env.REPORTPORTAL_PROJECT,
+                launch: 'maps_app',
+                attributes: [
+                    {
+                        key: 'version',
+                        value: 'master',
+                    },
+                    {
+                        key: 'app_name',
+                        value: 'maps_app',
+                    },
+                    {
+                        key: 'test_level',
+                        value: 'unit/integration',
+                    },
+                ],
+                description: '',
+                debug: true,
+            },
+        ],
+    ],
 }

package.json

@@ -48,6 +48,8 @@
         "@dhis2/maps-gl": "^3.8.5",
         "@dhis2/ui": "^8.13.15",
         "@krakenjs/post-robot": "^11.0.0",
+        "@reportportal/agent-js-cypress": "^5.1.4",
+        "@reportportal/agent-js-jest": "^5.0.6",
         "abortcontroller-polyfill": "^1.7.5",
         "array-move": "^4.0.0",
         "classnames": "^2.3.2",

src/components/layers/LayerCard.js

@@ -21,6 +21,7 @@ const LayerCard = ({
         className={cx(styles.card, {
             [styles.expanded]: isExpanded,
         })}
+        data-test={`card-${title.replace(/ /g, '')}`}
     >
         <Card dataTest={isOverlay ? 'layercard' : 'basemapcard'}>
             <div className={styles.cardHeader}>

src/components/layers/LayersPanel.js

@@ -12,7 +12,7 @@ const SortableLayer = SortableElement(OverlayCard)
 
 // Draggable layers - last layer on top
 const SortableLayersList = SortableContainer(({ layers }) => (
-    <div>
+    <div data-test="sortable-layers-list">
         {layers.map((layer, index) => (
             <SortableLayer key={layer.id} index={index} layer={layer} />
         ))}
@@ -25,7 +25,8 @@ const LayersPanel = () => {
 
     const dispatch = useDispatch()
 
-    const onSort = () => dispatch(sortLayers())
+    const onSort = ({ oldIndex, newIndex }) =>
+        dispatch(sortLayers({ oldIndex, newIndex }))
 
     return (
         <div

src/components/plugin/MapContainer.js

@@ -17,7 +17,7 @@ const MapContainer = ({ visualization }) => {
 
     useEffect(() => {
         const {
-            basemap: basemapId,
+            basemap: visBasemap,
             mapViews,
             userOrgUnit,
             id,
@@ -37,13 +37,13 @@ const MapContainer = ({ visualization }) => {
                 )
             } else {
                 initialConfig = getMigratedMapConfig(
-                    { basemapId, mapViews },
+                    { basemap: visBasemap, mapViews },
                     keyDefaultBaseMap
                 )
             }
 
             const { basemap } = await getBasemapConfig({
-                basemapId,
+                basemapId: initialConfig.basemap?.id,
                 keyDefaultBaseMap,
                 keyBingMapsApiKey,
                 engine,

src/components/plugin/getBasemapConfig.js

@@ -10,10 +10,10 @@ async function getBasemaps(basemapId, defaultBasemapId, engine) {
     try {
         let externalBasemaps = []
         if (isValidUid(basemapId) || isValidUid(defaultBasemapId)) {
-            const externalLayers = await engine.query({
+            const { externalLayers } = await engine.query({
                 externalLayers: fetchExternalLayersQuery,
             })
-            externalBasemaps = externalLayers
+            externalBasemaps = externalLayers.externalMapLayers
                 .filter((layer) => layer.mapLayerPosition === 'BASEMAP')
                 .map(createExternalLayer)
         }