chore: add tests for map download

cypress/integration/mapDownload.cy.js

@@ -0,0 +1,100 @@
+import { EXTENDED_TIMEOUT } from '../support/util.js'
+
+const mapWithThematicLayer = {
+    id: 'eDlFx0jTtV9',
+    name: 'ANC: LLITN Cov Chiefdom this year',
+    downloadFileName: 'ANC LLITN Cov Chiefdom this year.png',
+    cardTitle: 'ANC LLITN coverage',
+}
+
+const assertDownloadSettingChecked = (label, isChecked) => {
+    cy.getByDataTest('download-settings')
+        .find('label')
+        .contains(label)
+        .find('input')
+        .should(`${isChecked ? '' : 'not.'}be.checked`)
+}
+
+const clickDownloadSetting = (label) => {
+    cy.getByDataTest('download-settings')
+        .find('label')
+        .contains(label)
+        .find('input')
+        .click()
+}
+
+describe('Map Download', () => {
+    beforeEach(() => {
+        cy.task('emptyDownloadsFolder')
+    })
+
+    it('downloads a map', () => {
+        cy.visit(`/#/${mapWithThematicLayer.id}`, EXTENDED_TIMEOUT)
+        cy.get('canvas', EXTENDED_TIMEOUT).should('be.visible')
+
+        cy.get('[data-test="layercard"]')
+            .find('h2')
+            .contains(mapWithThematicLayer.cardTitle, EXTENDED_TIMEOUT)
+
+        cy.getByDataTest('dhis2-analytics-hovermenubar')
+            .find('button')
+            .contains('Download')
+            .click()
+
+        cy.log('confirm that download page is open')
+        cy.getByDataTest('download-settings').should('be.visible')
+        cy.get('canvas.maplibregl-canvas').should('be.visible')
+        cy.get('button').contains('Exit download mode').should('be.visible')
+        cy.url().should('contain', `/#/${mapWithThematicLayer.id}/download`)
+
+        // check the current settings
+        assertDownloadSettingChecked('Show map name', true)
+
+        cy.getByDataTest('download-map-info')
+            .find('h1')
+            .contains(mapWithThematicLayer.name)
+            .should('be.visible')
+
+        assertDownloadSettingChecked('Show map description', false)
+        assertDownloadSettingChecked('Show legend', true)
+        cy.getByDataTest('download-map-info')
+            .findByDataTest('download-legend-title')
+            .should('have.length', 1)
+
+        assertDownloadSettingChecked('Show overview map', true)
+        cy.getByDataTest('download-map-info')
+            .findByDataTest('overview-map')
+            .should('be.visible')
+
+        // make some changes
+        clickDownloadSetting('Show map name')
+        cy.getByDataTest('download-map-info').find('h1').should('not.exist')
+
+        cy.getByDataTest('download-settings')
+            .find('button')
+            .contains('Download')
+            .click()
+
+        // check for downloaded file
+        cy.wait(3000) // eslint-disable-line cypress/no-unnecessary-waiting
+        cy.waitUntil(
+            () => cy.task('getLastDownloadFilePath').then((result) => result),
+            { timeout: 3000, interval: 100 }
+        ).then((filePath) => {
+            expect(filePath).to.include(mapWithThematicLayer.downloadFileName)
+
+            cy.readFile(filePath, EXTENDED_TIMEOUT).should((buffer) =>
+                expect(buffer.length).to.be.gt(10000)
+            )
+        })
+
+        // leave download mode
+        cy.get('button').contains('Exit download mode').click()
+        cy.url().should('contain', `/#/${mapWithThematicLayer.id}`)
+        cy.url().should('not.contain', '/download')
+        cy.getByDataTest('download-settings').should('not.exist')
+        cy.get('[data-test="layercard"]')
+            .find('h2')
+            .contains(mapWithThematicLayer.cardTitle, EXTENDED_TIMEOUT)
+    })
+})

cypress/integration/smoke.cy.js

@@ -8,7 +8,7 @@ context('Smoke Test', () => {
         cy.title().should('equal', 'Maps | DHIS2')
     })
 
