chore: yarn upgrade, node lts, lint warnings, code smells, cypress

.github/workflows/dhis2-preview-pr.yml

@@ -24,7 +24,7 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
-                  node-version: 18.x
+                  node-version: lts/*
 
             - name: Install dependencies
               run: yarn install --frozen-lockfile

.github/workflows/dhis2-verify-commits.yml

@@ -11,7 +11,7 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
-                  node-version: 18.x
+                  node-version: lts/*
 
             - name: Install dependencies
               run: yarn install --frozen-lockfile
@@ -30,7 +30,7 @@ jobs:
                   fetch-depth: 0
             - uses: actions/setup-node@v4
               with:
-                  node-version: 18.x
+                  node-version: lts/*
 
             - name: Install dependencies
               run: yarn install --frozen-lockfile

.github/workflows/e2e-dev.yml

@@ -42,7 +42,7 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
-                  node-version: 20.x
+                  node-version: lts/*
             - name: Install
               run: yarn install --frozen-lockfile
 

.github/workflows/generate-and-upload-bom.yml

@@ -12,6 +12,6 @@ jobs:
     create-bom:
         uses: dhis2/workflows-platform/.github/workflows/generate-and-upload-bom.yml@v1
         with:
-            node_version: 20
+            node_version: 24
             project_id: '20ef5819-4a79-4d74-bb32-7c0d02af89bf'
         secrets: inherit

.github/workflows/publish-d2-ci.yml

@@ -35,7 +35,7 @@ jobs:
 
             - uses: actions/setup-node@v4
               with:
-                  node-version: 18.x
+                  node-version: lts/*
 
             - name: Install
               run: yarn install --frozen-lockfile

.github/workflows/release.yml

@@ -29,7 +29,7 @@ jobs:
 
             - uses: actions/setup-node@v4
               with:
-                  node-version: 18.x
+                  node-version: lts/*
 
             - name: Install
               run: yarn install --frozen-lockfile

config/testGlobals.js

@@ -0,0 +1,4 @@
+/* eslint-env es2020 */
+if (typeof CSS === 'undefined') {
+    globalThis.CSS = { supports: () => true }
+}

cypress/elements/chart.js

@@ -111,7 +111,7 @@ export const expectChartItemsToHaveLength = (length) =>
     cy.get(highchartsChartItemEl).children().should('have.length', length)
 
 export const expectSVTitleToHaveColor = (color) =>
-    cy.get('text.highcharts-title').should('have.css', 'color', color)
+    cy.get('text.highcharts-title').should('have.css', 'fill', color)
 
 export const expectSVSubtitleToHaveColor = (color) =>
-    cy.get('text.highcharts-subtitle').should('have.css', 'color', color)
+    cy.get('text.highcharts-subtitle').should('have.css', 'fill', color)

cypress/elements/common.js

@@ -12,15 +12,15 @@ const loadingEl = 'dhis2-uicore-circularloader'
 export const expectAppToNotBeLoading = () =>
     cy.getBySel(loadingEl, { timeout: 15000 }).should('not.exist')
 
-export const checkCheckbox = (target) =>
-    cy.getBySel(target).click().find('[type="checkbox"]').should('be.checked')
+export const checkCheckbox = (target) => {
+    cy.getBySel(target).click()
+    cy.getBySel(target).find('[type="checkbox"]').should('be.checked')
+}
 
-export const uncheckCheckbox = (target) =>
-    cy
-        .getBySel(target)
-        .click()
-        .find('[type="checkbox"]')
-        .should('not.be.checked')
+export const uncheckCheckbox = (target) => {
+    cy.getBySel(target).click()
+    cy.getBySel(target).find('[type="checkbox"]').should('not.be.checked')
+}
 
 export const typeInput = (target, text) =>
     cy.getBySel(target).find('input').type(text)

cypress/elements/dimensionModal/dataDimension.js

@@ -61,20 +61,25 @@ export const expectDataDimensionModalWarningToContain = (text) =>
 
 export const expectDataItemToShowDataType = (id, type) =>
     cy
-        .get(`[data-value="${id}"]`)
+        .getBySel(selectableItemsEl)
+        .find(`[data-value="${id}"]`)
         .findBySel(optionContentEl)
         .find('.type')
         .should('contain', type)
 
 export const expectDataItemToShowInfoTable = (id) => {
-    cy.get(`[data-value="${id}"]`).findBySel(optionInfoButtonEl).click()
+    cy.getBySel(selectableItemsEl)
+        .find(`[data-value="${id}"]`)
+        .findBySel(optionInfoButtonEl)
+        .click()
     cy.getBySel(optionInfoTableEl).contains('Name')
     cy.getBySel(optionInfoTableEl).closePopper()
 }
 
 export const expectDataItemToBeInactive = (id) =>
     cy
