[PROPOSAL] - HPC-9658 Add cypress tests

README.md

@@ -75,9 +75,37 @@ docker exec -it hid_api_db_1 mongo
 > exit;
 ```
 
+### Running E2E tests
+
+To run the **CDM** e2e test using the in-browser dummy model, run the following command:
+
+```
+npm run e2e hpc-cdm-e2e
+```
+
+To run the **FTS Admin** e2e test using the in-browser dummy model, run the following command:
+
+```
+npm run e2e hpc-ftsadmin-e2e
+```
+
+In order to open Cypress in **Headed Mode** run any of the following commands:
+
+**CDM**
+
+```
+npm run e2e hpc-cdm-e2e -- --watch
+```
+
+**FTS Admin**
+
+```
+npm run e2e hpc-ftsadmin-e2e -- --watch
+```
+
 ## License
 
-Copyright 2020 United Nations Office for the Coordination of Humanitarian Affairs
+Copyright 2024 United Nations Office for the Coordination of Humanitarian Affairs
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

apps/hpc-ftsadmin-e2e/cypress.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    fileServerFolder: '.',
+    fixturesFolder: './src/fixtures',
+    modifyObstructiveCode: false,
+    supportFile: './src/support/index.ts',
+    specPattern: './src/tests/**/*.cy.{js,jsx,ts,tsx}',
+    video: true,
+    videosFolder: '../../dist/cypress/apps/hpc-ftsadmin-e2e/videos',
+    screenshotsFolder: '../../dist/cypress/apps/hpc-ftsadmin-e2e/screenshots',
+    chromeWebSecurity: false,
+  },
+});

apps/hpc-ftsadmin-e2e/project.json

@@ -7,12 +7,18 @@
     "e2e": {
       "executor": "@nx/cypress:cypress",
       "options": {
-        "cypressConfig": "apps/hpc-ftsadmin-e2e/cypress.json",
+        "cypressConfig": "apps/hpc-ftsadmin-e2e/cypress.config.ts",
         "devServerTarget": "hpc-ftsadmin:serve"
       },
       "configurations": {
         "production": {
           "devServerTarget": "hpc-ftsadmin:serve:production"
+        },
+        "dev-live": {
+          "devServerTarget": "hpc-ftsadmin:serve:dev-live"
+        },
+        "dummy": {
+          "devServerTarget": "hpc-ftsadmin:serve"
         }
       }
     },

apps/hpc-ftsadmin-e2e/src/fixtures/add-flow.json

@@ -0,0 +1,14 @@
+{
+  "test1": {
+    "add-flow-source-organization-field": "Germany, Government of",
+    "add-flow-source-usage-year-field": "2022",
+    "add-flow-destination-project-field": "apts627",
+    "add-flow-amount-USD-field": "8994018977",
+    "add-flow-original-currency-funding-amount-field": "200000000000000",
+    "add-flow-exchange-rate-field": "22237",
+    "add-flow-description-field": "GV, WASH EDU",
+    "add-flow-flow-status-field": "Commitment",
+    "add-flow-earmarking-field": "Unearmarked",
+    "add-flow-report-channel-field": "Other"
+  }
+}

apps/hpc-ftsadmin-e2e/src/support/commands.ts

@@ -17,6 +17,7 @@ declare global {
     interface Chainable<Subject> {
       login(username: string): void;
       getDummyData(): DummyData;
+      typedGet(dataTest: DataTest): Cypress.Chainable<JQuery<HTMLElement>>;
     }
   }
 }
@@ -60,3 +61,102 @@ Cypress.Commands.add('login', (username: string) => {
   const dataWithUser = { ...parsedData, currentUser: userIds[0] };
   localStorage.setItem(STORAGE_KEY, JSON.stringify(dataWithUser));
 });
+
+type DatePickerDataTest = 'field' | 'today';
+type ChildParent = 'child' | 'parent';
+type Direction = 'source' | 'destination';
+/**
+ * When removing `data-test` properties from code,
+ * please also remove it from here
+ */
+export type DataTest =
+  | 'add-flow-nav-button'
+  | 'add-flow-source-organization-field'
+  | 'add-flow-source-location-field'
+  | 'add-flow-source-usage-year-field'
+  | 'add-flow-destination-project-field'
+  | 'add-flow-destination-plan-field'
+  | 'add-flow-destination-global-cluster-field'
+  | 'add-flow-destination-usage-year-field'
+  | 'add-flow-destination-location-field'
+  | 'add-flow-destination-organization-field'
+  | 'add-flow-original-currency-funding-amount-field'
+  | 'add-flow-original-currency-field'
+  | 'add-flow-exchange-rate-field'
+  | 'add-flow-original-currency-button'
+  | 'add-flow-amount-USD-field'
+  | 'add-flow-description-field'
+  | 'add-flow-readonly-source-organization-field'
+  | 'add-flow-readonly-source-location-field'
+  | 'add-flow-readonly-source-usage-year-field'
+  | `add-flow-first-reported-${DatePickerDataTest}`
+  | `add-flow-decision-date-${DatePickerDataTest}`
+  | 'add-flow-flow-status-field'
+  | `add-flow-flow-date-${DatePickerDataTest}`
+  | `add-flow-reported-by-organization-${number}-options-${Direction}-${number}`
+  | `add-flow-reported-channel-field-${number}`
+  | `add-flow-date-reported-${DatePickerDataTest}-${number}`
+  | 'add-flow-create-button'
+  | 'add-flow-copy-button'
+  | 'add-flow-title'
+  | 'add-flow-add-parent-flow-button'
+  | `add-flow-add-${ChildParent}-flow-field`
+  | 'add-flow-add-parent-flow-submit-button'
+  | `add-flow-${ChildParent}-flow-table`
+  | 'flows-nav-button'
+  | 'flows-table'
+  | 'flows-table-checkbox'
+  | 'flows-table-id'
+  | 'flows-table-status'
+  | 'flows-table-updated'
+  | 'flows-table-external-reference'
+  | 'flows-table-amount-usd'
+  | 'flows-table-source-organization'
+  | 'flows-table-destination-organization'
+  | 'flows-table-plans'
+  | 'flows-table-locations'
+  | 'flows-table-years'
+  | 'flows-table-details'
+  | 'flows-table-newMoney'
+  | 'flows-table-decisionDate'
+  | 'flows-table-exchangeRate'
+  | 'flows-table-flowDate'
+  | 'flows-table-sourceSystemId'
+  | 'flows-table-reporterRefCode'
+  | 'flows-table-exchangeRate'
+  | 'flows-table-pagination'
+  | `flows-table-row-${number}v${number}` // flow.id v flow.versionID
+  | `flows-table-header-${string}` // TableHeadersProps<FlowHeaderID>.label as value
+  | 'pending-flows-nav-button'
+  | 'pending-flows-bulk-reject-button'
+  | 'pending-flows-popup'
+  | 'keywords-nav-button'
+  | 'keywords-table-id'
+  | 'keywords-table-name'
+  | 'keywords-table-relatedFlows'
+  | 'keywords-table-public'
+  | `keywords-table-row-${number}` // keyword.id
+  | `keywords-table-header-${string}` // TableHeadersProps<KeywordHeaderID>.label as value
+  | 'organizations-nav-button'
+  | 'organizations-table-id'
+  | 'organizations-table-name'
+  | 'organizations-table-abbreviation'
+  | 'organizations-table-type'
+  | 'organizations-table-subType'
+  | 'organizations-table-location'
+  | 'organizations-table-created-by'
+  | 'organizations-table-updated-by'
+  | `keywords-table-row-${number}` // organization.id
+  | `organizations-table-header-${string}` // TableHeadersProps<OrganizationHeaderID>.label as value
+  | 'organizations-table-pagination';
+
+/*
+ * Command that makes the same as cy.get()
+ * but we use it for known elements.
+ *
+ * Ex: <div data-test="test"> test </div>
+ * Our type for dataTest will define "test" as a possible value
+ */
+Cypress.Commands.add('typedGet', (dataTest: DataTest) => {
+  return cy.get(`[data-test="${dataTest}"]`);
+});

apps/hpc-ftsadmin-e2e/src/support/select-component-utils.ts

@@ -0,0 +1,3 @@
+export const selectOption = (option: string) => {
+  cy.contains('li', option).click();
+};

apps/hpc-ftsadmin-e2e/src/tests/add-flow.cy.ts

@@ -0,0 +1,159 @@
+import * as dayjs from 'dayjs';
+import * as ADD_FLOW from '../fixtures/add-flow.json';
+import { selectOption } from '../support/select-component-utils';
+
+describe('hpc-ftsadmin add-flow', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.login('Admin User');
+    cy.visit('/');
+    cy.location('pathname').should('eq', '/flows');
+    cy.typedGet('add-flow-nav-button').click();
+    cy.location('pathname').should('eq', '/flows/add');
+  });
+
+  it('Add flow', () => {
+    cy.typedGet('add-flow-source-organization-field').type(
+      ADD_FLOW['test1']['add-flow-source-organization-field']
+    );
+    selectOption(ADD_FLOW['test1']['add-flow-source-organization-field']);
+
+    cy.typedGet('add-flow-source-organization-field').should(
+      'contain',
+      ADD_FLOW['test1']['add-flow-source-organization-field']
+    );
+    cy.typedGet('add-flow-source-location-field').should('contain', 'Germany');
+
+    cy.typedGet('add-flow-source-usage-year-field').type(
+      ADD_FLOW['test1']['add-flow-source-usage-year-field']
+    );
+    selectOption(ADD_FLOW['test1']['add-flow-source-usage-year-field']);
+
+    cy.typedGet('add-flow-destination-project-field').type(
+      ADD_FLOW['test1']['add-flow-destination-project-field']
+    );
+    selectOption(ADD_FLOW['test1']['add-flow-destination-project-field']);
+
+    cy.typedGet('add-flow-destination-plan-field').should(
+      'contain.html',
+      'Afghanistan 2002 (ITAP for the Afghan People)'
+    );
+    cy.typedGet('add-flow-destination-global-cluster-field').should(
+      'contain',
+      'Multi-sector'
+    );
+    cy.typedGet('add-flow-destination-usage-year-field').should(
+      'contain',
+      '2002'
+    );
+    cy.typedGet('add-flow-destination-location-field').should(
+      'contain',
+      'Afghanistan'
+    );
+    cy.typedGet('add-flow-destination-organization-field').should(
+      'contain',
+      "United Nations Children's Fund"
+    );
+
+    /*
+     * Original Currency related testing
+     */
+
+    cy.typedGet('add-flow-original-currency-funding-amount-field').type(
+      ADD_FLOW['test1']['add-flow-original-currency-funding-amount-field']
+    );
+    cy.typedGet('add-flow-original-currency-field').click();
+    selectOption('EUR');
+
+    cy.typedGet('add-flow-exchange-rate-field').type(
+      ADD_FLOW['test1']['add-flow-exchange-rate-field']
+    );
+
+    cy.typedGet('add-flow-original-currency-button').should(
+      'contain.text',
+      'Calculate the funding amount in USD'
+    );
+    cy.typedGet('add-flow-original-currency-funding-amount-field').clear();
+
+    cy.typedGet('add-flow-amount-USD-field').type(
+      ADD_FLOW['test1']['add-flow-amount-USD-field']
+    );
+
+    cy.typedGet('add-flow-original-currency-button').should(
+      'contain.text',
+      'Calculate funding amount in its original currency'
+    );
+
+    cy.typedGet('add-flow-exchange-rate-field').clear();
+    cy.typedGet('add-flow-original-currency-funding-amount-field').type(
+      ADD_FLOW['test1']['add-flow-original-currency-funding-amount-field']
+    );
+
+    cy.typedGet('add-flow-original-currency-button').should(
+      'contain.text',
+      'Calculate the exchange rate'
+    );
+
+    cy.typedGet('add-flow-original-currency-button').should(
+      'contain.text',
+      'Calculate the exchange rate'
+    );
+
+    /*
+     * --------------------------------------------------------
+     */
+
+    cy.typedGet('add-flow-description-field').type(
+      ADD_FLOW['test1']['add-flow-description-field']
+    );
+
+    const date = dayjs().format('DD/MM/YYYY');
+    cy.typedGet('add-flow-first-reported-today').click();
+    cy.typedGet('add-flow-decision-date-today').click();
+
+    cy.typedGet('add-flow-flow-status-field').click();
+    selectOption('Commitment');
+
+    cy.typedGet('add-flow-flow-date-today').click();
+
+    cy.typedGet(
+      'add-flow-reported-by-organization-0-options-destination-0'
+    ).click();
+
+    cy.typedGet('add-flow-reported-channel-field-0').click();
+    selectOption('Fax');
+
+    cy.typedGet('add-flow-date-reported-field-0').should('contain.html', date);
+
+    cy.typedGet('add-flow-create-button').click();
+
+    cy.typedGet('add-flow-copy-button').click();
+
+    cy.typedGet('add-flow-title').should('contain', 'Copy');
+
+    cy.typedGet('add-flow-add-parent-flow-button').click();
+
+    // flow 316064 is part of mocked data
+    cy.typedGet('add-flow-add-parent-flow-field').type('316064');
+    selectOption('316064');
+
+    cy.typedGet('add-flow-add-parent-flow-submit-button').click();
+
+    cy.typedGet('add-flow-parent-flow-table').should('exist');
+
+    //  Verify source data gets updated when
+    //  a parent flow is selected
+    cy.typedGet('add-flow-readonly-source-organization-field').should(
+      'contain',
+      'United States of America, Government of [USA]'
+    );
+    cy.typedGet('add-flow-readonly-source-usage-year-field').should(
+      'contain',
+      '2023'
+    );
+    cy.typedGet('add-flow-readonly-source-location-field').should(
+      'contain',
+      'United States'
+    );
+  });
+});

apps/hpc-ftsadmin-e2e/src/tests/login.cy.ts

@@ -0,0 +1,13 @@
+describe('hpc-ftsadmin', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('redirects to /flows when logged in', () => {
+    cy.login('Admin User');
+    cy.visit('/');
+    cy.location('pathname', { timeout: 2000 }).should('eq', '/flows');
+  });
+
+  it("doesn't redirect if not logged in", () => {
+    cy.location('pathname').should('not.eq', '/flows');
+  });
+});