chore: add cypress tests for map download

dhis2 · Aug 30, 2023 · 87f4df3 · 87f4df3
1 parent 20adb8e
commit 87f4df3
Show file tree

Hide file tree

Showing 13 changed files with 180 additions and 18 deletions.
diff --git a/cypress/integration/interpretations.cy.js b/cypress/integration/interpretations.cy.js
@@ -1,7 +1,7 @@
 import { ThematicLayer } from '../elements/thematic_layer.js'
 import { EXTENDED_TIMEOUT } from '../support/util.js'
 
-context('Interpretations', () => {
+describe('Interpretations', () => {
     it('opens the interpretations panel for a map', () => {
         cy.visit('/?id=ZBjCfSaLSqD', EXTENDED_TIMEOUT)
         const Layer = new ThematicLayer()

diff --git a/cypress/integration/layers/thematiclayer.cy.js b/cypress/integration/layers/thematiclayer.cy.js
@@ -37,8 +37,6 @@ context('Thematic Layers', () => {
 
         Layer.validateDialogClosed(true)
 
-        // TODO: use visual snapshot testing to check the rendering of the map
-
         Layer.validateCardTitle(INDICATOR_NAME)
         // TODO: test this in a way that is not dependent on the date
         // Layer.validateCardItems([
@@ -63,8 +61,6 @@ context('Thematic Layers', () => {
 
         Layer.validateDialogClosed(true)
 
-        // TODO: use visual snapshot testing to check the rendering of the map
-
         Layer.validateCardTitle(INDICATOR_NAME)
         // TODO: test this in a way that is not dependent on the date
         // Layer.validateCardItems([

diff --git a/cypress/integration/mapDownload.cy.js b/cypress/integration/mapDownload.cy.js
@@ -0,0 +1,131 @@
+import { EXTENDED_TIMEOUT } from '../support/util.js'
+
+const map = {
+    id: 'eDlFx0jTtV9',
+    name: 'ANC: LLITN Cov Chiefdom this year',
+    downloadFileNamePrefix: 'ANC LLITN Cov Chiefdom this year',
+    cardTitle: 'ANC LLITN coverage',
+}
+
+const openDowloadPage = () => {
+    cy.visit(`/?id=${map.id}`, EXTENDED_TIMEOUT)
+    cy.get('canvas', EXTENDED_TIMEOUT).should('be.visible')
+
+    cy.get('header').should('be.visible')
+    cy.getByDataTest('layers-panel').should('be.visible')
+
+    cy.get('[data-test="layercard"]')
+        .find('h2')
+        .contains(map.cardTitle, EXTENDED_TIMEOUT)
+
+    cy.getByDataTest('app-menu').find('button').contains('Download').click()
+
+    cy.get('header').should('not.be.visible')
+    cy.getByDataTest('layers-panel').should('not.exist')
+}
+
+describe('Map Download', () => {
+    beforeEach(() => {
+        cy.task('emptyDownloadsFolder')
+    })
+
+    it('download options are shown correctly', () => {
+        openDowloadPage()
+
+        // verify the state of the checkboxes
+        cy.get('label').contains('Show map name').should('be.visible')
+        cy.get('label')
+            .contains('Show map name')
+            .find('input')
+            .should('be.checked')
+        cy.get('label.disabled')
+            .contains('Show map description')
+            .should('be.visible')
+        cy.get('label')
+            .contains('Show map description')
+            .find('input')
+            .should('be.disabled')
+            .should('not.be.checked')
+        cy.getByDataTest('download-setting-show-description')
+            .findByDataTest('checkbox-tooltip-reference')
+            .should('be.visible')
+        cy.get('label').contains('Show legend').should('be.visible')
+        cy.get('label')
+            .contains('Show legend')
+            .find('input')
+            .should('be.checked')
+        cy.get('label').contains('Show overview map').should('be.visible')
+        cy.get('label')
+            .contains('Show overview map')
+            .find('input')
+            .should('be.checked')
+        cy.get('label').contains('Show north arrow').should('be.visible')
+        cy.get('label')
+            .contains('Show north arrow')
+            .find('input')
+            .should('be.checked')
+
+        // verify all the settings are in useEffect
+        cy.getByDataTest('download-map-info').should('be.visible')
+        cy.getByDataTest('download-map-info').find('h1').contains(map.name)
+        cy.getByDataTest('download-map-info')
+            .findByDataTest('map-legend')
+            .should('be.visible')
+
+        cy.getByDataTest('download-map-info')
+            .findByDataTest('overview-map')
+            .should('be.visible')
+
+        cy.getByDataTest('north-arrow').should('be.visible')
+
+        // change options and confirm
+
+        cy.get('label').contains('Show north arrow').find('input').uncheck()
+        cy.getByDataTest('north-arrow').should('not.exist')
+
+        cy.get('label').contains('Show map name').find('input').uncheck()
+        cy.getByDataTest('download-map-info')
+            .contains(map.name)
+            .should('not.exist')
+
+        cy.get('label').contains('Show overview map').find('input').uncheck()
+        cy.getByDataTest('download-map-info')
+            .findByDataTest('overview-map')
+            .should('not.exist')
+
+        cy.get('label').contains('Show legend').find('input').uncheck()
+        cy.getByDataTest('download-map-info').should('not.exist')
+
+        cy.contains('Exit download mode').click()
+
+        cy.get('header').should('be.visible')
+        cy.getByDataTest('layers-panel').should('be.visible')
+
+        cy.get('[data-test="layercard"]')
+            .find('h2')
+            .contains(map.cardTitle, EXTENDED_TIMEOUT)
+    })
+
+    it('downloads a map', () => {
+        openDowloadPage()
+
+        cy.getByDataTest('download-settings')
+            .find('button')
+            .contains('Download')
+            .click()
+
+        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('png')
+            expect(filePath).to.include(map.downloadFileNamePrefix)
+
+            cy.readFile(filePath, EXTENDED_TIMEOUT).should((buffer) =>
+                expect(buffer.length).to.be.gt(10000)
+            )
+        })
+    })
+})
diff --git a/cypress/integration/orgUnitInfo.cy.js b/cypress/integration/orgUnitInfo.cy.js
@@ -1,23 +1,26 @@
 // import { ThematicLayer } from '../elements/thematic_layer.js'
 import { EXTENDED_TIMEOUT } from '../support/util.js'
 
-context('OrgUnitInfo', () => {
-    it.skip('opens the panel for an OrgUnit', () => {
+describe('OrgUnitInfo', () => {
+    it('opens the panel for an OrgUnit', () => {
         cy.visit('/?id=ZBjCfSaLSqD', EXTENDED_TIMEOUT)
         cy.wait(5000) // eslint-disable-line cypress/no-unnecessary-waiting
         cy.get('canvas').should('be.visible')
         cy.wait(5000) // eslint-disable-line cypress/no-unnecessary-waiting
         cy.getByDataTest('dhis2-map-container')
             .findByDataTest('dhis2-uicore-componentcover', EXTENDED_TIMEOUT)
             .should('not.exist')
-        cy.get('.dhis2-map').click(300, 100) //Bombali
-        cy.contains('View profile').click()
+        cy.get('.dhis2-map').click(300, 100) //Click somewhere on the map
+
+        cy.get('.maplibregl-popup').contains('View profile').click()
 
         // check the Org Unit Profile panel
         cy.getByDataTest('org-unit-profile').contains(
             'Organisation unit profile'
         )
-        cy.getByDataTest('org-unit-info').find('h3').contains('Bombali')
+
+        // TODO - can't be sure it has been clicked on Bombali
+        // cy.getByDataTest('org-unit-info').find('h3').contains('Bombali')
 
         cy.getByDataTest('org-unit-data')
             .findByDataTest('button-previous-year')

diff --git a/cypress/integration/smoke.cy.js b/cypress/integration/smoke.cy.js
@@ -31,4 +31,22 @@ context('Smoke Test', () => {
         Layer.validateCardTitle('ANC 1 Coverage')
         cy.get('canvas.maplibregl-canvas').should('be.visible')
     })
+
+    it('opens a map to the interpretations modal', () => {
+        cy.visit(
+            '/?id=ZBjCfSaLSqD&interpretationid=yKqhXZdeJ6a',
+            EXTENDED_TIMEOUT
+        )
+
+        cy.getByDataTest('interpretation-modal').should('be.visible')
+        cy.getByDataTest('interpretation-modal')
+            .find('canvas')
+            .should('be.visible')
+
+        cy.getByDataTest('interpretation-modal')
+            .contains(
+                'Koinadugu has a very high LLITN coverage despite low density of facilities providing nets.'
+            )
+            .should('be.visible')
+    })
 })
diff --git a/src/components/app/AppMenu.js b/src/components/app/AppMenu.js
@@ -6,7 +6,7 @@ import FileMenu from './FileMenu.js'
 import styles from './styles/AppMenu.module.css'
 
 const AppMenu = () => (
-    <div className={styles.appMenu}>
+    <div className={styles.appMenu} data-test="app-menu">
         <AddLayerButton />
         <FileMenu />
         <DownloadButton />

diff --git a/src/components/core/Checkbox.js b/src/components/core/Checkbox.js
@@ -13,8 +13,9 @@ const Checkbox = ({
     tooltip,
     onChange,
     className,
+    dataTest,
 }) => (
-    <div className={cx(styles.checkbox, className)}>
+    <div className={cx(styles.checkbox, className)} data-test={dataTest}>
         <UiCheckbox
             label={label}
             checked={checked}
@@ -23,7 +24,7 @@ const Checkbox = ({
             onChange={({ checked }) => onChange(checked)}
         />
         {tooltip && (
-            <Tooltip content={tooltip}>
+            <Tooltip content={tooltip} dataTest="checkbox-tooltip">
                 <IconInfo16 />
             </Tooltip>
         )}
@@ -34,6 +35,7 @@ Checkbox.propTypes = {
     onChange: PropTypes.func.isRequired,
     checked: PropTypes.bool,
     className: PropTypes.string,
+    dataTest: PropTypes.string,
     dense: PropTypes.bool,
     disabled: PropTypes.bool,
     label: PropTypes.string,

diff --git a/src/components/download/DownloadLegend.js b/src/components/download/DownloadLegend.js
@@ -9,7 +9,7 @@ const DownloadLegend = ({ layers }) =>
         .map((layer) => layer.legend)
         .reverse()
         .map((legend, index) => (
-            <div key={index} className={styles.legend}>
+            <div key={index} className={styles.legend} data-test="map-legend">
                 <h2 className={styles.title}>
                     {legend.title}
                     <span className={styles.period}>{legend.period}</span>

diff --git a/src/components/download/DownloadMapInfo.js b/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>}

diff --git a/src/components/download/DownloadSettings.js b/src/components/download/DownloadSettings.js
@@ -77,7 +77,10 @@ const DownloadSettings = () => {
 
     return (
         <Drawer position="left">
-            <div className={styles.downloadSettings}>
+            <div
+                className={styles.downloadSettings}
+                data-test="download-settings"
+            >
                 <h2>{i18n.t('Download map')}</h2>
                 <div className={styles.dialogContent}>
                     {isSupported ? (
@@ -112,6 +115,7 @@ const DownloadSettings = () => {
                                               'Set the map description when you save the map or from File > Rename menu'
                                           )
                                 }
+                                dataTest="download-setting-show-description"
                             />
                             <Checkbox
                                 label={i18n.t('Show legend')}

diff --git a/src/components/download/NorthArrow.js b/src/components/download/NorthArrow.js
@@ -34,6 +34,7 @@ const NorthArrow = ({
             className={cx(styles.northArrow, styles[position], {
                 [styles.downloadMapInfoOpen]: downloadMapInfoOpen,
             })}
+            data-test="north-arrow"
         >
             <svg
                 width={width}

diff --git a/src/components/download/OverviewMap.js b/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}

diff --git a/src/components/layers/LayersPanel.js b/src/components/layers/LayersPanel.js
@@ -20,7 +20,7 @@ const SortableLayersList = SortableContainer(({ layers }) => (
 
 const LayersPanel = ({ layersPanelOpen, layers, sortLayers }) =>
     layersPanelOpen && (
-        <Drawer position="left">
+        <Drawer position="left" dataTest="layers-panel">
             <SortableLayersList
                 layers={layers}
                 onSortEnd={sortLayers}