feat: add option to open datasets in maps-app [CLIM-155]

.eslintrc.js

@@ -13,4 +13,28 @@ module.exports = {
     settings: {
         'import/resolver': { node: { extensions: ['.js', '.jsx'] } },
     },
+    overrides: [
+        {
+            files: [
+                '**/*.cy.{js,jsx,ts,tsx}',
+                '**/cypress/**/*.{js,jsx,ts,tsx}',
+            ],
+            env: {
+                'cypress/globals': true,
+            },
+            extends: ['plugin:cypress/recommended'],
+            plugins: ['cypress'],
+            rules: {
+                // Allow Cypress globals like cy, Cypress, expect, etc.
+                'no-undef': 'off',
+                // Cypress-specific rules
+                'cypress/no-assigning-return-values': 'error',
+                'cypress/no-unnecessary-waiting': 'error',
+                'cypress/assertion-before-screenshot': 'warn',
+                'cypress/no-force': 'warn',
+                'cypress/no-async-tests': 'error',
+                'cypress/no-pause': 'error',
+            },
+        },
+    ],
 }

.github/workflows/test-and-release.yml

@@ -15,17 +15,47 @@ jobs:
     test:
         uses: dhis2/workflows-platform/.github/workflows/test.yml@v1
 
-    # -- e2e tests are currently not implemented
-    # e2e:
-    #     uses: dhis2/workflows-platform/.github/workflows/legacy-e2e.yml@v1
-    #     # Skips forks and dependabot PRs
-    #     if: '!github.event.push.repository.fork'
-    #     secrets: inherit
-    #     with:
-    #         api_version: 42
+    cypress-component:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+            - name: Install dependencies
+              run: yarn install --frozen-lockfile
+            - name: Run Cypress component tests
+              run: yarn cy:run:component
+
+    cypress-e2e:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+            - name: Install dependencies
+              run: yarn install --frozen-lockfile
+            - name: Run Cypress e2e tests
+              uses: cypress-io/github-action@v6
+              with:
+                  start: yarn start
+                  wait-on: 'http://localhost:3000'
+                  wait-on-timeout: 300
+                  browser: chrome
+                  record: true
+              env:
+                  CI: true
+                  BROWSER: none
+                  CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+                  CYPRESS_dhis2BaseUrl: https://test.e2e.dhis2.org/anly-e2e-42
+                  CYPRESS_dhis2InstanceVersion: 42
+                  CYPRESS_dhis2Username: ${{ secrets.CYPRESS_DHIS2_USERNAME }}
+                  CYPRESS_dhis2Password: ${{ secrets.CYPRESS_DHIS2_PASSWORD }}
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
     release:
-        needs: [lint-commits, lint, test] # Add e2e here when implemented
+        needs: [lint-commits, lint, test, cypress-component, cypress-e2e]
         uses: dhis2/workflows-platform/.github/workflows/release.yml@v1
         # Skips forks and dependabot PRs
         if: '!github.event.push.repository.fork'

.gitignore

@@ -5,3 +5,5 @@ src/locales
 build
 .DS_Store
 .vscode
+
+cypress.env.json

cypress.config.js

@@ -0,0 +1,27 @@
+import { defineConfig } from 'cypress'
+import viteConfig from './vite-cypress.config.js'
+
+export default defineConfig({
+    projectId: 'itnqpp',
+    defaultCommandTimeout: 30000,
+    component: {
+        devServer: {
+            framework: 'react',
+            bundler: 'vite',
+            viteConfig,
+        },
+        specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
+        supportFile: 'cypress/support/component.js',
+        indexHtmlFile: 'cypress/support/component-index.html',
+    },
+    e2e: {
+        baseUrl: 'http://localhost:3000',
+        setupNodeEvents(_on, _config) {
+            // implement node event listeners here
+        },
+        specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+        supportFile: 'cypress/support/e2e.js',
+    },
+    video: false,
+    screenshotOnRunFailure: false,
+})

