chore: cypress 13 upgrade

.cypress-cucumber-preprocessorrc.json

@@ -0,0 +1,6 @@
+{
+    "nonGlobalStepDefinitions": true,
+    "e2e": {
+        "stepDefinitions": ["cypress/e2e/**/*.{js,ts}"]
+    }
+}

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

@@ -24,7 +24,7 @@ jobs:
             - uses: actions/checkout@v2
             - uses: actions/setup-node@v1
               with:
-                  node-version: 14.x
+                  node-version: 18.x
 
             - uses: c-hive/gha-yarn-cache@v1
             - run: yarn install --frozen-lockfile

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

@@ -86,76 +86,95 @@ jobs:
             - name: Test
               run: yarn d2-app-scripts test
 
-    e2e-prod:
-        runs-on: ubuntu-latest
-        needs: [test, setup-matrix]
+    call-workflow-e2e-prod:
         if: "!contains(github.event.head_commit.message, '[skip ci]')"
-
-        strategy:
-            fail-fast: false
-            matrix:
-                spec-group: ${{ fromJson(needs.setup-matrix.outputs.matrix) }}
-
-        env:
-            SHOULD_RECORD: ${{ contains(github.event.head_commit.message, '[e2e record]') || contains(join(github.event.pull_request.labels.*.name), 'e2e record') }}
-
-        steps:
-            - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
-              with:
-                  node-version: 18.x
-
-            - uses: actions/cache@v2
-              id: yarn-cache
-              with:
-                  path: '**/node_modules'
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('patches/*.patch') }}
-
-            - name: Set Cypress Record Environment Variables
-              if: env.SHOULD_RECORD == 'true'
-              run: |
-                  echo "CYPRESS_GROUP=e2e-${{ matrix.spec-group.id }}" >> $GITHUB_ENV
-                  echo "CYPRESS_TAG=${{ github.event_name }}" >> $GITHUB_ENV
-                  echo "CYPRESS_CI_BUILD_ID=${{ github.run_id }}" >> $GITHUB_ENV
-
-            - name: Debug Environment Variables
-              run: |
-                  echo "SHOULD_RECORD=${{ env.SHOULD_RECORD }}"
-                  echo "CI Build ID=${{ github.run_id }}"
-                  echo "Computed Group=${{ env.SHOULD_RECORD == 'true' && env.CYPRESS_GROUP || '' }}"
-                  echo "Computed Tag=${{ env.SHOULD_RECORD == 'true' && env.CYPRESS_TAG || '' }}"
-                  echo "Computed CI Build ID=${{ env.SHOULD_RECORD == 'true' && env.CYPRESS_CI_BUILD_ID || '' }}"
-                  echo "Spec=${{ join(matrix.spec-group.tests, ',') }}"
-
-            - name: End-to-End tests
-              uses: cypress-io/github-action@v2
-              with:
-                  start: ${{ env.SERVER_START_CMD }}
-                  wait-on: ${{ env.SERVER_URL }}
-                  wait-on-timeout: 300
-                  cache-key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('patches/*.patch') }}
-                  record: ${{ env.SHOULD_RECORD }}
-                  parallel: ${{ env.SHOULD_RECORD }}
-                  group: ${{ env.SHOULD_RECORD == 'true' && env.CYPRESS_GROUP || '' }}
-                  tag: ${{ env.SHOULD_RECORD == 'true' && env.CYPRESS_TAG || '' }}
-                  ci-build-id: ${{ env.SHOULD_RECORD == 'true' && env.CYPRESS_CI_BUILD_ID || '' }}
-                  spec: ${{ join(matrix.spec-group.tests, ',') }}
-              env:
-                  CI: true
-                  CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-                  COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
-                  SERVER_START_CMD: 'yarn cypress:start'
-                  SERVER_URL: 'http://localhost:3000'
-                  cypress_dhis2_api_stub_mode: 'DISABLED'
-                  REACT_APP_DHIS2_BASE_URL: ${{ secrets.CYPRESS_DHIS2_BASE_URL_41 }}
-                  cypress_dhis2_base_url: ${{ secrets.CYPRESS_DHIS2_BASE_URL_41}}
-                  cypress_dhis2_username: ${{ secrets.CYPRESS_DHIS2_USERNAME }}
-                  cypress_dhis2_password: ${{ secrets.CYPRESS_DHIS2_PASSWORD }}
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        needs: [build, lint, test, setup-matrix]
+        uses: dhis2/workflows/.github/workflows/analytics-e2e-tests-prod.yml@master
+        with:
+            should_record: ${{ contains(github.event.head_commit.message, '[e2e record]') || contains(join(github.event.pull_request.labels.*.name), 'e2e record')}}
+            spec-group: ${{ needs.setup-matrix.outputs.matrix }}
+        secrets:
+            username: ${{ secrets.CYPRESS_DHIS2_USERNAME }}
+            password: ${{ secrets.CYPRESS_DHIS2_PASSWORD }}
+            recordkey: ${{ secrets.CYPRESS_RECORD_KEY }}
+            reportportal_api_key: ${{ secrets.REPORTPORTAL_API_KEY }}
+            reportportal_endpoint: ${{ vars.REPORTPORTAL_ENDPOINT }}
+            reportportal_project: ${{ vars.REPORTPORTAL_PROJECT }}
+
+    # e2e-prod:
+    #     runs-on: ubuntu-latest
+    #     needs: [test, setup-matrix]
+    #     if: "!contains(github.event.head_commit.message, '[skip ci]')"
+
+    #     strategy:
+    #         fail-fast: false
+    #         matrix:
+    #             spec-group: ${{ fromJson(needs.setup-matrix.outputs.matrix) }}
+
+    #     env:
+    #         SHOULD_RECORD: ${{ contains(github.event.head_commit.message, '[e2e record]') || contains(join(github.event.pull_request.labels.*.name), 'e2e record') }}
+
+    #     steps:
+    #         - uses: actions/checkout@v3
+    #         - uses: actions/setup-node@v3
+    #           with:
+    #               node-version: 18.x
+
+    #         - uses: actions/cache@v2
+    #           id: yarn-cache
+    #           with:
+    #               path: '**/node_modules'
+    #               key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('patches/*.patch') }}
+
+    #         - name: Set Cypress Record Environment Variables
+    #           if: env.SHOULD_RECORD == 'true'
+    #           run: |
+    #               echo "CYPRESS_GROUP=e2e-${{ matrix.spec-group.id }}" >> $GITHUB_ENV
+    #               echo "CYPRESS_TAG=${{ github.event_name }}" >> $GITHUB_ENV
+    #               echo "CYPRESS_CI_BUILD_ID=${{ github.run_id }}" >> $GITHUB_ENV
+
+    #         - name: Debug Environment Variables
+    #           run: |
+    #               echo "SHOULD_RECORD=${{ env.SHOULD_RECORD }}"
+    #               echo "CI Build ID=${{ github.run_id }}"
+    #               echo "Computed Group=${{ env.SHOULD_RECORD == 'true' && env.CYPRESS_GROUP || '' }}"
+    #               echo "Computed Tag=${{ env.SHOULD_RECORD == 'true' && env.CYPRESS_TAG || '' }}"
+    #               echo "Computed CI Build ID=${{ env.SHOULD_RECORD == 'true' && env.CYPRESS_CI_BUILD_ID || '' }}"
+    #               echo "Spec=${{ join(matrix.spec-group.tests, ',') }}"
+
+    #         - name: End-to-End tests
+    #           uses: cypress-io/github-action@v5
+    #           with:
+    #               start: ${{ env.SERVER_START_CMD }}
+    #               wait-on: ${{ env.SERVER_URL }}
+    #               wait-on-timeout: 300
+    #               cache-key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('patches/*.patch') }}
+    #               record: ${{ env.SHOULD_RECORD }}
+    #               parallel: ${{ env.SHOULD_RECORD }}
+    #               group: ${{ env.SHOULD_RECORD == 'true' && env.CYPRESS_GROUP || '' }}
+    #               tag: ${{ env.SHOULD_RECORD == 'true' && env.CYPRESS_TAG || '' }}
+    #               ci-build-id: ${{ env.SHOULD_RECORD == 'true' && env.CYPRESS_CI_BUILD_ID || '' }}
+    #               spec: ${{ join(matrix.spec-group.tests, ',') }}
+    #           env:
+    #               CI: true
+    #               CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+    #               COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
+    #               SERVER_START_CMD: 'yarn cy:start'
+    #               SERVER_URL: 'http://localhost:3000'
+    #               cypress_dhis2_api_stub_mode: 'DISABLED'
+    #               REACT_APP_DHIS2_BASE_URL: ${{ secrets.CYPRESS_DHIS2_BASE_URL_41 }}
+    #               cypress_dhis2_base_url: ${{ secrets.CYPRESS_DHIS2_BASE_URL_41}}
+    #               cypress_dhis2BaseUrl: ${{ secrets.CYPRESS_DHIS2_BASE_URL_41}}
+    #               CYPRESS_dhis2Username: ${{ secrets.CYPRESS_DHIS2_USERNAME }}
+    #               CYPRESS_dhis2Password: ${{ secrets.CYPRESS_DHIS2_PASSWORD }}
+    #               CYPRESS_dhis2InstanceVersion: '2.41'
+    #               cypress_dhis2_username: ${{ secrets.CYPRESS_DHIS2_USERNAME }}
+    #               cypress_dhis2_password: ${{ secrets.CYPRESS_DHIS2_PASSWORD }}
+    #               GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
     release:
         runs-on: ubuntu-latest
