feat: period selector for events layer

cypress/elements/event_layer.js

@@ -43,17 +43,6 @@ export class EventLayer extends Layer {
         return this
     }
 
-    selectPeriodType({ periodType } = {}) {
-        if (!periodType) {
-            throw new Error("The 'periodType' parameter is required.")
-        }
-
-        cy.getByDataTest('relative-period-select-content').click()
-        cy.contains(periodType).click()
-
-        return this
-    }
-
     selectViewAllEvents() {
         // Group events by default or View all events
         cy.get('[src="images/nocluster.png"]').click()

cypress/elements/layer.js

@@ -169,4 +169,90 @@ export class Layer {
 
         return this
     }
+
+    selectPresets() {
+        cy.contains('Choose from presets').click()
+
+        return this
+    }
+
+    selectStartEndDates() {
+        cy.contains('Define start - end dates').click()
+
+        return this
+    }
+
+    selectRelativePeriod(period) {
+        cy.get('[data-test="relative-period-select"]').click()
+        cy.contains(period).click()
+
+        return this
+    }
+
+    removeAllPeriods() {
+        cy.getByDataTest('period-dimension-transfer-actions-removeall').click()
+
+        return this
+    }
+
+    selectPeriodType({
+        periodType,
+        periodDimension = 'fixed',
+        n = 'last',
+        y = '',
+        removeAll = true,
+    } = {}) {
+        if (!periodType) {
+            throw new Error("The 'periodType' parameter is required.")
+        }
+
+        // Select fixed / relative periods
+        cy.getByDataTest(
+            `period-dimension-${periodDimension}-periods-button`
+        ).click()
+        // Open dropdown for period type
+        cy.getByDataTest(
+            `period-dimension-${periodDimension}-period-filter${
+                periodDimension === 'fixed' ? '-period-type' : ''
+            }`
+        ).click()
+        // Select period type in dropdown if not active already
+        cy.get(`[data-value="${periodType}"]`).then(($el) => {
+            if ($el.hasClass('active')) {
+                cy.get('body').click('topLeft')
+            } else {
+                cy.wrap($el).click()
+            }
+        })
+
+        if (removeAll) {
+            cy.getByDataTest(
+                'period-dimension-transfer-actions-removeall'
+            ).click()
+        }
+
+        if (y !== '') {
+            cy.getByDataTest(
+                'period-dimension-fixed-period-filter-year-content'
+            )
+                .get('input[type="number"]')
+                .clear()
+            cy.getByDataTest(
+                'period-dimension-fixed-period-filter-year-content'
+            )
+                .get('input[type="number"]')
+                .type(y)
+        }
+        if (n === 'last') {
+            cy.getByDataTest('period-dimension-transfer-option-content')
+                .last()
+                .dblclick()
+        } else {
+            cy.getByDataTest('period-dimension-transfer-option-content')
+                .eq(n)
+                .dblclick()
+        }
+
+        return this
+    }
 }

cypress/elements/thematic_layer.js

@@ -53,92 +53,6 @@ export class ThematicLayer extends Layer {
         return this.selectDataItem(dataElement)
     }
 
