From 2db70594613b441379face9e6fdd3a1e3b650c5a Mon Sep 17 00:00:00 2001
From: Elia Bieri <elia.bieri@iterativ.ch>
Date: Wed, 21 Jun 2023 11:28:40 +0000
Subject: [PATCH] Merged in bugfix/VBV-454-fix-cypress-pipelines (pull request
 #144)

Fix Cypress pipelines

* Update Cypress

* Attempt to change reload logic

* Fix it checkbox cy data

* Fix notification cypress test

* Rework notification settings saving logic
---
 client/src/components/ui/ItCheckbox.vue        |  3 ++-
 client/src/pages/SettingsPage.vue              | 11 ++++++-----
 cypress/e2e/assignment/assignmentStudent.cy.js |  2 +-
 cypress/e2e/notifications.cy.js                | 18 ++++++++++--------
 package-lock.json                              | 14 +++++++-------
 package.json                                   |  2 +-
 6 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/client/src/components/ui/ItCheckbox.vue b/client/src/components/ui/ItCheckbox.vue
index 51c386a4..ffce78d9 100644
--- a/client/src/components/ui/ItCheckbox.vue
+++ b/client/src/components/ui/ItCheckbox.vue
@@ -33,6 +33,7 @@ const input = (e: Event) => {
       'cursor-not-allowed': disabled,
     }"
     class="inline-flex cursor-pointer"
+    :data-cy="`it-checkbox-clicktarget-${checkboxItem.value}`"
   >
     <label
       class="cy-checkbox cy-checkbox-checked block flex h-8 items-center bg-contain bg-no-repeat pl-8 disabled:opacity-50"
@@ -49,9 +50,9 @@ const input = (e: Event) => {
         :checked="checkboxItem.checked"
         :value="checkboxItem.value"
         :disabled="disabled"
-        :data-cy="`it-checkbox-${checkboxItem.value}`"
         class="sr-only"
         type="checkbox"
+        :data-cy="`it-checkbox-${checkboxItem.value}`"
         @keydown="keydown"
         @input="input"
       />
diff --git a/client/src/pages/SettingsPage.vue b/client/src/pages/SettingsPage.vue
index e0406df3..076eb52f 100644
--- a/client/src/pages/SettingsPage.vue
+++ b/client/src/pages/SettingsPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue";
 import { itGet, itPost } from "@/fetchHelpers";
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 
 // TODO: make translation
 const items = ref([
@@ -26,17 +26,18 @@ const items = ref([
   },
 ]);
 
-watch(items, async (items) => {
+const updateItems = async (_items: []) => {
+  items.value = _items;
   try {
     await itPost(
       "/api/notify/email_notification_settings/",
-      items.filter((item) => item.checked).map((item) => item.value)
+      items.value.filter((item) => item.checked).map((item) => item.value)
     );
     console.debug("Updated email notification settings");
   } catch (e) {
     console.error(`Could not update email notification settings: ${e}`);
   }
-});
+};
 
 onMounted(async () => {
   const response = await itGet("/api/notify/email_notification_settings/");
@@ -58,7 +59,7 @@ onMounted(async () => {
           <ItCheckboxGroup
             :items="items"
             :label="$t('settings.emailNotifications')"
-            @update:items="items = $event"
+            @update:items="updateItems($event)"
           ></ItCheckboxGroup>
         </div>
       </main>
diff --git a/cypress/e2e/assignment/assignmentStudent.cy.js b/cypress/e2e/assignment/assignmentStudent.cy.js
index cbe656f5..115a81d8 100644
--- a/cypress/e2e/assignment/assignmentStudent.cy.js
+++ b/cypress/e2e/assignment/assignmentStudent.cy.js
@@ -41,7 +41,7 @@ describe("student test", () => {
       "Teilaufgabe 1: Beispiel einer Versicherungspolice finden"
     );
     // Click confirmation
-    cy.get('[data-cy="it-checkbox-confirmation-1"]').click({ force: true });
+    cy.get('[data-cy="it-checkbox-clicktarget-confirmation-1"]').click();
     cy.reload();
     cy.get('[data-cy="it-checkbox-confirmation-1"]').should("be.checked");
   });
diff --git a/cypress/e2e/notifications.cy.js b/cypress/e2e/notifications.cy.js
index 40b94d0e..2d4bc883 100644
--- a/cypress/e2e/notifications.cy.js
+++ b/cypress/e2e/notifications.cy.js
@@ -93,26 +93,28 @@ describe("email notification settings", () => {
   it("can update email notification settings", () => {
     login("admin", "test");
     cy.visit("/settings");
-    cy.wait(1000);
+    cy.wait(2000);
 
     // Checking prerequisites
     cy.get('[data-cy="it-checkbox-USER_INTERACTION"]').should("not.be.checked");
     cy.get('[data-cy="it-checkbox-INFORMATION"]').should("not.be.checked");
     cy.get('[data-cy="it-checkbox-PROGRESS"]').should("not.be.checked");
 
-    cy.get('[data-cy="it-checkbox-USER_INTERACTION"]').check({ force: true });
-    cy.get('[data-cy="it-checkbox-INFORMATION"]').check({ force: true });
+    cy.get('[data-cy="it-checkbox-clicktarget-INFORMATION"]').click();
+    cy.get('[data-cy="it-checkbox-INFORMATION"]').should("be.checked");
+    cy.wait(400);
 
-    cy.reload();
+    cy.visit("/settings");
     cy.wait(1000);
-    cy.get('[data-cy="it-checkbox-USER_INTERACTION"]').should("be.checked");
+    cy.get('[data-cy="it-checkbox-USER_INTERACTION"]').should("not.be.checked");
     cy.get('[data-cy="it-checkbox-INFORMATION"]').should("be.checked");
     cy.get('[data-cy="it-checkbox-PROGRESS"]').should("not.be.checked");
 
-    cy.get('[data-cy="it-checkbox-USER_INTERACTION"]').uncheck({ force: true });
-    cy.get('[data-cy="it-checkbox-INFORMATION"]').uncheck({ force: true });
+    cy.get('[data-cy="it-checkbox-clicktarget-INFORMATION"]').click();
+    cy.get('[data-cy="it-checkbox-INFORMATION"]').should("not.be.checked");
+    cy.wait(400);
 
-    cy.reload();
+    cy.visit("/settings");
     cy.wait(1000);
     cy.get('[data-cy="it-checkbox-USER_INTERACTION"]').should("not.be.checked");
     cy.get('[data-cy="it-checkbox-INFORMATION"]').should("not.be.checked");
diff --git a/package-lock.json b/package-lock.json
index 9cdaf6b1..63f5936d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "pa11y": "^6.2.3"
       },
       "devDependencies": {
-        "cypress": "^12.12.0",
+        "cypress": "^12.15.0",
         "cypress-cloud": "^1.7.4"
       }
     },
@@ -920,9 +920,9 @@
       }
     },
     "node_modules/cypress": {
-      "version": "12.12.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.12.0.tgz",
-      "integrity": "sha512-UU5wFQ7SMVCR/hyKok/KmzG6fpZgBHHfrXcHzDmPHWrT+UUetxFzQgt7cxCszlwfozckzwkd22dxMwl/vNkWRw==",
+      "version": "12.15.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.15.0.tgz",
+      "integrity": "sha512-FqGbxsH+QgjStuTO9onXMIeF44eOrgVwPvlcvuzLIaePQMkl72YgBvpuHlBGRcrw3Q4SvqKfajN8iV5XWShAiQ==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -4089,9 +4089,9 @@
       }
     },
     "cypress": {
-      "version": "12.12.0",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.12.0.tgz",
-      "integrity": "sha512-UU5wFQ7SMVCR/hyKok/KmzG6fpZgBHHfrXcHzDmPHWrT+UUetxFzQgt7cxCszlwfozckzwkd22dxMwl/vNkWRw==",
+      "version": "12.15.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.15.0.tgz",
+      "integrity": "sha512-FqGbxsH+QgjStuTO9onXMIeF44eOrgVwPvlcvuzLIaePQMkl72YgBvpuHlBGRcrw3Q4SvqKfajN8iV5XWShAiQ==",
       "dev": true,
       "requires": {
         "@cypress/request": "^2.88.10",
diff --git a/package.json b/package.json
index a1a54b39..65852795 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "vue-i18n-extract": "npm run vue-i18n-extract --prefix client"
   },
   "devDependencies": {
-    "cypress": "^12.12.0",
+    "cypress": "^12.15.0",
     "cypress-cloud": "^1.7.4"
   },
   "dependencies": {