-        needs: e2e-prod
+        needs: call-workflow-e2e-prod
         if: |
             !github.event.push.repository.fork &&
             github.actor != 'dependabot[bot]' &&

README.md

@@ -21,7 +21,7 @@ REACT_APP_DHIS2_BASE_URL=http://localhost:8080
 
 ##### api authentication: REACT_APP_DHIS2_AUTHORIZATION
 
-In order for maps, event reports and event charts to display in development mode, you also need to provide the authenticaion credentials for the api. The following example is the base64 encoded value for the username/password combination of `admin:district`:
+In order for event reports and event charts to display in development mode, you also need to provide the authenticaion credentials for the api. The following example is the base64 encoded value for the username/password combination of `admin:district`:
 
 ```
 REACT_APP_DHIS2_AUTHORIZATION=Basic YWRtaW46ZGlzdHJpY3Q=

cypress.config.js

@@ -0,0 +1,53 @@
+const {
+    addCucumberPreprocessorPlugin,
+} = require('@badeball/cypress-cucumber-preprocessor')
+const createEsbuildPlugin = require('@badeball/cypress-cucumber-preprocessor/esbuild')
+const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
+const { chromeAllowXSiteCookies } = require('@dhis2/cypress-plugins')
+const { defineConfig } = require('cypress')
+
+async function setupNodeEvents(on, config) {
+    await addCucumberPreprocessorPlugin(on, config)
+    chromeAllowXSiteCookies(on, config)
+
+    on(
+        'file:preprocessor',
+        createBundler({
+            plugins: [createEsbuildPlugin.default(config)],
+        })
+    )
+
+    return config
+}
+
+module.exports = defineConfig({
+    projectId: '5fk191',
+    chromeWebSecurity: false,
+    e2e: {
+        setupNodeEvents,
+        baseUrl: 'http://localhost:3000',
+        specPattern: 'cypress/e2e/*.feature',
+        viewportWidth: 1280,
+        viewportHeight: 800,
+        defaultCommandTimeout: 45000,
+        /* Globally disable test isolation because the test suite
+         * contains many tests with sequential steps */
+        testIsolation: false,
+        // Record video
+        video: true,
+        // Enabled to reduce the risk of out-of-memory issues
+        experimentalMemoryManagement: true,
+        // Set to a low number to reduce the risk of out-of-memory issues
+        numTestsKeptInMemory: 5,
+        /* When allowing 1 retry on CI, the test suite will pass if
+         * it's flaky. And/but we also get to identify flaky tests on the
+         * Cypress Dashboard. */
+        retries: {
+            runMode: 1,
+            openMode: 0,
+        },
+    },
+    env: {
+        networkMode: 'live',
+    },
+})

cypress/e2e/common/SL_dashboard_displays_in_view_mode.js

@@ -0,0 +1,18 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+import { dashboards } from '../../assets/backends/index.js'
+// import { gridItemSel, chartSel } from '../../elements/dashboardItem.js'
+import { dashboardTitleSel } from '../../elements/viewDashboard.js'
+// import { EXTENDED_TIMEOUT } from '../../support/utils.js'
+
+Then('the {string} dashboard displays in view mode', (title) => {
+    cy.location().should((loc) => {
+        expect(loc.hash).to.equal(dashboards[title].route)
+    })
+
+    cy.get(dashboardTitleSel).should('be.visible').and('contain', title)
+    // cy.get(gridItemSel)
+    //     .first()
+    //     .getIframeBody()
+    //     .find(chartSel, EXTENDED_TIMEOUT)
+    //     .should('exist')
+})

cypress/integration/common/view/add_a_FILTERTYPE_filter.js → cypress/e2e/common/add_a_FILTERTYPE_filter.js

@@ -1,10 +1,10 @@
-import { When } from 'cypress-cucumber-preprocessor/steps'
+import { When } from '@badeball/cypress-cucumber-preprocessor'
 import {
     unselectedItemsSel,
     filterDimensionsPanelSel,
     orgUnitTreeSel,
-} from '../../../elements/dashboardFilter.js'
-import { EXTENDED_TIMEOUT } from '../../../support/utils.js'
+} from '../../elements/dashboardFilter.js'
+import { EXTENDED_TIMEOUT } from '../../support/utils.js'
 
 const PERIOD = 'Last 6 months'
 const OU_ID = 'ImspTQPwCqd' //Sierra Leone

cypress/integration/common/edit/add_dashboard_items.js → cypress/e2e/common/add_dashboard_items.js

@@ -1,4 +1,4 @@
-import { When } from 'cypress-cucumber-preprocessor/steps'
+import { When } from '@badeball/cypress-cucumber-preprocessor'
 
 When('dashboard items are added', () => {
     cy.get('[data-test="item-search"]').click()

cypress/e2e/common/choose_to_delete_dashboard.js

@@ -0,0 +1,6 @@
+import { When } from '@badeball/cypress-cucumber-preprocessor'
+import { clickEditActionButton } from '../../elements/editDashboard.js'
+
+When('I choose to delete dashboard', () => {
+    clickEditActionButton('Delete')
+})

cypress/integration/common/view/choose_to_edit_dashboard.js → cypress/e2e/common/choose_to_edit_dashboard.js

@@ -1,7 +1,7 @@
-import { When, Then } from 'cypress-cucumber-preprocessor/steps'
-import { titleInputSel } from '../../../elements/editDashboard.js'
-import { titleBarSel } from '../../../elements/viewDashboard.js'
-import { EXTENDED_TIMEOUT } from '../../../support/utils.js'
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { titleInputSel } from '../../elements/editDashboard.js'
+import { titleBarSel } from '../../elements/viewDashboard.js'
+import { EXTENDED_TIMEOUT } from '../../support/utils.js'
 
 const ROUTE_EDIT = 'edit'
 

cypress/integration/common/view/click_on_the_FILTERTYPE_filter_badge.js → cypress/e2e/common/click_on_the_FILTERTYPE_filter_badge.js

@@ -1,5 +1,5 @@
-import { When } from 'cypress-cucumber-preprocessor/steps'
-import { filterBadgeSel } from '../../../elements/dashboardFilter.js'
+import { When } from '@badeball/cypress-cucumber-preprocessor'
+import { filterBadgeSel } from '../../elements/dashboardFilter.js'
 
 When('I click on the {string} filter badge', (filterName) => {
     cy.get(filterBadgeSel).find('span:visible').contains(filterName).click()

cypress/e2e/common/close_item_selector.js

@@ -0,0 +1,9 @@
+import { When } from '@badeball/cypress-cucumber-preprocessor'
+import { itemMenuSel } from '../../elements/editDashboard.js'
+
+When('I close the item selector', () => {
+    //close modal
+    cy.get('[data-test="dhis2-uicore-layer"]').click('topLeft')
+
+    cy.get(itemMenuSel).should('not.exist')
+})

cypress/e2e/common/confirm_delete.js

@@ -0,0 +1,6 @@
+import { When } from '@badeball/cypress-cucumber-preprocessor'
+import { confirmActionDialogSel } from '../../elements/editDashboard.js'
+
+When('I confirm delete', () => {
+    cy.get(confirmActionDialogSel).find('button').contains('Delete').click()
+})

cypress/integration/common/edit/confirm_discard_changes.js → cypress/e2e/common/confirm_discard_changes.js

@@ -1,5 +1,5 @@
-import { When } from 'cypress-cucumber-preprocessor/steps'
-import { confirmActionDialogSel } from '../../../elements/editDashboard.js'
+import { When } from '@badeball/cypress-cucumber-preprocessor'
+import { confirmActionDialogSel } from '../../elements/editDashboard.js'
 
 When('I confirm I want to discard changes', () => {
     cy.get(confirmActionDialogSel)

cypress/integration/common/view/exit_print_layout.js → cypress/e2e/common/exit_print_layout.js

@@ -1,5 +1,5 @@
-import { When } from 'cypress-cucumber-preprocessor/steps'
-import { dashboardTitleSel } from '../../../elements/viewDashboard.js'
+import { When } from '@badeball/cypress-cucumber-preprocessor'
+import { dashboardTitleSel } from '../../elements/viewDashboard.js'
 
 When('I click to exit print preview', () => {
     cy.get('button').not('.small').contains('Exit print preview').click()

cypress/e2e/common/exit_without_saving.js

@@ -0,0 +1,6 @@
+import { When } from '@badeball/cypress-cucumber-preprocessor'
+import { clickEditActionButton } from '../../elements/editDashboard.js'
+
+When('I click Exit without saving', () => {
+    clickEditActionButton('Exit without saving')
+})

cypress/e2e/common/index.js

@@ -0,0 +1,14 @@
+import './before_each_visit_root.js'
+import './add_dashboard_items.js'
+import './confirm_discard_changes.js'
+import './exit_without_saving.js'
+import './add_a_FILTERTYPE_filter.js'
+import './choose_to_edit_dashboard.js'
+import './click_on_the_FILTERTYPE_filter_badge.js'
+import './exit_print_layout.js'
+import './open_print_layout.js'
+import './open_the_SL_dashboard.js'
+import './print_layout_displays.js'
+import './start_new_dashboard.js'
+import './the_dashboard_description_is_(not)_displayed.js'
+import './SL_dashboard_displays_in_view_mode.js'

cypress/e2e/common/message_dashboard_not_found.js

@@ -0,0 +1,7 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
+import { dashboardTitleSel } from '../../elements/viewDashboard.js'
+
+Then('a message displays informing that the dashboard is not found', () => {
+    cy.contains('Requested dashboard not found').should('be.visible')
+    cy.get(dashboardTitleSel).should('not.exist')
+})

cypress/integration/common/view/open_print_layout.js → cypress/e2e/common/open_print_layout.js

@@ -1,5 +1,5 @@
-import { When } from 'cypress-cucumber-preprocessor/steps'
-import { clickViewActionButton } from '../../../elements/viewDashboard.js'
+import { When } from '@badeball/cypress-cucumber-preprocessor'
+import { clickViewActionButton } from '../../elements/viewDashboard.js'
 
 When('I click to preview the print layout', () => {
     clickViewActionButton('More')