-        .get(`[data-value="${id}"]`)
+        .getBySel(selectableItemsEl)
+        .find(`[data-value="${id}"]`)
         .findBySel(optionContentEl)
         .should('have.class', 'inactive')
 

cypress/elements/dimensionModal/orgUnitDimension.js

@@ -64,20 +64,14 @@ export const openOrgUnitTreeItem = (itemName) =>
 
 export const toggleOrgUnitLevel = (name) => {
     cy.getBySel(levelSelectEl).click()
-    cy.getBySelLike(levelSelectOptionEl)
-        .contains(name)
-        .click()
-        .closest('[data-test=dhis2-uicore-layer]')
-        .click('center')
+    cy.getBySelLike(levelSelectOptionEl).contains(name).click()
+    cy.get('[data-test=dhis2-uicore-layer]').last().click('topLeft')
 }
 
 export const toggleOrgUnitGroup = (name) => {
     cy.getBySel(groupSelectEl).click()
-    cy.getBySelLike(groupSelectOptionEl)
-        .contains(name)
-        .click()
-        .closest('[data-test=dhis2-uicore-layer]')
-        .click('center')
+    cy.getBySelLike(groupSelectOptionEl).contains(name).click()
+    cy.get('[data-test=dhis2-uicore-layer]').last().click('topLeft')
 }
 
 export const selectUserOrgUnit = (name) => {

cypress/elements/dimensionsPanel.js

@@ -76,10 +76,10 @@ export const expectDimensionToNotHaveSelectedStyle = (dimensionId) =>
         .parent()
         .should('not.have.css', 'background-color', dimSelectedBackgroundColor)
 
-export const expectRecommendedIconToBeVisible = (dimensionId) =>
-    cy
-        .getBySel(getDimensionButtonById(dimensionId))
-        .scrollIntoView()
+export const expectRecommendedIconToBeVisible = (dimensionId) => {
+    cy.getBySel(getDimensionButtonById(dimensionId)).scrollIntoView()
+    cy.getBySel(getDimensionButtonById(dimensionId))
         .findBySel(recommendedIconEl)
         .should('have.length', 1)
         .and('be.visible')
+}

cypress/elements/fileMenu/open.js

@@ -5,13 +5,14 @@ import { FILE_MENU_BUTTON_OPEN, clickFileMenuButton } from './index.js'
 
 const openModalEl = 'open-file-dialog-modal'
 const openModalNameFilterEl = 'open-file-dialog-modal-name-filter'
-const openModalFooterEl = '*[class^="MuiTableFooter"]'
 const openModalToolbarEl = '*[class^="MuiToolbar-root"]'
 const createdByOthersEl = '[data-value=byothers]'
 const openModalItemContainerEl = '*[class^="MuiTableBody"]'
 
-const searchAOByName = (name) =>
-    cy.getBySel(openModalNameFilterEl).find('input').clear().type(name)
+const searchAOByName = (name) => {
+    cy.getBySel(openModalNameFilterEl).find('input').clear()
+    cy.getBySel(openModalNameFilterEl).find('input').type(name)
+}
 
 const clickRandomAO = () =>
     cy
@@ -25,12 +26,11 @@ export const openRandomAO = () => {
     clickMenuBarFileButton()
     clickFileMenuButton(FILE_MENU_BUTTON_OPEN)
     searchAOByName(generateRandomChar())
-    // eslint-disable-next-line
-    cy.wait(500) // FIXME: This is a hack
-    /* 
-                Without the wait Cypress will race the DOM to update the list of available AOs 
-                Hopefully this can be solved once the Open dialog is changed to @dhis2/ui instead)
-            */
+    // Wait for the list to update before clicking a random AO
+    cy.getBySel(openModalEl)
+        .find(openModalItemContainerEl)
+        .children()
+        .should('have.length.greaterThan', 0)
     clickRandomAO()
 }
 
@@ -45,23 +45,13 @@ export const openRandomAOCreatedByOthers = () => {
         .find('*[class^="MuiSelect-select"]')
         .as('owner')
         .click()
-        .then(() =>
-            cy
-                .get(createdByOthersEl)
-                .click()
-                .then(() => {
-                    cy.getBySel(openModalEl)
-                        .find(openModalFooterEl)
-                        .should('contain', '241') // FIXME: This is a hack
-                    /* 
-                            Without the wait Cypress will race the DOM to update the list of available AOs 
-                            Hopefully this can be solved once the Open dialog is changed to @dhis2(ui instead)
-                            Otherwise one possible solution is to fetch the amount of AOs (241) from the server before
-                            starting the tests
-                        */
-                    clickRandomAO()
-                })
-        )
+    cy.get(createdByOthersEl).click()
+    // Wait for the list to update after switching owner filter
+    cy.getBySel(openModalEl)
+        .find(openModalItemContainerEl)
+        .children()
+        .should('have.length.greaterThan', 0)
+    clickRandomAO()
 }
 
 export const openAOByName = (name) => {

cypress/elements/fileMenu/save.js

@@ -35,10 +35,8 @@ export const saveAOAs = (name, description) => {
         typeInput(saveModalNameEl, name)
     }
     if (description) {
-        cy.getBySel(saveModalDescriptionEl)
-            .find('textarea')
-            .clear()
-            .type(description)
+        cy.getBySel(saveModalDescriptionEl).find('textarea').clear()
+        cy.getBySel(saveModalDescriptionEl).find('textarea').type(description)
     }
     cy.getBySel(saveModalSaveButtonEl).click()
 }

cypress/elements/optionsModal/axes.js

@@ -19,13 +19,15 @@ export const setAxisTitleText = (axis, text) =>
 export const setAxisTitleTextModeTo = (textMode) =>
     cy.getBySel(axisTitleRadiosEl).contains(textMode).click()
 
-export const expectAxisTitleToBeValue = (axis, value) =>
-    cy
-        .getBySel(getAxisSelector(axis, titleInputEl))
+export const expectAxisTitleToBeValue = (axis, value) => {
+    cy.getBySel(getAxisSelector(axis, titleInputEl))
         .find('input')
         .scrollIntoView()
+    cy.getBySel(getAxisSelector(axis, titleInputEl))
+        .find('input')
         .should('be.visible')
         .and('have.value', value)
+}
 
 export const setAxisRangeMinValue = (axis, value) =>
     cy

cypress/elements/optionsModal/fontStyles.js

@@ -31,6 +31,8 @@ export const changeColor = (prefix, color) => {
         .find('input[type=color]')
         .invoke('val', color)
         .trigger('input', { force: true }) // use force as the input has style "pointer-events: none"
+    cy.getBySelLike(getColorButtonEl(prefix))
+        .find('input[type=color]')
         .invoke('attr', 'value')
         .should('eq', color)
 }

cypress/integration/options/legend.cy.js

@@ -157,7 +157,6 @@ describe('Options - Legend', () => {
         const TEST_ITEM = TEST_ITEMS[0]
         const EXPECTED_STANDARD_TEXT_COLOR = '#212934'
         const EXPECTED_CONTRAST_TEXT_COLOR = '#ffffff'
-        const EXPECTED_CONTRAST_TEXT_COLOR_RGB = 'rgb(255, 255, 255)'
         const EXPECTED_BACKGROUND_COLOR_1 = '#FFFFB2'
         const EXPECTED_TEXT_COLOR_1 = '#FFFFB2'
         const EXPECTED_BACKGROUND_COLOR_2 = '#B3402B'
@@ -166,6 +165,7 @@ describe('Options - Legend', () => {
         const EXPECTED_CUSTOM_TITLE_COLOR_RGB = 'rgb(255, 119, 0)'
         const EXPECTED_CUSTOM_SUBTITLE_COLOR = '#ffaa00'
         const EXPECTED_CUSTOM_SUBTITLE_COLOR_RGB = 'rgb(255, 170, 0)'
+        const EXPECTED_CONTRAST_TEXT_COLOR_RGB = 'rgb(255, 255, 255)'
         const TEST_LEGEND_SET_WITH_CONTRAST = 'Age 15y interval'
         const EXPECTED_STANDARD_TITLE_COLOR = 'rgb(33, 41, 52)'
         const EXPECTED_STANDARD_SUBTITLE_COLOR = 'rgb(74, 87, 104)'

cypress/utils/window.js

@@ -54,7 +54,7 @@ export const expectWindowConfigAxisTitleToBeValue = (
         .its(axisType)
         .its(axisIndex)
         .its(TITLE_PROP)
-        .should('eql', value)
+        .should('deep.include', value)
 
 export const expectWindowConfigAxisLabelsToBeValue = (
     axisType,

jest.config.js

@@ -2,6 +2,7 @@ module.exports = {
     transformIgnorePatterns: [
         'node_modules/(?!(lodash-es|@dhis2/d2-ui-[a-z-]+)/)',
     ],
+    setupFiles: ['<rootDir>/config/testGlobals.js'],
     setupFilesAfterEnv: ['<rootDir>/config/testSetup.js'],
     testRunner: 'jest-circus/runner',
     reporters: ['default'],

package.json

@@ -48,7 +48,7 @@
         "typescript-eslint": "^8.35.0"
     },
     "dependencies": {
-        "@dhis2/analytics": "^29.4.1",
+        "@dhis2/analytics": "^29.4.2",
         "@dhis2/app-runtime": "^3.14.1",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",
         "@dhis2/d2-i18n": "^1.1.0",