feat: use PeriodDimension in ThematicDialog

cypress/elements/layer.js

@@ -46,7 +46,7 @@ export class Layer {
             .contains(level)
             .find('input')
             .check()
-        cy.get('body').click() // Close the modal menu
+        cy.get('body').click()
 
         return this
     }
@@ -59,27 +59,28 @@ export class Layer {
             .find('input')
             .uncheck()
 
-        cy.get('body').click() // Close the modal menu
+        cy.get('body').click()
 
         return this
     }
 
     typeStartDate(dateString) {
-        cy.get('label')
-            .contains('Start date')
-            .next()
+        cy.getByDataTest('calendar-clear-button').eq(0).click()
+        cy.getByDataTest('start-date-input-content')
             .find('input')
             .type(dateString)
+        cy.get('body').click(0, 0)
 
         return this
     }
 
     typeEndDate(dateString) {
-        cy.get('label')
-            .contains('End date')
-            .next()
+        cy.getByDataTest('calendar-clear-button').eq(1).click()
+        cy.getByDataTest('end-date-input-content')
             .find('input')
             .type(dateString)
+        cy.get('body').click(0, 0)
+
         return this
     }
 

cypress/elements/thematic_layer.js

@@ -55,9 +55,60 @@ export class ThematicLayer extends Layer {
         return this
     }
 