cypress.env.template.json

@@ -0,0 +1,6 @@
+{
+    "dhis2Username": "admin",
+    "dhis2Password": "district",
+    "dhis2BaseUrl": "https://test.e2e.dhis2.org/anly-e2e-42",
+    "dhis2InstanceVersion": "42"
+}

cypress/e2e/smoke.cy.js

@@ -0,0 +1,36 @@
+describe('Smoke test', () => {
+    beforeEach(() => {
+        cy.visit('/')
+    })
+
+    it('should load and display the About page', () => {
+        cy.contains('About this app').should('be.visible')
+        cy.contains('DHIS2 for Climate').should('be.visible')
+        cy.get('body').should('not.be.empty')
+    })
+
+    it('should display sidebar menu items', () => {
+        cy.getByDataTest('home-menu-item').should('contain', 'Home')
+        cy.getByDataTest('explore-data-menu-item').should(
+            'contain',
+            'Explore data'
+        )
+        cy.getByDataTest('import-data-menu-item').should(
+            'contain',
+            'Import data'
+        )
+        cy.getByDataTest('setup-guide-menu-item').should(
+            'contain',
+            'Setup guide'
+        )
+        cy.getByDataTest('settings-menu-item').should('contain', 'Settings')
+    })
+
+    // This test is currently skipped because the navigation is using MenuItem href
+    // which cypress seems to interpret as leaving the page
+    it.skip('should navigate to Settings page when clicked', () => {
+        cy.getByDataTest('settings-menu-item').click()
+        // cy.location('hash').should('eq', '#/setup')
+        cy.get('h1').contains('App settings').should('be.visible')
+    })
+})

cypress/support/commands.js

@@ -0,0 +1,7 @@
+/// <reference types="cypress" />
+import '@dhis2/cypress-commands'
+
+// Custom command to select DOM elements by data-test attribute
+Cypress.Commands.add('getByDataTest', (selector, ...args) =>
+    cy.get(`[data-test=${selector}]`, ...args)
+)

cypress/support/component-index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Component Testing</title>
+    </head>
+    <body>
+        <div data-cy-root></div>
+    </body>
+</html>

cypress/support/component.js

@@ -0,0 +1,21 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands.js'
+
+import { mount } from 'cypress/react'
+
+Cypress.Commands.add('mount', mount)

cypress/support/e2e.js

@@ -0,0 +1,61 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands.js'
+
+const SESSION_COOKIE_NAME = 'JSESSIONID'
+const LOCAL_STORAGE_KEY = 'DHIS2_BASE_URL'
+
+before(() => {
+    const username = Cypress.env('dhis2Username')
+    const password = Cypress.env('dhis2Password')
+    const baseUrl = Cypress.env('dhis2BaseUrl')
+
+    if (!baseUrl || !username || !password) {
+        // Skip DHIS2 login if credentials not configured
+        return
+    }
+
+    cy.loginByApi({ username, password, baseUrl })
+        .its('status')
+        .should('equal', 200)
+
+    cy.getAllCookies().then((cookies) => {
+        const sessionCookie = cookies.find(
+            (cookie) =>
+                cookie.name === SESSION_COOKIE_NAME &&
+                baseUrl.includes(cookie.path)
+        )
+        if (sessionCookie) {
+            Cypress.env('sessionCookie', JSON.stringify(sessionCookie))
+        }
+    })
+})
+
+beforeEach(() => {
+    const baseUrl = Cypress.env('dhis2BaseUrl')
+    const sessionCookie = Cypress.env('sessionCookie')
+
+    if (!baseUrl || !sessionCookie) {
+        // Skip if not configured
+        return
+    }
+
+    const { name, value, ...options } = JSON.parse(sessionCookie)
+
+    localStorage.setItem(LOCAL_STORAGE_KEY, baseUrl)
+    cy.setCookie(name, value, options)
+})