chore: move files to e2e and move to cypress.config.js

cypress.config.js

@@ -0,0 +1,67 @@
+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')
+const {
+    excludeByVersionTags,
+} = require('./cypress/plugins/excludeByVersionTags.js')
+
+async function setupNodeEvents(on, config) {
+    await addCucumberPreprocessorPlugin(on, config)
+    chromeAllowXSiteCookies(on, config)
+    excludeByVersionTags(on, config)
+
+    if (!config.env.dhis2InstanceVersion) {
+        throw new Error(
+            'dhis2InstanceVersion is missing. Check the README for more information.'
+        )
+    }
+
+    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: 15000,
+        /* Globally disable test isolation because the test suite
+         * contains many tests with sequential steps */
+        testIsolation: false,
+        // Record video
+        video: true,
+        /* Only compress and upload videos for failures.
+         * This will save execution time and reduce the risk
+         * out-of-memory issues on the CI machine */
+        videoUploadOnPasses: false,
+        // 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/integration/common/edit/add_dashboard_items.js → cypress/e2e/common/edit/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/integration/common/edit/confirm_discard_changes.js → cypress/e2e/common/edit/confirm_discard_changes.js

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

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

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

cypress/e2e/common/index.js

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

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

@@ -1,15 +1,18 @@
-import { Then } from 'cypress-cucumber-preprocessor/steps'
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
 import { dashboards } from '../../../assets/backends/index.js'
-// import { chartSel } from '../../../elements/dashboardItem.js'
+import { gridItemSel, chartSel } from '../../../elements/dashboardItem.js'
 import { dashboardTitleSel } from '../../../elements/viewDashboard.js'
-// import { EXTENDED_TIMEOUT } from '../../../support/utils.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)
-    // FIXME
-    // cy.get(chartSel, EXTENDED_TIMEOUT).should('exist')
+    cy.get(gridItemSel)
+        .first()
+        .getIframeBody()
+        .find(chartSel, EXTENDED_TIMEOUT)
+        .should('exist')
 })

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