-    selectRelativePeriod(period) {
-        cy.get('[data-test="relative-period-select"]').click()
-        cy.contains(period).click()
-
-        return this
-    }
-
-    removeAllPeriods() {
-        cy.getByDataTest('period-dimension-transfer-actions-removeall').click()
-
-        return this
-    }
-
-    selectPeriodType({
-        periodType,
-        periodDimension = 'fixed',
-        n = 'last',
-        y = '',
-        removeAll = true,
-    } = {}) {
-        if (!periodType) {
-            throw new Error("The 'periodType' parameter is required.")
-        }
-
-        // Select fixed / relative periods
-        cy.getByDataTest(
-            `period-dimension-${periodDimension}-periods-button`
-        ).click()
-        // Open dropdown for period type
-        cy.getByDataTest(
-            `period-dimension-${periodDimension}-period-filter${
-                periodDimension === 'fixed' ? '-period-type' : ''
-            }`
-        ).click()
-        // Select period type in dropdown if not active already
-        cy.get(`[data-value="${periodType}"]`).then(($el) => {
-            if ($el.hasClass('active')) {
-                cy.get('body').click('topLeft')
-            } else {
-                cy.wrap($el).click()
-            }
-        })
-
-        if (removeAll) {
-            cy.getByDataTest(
-                'period-dimension-transfer-actions-removeall'
-            ).click()
-        }
-
-        if (y !== '') {
-            cy.getByDataTest(
-                'period-dimension-fixed-period-filter-year-content'
-            )
-                .get('input[type="number"]')
-                .clear()
-            cy.getByDataTest(
-                'period-dimension-fixed-period-filter-year-content'
-            )
-                .get('input[type="number"]')
-                .type(y)
-        }
-        if (n === 'last') {
-            cy.getByDataTest('period-dimension-transfer-option-content')
-                .last()
-                .dblclick()
-        } else {
-            cy.getByDataTest('period-dimension-transfer-option-content')
-                .eq(n)
-                .dblclick()
-        }
-
-        return this
-    }
-
-    selectPresets() {
-        cy.contains('Choose from presets').click()
-
-        return this
-    }
-
-    selectStartEndDates() {
-        cy.contains('Define start - end dates').click()
-
-        return this
-    }
-
     selectChoropleth() {
         cy.contains('Choropleth').click()
 

cypress/integration/dataTable.cy.js

@@ -155,7 +155,7 @@ describe('data table', () => {
             .selectProgram('Inpatient morbidity and mortality')
             .validateStage('Inpatient morbidity and mortality')
             .selectTab('Period')
-            .selectPeriodType({ periodType: 'Start/end dates' })
+            .selectStartEndDates()
             .typeStartDate(`${CURRENT_YEAR - 1}-01-01`)
             .typeEndDate(`${CURRENT_YEAR - 1}-01-03`)
             .addToMap()

cypress/integration/layers/eventlayer.cy.js

@@ -165,7 +165,7 @@ context('Event Layers', () => {
             .selectProgram(programIP.name)
             .validateStage(programIP.stage)
             .selectTab('Period')
-            .selectPeriodType({ periodType: 'Start/end dates' })
+            .selectStartEndDates()
             .typeEndDate()
             .addToMap()
 
@@ -199,7 +199,7 @@ context('Event Layers', () => {
             .selectProgram(programIP.name)
             .validateStage(programIP.stage)
             .selectTab('Period')
-            .selectPeriodType({ periodType: 'Start/end dates' })
+            .selectStartEndDates()
             .typeStartDate(programIP.startDate)
             .typeEndDate(programIP.endDate)
             .selectTab('Org Units')
@@ -217,12 +217,51 @@ context('Event Layers', () => {
         Layer.validateCardItems(['Event'])
     })
 
+    it('adds an event layer with multiple periods', () => {
+        Layer.openDialog('Events')
+            .selectProgram(programIP.name)
+            .validateStage(programIP.stage)
+            .selectTab('Period')
+            .selectPeriodType({
+                periodType: 'MONTHLY',
+                periodDimension: 'fixed',
+                n: 2,
+                y: CURRENT_YEAR - 1,
+            })
+            .selectPeriodType({
+                periodType: 'MONTHLY',
+                periodDimension: 'fixed',
+                n: 7,
+                removeAll: false,
+            })
+            .selectTab('Org Units')
+            .selectOu(programIP.ous[0])
+            .selectOu(programIP.ous[1])
+            .selectTab('Style')
+            .selectViewAllEvents()
+            .addToMap()
+
+        Layer.validateDialogClosed(true)
+
+        Layer.validateCardTitle(programIP.name)
+        Layer.validateCardPeriod(`March ${CURRENT_YEAR - 1}`)
+        Layer.validateCardPeriod(`September ${CURRENT_YEAR - 1}`)
+
+        cy.wait(POPUP_WAIT)
+        cy.get('#dhis2-map-container')
+            .findByDataTest('dhis2-uicore-componentcover', EXTENDED_TIMEOUT)
+            .should('not.exist')
+
+        getMaps().click('center')
+        Layer.validatePopupContents(['Event location'])
+    })
+
     it('preserves start/end dates when editing a saved event layer', () => {
         Layer.openDialog('Events')
             .selectProgram(programIP.name)
             .validateStage(programIP.stage)
             .selectTab('Period')
-            .selectPeriodType({ periodType: 'Start/end dates' })
+            .selectStartEndDates()
             .typeStartDate(programIP.startDate)
             .typeEndDate(programIP.endDate)
             .selectTab('Org Units')
@@ -248,7 +287,7 @@ context('Event Layers', () => {
             .selectProgram(programIP.name)
             .validateStage(programIP.stage)
             .selectTab('Period')
-            .selectPeriodType({ periodType: 'Start/end dates' })
+            .selectStartEndDates()
             .typeStartDate(programIP.startDate)
             .typeEndDate(programIP.endDate)
             .selectTab('Style')
@@ -347,7 +386,7 @@ context('Event Layers', () => {
 
         Layer.selectCoordinate(programGeowR.scenarios[0].coordinates[0].name)
         Layer.selectTab('Period')
-            .selectPeriodType({ periodType: 'Start/end dates' })
+            .selectStartEndDates()
             .typeStartDate(programGeowR.startDate)
             .typeEndDate(programGeowR.endDate)
         Layer.selectTab('Style').selectViewAllEvents()
@@ -378,7 +417,7 @@ context('Event Layers', () => {
         selectProgramAndStage(Layer, programGeowR.name, programGeowR.stage)
         Layer.selectCoordinate(programGeowR.scenarios[0].coordinates[0].name)
         Layer.selectTab('Period')
-            .selectPeriodType({ periodType: 'Start/end dates' })
+            .selectStartEndDates()
             .typeStartDate(programGeowR.startDate)
             .typeEndDate(programGeowR.endDate)
         Layer.selectTab('Style').selectViewAllEvents()
@@ -420,7 +459,7 @@ context('Event Layers', () => {
                 programGeowR.scenarios[0].coordinates[0].name
             )
             Layer.selectTab('Period')
-                .selectPeriodType({ periodType: 'Start/end dates' })
+                .selectStartEndDates()
                 .typeStartDate(programGeowR.startDate)
                 .typeEndDate(programGeowR.endDate)
             Layer.selectTab('Style').selectViewAllEvents()