-    it('loads with map id using legacy query param format', () => {
+    it('loads with map id (legacy)', () => {
         cy.intercept({ method: 'POST', url: /dataStatistics/ }).as(
             'postDataStatistics'
         )
@@ -24,7 +24,7 @@ context('Smoke Test', () => {
         Layer.validateCardTitle('ANC 3 Coverage')
     })
 
-    it('loads with map id using hash location', () => {
+    it('loads with map id (hash)', () => {
         cy.visit('/#/zDP78aJU8nX', EXTENDED_TIMEOUT) //ANC: 1st visit coverage (%) by district last year
 
         cy.get('canvas', EXTENDED_TIMEOUT).should('be.visible')
@@ -33,7 +33,7 @@ context('Smoke Test', () => {
         Layer.validateCardTitle('ANC 1 Coverage')
     })
 
-    it('loads currentAnalyticalObject using legacy query param format', () => {
+    it('loads currentAnalyticalObject (legacy)', () => {
         cy.intercept('**/userDataStore/analytics/settings', {
             fixture: 'analyticalObject.json',
         })
@@ -48,6 +48,21 @@ context('Smoke Test', () => {
         cy.get('canvas.maplibregl-canvas').should('be.visible')
     })
 
+    it('loads currentAnalyticalObject (hash)', () => {
+        cy.intercept('**/userDataStore/analytics/settings', {
+            fixture: 'analyticalObject.json',
+        })
+
+        cy.visit('/#/currentAnalyticalObject', EXTENDED_TIMEOUT)
+        cy.get('canvas', EXTENDED_TIMEOUT).should('be.visible')
+
+        cy.contains('button', 'Proceed').click()
+
+        const Layer = new ThematicLayer()
+        Layer.validateCardTitle('ANC 1 Coverage')
+        cy.get('canvas.maplibregl-canvas').should('be.visible')
+    })
+
     it('loads with map id (legacy) and interpretationid lowercase', () => {
         cy.intercept({ method: 'POST', url: /dataStatistics/ }).as(
             'postDataStatistics'
@@ -90,13 +105,12 @@ context('Smoke Test', () => {
             .should('be.visible')
     })
 
-    it('loads with map id (hash) and interpretationid lowercase', () => {
+    it('loads with map id (hash) and interpretationId', () => {
         cy.intercept({ method: 'POST', url: /dataStatistics/ }).as(
             'postDataStatistics'
         )
-
         cy.visit(
-            '/#/ZBjCfSaLSqD?interpretationid=yKqhXZdeJ6a',
+            '/#/ZBjCfSaLSqD?interpretationId=yKqhXZdeJ6a',
             EXTENDED_TIMEOUT
         ) //ANC: LLITN coverage district and facility
 
@@ -112,24 +126,32 @@ context('Smoke Test', () => {
             .should('be.visible')
     })
 
-    it('loads with map id (hash) and interpretationId uppercase', () => {
+    it('loads download page for map id (hash)', () => {
         cy.intercept({ method: 'POST', url: /dataStatistics/ }).as(
             'postDataStatistics'
         )
-        cy.visit(
-            '/#/ZBjCfSaLSqD?interpretationId=yKqhXZdeJ6a',
-            EXTENDED_TIMEOUT
-        ) //ANC: LLITN coverage district and facility
+        cy.visit('/#/ZBjCfSaLSqD/download', EXTENDED_TIMEOUT) //ANC: LLITN coverage district and facility
 
         cy.wait('@postDataStatistics')
             .its('response.statusCode')
             .should('eq', 201)
 
-        cy.getByDataTest('interpretation-modal')
-            .find('h1')
-            .contains(
-                'Viewing interpretation: ANC: LLITN coverage district and facility'
-            )
-            .should('be.visible')
+        cy.getByDataTest('download-settings').should('be.visible')
+        cy.get('canvas.maplibregl-canvas').should('be.visible')
+        cy.get('button').contains('Exit download mode').should('be.visible')
+    })
+
+    it('loads download page currentAnalyticalObject (hash)', () => {
+        cy.intercept('**/userDataStore/analytics/settings', {
+            fixture: 'analyticalObject.json',
+        })
+
+        cy.visit('/#/currentAnalyticalObject/download', EXTENDED_TIMEOUT)
+
+        cy.contains('button', 'Proceed').click()
+
+        cy.getByDataTest('download-settings').should('be.visible')
+        cy.get('canvas.maplibregl-canvas').should('be.visible')
+        cy.get('button').contains('Exit download mode').should('be.visible')
     })
 })

src/AppWrapper.js

@@ -50,6 +50,7 @@ const AppWrapper = () => {
     if (queryParams.id) {
         // /?id=ytkZY3ChM6J
         // /?id=ZBjCfSaLSqD&interpretationid=yKqhXZdeJ6a
+        // /?id=ZBjCfSaLSqD&interpretationId=yKqhXZdeJ6a
         let newPath = queryParams.id
 
         let interpretationId

src/components/app/App.js

@@ -17,21 +17,6 @@ import './App.css'
 import styles from './styles/App.module.css'
 import { useLoadMap } from './useLoadMap.js'
 
-// const getUrlParameter = (location, name) => {
-//     const parsed = queryString.parse(location.search, { parseBooleans: true })
-//     return parsed[name]
-// }
-
-// const getMapId = (hashLocation) => {
-//     const pathParts = hashLocation.pathname.slice(1).split('/')
-//     if (pathParts[0]) {
-//         return pathParts[0]
-//     }
-
-//     // support /?id=ytkZY3ChM6J for backwards compatibility
-//     return getUrlParameter(hashLocation, 'id')
-// }
-
 const App = () => {
     useLoadMap()
     const [interpretationsRenderCount, setInterpretationsRenderCount] =

src/components/app/useLoadMap.js

@@ -51,9 +51,7 @@ const getUrlParams = (hashLocation) => {
         }
 
         if (params.mapId) {
-            params.interpretationId =
-                hashQueryParams.interpretationId ||
-                hashQueryParams.interpretationid
+            params.interpretationId = hashQueryParams.interpretationId
 
             params.initialFocus = hashQueryParams.initialFocus
         }
@@ -107,13 +105,11 @@ export const useLoadMap = () => {
                         basemaps.find((bm) => bm.id === map.basemap.id) ||
                         getFallbackBasemap()
 
-                    const basemap = { ...map.basemap, ...basemapConfig }
-
                     dispatch(
                         setMap({
                             ...map,
                             mapViews: addOrgUnitPaths(map.mapViews),
-                            basemap,
+                            basemap: { ...map.basemap, ...basemapConfig },
                         })
                     )
                 } catch (e) {
@@ -141,11 +137,20 @@ export const useLoadMap = () => {
                 }
             } else if (isCurrentAO) {
                 try {
-                    return hasSingleDataDimension(currentAO)
+                    hasSingleDataDimension(currentAO)
                         ? getThematicLayerFromAnalyticalObject(currentAO).then(
                               (layer) => dispatch(addLayer(layer))
                           )
                         : dispatch(setAnalyticalObject(currentAO))
+
+                    if (isDownload) {
+                        dispatch(
+                            setDownloadMode({
+                                downloadMode: true,
+                                isPushAnalytics: false,
+                            })
+                        )
+                    }
                 } catch (e) {
                     log.error('Could not load current analytical object')
                     return e

src/components/download/DownloadLegend.js

@@ -10,7 +10,7 @@ const DownloadLegend = ({ layers }) =>
         .reverse()
         .map((legend, index) => (
             <div key={index} className={styles.legend}>
-                <h2 className={styles.title}>
+                <h2 className={styles.title} data-test="download-legend-title">
                     {legend.title}
                     <span className={styles.period}>{legend.period}</span>
                 </h2>

src/components/download/DownloadMapInfo.js

@@ -26,7 +26,10 @@ const DownloadMapInfo = ({ map, isSplitView }) => {
     }, [showName, showDescription, showInLegend, height])
 
     return (
-        <div className={cx(styles.downloadMapInfo)}>
+        <div
+            className={cx(styles.downloadMapInfo)}
+            data-test="download-map-info"
+        >
             <div>
                 {showName && name && <h1>{name}</h1>}
                 {showDescription && description && <p>{description}</p>}

src/components/download/DownloadSettings.js

@@ -77,7 +77,10 @@ const DownloadSettings = () => {
     const showMarginsCheckbox = false // Not in use
 
     return (
-        <div className={styles.downloadSettingsPanel}>
+        <div
+            className={styles.downloadSettingsPanel}
+            data-test="download-settings"
+        >
             <Drawer position="left">
                 <div className={styles.downloadSettings}>
                     <h2>{i18n.t('Download map')}</h2>
@@ -86,6 +89,7 @@ const DownloadSettings = () => {
                             <>
                                 <Checkbox
                                     label={i18n.t('Show map name')}
+                                    dataTest="input-show-map-name"
                                     checked={showName}
                                     disabled={!name}
                                     onChange={(value) =>

src/components/download/OverviewMap.js

@@ -120,7 +120,11 @@ const OverviewMap = ({ mainMap, isSplitView, resizeCount }) => {
     }, [overviewMap, mapContainer, resizeCount, dispatch])
 
     return (
-        <div ref={mapContainer} className={styles.overviewMap}>
+        <div
+            ref={mapContainer}
+            className={styles.overviewMap}
+            data-test="overview-map"
+        >
             {overviewMap && (
                 <OverviewMapOutline
                     mainMap={mainMap}