-    selectPeriodType(periodType) {
-        cy.get('[data-test="periodtypeselect"]').click()
-        cy.contains(periodType).click()
+    removeAllPeriods() {
+        cy.getByDataTest('period-dimension-transfer-actions-removeall').click()
+
+        return this
+    }
+
+    /* eslint-disable max-params */
+    selectPeriodType(
+        periodType,
+        periodDimension = 'fixed',
+        n = 'last',
+        removeAll = true
+    ) {
+        cy.getByDataTest(
+            `period-dimension-${periodDimension}-periods-button`
+        ).click()
+        cy.getByDataTest(
+            `period-dimension-${periodDimension}-period-filter${
+                periodDimension === 'fixed' ? '-period-type' : ''
+            }-content`
+        ).click()
+        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 (n === 'last') {
+            cy.getByDataTest('period-dimension-transfer-option-content')
+                .last()
+                .dblclick()
+        } else {
+            cy.getByDataTest('period-dimension-transfer-option-content')
+                .eq(n)
+                .dblclick()
+        }
+
+        return this
+    }
+    /* eslint-enable max-params */
+
+    selectPresets() {
+        cy.contains('Choose from presets').click()
+
+        return this
+    }
+    selectStartEndDates() {
+        cy.contains('Define start - end dates').click()
 
         return this
     }

cypress/integration/layers/eventlayer.cy.js

@@ -1,13 +1,35 @@
 import { EventLayer } from '../../elements/event_layer.js'
-import { EXTENDED_TIMEOUT } from '../../support/util.js'
+import { CURRENT_YEAR, EXTENDED_TIMEOUT } from '../../support/util.js'
 
 context('Event Layers', () => {
     beforeEach(() => {
-        cy.visit('/', EXTENDED_TIMEOUT)
+        cy.visit('/')
     })
 
     const Layer = new EventLayer()
 
+    it('adds an event layer and applies style for boolean data element', () => {
+        Layer.openDialog('Events')
+            .selectProgram('E2E program')
+            .validateStage('Stage 1 - Repeatable')
+            .selectTab('Style')
+
+        cy.getByDataTest('style-by-data-element-select').click()
+
+        cy.getByDataTest('dhis2-uicore-singleselectoption')
+            .contains('E2E - Yes/no')
+            .click()
+
+        cy.getByDataTest('dhis2-uicore-modalactions')
+            .contains('Add layer')
+            .click()
+
+        Layer.validateDialogClosed(true)
+
+        Layer.validateCardTitle('Stage 1 - Repeatable')
+        Layer.validateCardItems(['Yes', 'No', 'Not set'])
+    })
+
     it('shows error if no program selected', () => {
         Layer.openDialog('Events').addToMap()
 
@@ -16,7 +38,24 @@ context('Event Layers', () => {
         cy.contains('Program is required').should('be.visible')
     })
 
-    it('adds an event layer', () => {
+    it('shows error if no endDate is specified', () => {
+        Layer.openDialog('Events')
+            .selectProgram('Inpatient morbidity and mortality')
+            .validateStage('Inpatient morbidity and mortality')
+            .selectTab('Period')
+            .selectPeriodType('Start/end dates')
+            .typeStartDate(`${CURRENT_YEAR - 5}-02-01`)
+            .addToMap()
+
+        Layer.validateDialogClosed(false)
+        cy.contains('End date is invalid').should('be.visible')
+
+        Layer.selectTab('Period').typeEndDate('2')
+
+        cy.contains('End date is invalid').should('not.exist')
+    })
+
+    it('adds an event layer - relative period', () => {
         Layer.openDialog('Events')
             .selectProgram('Inpatient morbidity and mortality')
             .validateStage('Inpatient morbidity and mortality')
@@ -31,32 +70,39 @@ context('Event Layers', () => {
         Layer.validateCardItems(['Event'])
     })
 
-    it('adds an event layer and applies style for boolean data element', () => {
+    it('adds an event layer - start-end dates', () => {
         Layer.openDialog('Events')
-            .selectProgram('E2E program')
-            .validateStage('Stage 1 - Repeatable')
+            .selectProgram('Inpatient morbidity and mortality')
+            .validateStage('Inpatient morbidity and mortality')
+            .selectTab('Period')
+            .selectPeriodType('Start/end dates')
+            .typeStartDate(`${CURRENT_YEAR - 5}-00-00`)
+            .typeEndDate(`${CURRENT_YEAR}-11-30`)
+            .selectTab('Org Units')
+            .selectOu('Bombali')
+            .selectOu('Bo')
             .selectTab('Style')
-
-        cy.getByDataTest('style-by-data-element-select').click()
-
-        cy.getByDataTest('dhis2-uicore-singleselectoption')
-            .contains('E2E - Yes/no')
-            .click()
-
-        cy.getByDataTest('dhis2-uicore-modalactions')
-            .contains('Add layer')
-            .click()
+            .selectViewAllEvents()
+            .addToMap()
 
         Layer.validateDialogClosed(true)
 
-        Layer.validateCardTitle('Stage 1 - Repeatable')
-        Layer.validateCardItems(['Yes', 'No', 'Not set'])
+        Layer.validateCardTitle(
+            'Inpatient morbidity and mortality'
+        ).validateCardPeriod(
+            `Jan 1, ${CURRENT_YEAR - 5} - Nov 30, ${CURRENT_YEAR}`
+        )
+        Layer.validateCardItems(['Event'])
     })
 
     it('opens an event popup', () => {
         Layer.openDialog('Events')
             .selectProgram('Inpatient morbidity and mortality')
             .validateStage('Inpatient morbidity and mortality')
+            .selectTab('Period')
+            .selectPeriodType('Start/end dates')
+            .typeStartDate(`${CURRENT_YEAR - 5}-00-00`)
+            .typeEndDate(`${CURRENT_YEAR}-11-30`)
             .selectTab('Style')
             .selectViewAllEvents()
             .selectTab('Org Units')

cypress/integration/layers/multilayers.cy.js

@@ -17,7 +17,7 @@ describe('Multiple Layers', () => {
             .selectIndicatorGroup('ANC')
             .selectIndicator(INDICATOR_NAME)
             .selectTab('Period')
-            .selectPeriodType('Yearly')
+            .selectPeriodType('YEARLY')
             .selectTab('Org Units')
             .selectOu('Sierra Leone')
             .selectOuLevel('District')