feat: add e2e tests for vaccination-reports

iris-client-fe/src/components/btn-toggle-select.vue

@@ -10,11 +10,11 @@
       text
       v-for="selectOption in selectOptions"
       :key="selectOption.value"
-      :data-test="`btn.select.${selectOption.value}`"
+      :data-test="`${dataTestKey}.select.${selectOption.value}`"
     >
       {{ selectOption.text }}
     </v-btn>
-    <v-btn text data-test="btn.select.all"> Alle </v-btn>
+    <v-btn text :data-test="`${dataTestKey}.select.all`"> Alle </v-btn>
   </v-btn-toggle>
 </template>
 
@@ -36,6 +36,10 @@ const BtnToggleSelectProps = Vue.extend({
       type: Array as PropType<SelectOption[]>,
       default: () => [],
     },
+    dataTestKey: {
+      type: String,
+      default: "btn",
+    },
   },
 });
 

iris-client-fe/src/modules/vaccination-report/views/details/vaccination-report-details.view.vue

@@ -10,6 +10,7 @@
         </span>
         <btn-toggle-select
           :select-options="statusSelectOptions"
+          data-test-key="status"
           v-model="status"
         />
       </div>
@@ -24,13 +25,18 @@
         show-select
         show-select-all
         :filter="dataTableFilter"
+        data-test="vaccination-report.employee.data-table"
       >
         <template v-slot:item.address="{ item }">
           <span class="text-pre-line"> {{ item.address }} </span>
         </template>
         <template v-slot:item.vaccinationStatus="{ item }">
-          <v-chip :color="getStatusColor(item.vaccinationStatus)" dark>
-            {{ item.vaccinationStatus }}
+          <v-chip
+            :color="getStatusColor(item.vaccinationStatus)"
+            :data-test="`status.${item.vaccinationStatus}`"
+            dark
+          >
+            {{ getStatusName(item.vaccinationStatus) }}
           </v-chip>
         </template>
       </iris-data-table>
@@ -117,9 +123,7 @@ export default class VaccinationReportDetailsView extends Mixins(
         firstName: employee.firstName || "-",
         address: getFormattedAddress(employee.address),
         vaccination: employee.vaccination || "-",
-        vaccinationStatus: vaccinationReportConstants.getStatusName(
-          employee.vaccinationStatus
-        ),
+        vaccinationStatus: employee.vaccinationStatus || "-",
         raw: employee,
       };
     });
@@ -144,10 +148,10 @@ export default class VaccinationReportDetailsView extends Mixins(
     });
   }
   getStatusColor = vaccinationReportConstants.getStatusColor;
+  getStatusName = vaccinationReportConstants.getStatusName;
   dataTableFilter(value: VREmployeeTableRow) {
     if (this.status) {
-      const statusName = vaccinationReportConstants.getStatusName(this.status);
-      return value.vaccinationStatus === statusName;
+      return value.vaccinationStatus === this.status;
     }
     return true;
   }

iris-client-fe/src/modules/vaccination-report/views/list/vaccination-report-list.view.vue

@@ -18,6 +18,7 @@
           :items-per-page.sync="query.size"
           :server-items-length="totalElements"
           @click:row="handleRowClick"
+          data-test="view.data-table"
         >
           <template v-slot:item.address="{ item }">
             <span class="text-pre-line"> {{ item.address }} </span>

iris-client-fe/tests/e2e/specs/users.js

@@ -255,7 +255,7 @@ describe("Users", () => {
         cy.getBy(".v-btn{submit}").click();
       });
     cy.location("pathname").should("equal", "/admin/user/list");
