End-To-End Tests for Settings - Export and tag data - [WIP]

apps/web-mzima-client/src/app/settings/data-export/data-export.component.html

@@ -7,7 +7,7 @@ <h1>{{ (hxlEnabled ? 'data_export.title_hxl' : 'data_export.title') | translate
     ></p>
   </div>
   <mat-tab-group dynamicHeight disableRipple disablePagination animationDuration="0ms">
-    <mat-tab [label]="'data_export.export' | translate" [data-qa]="'tab-export'">
+    <mat-tab [label]="'data_export.export' | translate" [attr.data-qa]="'tab-export'">
       <ng-container *ngIf="hxlEnabled && !hxlApiKey">
         <div class="alert">
           <p>{{ 'data_export.hxl_apikey_alert_1' | translate }}</p>
@@ -118,7 +118,11 @@ <h1>{{ 'data_export.select_fields_title' | translate }}</h1>
         </mat-checkbox>
       </div>
       <div class="checkbox" *ngFor="let attribute of form.attributes">
-        <mat-checkbox [value]="attribute.key" [(ngModel)]="fieldsMap[form.id][attribute.key]">
+        <mat-checkbox
+          [value]="attribute.key"
+          [(ngModel)]="fieldsMap[form.id][attribute.key]"
+          [data-qa]="'selected-checkbox'"
+        >
           {{ attribute.label }}
         </mat-checkbox>
       </div>

apps/web-mzima-client/src/env.json

@@ -1,6 +1,6 @@
 {
   "production": true,
-  "backend_url": "http://localhost:8080/",
+  "backend_url": "https://mzima-dev-api.staging.ush.zone/",
   "api_v3": "api/v3/",
   "api_v5": "api/v5/",
   "mapbox_api_key": "pk.eyJ1IjoidXNoYWhpZGkiLCJhIjoiY2lxaXUzeHBvMDdndmZ0bmVmOWoyMzN6NiJ9.CX56ZmZJv0aUsxvH5huJBw",

e2e-testing/cypress.config.js

@@ -1,14 +1,24 @@
-const { defineConfig } = require('cypress');
+const { defineConfig } = require("cypress");
 
 module.exports = defineConfig({
-  projectId: '43gftm',
+  projectId: "43gftm",
   viewportWidth: 1280,
   viewportHeight: 960,
   defaultCommandTimeout: 20000,
+
   e2e: {
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
   },
+
   video: true,
+
+  component: {
+    devServer: {
+      framework: "angular",
+      bundler: "webpack",
+    },
+    specPattern: "**/*.cy.ts",
+  },
 });

e2e-testing/cypress.env.json

@@ -1,9 +1,11 @@
 {
-  "baseUrl": "http://localhost:4200/",
+  "baseUrl": "http://localhost:4200",
   "ush_admin_email": "[email protected]",
   "ush_admin_pwd": "1234567",
   "ush_admin_name": "Automation User Admin Role",
-  "ush_user_email": "[email protected]",
-  "ush_user_pwd": "1234567",
-  "ush_user_name": "Automation User Member Role"
+  "ush_user_email": "[email protected]",
+  "ush_user_pwd": "allushahidipoints@21A",
+  "ush_user_name": "Adina Mosan",
+  "exportBaseUrl": "**/api/v3/exports/jobs/**",
+  "thumbsUpSignal": "/assets/icons/thumb-up.svg"
 }

e2e-testing/cypress/e2e/16-export-data-settings/export-settings-data.cy.js

@@ -0,0 +1,24 @@
+import ExportTagDataFunctions from '../../functions/ExportTagDataFunctions';
+import LoginFunctions from '../../functions/LoginFunctions';
+
+describe('Automated Tests for Exports and Tag Data', () => {
+  const loginFunctions = new LoginFunctions();
+  const exportTagDataFunctions = new ExportTagDataFunctions();
+
+  beforeEach(() => {
+    loginFunctions.login_as_admin();
+    cy.visit(Cypress.env('baseUrl'));
+  });
+
+  it('Exports all the data', () => {
+    exportTagDataFunctions.confirm_all_data_export();
+  });
+
+  it('Exports data of select fields', () => {
+    exportTagDataFunctions.confirm_select_data_export();
+  });
+
+  it('Cancels the data exporting process', () => {
+    exportTagDataFunctions.cancel_data_export();
+  });
+});

e2e-testing/cypress/functions/ExportTagDataFunctions.js

@@ -0,0 +1,75 @@
+import ExportTagDataLocators from '../locators/ExportTagDataLocators';
+
+class ExportTagDataFunctions {
+  select_data_fields() {
+    for (let i = 0; i <= 3; i++) {
+      cy.get(ExportTagDataLocators.FieldsCheckbox).eq(i).click();
+    }
+  }
+
+  click_select_fields_button() {
+    cy.get(ExportTagDataLocators.SelectFieldsButton).click();
+  }
+
+  export_all_data() {
+    cy.get(ExportTagDataLocators.ExportAllDataButton).click();
+  }
+
+  export_data() {
+    cy.get(ExportTagDataLocators.ExportDataButton).click();
+  }
+
+  launch_export_page() {
+    cy.get(ExportTagDataLocators.SettingsBtn).click();
+    cy.get(ExportTagDataLocators.ExportAndTagDataButton).click();
+    cy.get(ExportTagDataLocators.ExportTab).click();
+  }
+
+  cancel_export() {
+    cy.get(ExportTagDataLocators.CancelExportBtn).click();
+  }
+
+  verify_successful_export_messages() {
+    let messageData1 = `We are preparing your CSV file. This may take a few moments. You can leave this page if you want. We will let you know when we're done.`;
+    let messageData2 = `Upload complete. You should see your tagged data in your HDX account.`;
+
+    cy.get(ExportTagDataLocators.MessageContainer)
+      .should('be.visible')
+      .should('have.text', messageData1);
+
+    // cy.intercept('GET', Cypress.env('thumbsUpSignal')).as('completed');
+    // cy.wait('@completed', { timeout: 50000 }).then((interception) => {
+    //   expect(interception.response.statusCode).to.eq(200);
+    //   cy.get(ExportTagDataLocators.MessageContainer).should('have.text', messageData2);
+    // });
+  }
+
+  export_all_tag_data() {
+    this.launch_export_page();
+    this.export_all_data();
+  }
+
+  export_select_tag_data() {
+    this.launch_export_page();
+    this.click_select_fields_button();
+    this.select_data_fields();
+    this.export_data();
+  }
+
+  confirm_all_data_export() {
+    this.export_all_tag_data();
+    this.verify_successful_export_messages();
+  }
+
+  confirm_select_data_export() {
+    this.export_select_tag_data();
+    this.verify_successful_export_messages();
+  }
+
+  cancel_data_export() {
+    this.export_all_tag_data();
+    this.cancel_export();
+  }
+}
+
+export default ExportTagDataFunctions;

e2e-testing/cypress/locators/ExportTagDataLocators.js

@@ -0,0 +1,16 @@
+const ExportTagDataLocators = {
+    SettingsBtn: '[data-qa="btn-settings"]',
+    ExportAndTagDataButton: '[data-qa="btn-data-export"]',
+    ExportTab: '[id="mat-tab-label-0-0"]',
+    ExportAllDataButton: '[data-qa="btn-export-all"]',
+
+    SelectFieldsButton: '[data-qa="btn-select-fields"]',
+    FieldsCheckbox: '[data-qa="selected-checkbox"]',
+    ExportDataButton: '[data-qa="btn-export-selected"]',
+
+    MessageContainer: '.snackbar__title',
+
+    CancelExportBtn: '.mzima-button--danger'
+};
+
+export default ExportTagDataLocators;

e2e-testing/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

e2e-testing/cypress/support/component.js

@@ -0,0 +1,27 @@
+// ***********************************************************
+// 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'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/angular'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)