feat: event/enrollment ui changes to prepare for TEI cross-program support (DHIS2-15454)

.github/pull_request_template.md

@@ -18,6 +18,9 @@ _text_
 
 ### TODO
 
+-   [ ] Cypress tests
+-   [ ] Update docs
+-   [ ] KFMT
 -   [ ] _task_
 
 ---

cypress.config.js

@@ -43,6 +43,7 @@ module.exports = defineConfig({
             openMode: 0,
         },
         defaultCommandTimeout: 15000,
+        experimentalRunAllSpecs: true,
     },
     env: {
         dhis2DatatestPrefix: 'dhis2-linelisting',

cypress/data/index.js

@@ -19,7 +19,7 @@ export const E2E_PROGRAM = {
 
 export const CHILD_PROGRAM = {
     programName: 'Child Programme',
-    stageName: 'Birth',
+    //stageName: 'Birth', // auto-selected as it's the first one
     [DIMENSION_ID_EVENT_DATE]: 'Report date',
     [DIMENSION_ID_ENROLLMENT_DATE]: 'Enrollment date',
     [DIMENSION_ID_SCHEDULED_DATE]: 'Scheduled date',

cypress/helpers/dimensions.js

@@ -5,16 +5,12 @@ const INPUT_ENROLLMENT = 'enrollment'
 
 const selectProgramAndStage = ({ inputType, programName, stageName }) => {
     // select the desired type: Event or Enrollment
-    cy.getBySel('main-sidebar', EXTENDED_TIMEOUT).contains('Input:').click()
     if (inputType === INPUT_EVENT) {
         cy.getBySel('input-event').click()
     } else {
         cy.getBySel('input-enrollment').click()
     }
 
-    // open the Program dimensions panel
-    cy.getBySel('main-sidebar').contains('Program dimensions').click()
-
     // choose the program
     if (programName) {
         cy.getBySel('accessory-sidebar').contains('Choose a program').click()
@@ -23,21 +19,30 @@ const selectProgramAndStage = ({ inputType, programName, stageName }) => {
 
     // choose the stage if relevant
     if (stageName) {
-        cy.getBySel('accessory-sidebar').contains('Stage').click()
+        cy.getBySel('stage-select').click()
         cy.containsExact(stageName).click()
     }
 }
 
 export const selectEventWithProgram = ({ programName, stageName }) =>
     selectProgramAndStage({ inputType: INPUT_EVENT, programName, stageName })
 
-export const selectEnrollmentProgram = ({ programName, stageName }) =>
+export const selectEnrollmentWithProgram = ({ programName }) =>
     selectProgramAndStage({
         inputType: INPUT_ENROLLMENT,
         programName,
-        stageName,
     })
 
+export const openInputSidebar = () => {
+    cy.getBySel('main-sidebar').contains('Input:').click()
+    cy.getBySel('input-panel').should('be.visible')
+}
+
+export const openProgramDimensionsSidebar = () => {
+    cy.getBySel('main-sidebar').contains('Program dimensions').click()
+    cy.getBySel('program-dimensions').should('be.visible')
+}
+
 export const openDimension = (dimensionName) => {
     cy.getBySel('program-dimensions-list', EXTENDED_TIMEOUT)
         .contains(dimensionName)
@@ -57,6 +62,9 @@ export const clickAddRemoveMainDimension = (label) =>
     clickAddRemoveDimension('main-sidebar', label)
 
 export const clickAddRemoveProgramDimension = (label) =>
+    clickAddRemoveDimension('program-dimensions', label)
+
+export const clickAddRemoveProgramDataDimension = (label) =>
     clickAddRemoveDimension('program-dimensions-list', label)
 
 const selectProgramDimensions = ({
@@ -67,13 +75,12 @@ const selectProgramDimensions = ({
 }) => {
     selectProgramAndStage({ inputType, programName, stageName })
 
+    openProgramDimensionsSidebar()
+
     // add the dimensions as columns
     dimensions.forEach((dimensionName) => {
-        clickAddRemoveProgramDimension(dimensionName)
+        clickAddRemoveProgramDataDimension(dimensionName)
     })
-
-    // close the program dimensions panel
-    cy.getBySel('main-sidebar').contains('Program dimensions').click()
 }
 
 export const selectEventWithProgramDimensions = ({
@@ -88,15 +95,13 @@ export const selectEventWithProgramDimensions = ({
         dimensions,
     })
 
-export const selectEnrollmentProgramDimensions = ({
+export const selectEnrollmentWithProgramDimensions = ({
     programName,
-    stageName,
     dimensions,
 }) =>
     selectProgramDimensions({
         inputType: INPUT_ENROLLMENT,
         programName,
-        stageName,
         dimensions,
     })
 

cypress/helpers/period.js

@@ -1,5 +1,14 @@
+// "Last updated on" is in the sidebar while all the others are in program dimensiions
+const openPeriod = (label) => {
+    if (label === 'Last updated on') {
+        cy.getBySel('main-dimensions-sidebar').contains(label).click()
+    } else {
+        cy.getBySel('program-dimensions').contains(label).click()
+    }
+}
+
 const selectFixedPeriod = ({ label, period }) => {
-    cy.getBySel('main-sidebar').contains(label).click()
+    openPeriod(label)
     cy.contains('Choose from presets').click()
     cy.contains('Fixed periods').click()
     if (period.type) {
@@ -22,7 +31,7 @@ const selectFixedPeriod = ({ label, period }) => {
 }
 
 const selectRelativePeriod = ({ label, period }) => {
-    cy.getBySel('main-sidebar').contains(label).click()
+    openPeriod(label)
     cy.contains('Choose from presets').click()
     cy.contains('Relative periods').click()
 
@@ -39,7 +48,7 @@ const selectRelativePeriod = ({ label, period }) => {
 }
 
 const unselectAllPeriods = ({ label }) => {
-    cy.getBySel('main-sidebar').contains(label).click()
+    openPeriod(label)
     cy.contains('Choose from presets').click()
 
     cy.getBySel('period-dimension-transfer-actions-removeall').click()

cypress/integration/conditions/alphanumericConditions.cy.js

@@ -12,6 +12,7 @@ import {
 } from '../../data/index.js'
 import {
     openDimension,
+    openProgramDimensionsSidebar,
     selectEventWithProgram,
     selectEventWithProgramDimensions,
 } from '../../helpers/dimensions.js'
@@ -251,6 +252,7 @@ describe('alphanumeric types', { testIsolation: false }, () => {
             goToStartPage()
 
             selectEventWithProgram(E2E_PROGRAM)
+            openProgramDimensionsSidebar()
             openDimension(type)
 
             cy.getBySel('button-add-condition').click()

cypress/integration/conditions/dateConditions.cy.js

@@ -9,6 +9,7 @@ import {
 } from '../../data/index.js'
 import {
     openDimension,
+    openProgramDimensionsSidebar,
     selectEventWithProgram,
     selectEventWithProgramDimensions,
 } from '../../helpers/dimensions.js'
@@ -289,6 +290,7 @@ describe('date types', { testIsolation: false }, () => {
             goToStartPage()
 
             selectEventWithProgram(E2E_PROGRAM)
+            openProgramDimensionsSidebar()
             openDimension(type)
 
             cy.getBySel('button-add-condition').click()

cypress/integration/conditions/numericConditions.cy.js

@@ -14,6 +14,7 @@ import {
 } from '../../data/index.js'
 import {
     openDimension,
+    openProgramDimensionsSidebar,
     selectEventWithProgram,
     selectEventWithProgramDimensions,
 } from '../../helpers/dimensions.js'
@@ -315,6 +316,7 @@ describe('preset options', { testIsolation: false }, () => {
         goToStartPage()
 
         selectEventWithProgram(E2E_PROGRAM)
+        openProgramDimensionsSidebar()
         openDimension(dimensionName)
         cy.contains('Add to Columns').click()
 
@@ -406,6 +408,7 @@ describe('numeric types', { testIsolation: false }, () => {
             goToStartPage()
 
             selectEventWithProgram(E2E_PROGRAM)
+            openProgramDimensionsSidebar()
             openDimension(type)
 
             cy.getBySel('button-add-condition').click()

cypress/integration/conditions/optionSetCondition.cy.js

@@ -7,6 +7,7 @@ import {
 } from '../../data/index.js'
 import {
     openDimension,
+    openProgramDimensionsSidebar,
     selectEventWithProgram,
 } from '../../helpers/dimensions.js'
 import {
@@ -37,6 +38,8 @@ describe('Option set condition', () => {
 
         selectEventWithProgram(E2E_PROGRAM)
 
+        openProgramDimensionsSidebar()
+
         selectRelativePeriod({
             label: E2E_PROGRAM[DIMENSION_ID_EVENT_DATE],
             period: TEST_REL_PE_LAST_YEAR,
@@ -91,6 +94,8 @@ describe('Option set condition', () => {
 
         selectEventWithProgram(E2E_PROGRAM)
 
+        openProgramDimensionsSidebar()
+
         selectRelativePeriod({
             label: E2E_PROGRAM[DIMENSION_ID_EVENT_DATE],
             period: TEST_REL_PE_LAST_YEAR,

cypress/integration/conditions/orgunitCondition.cy.js

@@ -6,6 +6,7 @@ import {
 } from '../../data/index.js'
 import {
     openDimension,
+    openProgramDimensionsSidebar,
     selectEventWithProgram,
 } from '../../helpers/dimensions.js'
 import {
@@ -24,6 +25,8 @@ const stageName = 'Stage 1 - Repeatable'
 const setUpTable = () => {
     selectEventWithProgram(trackerProgram)
 
+    openProgramDimensionsSidebar()
+
     selectRelativePeriod({
         label: periodLabel,
         period: TEST_REL_PE_THIS_YEAR,

cypress/integration/conditions/unsupportedTypes.cy.js

@@ -7,6 +7,7 @@ import {
 } from '../../data/index.js'
 import {
     openDimension,
+    openProgramDimensionsSidebar,
     selectEventWithProgram,
 } from '../../helpers/dimensions.js'
 import {
@@ -25,6 +26,8 @@ const stageName = 'Stage 1 - Repeatable'
 const setUpTable = () => {
     selectEventWithProgram(event)
 
+    openProgramDimensionsSidebar()
+
     selectRelativePeriod({
         label: periodLabel,
         period: TEST_REL_PE_THIS_YEAR,
@@ -52,6 +55,8 @@ describe('unsupported types', () => {
 
             selectEventWithProgram(E2E_PROGRAM)
 
+            openProgramDimensionsSidebar()
+
             openDimension(type.dimension)
 
             cy.getBySel('button-add-condition').should('not.exist')

cypress/integration/createEnrollment.cy.js

@@ -8,11 +8,7 @@ import {
     TEST_DIM_TEXT,
     TEST_FIX_PE_DEC_LAST_YEAR,
 } from '../data/index.js'
-import {
-    dimensionIsDisabled,
-    dimensionIsEnabled,
-    selectEnrollmentProgramDimensions,
-} from '../helpers/dimensions.js'
+import { selectEnrollmentWithProgramDimensions } from '../helpers/dimensions.js'
 import { clickMenubarUpdateButton } from '../helpers/menubar.js'
 import { selectFixedPeriod } from '../helpers/period.js'
 import { goToStartPage } from '../helpers/startScreen.js'
@@ -21,65 +17,35 @@ import {
     getTableHeaderCells,
     expectTableToBeVisible,
 } from '../helpers/table.js'
-import { EXTENDED_TIMEOUT } from '../support/util.js'
 
 const enrollment = E2E_PROGRAM
 const dimensionName = TEST_DIM_TEXT
 const periodLabel = enrollment[DIMENSION_ID_ENROLLMENT_DATE]
 
-const setUpTable = ({ scheduledDateIsSupported } = {}) => {
-    // switch to Enrollment to toggle the enabled/disabled time dimensions
-    cy.getBySel('main-sidebar', EXTENDED_TIMEOUT)
-        .contains('Input: Event')
-        .click()
-    cy.getBySel('input-enrollment').click()
-    cy.getBySel('main-sidebar').contains('Input: Enrollment').click()
-
-    // check that the time dimensions are correctly disabled and named
-    dimensionIsDisabled('dimension-item-eventDate')
-    cy.getBySel('dimension-item-eventDate').contains('Event date')
-
-    dimensionIsEnabled('dimension-item-enrollmentDate')
-    cy.getBySel('dimension-item-enrollmentDate').contains('Enrollment date')
-
-    if (scheduledDateIsSupported) {
-        dimensionIsDisabled('dimension-item-scheduledDate')
-        cy.getBySel('dimension-item-scheduledDate').contains('Scheduled date')
-    }
-
-    dimensionIsDisabled('dimension-item-incidentDate')
-    cy.getBySel('dimension-item-incidentDate').contains('Incident date')
-
-    dimensionIsEnabled('dimension-item-lastUpdated')
-    cy.getBySel('dimension-item-lastUpdated').contains('Last updated on')
+const setUpTable = () => {
+    cy.getBySel('dimension-item-lastUpdated').contains(
+        enrollment[DIMENSION_ID_LAST_UPDATED]
+    )
 
-    // select program
-    selectEnrollmentProgramDimensions({
+    // switch to Enrollment and select a program
+    selectEnrollmentWithProgramDimensions({
         ...enrollment,
         dimensions: [dimensionName],
     })
 
-    // check that the time dimensions disabled states and names are updated correctly
-
-    dimensionIsDisabled('dimension-item-eventDate')
-    cy.getBySel('dimension-item-eventDate').contains('Event date')
+    // check that the time dimensions are shown with the correct names
+    cy.getBySel('dimension-item-eventDate').should('not.exist')
 
-    dimensionIsEnabled('dimension-item-enrollmentDate')
     cy.getBySel('dimension-item-enrollmentDate').contains(
         enrollment[DIMENSION_ID_ENROLLMENT_DATE]
     )
 
-    if (scheduledDateIsSupported) {
-        dimensionIsDisabled('dimension-item-scheduledDate')
-        cy.getBySel('dimension-item-scheduledDate').contains('Scheduled date')
-    }
+    cy.getBySel('dimension-item-scheduledDate').should('not.exist')
 
-    dimensionIsEnabled('dimension-item-incidentDate')
     cy.getBySel('dimension-item-incidentDate').contains(
         enrollment[DIMENSION_ID_INCIDENT_DATE]
     )
 
-    dimensionIsEnabled('dimension-item-lastUpdated')
     cy.getBySel('dimension-item-lastUpdated').contains(
         enrollment[DIMENSION_ID_LAST_UPDATED]
     )
@@ -184,15 +150,7 @@ const runTests = () => {
     })
 }
 
-describe(['>=39'], 'enrollment', () => {
-    beforeEach(() => {
-        goToStartPage()
-        setUpTable({ scheduledDateIsSupported: true })
-    })
-    runTests()
-})
-
-describe(['<39'], 'enrollment', () => {
+describe('enrollment', () => {
     beforeEach(() => {
         goToStartPage()
         setUpTable()