-    cy.getDataTableRow(userAccessor, "view.data-table").should(
+    cy.getDataTableRow("view.data-table", userAccessor).should(
       "contain",
       "Administration"
     );
@@ -271,7 +271,7 @@ describe("Users", () => {
     cy.login();
     cy.fetchUser();
     cy.visit("/admin/user/list");
-    cy.getDataTableRow(userAccessor, "view.data-table").within(() => {
+    cy.getDataTableRow("view.data-table", userAccessor).within(() => {
       cy.getBy(".v-btn{delete}").click();
     });
     cy.getBy("user-delete.confirm-dialog")

iris-client-fe/tests/e2e/specs/vaccination-report.js

@@ -0,0 +1,114 @@
+describe("VaccinationReport", () => {
+  const reportTableCol = {
+    all: 3,
+    notVaccinated: 4,
+    suspiciousProof: 5,
+  };
+  const gteOne = /^[1-9][0-9]*$/;
+  beforeEach(() => {
+    cy.clearLocalStorage();
+    cy.visit("/");
+    cy.login();
+  });
+  afterEach(() => {
+    cy.logout();
+  });
+  it("should navigate to a vaccination-report with at least one employee - if exists", () => {
+    cy.visit("/vaccination-report/list");
+    cy.visitByDataTableCellValue(
+      "view.data-table",
+      reportTableCol.all,
+      gteOne
+    ).then((success) => {
+      if (success) {
+        cy.location("pathname").should(
+          "contain",
+          "/vaccination-report/details"
+        );
+      }
+    });
+  });
+  it("should navigate to a vaccination-report with at least one not vaccinated employee - if exists", () => {
+    cy.visit("/vaccination-report/list");
+    cy.sortDataTable("view.data-table", 4, "desc");
+    cy.visitByDataTableCellValue(
+      "view.data-table",
+      reportTableCol.notVaccinated,
+      gteOne
+    ).then((success) => {
+      if (success) {
+        cy.location("pathname").should(
+          "contain",
+          "/vaccination-report/details"
+        );
+      }
+    });
+  });
+  it("should navigate to a vaccination-report with at least one employee with a suspicious proof - if exists", () => {
+    cy.visit("/vaccination-report/list");
+    cy.sortDataTable("view.data-table", 5, "desc");
+    cy.visitByDataTableCellValue(
+      "view.data-table",
+      reportTableCol.suspiciousProof,
+      gteOne
+    ).then((success) => {
+      if (success) {
+        cy.location("pathname").should(
+          "contain",
+          "/vaccination-report/details"
+        );
+      }
+    });
+  });
+  it("should filter the employee list based on vaccination status", () => {
+    cy.visit("/vaccination-report/list");
+    cy.visitByDataTableCellValue(
+      "view.data-table",
+      reportTableCol.all,
+      gteOne
+    ).then((success) => {
+      if (success) {
+        cy.location("pathname").should(
+          "contain",
+          "/vaccination-report/details"
+        );
+        cy.getBy("vaccination-report.employee.data-table")
+          .filterDataTableByStatus("notVaccinated")
+          .filterDataTableByStatus("suspiciousProof")
+          .filterDataTableByStatus("all");
+      }
+    });
+  });
+  it("should export vaccination report data as csv or xlsx file", () => {
+    cy.visit("/vaccination-report/list");
+    cy.visitByDataTableCellValue(
+      "view.data-table",
+      reportTableCol.all,
+      gteOne
+    ).then((success) => {
+      if (success) {
+        cy.getBy(".v-btn{export.default}").should("be.disabled");
+        cy.getBy(".v-btn{export-dialog.activator}").should("be.disabled");
+        cy.getBy("vaccination-report.employee.data-table")
+          .should("exist")
+          .should("not.have.class", "is-loading")
+          .within(() => {
+            cy.get("tbody tr").should("have.length.at.least", 1);
+            cy.get("thead .v-simple-checkbox").click();
+          });
+        cy.getBy(".v-btn{export.default}").should("not.be.disabled").click();
+        cy.getBy(".v-btn{export-dialog.activator}")
+          .should("not.be.disabled")
+          .click();
+        cy.getBy("export-dialog")
+          .should("be.visible")
+          .within(() => {
+            cy.getBy("export.csv.standard").should("exist").click();
+            cy.getBy("export.xlsx.standard").should("exist").click();
+            cy.getBy(".v-btn{close}").should("exist").click();
+          });
+        cy.getBy("export-dialog").should("not.be.visible");
+      }
+    });
+  });
+});

iris-client-fe/tests/e2e/support/commands.js

@@ -167,22 +167,121 @@ Cypress.Commands.add(
   }
 );
 
-Cypress.Commands.add("getDataTableRow", (accessor, table) => {
-  cy.getBy(table || ".v-data-table").as("dataTable");
-  cy.get("@dataTable").should("not.have.class", "is-loading");
-  cy.getBy("input{search}")
-    .should("exist")
-    .clear()
-    .type(accessor, { log: false });
-  cy.get("@dataTable")
-    .should("not.have.class", "is-loading")
-    .contains(accessor, { log: false })
-    .closest("tr");
-});
+Cypress.Commands.add(
+  "getDataTableRow",
+  { prevSubject: "optional" },
+  (subject, arg1, arg2, arg3) => {
+    const accessor = subject ? arg1 : arg2;
+    const search = subject ? arg2 : arg3;
+    if (subject) {
+      cy.wrap(subject).as("dataTable");
+    } else {
+      cy.getBy(arg1).as("dataTable");
+    }
+    cy.get("@dataTable").should("not.have.class", "is-loading");
+    if (search !== false) {
+      cy.getBy("input{search}")
+        .should("exist")
+        .clear()
+        .type(accessor, { log: false });
+    }
+    cy.get("@dataTable")
+      .should("not.have.class", "is-loading")
+      .contains(accessor, { log: false })
+      .closest("tr");
+  }
+);
+
+Cypress.Commands.add(
+  "findDataTableRow",
+  { prevSubject: "optional" },
+  (subject, arg1, arg2, arg3) => {
+    const column = subject ? arg1 : arg2;
+    const content = subject ? arg2 : arg3;
+    if (subject) {
+      cy.wrap(subject).as("dataTable");
+    } else {
+      cy.getBy(arg1).as("dataTable");
+    }
+    cy.wrap(null).as("tableRow");
+    cy.get("@dataTable").should("not.have.class", "is-loading");
+    cy.get("@dataTable").then(($table) => {
+      if ($table.hasClass("is-empty")) {
+        cy.log("data-table has no items");
+      } else {
+        cy.get("@dataTable").within(() => {
+          cy.get(`tbody tr td:nth-child(${column})`).each(($cell) => {
+            if ($cell.text().match(content) !== null) {
+              cy.wrap($cell).closest("tr").should("exist").as("tableRow");
+              return false;
+            }
+          });
+        });
+      }
+    });
+    return cy.get("@tableRow");
+  }
+);
+
+Cypress.Commands.add(
+  "sortDataTable",
+  { prevSubject: "optional" },
+  (subject, arg1, arg2, arg3) => {
+    const column = subject ? arg1 : arg2;
+    const sortDir = subject ? arg2 : arg3;
+    if (subject) {
+      cy.wrap(subject).as("dataTable");
+    } else {
+      cy.getBy(arg1).as("dataTable");
+    }
+    cy.get("@dataTable").should("not.have.class", "is-loading");
+    cy.get("@dataTable").within(() => {
+      cy.get(`thead tr th:nth-child(${column})`)
+        .should("have.class", "sortable")
+        .as("tableSort")
+        .then(() => {
+          for (let i = 0; i < 3; i++) {
+            cy.get("@tableSort").then(($tableSort) => {
+              if (!$tableSort.hasClass(sortDir)) {
+                cy.get("@tableSort").click();
+              }
+            });
+          }
+          cy.get("@tableSort").should("have.class", sortDir);
+        });
+    });
+  }
+);
+
+Cypress.Commands.add(
+  "visitByDataTableCellValue",
+  { prevSubject: "optional" },
+  (subject, arg1, arg2, arg3) => {
+    const column = subject ? arg1 : arg2;
+    const content = subject ? arg2 : arg3;
+    cy.wrap(false).as("rowExists");
+    if (subject) {
+      cy.wrap(subject).as("dataTable");
+    } else {
+      cy.getBy(arg1).as("dataTable");
+    }
+    cy.get("@dataTable")
+      .findDataTableRow(column, content)
+      .then(($row) => {
+        if ($row) {
+          cy.wrap(true).as("rowExists");
+          cy.wrap($row).click();
+        } else {
+          cy.log("data-table has no matching items");
+        }
+      });
+    return cy.get("@rowExists");
+  }
+);
 
 Cypress.Commands.add("visitUserByAccessor", (accessor) => {
   cy.location("pathname").should("equal", "/admin/user/list");
-  cy.getDataTableRow(accessor, "view.data-table").within(() => {
+  cy.getDataTableRow("view.data-table", accessor).within(() => {
     cy.getBy(".v-btn{edit}")
       .within(() => {
         cy.root()
@@ -206,7 +305,7 @@ Cypress.Commands.add("getRootMessageFolder", (context) => {
 Cypress.Commands.add("getMessageDataTableRow", (accessor, context) => {
   cy.location("pathname").should("equal", "/iris-messages/list");
   cy.getRootMessageFolder(context).click();
-  cy.getDataTableRow(accessor, "view.data-table").should("exist");
+  cy.getDataTableRow("view.data-table", accessor).should("exist");
 });
 
 Cypress.Commands.add(