feat: tracked entity input (DHIS2-16023) (#451)

Adds support for tracked entity input and cross-program data dimension selection

.github/workflows/e2e-dev.yml

@@ -0,0 +1,70 @@
+name: 'e2e-dev'
+
+on:
+    workflow_call:
+        secrets:
+            username:
+                required: true
+            password:
+                required: true
+            recordkey:
+                required: true
+
+concurrency:
+    group: e2e-dev-${{ github.workflow}}-${{ github.ref }}
+    cancel-in-progress: true
+
+defaults:
+    run:
+        shell: bash
+
+jobs:
+    compute-dev-version:
+        runs-on: ubuntu-latest
+        outputs:
+            version: ${{ steps.instance-version.outputs.version }}
+        steps:
+            - name: Output dev version
+              id: instance-version
+              uses: dhis2/action-instance-version@v1
+              with:
+                  instance-url: https://test.e2e.dhis2.org/analytics-2.41d
+                  username: ${{ secrets.username }}
+                  password: ${{ secrets.password }}
+
+    e2e-dev:
+        needs: compute-dev-version
+        runs-on: ubuntu-latest
+
+        strategy:
+            fail-fast: false
+            matrix:
+                containers: [1, 2, 3, 4]
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18.x
+
+            - name: Run e2e tests
+              uses: cypress-io/github-action@v5
+              with:
+                  start: yarn d2-app-scripts start
+                  wait-on: 'http://localhost:3000'
+                  wait-on-timeout: 300
+                  record: true
+                  parallel: true
+                  browser: chrome
+                  group: e2e-chrome-parallel-dev
+              env:
+                  BROWSER: none
+                  CYPRESS_RECORD_KEY: ${{ secrets.recordkey }}
+                  CYPRESS_dhis2BaseUrl: https://test.e2e.dhis2.org/analytics-2.41d
+                  CYPRESS_dhis2InstanceVersion: ${{ needs.compute-dev-version.outputs.version }}
+                  CYPRESS_dhis2Username: ${{ secrets.username }}
+                  CYPRESS_dhis2Password: ${{ secrets.password }}
+                  CYPRESS_networkMode: live
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

cypress/helpers/dimensions.js

@@ -24,6 +24,11 @@ const selectProgramAndStage = ({ inputType, programName, stageName }) => {
     }
 }
 
+export const selectProgramForTE = (programName) => {
+    cy.getBySel('accessory-sidebar').contains('Choose a program').click()
+    cy.contains(programName).click()
+}
+
 export const selectEventWithProgram = ({ programName, stageName }) =>
     selectProgramAndStage({ inputType: INPUT_EVENT, programName, stageName })
 
@@ -33,14 +38,19 @@ export const selectEnrollmentWithProgram = ({ programName }) =>
         programName,
     })
 
