From 5fc879cefb22f00df1a043b243ac7d108b37d119 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Wed, 30 Aug 2023 11:41:30 +0200 Subject: [PATCH 1/3] chore: add cypress tests for map download --- cypress/integration/mapDownload.cy.js | 131 ++++++++++++++++++++ cypress/integration/orgUnitInfo.cy.js | 13 +- cypress/integration/smoke.cy.js | 11 +- src/components/app/AppMenu.js | 2 +- src/components/core/Checkbox.js | 6 +- src/components/download/DownloadLegend.js | 2 +- src/components/download/DownloadMapInfo.js | 5 +- src/components/download/DownloadSettings.js | 6 +- src/components/download/NorthArrow.js | 1 + src/components/download/OverviewMap.js | 6 +- src/components/layers/LayersPanel.js | 1 + 11 files changed, 171 insertions(+), 13 deletions(-) create mode 100644 cypress/integration/mapDownload.cy.js diff --git a/cypress/integration/mapDownload.cy.js b/cypress/integration/mapDownload.cy.js new file mode 100644 index 000000000..93d0ae5fd --- /dev/null +++ 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 index 2c69f29e1..79c16f330 100644 --- a/cypress/integration/orgUnitInfo.cy.js +++ b/cypress/integration/orgUnitInfo.cy.js @@ -1,8 +1,8 @@ // 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') @@ -10,14 +10,17 @@ context('OrgUnitInfo', () => { 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 index be0d0f82d..ae78ccd27 100644 --- a/cypress/integration/smoke.cy.js +++ b/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', () => { @@ -78,6 +88,5 @@ context('Smoke Test', () => { .contains( 'Viewing interpretation: ANC: LLITN coverage district and facility' ) - .should('be.visible') }) }) diff --git a/src/components/app/AppMenu.js b/src/components/app/AppMenu.js index 51eac1306..d3e7471e6 100644 --- a/src/components/app/AppMenu.js +++ b/src/components/app/AppMenu.js @@ -7,7 +7,7 @@ import AddLayerButton from '../layers/overlays/AddLayerButton.js' import FileMenu from './FileMenu.js' const AppMenu = ({ onFileMenuAction }) => ( - + diff --git a/src/components/core/Checkbox.js b/src/components/core/Checkbox.js index e32ea0bfe..f8db6f6da 100644 --- a/src/components/core/Checkbox.js +++ b/src/components/core/Checkbox.js @@ -13,8 +13,9 @@ const Checkbox = ({ tooltip, onChange, className, + dataTest, }) => ( -
+
onChange(checked)} /> {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 index c1b775b20..8ad9abdf0 100644 --- 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) => ( -
+

{legend.title} {legend.period} diff --git a/src/components/download/DownloadMapInfo.js b/src/components/download/DownloadMapInfo.js index aa68f223e..10d4d9662 100644 --- 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 ( -
+
{showName && name &&

{name}

} {showDescription && description &&

{description}

} diff --git a/src/components/download/DownloadSettings.js b/src/components/download/DownloadSettings.js index 533752a47..e6baccb22 100644 --- a/src/components/download/DownloadSettings.js +++ b/src/components/download/DownloadSettings.js @@ -76,7 +76,10 @@ const DownloadSettings = () => { const showMarginsCheckbox = false // Not in use return ( -
+

{i18n.t('Download map')}

@@ -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" /> { }, [overviewMap, mapContainer, resizeCount, dispatch]) return ( -
+
{overviewMap && ( { className={cx(styles.layersPanel, { [styles.collapsed]: !layersPanelOpen, })} + data-test="layers-panel" >
{layersPanelOpen ? ( From b285ea3435cca22bfe1955f2b8bbd6b3225cb044 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Wed, 30 Aug 2023 12:56:57 +0200 Subject: [PATCH 2/3] chore: tests for data-table --- cypress/integration/dataTable.cy.js | 62 +++++++++++++++++++++++++ src/components/datatable/BottomPanel.js | 1 + 2 files changed, 63 insertions(+) create mode 100644 cypress/integration/dataTable.cy.js diff --git a/cypress/integration/dataTable.cy.js b/cypress/integration/dataTable.cy.js new file mode 100644 index 000000000..1657306cb --- /dev/null +++ b/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') + }) +}) diff --git a/src/components/datatable/BottomPanel.js b/src/components/datatable/BottomPanel.js index 24f005bf0..62160bcbf 100644 --- a/src/components/datatable/BottomPanel.js +++ b/src/components/datatable/BottomPanel.js @@ -40,6 +40,7 @@ const BottomPanel = () => { ref={panelRef} className={styles.bottomPanel} style={{ height: tableHeight }} + data-test="bottom-panel" > Date: Thu, 5 Oct 2023 14:04:06 +0200 Subject: [PATCH 3/3] chore: rebase fail --- cypress/integration/smoke.cy.js | 1 + 1 file changed, 1 insertion(+) diff --git a/cypress/integration/smoke.cy.js b/cypress/integration/smoke.cy.js index ae78ccd27..ea8091ca9 100644 --- a/cypress/integration/smoke.cy.js +++ b/cypress/integration/smoke.cy.js @@ -88,5 +88,6 @@ context('Smoke Test', () => { .contains( 'Viewing interpretation: ANC: LLITN coverage district and facility' ) + .should('be.visible') }) })