diff --git a/cypress/elements/layer.js b/cypress/elements/layer.js index d87de369a..a02575deb 100644 --- a/cypress/elements/layer.js +++ b/cypress/elements/layer.js @@ -28,6 +28,15 @@ export class Layer { return this } + selectOuLevel(level) { + cy.getByDataTest('org-unit-level-select').click() + + cy.contains(level).click() + cy.get('body').click() // Close the modal menu + + return this + } + typeStartDate(dateString) { cy.get('label') .contains('Start date') diff --git a/cypress/integration/layers/multilayers.cy.js b/cypress/integration/layers/multilayers.cy.js new file mode 100644 index 000000000..572ca1448 --- /dev/null +++ b/cypress/integration/layers/multilayers.cy.js @@ -0,0 +1,59 @@ +import { getMaps } from '../../elements/map_canvas.js' +import { OrgUnitLayer } from '../../elements/orgunit_layer.js' +import { ThematicLayer } from '../../elements/thematic_layer.js' + +const INDICATOR_NAME = 'ANC 1 Coverage' + +describe('Multiple Layers', () => { + beforeEach(() => { + cy.visit('/') + }) + + const TLayer = new ThematicLayer() + const OULayer = new OrgUnitLayer() + + it('adds a thematic layer and an orgunit layer', () => { + TLayer.openDialog('Thematic') + .selectIndicatorGroup('ANC') + .selectIndicator(INDICATOR_NAME) + .selectTab('Period') + .selectPeriodType('Yearly') + .selectTab('Org Units') + .selectOu('Sierra Leone') + .selectOuLevel('District') + .addToMap() + + TLayer.validateDialogClosed(true) + + TLayer.validateCardTitle(INDICATOR_NAME) + + getMaps().should('have.length', 1) + + OULayer.openDialog('Org units') + .selectOu('Sierra Leone') + .selectOuLevel('District') + .addToMap() + + OULayer.validateDialogClosed(true) + + OULayer.validateCardTitle('Organisation units') + OULayer.validateCardItems(['District']) + + cy.getByDataTest('sortable-layers-list') + .children() + .should('have.length', 2) + + // confirm the order of the cards + cy.getByDataTest('sortable-layers-list') + .children() + .first() + .should('contain', 'Organisation units') + + cy.getByDataTest('sortable-layers-list') + .children() + .last() + .should('contain', INDICATOR_NAME) + + // TODO - add a test for drag/drop reordering of the layers + }) +}) diff --git a/cypress/plugins/excludeByVersionTags.js b/cypress/plugins/excludeByVersionTags.js index 7a23dc0ea..159288077 100644 --- a/cypress/plugins/excludeByVersionTags.js +++ b/cypress/plugins/excludeByVersionTags.js @@ -34,7 +34,7 @@ const getExcludedTags = (v) => { if (currentInstanceVersion < MIN_DHIS2_VERSION) { throw new Error( - 'Instance version is lower than the minimum supported version' + `Instance version ${v} is lower than the minimum supported version ${MIN_DHIS2_VERSION}` ) } diff --git a/src/components/layers/LayerCard.js b/src/components/layers/LayerCard.js index 4d3397d97..1d972a5cd 100644 --- a/src/components/layers/LayerCard.js +++ b/src/components/layers/LayerCard.js @@ -21,6 +21,7 @@ const LayerCard = ({ className={cx(styles.card, { [styles.expanded]: isExpanded, })} + data-test={`card-${title.replace(/ /g, '')}`} >
diff --git a/src/components/layers/LayersPanel.js b/src/components/layers/LayersPanel.js index dba967aa1..0e33321e9 100644 --- a/src/components/layers/LayersPanel.js +++ b/src/components/layers/LayersPanel.js @@ -12,7 +12,7 @@ const SortableLayer = SortableElement(OverlayCard) // Draggable layers - last layer on top const SortableLayersList = SortableContainer(({ layers }) => ( -
+
{layers.map((layer, index) => ( ))} @@ -25,7 +25,8 @@ const LayersPanel = () => { const dispatch = useDispatch() - const onSort = () => dispatch(sortLayers()) + const onSort = ({ oldIndex, newIndex }) => + dispatch(sortLayers({ oldIndex, newIndex })) return (