+export const selectTrackedEntityWithType = (typeName) => {
+    cy.getBySel('input-tracked-entity').click()
+    cy.getBySel('accessory-sidebar').contains('Choose a type').click()
+    cy.contains(typeName).click()
+}
+
 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) => {
@@ -67,6 +77,9 @@ export const clickAddRemoveProgramDimension = (label) =>
 export const clickAddRemoveProgramDataDimension = (label) =>
     clickAddRemoveDimension('program-dimensions-list', label)
 
+export const clickAddRemoveTrackedEntityTypeDimensions = (label) =>
+    clickAddRemoveDimension('tracked-entity-dimensions-list', label)
+
 const selectProgramDimensions = ({
     inputType,
     programName,
@@ -105,6 +118,19 @@ export const selectEnrollmentWithProgramDimensions = ({
         dimensions,
     })
 
+export const selectTrackedEntityWithTypeAndProgramDimensions = ({
+    typeName,
+    programName,
+    dimensions,
+}) => {
+    selectTrackedEntityWithType(typeName)
+    openProgramDimensionsSidebar()
+    selectProgramForTE(programName)
+    dimensions.forEach((dimensionName) => {
+        clickAddRemoveProgramDataDimension(dimensionName)
+    })
+}
+
 const disabledOpacity = { prop: 'opacity', value: '0.5' }
 const disabledCursor = { prop: 'cursor', value: 'not-allowed' }
 

cypress/helpers/fileMenu.js

@@ -1,3 +1,4 @@
+import { EXTENDED_TIMEOUT } from '../support/util.js'
 import { clearInput, typeInput, clearTextarea, typeTextarea } from './common.js'
 
 export const ITEM_NEW = 'file-menu-new'
@@ -68,3 +69,15 @@ export const renameVisualization = (name, description) => {
 
     cy.getBySel('file-menu-rename-modal-rename').click()
 }
+
+export const openAOByName = (name) => {
+    cy.getBySel('dhis2-analytics-hovermenubar').contains('File').click()
+
+    cy.getBySel(ITEM_OPEN).click()
+
+    typeInput('open-file-dialog-modal-name-filter', name)
+
+    cy.getBySel('open-file-dialog-modal', EXTENDED_TIMEOUT)
+        .contains(name, EXTENDED_TIMEOUT)
+        .click()
+}

cypress/helpers/layout.js

@@ -27,21 +27,29 @@ export const expectAxisToNotHaveDimension = (axisId, dimensionId) => {
 export const assertTooltipContainsEntries = (entries) =>
     entries.forEach((entry) => cy.getBySel('tooltip-content').contains(entry))
 
-export const assertChipContainsText = (dimensionName, suffix) => {
-    if (suffix) {
+export const assertChipContainsText = (primary, items, secondary) => {
+    if (items) {
         cy.getBySelLike('layout-chip')
-            .containsExact(dimensionName, EXTENDED_TIMEOUT)
+            .containsExact(primary, EXTENDED_TIMEOUT)
             .parent()
-            .findBySelLike('chip-suffix')
-            .contains(suffix, EXTENDED_TIMEOUT)
+            .parent()
+            .findBySelLike('chip-items')
+            .contains(items, EXTENDED_TIMEOUT)
     } else {
         cy.getBySelLike('layout-chip')
-            .containsExact(dimensionName, EXTENDED_TIMEOUT)
+            .containsExact(primary, EXTENDED_TIMEOUT)
+            .parent()
             .parent()
-            .findBySelLike('chip-suffix')
+            .findBySelLike('chip-items')
             .should('not.exist')
     }
+    if (secondary) {
+        cy.getBySelLike('layout-chip').containsExact(
+            secondary,
+            EXTENDED_TIMEOUT
+        )
+    }
     cy.getBySelLike('layout-chip')
-        .containsExact(dimensionName, EXTENDED_TIMEOUT)
+        .containsExact(primary, EXTENDED_TIMEOUT)
         .trigger('mouseover')
 }

cypress/helpers/menubar.js

@@ -20,17 +20,17 @@ export const clickMenubarOptionsButton = () =>
 
 export const openDataOptionsModal = () => {
     clickMenubarOptionsButton()
-    return cy.getBySel('options-menu-list').contains('Data').click()
+    cy.getBySel('options-menu-list').contains('Data').click()
 }
 
 export const openStyleOptionsModal = () => {
     clickMenubarOptionsButton()
-    return cy.getBySel('options-menu-list').contains('Style').click()
+    cy.getBySel('options-menu-list').contains('Style').click()
 }
 
 export const openLegendOptionsModal = () => {
     clickMenubarOptionsButton()
-    return cy.getBySel('options-menu-list').contains('Legend').click()
+    cy.getBySel('options-menu-list').contains('Legend').click()
 }
 
 export const clickMenubarInterpretationsButton = () =>

cypress/helpers/orgUnit.js

@@ -1,6 +1,6 @@
 import { EXTENDED_TIMEOUT } from '../support/util.js'
 
-const orgUnitModalEl = 'fixed-dimension-ou-modal'
+const orgUnitModalEl = 'ou-modal'
 const levelSelectEl = 'org-unit-level-select'
 const levelSelectOptionEl = 'org-unit-level-select-option'
 const groupSelectEl = 'org-unit-group-select'
@@ -12,12 +12,12 @@ const orgUnitTreeNodeSelectEl = '[type="checkbox"]'
 const orgUnitTreeNodeToggleEl = 'org-unit-tree-node-toggle'
 
 export const clickOrgUnitDimensionModalUpdateButton = () =>
-    cy.getBySel(`${orgUnitModalEl}-action-confirm`).click()
+    cy.getBySelLike(`${orgUnitModalEl}-action-confirm`).click()
 
 export const openOuDimension = () => cy.getBySelLike('layout-chip-ou').click()
 
 export const expectOrgUnitDimensionModalToBeVisible = () =>
-    cy.getBySel(orgUnitModalEl).should('be.visible')
+    cy.getBySelLike(orgUnitModalEl).should('be.visible')
 
 export const expectOrgUnitDimensionToNotBeLoading = () =>
     cy
@@ -84,24 +84,24 @@ export const toggleOrgUnitGroup = (name) => {
 }
 
 export const selectUserOrgUnit = (name) => {
-    cy.getBySel(orgUnitModalEl)
+    cy.getBySelLike(orgUnitModalEl)
         .contains(name)
         .find('[type="checkbox"]')
         .should('not.be.checked')
-    cy.getBySel(orgUnitModalEl).contains(name).click()
-    cy.getBySel(orgUnitModalEl)
+    cy.getBySelLike(orgUnitModalEl).contains(name).click()
+    cy.getBySelLike(orgUnitModalEl)
         .contains(name)
         .find('[type="checkbox"]')
         .should('be.checked')
 }
 
 export const deselectUserOrgUnit = (name) => {
-    cy.getBySel(orgUnitModalEl)
+    cy.getBySelLike(orgUnitModalEl)
         .contains(name)
         .find('[type="checkbox"]')
         .should('be.checked')
-    cy.getBySel(orgUnitModalEl).contains(name).click()
-    cy.getBySel(orgUnitModalEl)
+    cy.getBySelLike(orgUnitModalEl).contains(name).click()
+    cy.getBySelLike(orgUnitModalEl)
         .contains(name)
         .find('[type="checkbox"]')
         .should('not.be.checked')

cypress/helpers/period.js

@@ -7,11 +7,15 @@ const openPeriod = (label) => {
     }
 }
 
-const selectFixedPeriod = ({ label, period }) => {
+const DEFAULT_FIXED_PERIOD_TYPE = 'Monthly'
+const selectFixedPeriod = ({ label, period, selected }) => {
+    // open the period modal in the fixed period view
     openPeriod(label)
     cy.contains('Choose from presets').click()
     cy.contains('Fixed periods').click()
-    if (period.type) {
+
+    // change period type if applicable
+    if (period.type && period.type !== DEFAULT_FIXED_PERIOD_TYPE) {
         cy.getBySel(
             'period-dimension-fixed-period-filter-period-type-content'
         ).click()
@@ -21,12 +25,30 @@ const selectFixedPeriod = ({ label, period }) => {
             .contains(period.type)
             .click()
     }
+
+    // select the year and the period
     cy.getBySel('period-dimension-fixed-period-filter-year-content')
         .clear()
         .type(period.year)
-    cy.getBySel('period-dimension-transfer-option-content')
+    cy.getBySel('period-dimension-transfer-sourceoptions')
+        .findBySel('period-dimension-transfer-option-content')
         .contains(period.name)
         .dblclick()
+
+    cy.getBySel('period-dimension-transfer-pickedoptions').contains(period.name)
+    cy.getBySel('period-dimension-transfer-sourceoptions')
+        .contains(period.name)
+        .should('not.exist')
+
+    // verify that a previously selected period is visible in the picked options and not in the source options
+    if (selected) {
+        cy.getBySel('period-dimension-transfer-pickedoptions')
+            .containsExact(selected.name)
+            .should('be.visible')
+        cy.getBySel('period-dimension-transfer-sourceoptions')
+            .contains(selected.name)
+            .should('not.exist')
+    }
     cy.getBySel('period-dimension-modal-action-confirm').click()
 }