chore: add cypress tests for dataTable and map download

cypress/integration/dataTable.cy.js

@@ -0,0 +1,62 @@
+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 openMoreMenuWithOptions = (numOptions) => {
+//     cy.get('[data-test="moremenubutton"]').first().click()
+
+//     cy.get('[data-test="more-menu"]')
+//         .find('li')
+//         .not('.disabled')
+//         .should('have.length', numOptions)
+
+//     cy.get('[data-test="more-menu"]')
+//         .find('li')
+//         .contains('Show data table')
+//         .click()
+
+//     //check that the bottom panel is present
+//     cy.getByDataTest('bottom-panel').should('be.visible')
+
+//     // option switched to "Hide data table"
+
+// }
+
+describe('data table', () => {
+    it('opens data table', () => {
+        cy.visit(`/?id=${map.id}`, EXTENDED_TIMEOUT)
+        cy.get('canvas', EXTENDED_TIMEOUT).should('be.visible')
+
+        cy.get('[data-test="moremenubutton"]').first().click()
+
+        cy.get('[data-test="more-menu"]')
+            .find('li')
+            .not('.disabled')
+            .should('have.length', 6)
+
+        cy.get('[data-test="more-menu"]')
+            .find('li')
+            .contains('Show data table')
+            .click()
+
+        //check that the bottom panel is present
+        cy.getByDataTest('bottom-panel').should('be.visible')
+
+        // check number of columns
+        cy.getByDataTest('bottom-panel')
+            .find('[role="columnheader"]')
+            .should('have.length', 10)
+
+        // try the filtering
+        cy.getByDataTest('bottom-panel')
+            .find('[role="columnheader"]')
+            .containsExact('Name')
+            .siblings('input')
+            .type('Kakua')
+    })
+})

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)
+            )
+        })
+    })
+})

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')

cypress/integration/smoke.cy.js

@@ -58,6 +58,16 @@ context('Smoke Test', () => {
                 'Viewing interpretation: ANC: LLITN coverage district and facility'
             )
             .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')
     })
 
     it('loads with map id and interpretationId uppercase', () => {

src/components/app/AppMenu.js

@@ -7,7 +7,7 @@ import AddLayerButton from '../layers/overlays/AddLayerButton.js'
 import FileMenu from './FileMenu.js'
 
 const AppMenu = ({ onFileMenuAction }) => (
-    <Toolbar>
+    <Toolbar dataTest="app-menu">
         <AddLayerButton />
         <HoverMenuBar>
             <FileMenu onFileMenuAction={onFileMenuAction} />

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,

src/components/datatable/BottomPanel.js

@@ -40,6 +40,7 @@ const BottomPanel = () => {
             ref={panelRef}
             className={styles.bottomPanel}
             style={{ height: tableHeight }}
+            data-test="bottom-panel"
         >
             <span
                 className={styles.closeIcon}

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>

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

@@ -76,7 +76,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>
@@ -115,6 +118,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')}

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}

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}

src/components/layers/LayersPanel.js

@@ -32,6 +32,7 @@ const LayersPanel = () => {
             className={cx(styles.layersPanel, {
                 [styles.collapsed]: !layersPanelOpen,
             })}
+            data-test="layers-panel"
         >
             <div className={styles.layersPanelInner}>
                 {layersPanelOpen ? (