Feature/cypress all inputs test (#1783)

* digiwf-cypress refactor and cleanup classes

* digiwf-cypress refactor and cleanup classes

* digiwf-cypress refactor and cleanup classes

* digiwf-cypress refactor input selector

* digiwf-cypress refactor input selector

* digiwf-cypress delay request to have minimal duration

* digiwf-cypress env group name

* digiwf-cypress increase timeout for loading btn

* digiwf-cypress update dependencies

* digiwf-cypress add prettier

* digiwf-cypress refactor env usage

* digiwf-cypress refactor task count compare and process start

* digiwf-cypress increase load btn timeout to 30s

* digiwf-cypress fix nav btns

* digiwf-cypress init grouptask test

* digiwf-cypress fix package-lock.json

* digiwf-cypress refactor start waiting

* digiwf-cypress update grouptask test

* digiwf-cypress add code comments

* digiwf-cypress refactor loading timeout

* digiwf-cypress form extract task elements

* digiwf-cypress tests use headline instead of inline string

* digiwf-cypress form add single user input

* digiwf-cypress init test example all input fields

* digiwf-cypress init test example all input fields

* digiwf-cypress update test example all input fields

* digiwf-cypress update test example all input fields

* digiwf-cypress fix pagination goToLastPage

* digiwf-cypress update js docs

* digiwf-cypress update test example all input fields

* digiwf-cypress update test example all input fields

* digiwf-cypress update test example all input fields

* digiwf-cypress update test example all input fields

* digiwf-cypress update test example all input fields

* digiwf-cypress refactor reporter setup

* digiwf-cypress fix typo

* digiwf-cypress fix example grouptask test

* digiwf-cypress update npm commands

* digiwf-cypress increase default timeout

* Revert "digiwf-cypress increase default timeout"

This reverts commit c4daa20.

* digiwf-cypress all inputs update number check

* digiwf-cypress all inputs optional container selector workaround

* digiwf-cypress all inputs add readonly page support

* cypress increase default timeout

* cypress update README.md

digiwf-cypress/README.md

@@ -24,8 +24,8 @@ cd digiwf-cypress
 # set proxy (remote env) or unset proxy (local) via env variables if needed
 export HTTP_PROXY=; export HTTPS_PROXY=; export NO_PROXY=
 # setup .env file or needed env variables
-npx cypress run # a) to run all the tests
-npx cypress open # b) to open the cypress app and run each test separate
+npm test # a) to run all the tests
+npm start # b) to open the cypress app and run each test separate
 ```
 
 a) There will be a test summary in the end in the bash and the produced videos and test reports in the

digiwf-cypress/cypress.config.js

@@ -7,17 +7,13 @@ require("dotenv").config({ path: ".env.local" });
 module.exports = defineConfig({
   viewportHeight: 1200,
   viewportWidth: 2000,
+  defaultCommandTimeout: 10000,
+  scrollBehavior: "center",
   videosFolder: "output/videos",
-  reporter: "cypress-multi-reporters",
+  reporter: "junit",
   reporterOptions: {
-    reporterEnabled: "mochawesome",
-    mochawesomeReporterOptions: {
-      reportDir: "output/reports/mocha",
-      quite: true,
-      overwrite: false,
-      html: false,
-      json: true,
-    },
+    mochaFile: "output/reports/junit-[hash].xml",
+    toConsole: true,
   },
   env: {
     sso_url: process.env.SSO_URL,

digiwf-cypress/cypress/components/form.js

@@ -1,18 +1,131 @@
 class Form {
   formElements = {
+    form: () => cy.get(".container form .vjsf-property-allOf-0"),
+    tab: (index) =>
+      cy.get(
+        `.container form .v-tabs [role="tablist"] .v-tab:nth-of-type(${index + 1})`
+      ),
+    loadingInput: () => cy.get(".container form .v-input--is-loading"),
     inputElement: (inputId) =>
       cy.get(
-        '.container form .vjsf-property[class*="' +
-          inputId +
-          ' "] input[type!="hidden"]'
+        `.container form .vjsf-property[class*="${inputId} "] input[type!="hidden"]`
+      ),
+    textareaElement: (inputId) =>
+      cy.get(
+        `.container form .vjsf-property[class*="${inputId} "] textarea[type!="hidden"]:visible`
       ),
+    markdownReadonly: (inputId) =>
+      cy.get(`.container form .vjsf-property[class*="${inputId} "] .v-card`),
     checkboxElement: (inputId) =>
       cy.get(
-        '.container form .vjsf-property[class*="' +
-          inputId +
-          ' "] .v-input--selection-controls__input'
+        `.container form .vjsf-property[class*="${inputId} "] .v-input--selection-controls__input`
       ),
+    switchElement: (inputId) =>
+      cy.get(
+        `.container form .vjsf-property[class*="${inputId} "] .v-input--selection-controls__ripple`
+      ),
+    selectDropdown: (index) =>
+      cy.get(`[role="listbox"]:visible .v-list-item:nth-child(${index + 1})`),
+    comboboxValues: (input) => input.parent().find("span span"),
+    multiFileValues: (input) =>
+      input
+        .closest(".vjsf-property")
+        .find(".listWrapper .doc-card .v-card__title div"),
   };
+
+  waitFormVisible() {
+    this.formElements.form().should("be.visible");
+  }
+
+  waitLoadingFinished() {
+    this.formElements.loadingInput().should("not.exist");
+  }
+
+  setUserInput(input, user) {
+    input.type(user, { force: true });
+    cy.wait("@dataUserSearch").its("response.statusCode").should("equal", 200);
+    this.formElements
+      .selectDropdown(0)
+      .contains("Benutzer werden gesucht")
+      .should("not.exist");
+    this.formElements.selectDropdown(0).click();
+  }
+
+  setSelect(input, indexes) {
+    input.click();
+    for (const i of indexes) {
+      this.formElements.selectDropdown(i).click();
+    }
+  }
+
+  selectHasValue(input, items) {
+    let res = [];
+    input
+      .parent()
+      .find(".v-select__selection span")
+      .each((i) => {
+        cy.wrap(i)
+          .invoke("text")
+          .then((text) => {
+            res.push(text.trim().replace(",", ""));
+          });
+      });
+    cy.wrap(res).then((i) => {
+      expect(i.sort()).to.deep.eq(items.sort());
+    });
+  }
+
+  multiFileInputHasValues(input, values) {
+    let res = [];
+    this.formElements.multiFileValues(input).each((i) => {
+      cy.wrap(i)
+        .invoke("text")
+        .then((text) => {
+          res.push(text.trim());
+        });
+    });
+    cy.wrap(res).then((i) => {
+      expect(i.sort()).to.deep.eq(values.sort());
+    });
+  }
+
+  userInputHasValue(input, user) {
+    input
+      .siblings("div")
+      .invoke("text")
+      .then((text) => text.trim())
+      .should("eq", user);
+  }
+
+  comboboxHasValues(input, values) {
+    let res = [];
+    this.formElements.comboboxValues(input).each((i) => {
+      cy.wrap(i)
+        .invoke("text")
+        .then((text) => {
+          res.push(text.trim());
+        });
+    });
+    cy.wrap(res).then((i) => {
+      expect(i.sort()).to.deep.eq(values.sort());
+    });
+  }
+
+  markdownHasValue(input, value) {
+    input
+      .closest(".vjsf-property")
+      .find('div.EasyMDEContainer [role="presentation"] pre:visible')
+      .invoke("text")
+      .then((text) => {
+        cy.wrap(text).should("eq", value);
+      });
+  }
+
+  markdownHasValueReadonly(input, value) {
+    input.invoke("text").then((text) => {
+      cy.wrap(text).should("eq", value);
+    });
+  }
 }
 
 export default Form;

digiwf-cypress/cypress/components/nav.js

@@ -99,6 +99,7 @@ class Nav {
 
   /**
    * Compares two via {@link gatherTaskMetrics} collected task counts.
+   * Uses difference calculation to use values via Cypress aliases and support existing tasks.
    * @param prefix1 Prefix used for the first collection.
    * @param prefix2 Prefix used for the second collection.
    * @param differences Map of differences between first and second collections.

digiwf-cypress/cypress/components/pagination.js

@@ -106,10 +106,10 @@ class Pagination {
 
   goToLastPage() {
     let iteration = 1;
-    this.isLast(iteration);
+    this.#isLast(iteration);
   }
 
-  isLast(iteration) {
+  #isLast(iteration) {
     const maxIterations = 1000;
     cy.log(iteration.toString());
     if (iteration > maxIterations) {
@@ -133,7 +133,7 @@ class Pagination {
       .then((last) => {
         if (!last) {
           iteration = iteration + 1;
-          this.isLast(iteration++);
+          this.#isLast(iteration);
         }
       });
   }

digiwf-cypress/cypress/components/task.js

@@ -5,6 +5,7 @@ class Task extends Form {
   taskElements = {
     completeButton: () => cy.get(`.container form .form-submit-button`),
     headline: () => cy.get(".container h1"),
+    errorAlert: () => cy.get(".container .v-alert.error"),
   };
   groupTaskElements = {
     assignSelfBtn: () => cy.get("button").contains("Bearbeiten"),
@@ -28,23 +29,32 @@ class Task extends Form {
     cy.wait("@dataGetMyTasks").its("response.statusCode").should("equal", 200);
   }
 
+  _hasAlertMessage(message) {
+    this.taskElements.errorAlert().contains(message).should("be.visible");
+  }
+
   assignGroupTaskSelf() {
     this.groupTaskElements.assignSelfBtn().click();
   }
 
   assignGroupTask(userRealname) {
     this.groupTaskElements.assignBtn().click();
     this.groupTaskElements.assignInput().should("be.visible");
-    this.groupTaskElements.assignInput().type(userRealname);
+    // workaround as input already searches after 3 chars and interrupts input
+    this.groupTaskElements.assignInput().type(userRealname.substring(0, 3));
     cy.wait("@dataUserSearch").its("response.statusCode").should("equal", 200);
+    this.groupTaskElements.assignInput().type(userRealname.substring(3));
+    this.groupTaskElements.assignInput().should("have.value", userRealname);
     this.groupTaskElements.assignInput().type("{enter}");
     this.groupTaskElements.assignSubmit().click();
+    cy.wait("@dataAssignTask").its("response.statusCode").should("equal", 204);
     openGroupTasks.waitLoadingFinished();
   }
 
   assignGroupTaskSelfOverride() {
     this.groupTaskElements.assignSelfBtn().click();
     this.groupTaskElements.assignSelfSubmit().click();
+    cy.wait("@dataAssignTask").its("response.statusCode").should("equal", 204);
     this.taskElements.headline().should("be.visible");
   }
 }

digiwf-cypress/cypress/e2e/1-example-usertask.cy.js

@@ -25,7 +25,8 @@ describe("Example Usertask", () => {
 
     cy.log("Test task exists");
     let myTasks = nav.openMyTasks();
-    myTasks.itemContainsText(0, "User Task");
+    myTasks.itemContainsText(0, exampleUserTask.headline);
+    myTasks.itemContainsText(0, exampleUserTaskStart.headline);
     nav.gatherTaskMetrics("created", ["myTasks"]);
     nav.compareTaskMetrics("initial", "created", { myTasks: 1 });
 

digiwf-cypress/cypress/e2e/3-example-all-input-fields.cy.js

@@ -0,0 +1,55 @@
+import nav from "../components/nav";
+import { USER_REALNAME } from "../constants/env";
+import exampleAllInputFields from "../pages/processes/exampleAllInputFields";
+import exampleAllInputFieldsStart from "../pages/processes/exampleAllInputFieldsStart";
+
+beforeEach(() => {
+  cy.loginDefault();
+});
+
+describe("Example All Input Fields", () => {
+  it("passes", () => {
+    cy.visit("/");
+
+    cy.log("Start process");
+    let startProcess = nav.openStartProcess();
+    startProcess.startProcess(exampleAllInputFieldsStart.headline);
+    exampleAllInputFieldsStart.checkHeadline();
+    exampleAllInputFieldsStart.setUser(USER_REALNAME);
+    exampleAllInputFieldsStart.clickComplete();
+
+    cy.log("Fill out first task");
+    let myTasks = nav.openMyTasks();
+    myTasks.itemContainsText(0, exampleAllInputFields.headline1);
+    myTasks.itemContainsText(0, exampleAllInputFieldsStart.headline);
+    myTasks.clickItem(0);
+    exampleAllInputFields.checkHeadline1();
+    exampleAllInputFields.waitFormVisible();
+    exampleAllInputFields.clickComplete();
+    exampleAllInputFields.hasValidationAlert();
+    exampleAllInputFields.fillDefault();
+    exampleAllInputFields.clickComplete();
+
+    cy.log("Validate second task");
+    myTasks.waitNoUncompletedTasks();
+    myTasks.itemContainsText(0, exampleAllInputFields.headline2);
+    myTasks.itemContainsText(0, exampleAllInputFieldsStart.headline);
+    myTasks.clickItem(0);
+    exampleAllInputFields.checkHeadline2();
+    exampleAllInputFields.waitFormVisible();
+    exampleAllInputFields.validateDefault();
+    exampleAllInputFields.clickComplete();
+    myTasks.waitNoUncompletedTasks();
+
+    cy.log("Readonly task");
+    myTasks.waitNoUncompletedTasks();
+    myTasks.itemContainsText(0, exampleAllInputFields.headlineReadonly);
+    myTasks.itemContainsText(0, exampleAllInputFieldsStart.headline);
+    myTasks.clickItem(0);
+    exampleAllInputFields.checkHeadlineReadonly();
+    exampleAllInputFields.waitFormVisible();
+    exampleAllInputFields.validateDefault(true);
+    exampleAllInputFields.clickComplete();
+    myTasks.waitNoUncompletedTasks();
+  });
+});