@@ -1,4 +1,4 @@
-import { When } from 'cypress-cucumber-preprocessor/steps'
+import { When } from '@badeball/cypress-cucumber-preprocessor'
 import {
     unselectedItemsSel,
     filterDimensionsPanelSel,

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

@@ -1,4 +1,4 @@
-import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+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'

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

@@ -1,4 +1,4 @@
-import { When } from 'cypress-cucumber-preprocessor/steps'
+import { When } from '@badeball/cypress-cucumber-preprocessor'
 import { filterBadgeSel } from '../../../elements/dashboardFilter.js'
 
 When('I click on the {string} filter badge', (filterName) => {

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

@@ -1,4 +1,4 @@
-import { When } from 'cypress-cucumber-preprocessor/steps'
+import { When } from '@badeball/cypress-cucumber-preprocessor'
 import { dashboardTitleSel } from '../../../elements/viewDashboard.js'
 
 When('I click to exit print preview', () => {

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

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

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

@@ -1,6 +1,6 @@
-import { Given } from 'cypress-cucumber-preprocessor/steps'
+import { Given } from '@badeball/cypress-cucumber-preprocessor'
 import { dashboards } from '../../../assets/backends/index.js'
-// import { chartSel } from '../../../elements/dashboardItem.js'
+import { gridItemSel, chartSel } from '../../../elements/dashboardItem.js'
 import {
     dashboardTitleSel,
     dashboardChipSel,
@@ -15,7 +15,9 @@ Given('I open the {string} dashboard', (title) => {
     })
 
     cy.get(dashboardTitleSel).should('be.visible').and('contain', title)
-    // FIXME
-    // cy.get(chartSel, EXTENDED_TIMEOUT).should('exist')
-    cy.wait(3000) // eslint-disable-line cypress/no-unnecessary-waiting
+    cy.get(`${gridItemSel}.VISUALIZATION`)
+        .first()
+        .getIframeBody()
+        .find(chartSel, EXTENDED_TIMEOUT)
+        .should('exist')
 })

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

@@ -1,4 +1,4 @@
-import { Then } from 'cypress-cucumber-preprocessor/steps'
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
 import { dashboards } from '../../../assets/backends/sierraLeone_236.js'
 
 Then('the print layout displays for {string} dashboard', (title) => {

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

@@ -1,4 +1,4 @@
-import { Given } from 'cypress-cucumber-preprocessor/steps'
+import { Given } from '@badeball/cypress-cucumber-preprocessor'
 import { newButtonSel } from '../../../elements/viewDashboard.js'
 import { EXTENDED_TIMEOUT } from '../../../support/utils.js'
 

cypress/integration/common/view/the_dashboard_description_is_(not)_displayed.js → cypress/e2e/common/view/the_dashboard_description_is_(not)_displayed.js

@@ -1,4 +1,4 @@
-import { Then } from 'cypress-cucumber-preprocessor/steps'
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
 import { dashboardDescriptionSel } from '../../../elements/viewDashboard.js'
 
 Then('the dashboard description is not displayed', () => {

cypress/integration/edit/edit_dashboard.feature → cypress/e2e/edit/edit_dashboard.feature

@@ -65,13 +65,12 @@ Feature: Creating, editing and deleting dashboard
     #        When I click to hide the description
     #        Then the dashboard description is not displayed
 
-    # FIXME
-    # @nonmutating
-    # Scenario: I move an item on a dashboard
-    #     Given I open existing dashboard
-    #     When I choose to edit dashboard
-    #     # And the chart item is displayed
-    #     Then no analytics requests are made when item is moved
+    @nonmutating
+    Scenario: I move an item on a dashboard
+        Given I open existing dashboard
+        When I choose to edit dashboard
+        And the chart item is displayed
+        Then no analytics requests are made when item is moved
 
     # @mutating
     # Scenario: I add translations to a dashboard and save dashboard

cypress/integration/edit/edit_dashboard/edit_dashboard.js → cypress/e2e/edit/edit_dashboard/edit_dashboard.js

@@ -1,8 +1,8 @@
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
 import {
     gridItemSel,
-    // chartSel,
-    // chartSubtitleSel,
+    chartSel,
+    chartSubtitleSel,
 } from '../../../elements/dashboardItem.js'
 import {
     confirmActionDialogSel,
@@ -152,10 +152,13 @@ Then('the dashboard is deleted and first starred dashboard displayed', () => {
 Scenario: I move an item on a dashboard
 */
 
-// FIXME
-// Then('the chart item is displayed', () => {
-//     cy.get(chartSel, EXTENDED_TIMEOUT).should('exist')
-// })
+Then('the chart item is displayed', () => {
+    cy.get(`${gridItemSel}.VISUALIZATION`)
+        .first()
+        .getIframeBody()
+        .find(chartSel, EXTENDED_TIMEOUT)
+        .should('exist')
+})
 
 Then('no analytics requests are made when item is moved', () => {
     const WRONG_SUBTITLE = 'WRONG_SUBTITLE'
@@ -175,8 +178,10 @@ Then('no analytics requests are made when item is moved', () => {
         .trigger('mousemove', { clientX: 400 })
         .trigger('mouseup')
 
-    // FIXME
-    // cy.get(chartSubtitleSel, EXTENDED_TIMEOUT)
-    //     .contains(WRONG_SUBTITLE)
-    //     .should('not.exist')
+    cy.get(gridItemSel)
+        .first()
+        .getIframeBody()
+        .find(chartSubtitleSel, EXTENDED_TIMEOUT)
+        .contains(WRONG_SUBTITLE)
+        .should('not.exist')
 })

cypress/e2e/edit/edit_dashboard/index.js

@@ -0,0 +1 @@
+'../../common/index.js'

cypress/integration/edit/edit_dashboard/sharing.js → cypress/e2e/edit/edit_dashboard/sharing.js

@@ -1,4 +1,4 @@
-import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
 import { getSharingDialogUserSearch } from '../../../elements/sharingDialog.js'
 import { dashboardTitleSel } from '../../../elements/viewDashboard.js'
 import { EXTENDED_TIMEOUT } from '../../../support/utils.js'

cypress/integration/edit/edit_dashboard/show_description.js → cypress/e2e/edit/edit_dashboard/show_description.js

@@ -1,4 +1,4 @@
-import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
 import { clickViewActionButton } from '../../../elements/viewDashboard.js'
 import { getApiBaseUrl } from '../../../support/utils.js'
 
@@ -21,7 +21,7 @@ before(() => {
 })
 
 When('I click to show description', () => {
-    cy.intercept('PUT', 'userDataStore/dashboard/showDescription').as(
+    cy.intercept('PUT', '**/userDataStore/dashboard/showDescription').as(
         'toggleDescription'
     )
 
@@ -44,7 +44,7 @@ When('I click to hide the description', () => {
 
 // Error scenario
 When('clicking to show description fails', () => {
-    cy.intercept('PUT', 'userDataStore/dashboard/showDescription', {
+    cy.intercept('PUT', '**/userDataStore/dashboard/showDescription', {
         statusCode: RESP_CODE_FAIL,
     }).as('showDescriptionFails')
 

cypress/integration/edit/edit_dashboard/star_dashboard.js → cypress/e2e/edit/edit_dashboard/star_dashboard.js

@@ -1,4 +1,4 @@
-import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
 import {
     starSel,
     dashboardStarredSel,
@@ -10,14 +10,14 @@ import { TEST_DASHBOARD_TITLE } from './edit_dashboard.js'
 
 // Scenario: I star the dashboard
 When('I click to star the dashboard', () => {
-    cy.intercept('POST', `/favorite`).as('starDashboard')
+    cy.intercept('POST', '**/favorite').as('starDashboard')
 
     cy.get(starSel).click()
     cy.wait('@starDashboard').its('response.statusCode').should('eq', 200)
 })
 
 When('I click to unstar the dashboard', () => {
-    cy.intercept('DELETE', `/favorite`).as('unstarDashboard')
+    cy.intercept('DELETE', '**/favorite').as('unstarDashboard')
 
     cy.get(starSel).click()
     cy.wait('@unstarDashboard').its('response.statusCode').should('eq', 200)

cypress/integration/edit/edit_dashboard/translate_dashboard.js → cypress/e2e/edit/edit_dashboard/translate_dashboard.js

@@ -1,4 +1,4 @@
-import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
 import { clickEditActionButton } from '../../../elements/editDashboard.js'
 import {
     dashboardTitleSel,

cypress/integration/edit/edit_errors/error_during_delete.js → cypress/e2e/edit/edit_errors/error_during_delete.js

@@ -1,11 +1,11 @@
-import { When } from 'cypress-cucumber-preprocessor/steps'
+import { When } from '@badeball/cypress-cucumber-preprocessor'
 import {
     confirmActionDialogSel,
     clickEditActionButton,
 } from '../../../elements/editDashboard.js'
 
 When('A 500 error is thrown when I delete the dashboard', () => {
-    cy.intercept('DELETE', '/dashboards', { statusCode: 500 })
+    cy.intercept('DELETE', '**/dashboards/*', { statusCode: 500 })
     clickEditActionButton('Delete')
     cy.get(confirmActionDialogSel).find('button').contains('Delete').click()
 })

cypress/integration/edit/edit_errors/error_during_save.js → cypress/e2e/edit/edit_errors/error_during_save.js

@@ -1,8 +1,8 @@
-import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
 import { clickEditActionButton } from '../../../elements/editDashboard.js'
 
 When("I save dashboard that I don't have access to save", () => {
-    cy.intercept('PUT', '/dashboards', { statusCode: 409 })
+    cy.intercept('PUT', '**/dashboards/*', { statusCode: 409 })
     clickEditActionButton('Save changes')
 })
 Then('I remain in edit mode and error message is displayed', () => {
@@ -14,6 +14,6 @@ Then('I remain in edit mode and error message is displayed', () => {
 })
 
 When('A 500 error is thrown when I save the dashboard', () => {
-    cy.intercept('PUT', '/dashboards', { statusCode: 500 })
+    cy.intercept('PUT', '**/dashboards/*', { statusCode: 500 })
     clickEditActionButton('Save changes')
 })

cypress/e2e/edit/edit_errors/index.js

@@ -0,0 +1 @@
+'../../common/index.js'

cypress/integration/edit/filter_restrict/filter_restrict.js → cypress/e2e/edit/filter_restrict/filter_restrict.js

@@ -1,4 +1,4 @@
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
 import { filterDimensionsPanelSel } from '../../../elements/dashboardFilter.js'
 import {
     titleInputSel,

cypress/e2e/edit/filter_restrict/index.js

@@ -0,0 +1 @@
+'../../common/index.js'

cypress/integration/view/dashboard_filter.feature → cypress/e2e/view/dashboard_filter.feature

@@ -36,4 +36,4 @@ Feature: Dashboard filter
         When I choose to edit dashboard
         And I choose to delete dashboard
         When I confirm delete
-        Then different dashboard displays in view mode
+        Then different dashboard displays in view mode