chore: add data table cypress test and enable orgunitinfo test

cypress/integration/dataTable.cy.js

@@ -0,0 +1,47 @@
+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',
+}
+
+describe('data table', () => {
+    it('opens data table', () => {
+        cy.visit(`/#/${map.id}`, EXTENDED_TIMEOUT)
+        cy.get('canvas', EXTENDED_TIMEOUT).should('be.visible')
+
+        cy.getByDataTest('moremenubutton').first().click()
+
+        cy.getByDataTest('more-menu')
+            .find('li')
+            .not('.disabled')
+            .should('have.length', 6)
+
+        cy.getByDataTest('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')
+
+        // check that the filter worked
+        cy.getByDataTest('bottom-panel')
+            .find('.ReactVirtualized__Table__row')
+            .should('have.length', 1)
+    })
+})

cypress/integration/mapDownload.cy.js

@@ -70,6 +70,18 @@ describe('Map Download', () => {
         clickDownloadSetting('Show map name')
         cy.getByDataTest('download-map-info').find('h1').should('not.exist')
 
+        clickDownloadSetting('Show north arrow')
+        cy.getByDataTest('north-arrow').should('not.exist')
+
+        clickDownloadSetting('Show overview map')
+        cy.getByDataTest('download-map-info')
+            .findByDataTest('overview-map')
+            .should('not.exist')
+
+        clickDownloadSetting('Show legend')
+        cy.getByDataTest('download-map-info').should('not.exist')
+
+        // and download the map
         cy.getByDataTest('download-settings')
             .find('button')
             .contains('Download')

cypress/integration/orgUnitInfo.cy.js

@@ -1,23 +1,25 @@
-// import { ThematicLayer } from '../elements/thematic_layer.js'
-import { EXTENDED_TIMEOUT } from '../support/util.js'
+import { CURRENT_YEAR, EXTENDED_TIMEOUT } from '../support/util.js'
 
-context('OrgUnitInfo', () => {
-    it.skip('opens the panel for an OrgUnit', () => {
-        cy.visit('/?id=ZBjCfSaLSqD', EXTENDED_TIMEOUT)
-        cy.wait(5000) // eslint-disable-line cypress/no-unnecessary-waiting
+describe('OrgUnitInfo', () => {
+    it('opens the panel for an OrgUnit', () => {
+        cy.visit('/#/ZBjCfSaLSqD', EXTENDED_TIMEOUT)
         cy.get('canvas').should('be.visible')
+
         cy.wait(5000) // eslint-disable-line cypress/no-unnecessary-waiting
-        cy.getByDataTest('dhis2-map-container')
+        cy.get('#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(350, 350) //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 - find a way to ensure that "Bombali" is the orgunit that was clicked on
+        // // cy.getByDataTest('org-unit-info').find('h3').contains('Bombali')
 
         cy.getByDataTest('org-unit-data')
             .findByDataTest('button-previous-year')
@@ -27,7 +29,7 @@ context('OrgUnitInfo', () => {
             .findByDataTest('dhis2-uicore-circularloader')
             .should('not.exist')
 
-        cy.getByDataTest('year-select').contains('2022')
+        cy.getByDataTest('year-select').contains(CURRENT_YEAR - 1)
 
         cy.getByDataTest('org-unit-data-table').contains('Expected pregnancies')
     })

cypress/integration/routes.cy.js

@@ -82,6 +82,16 @@ context('Routes', () => {
                 '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 (legacy) and interpretationId uppercase', () => {

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}
@@ -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/NorthArrow.js

@@ -34,6 +34,7 @@ const NorthArrow = ({
             className={cx(styles.northArrow, styles[position], {
                 [styles.downloadMapInfoOpen]: downloadMapInfoOpen,
             })}
+            data-test="north-arrow"
         >
             <svg
                 width={width}