From aa30dadfd788f78acb1d866030eb3b922ddf59ef Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 16 Jul 2024 15:20:25 +0200
Subject: [PATCH] Update cypress tests

---
 .../personalProfile/ProfileEdit.vue           |   4 +-
 .../personalProfile/ProfileView.vue           |  23 ++--
 client/src/consts.ts                          |   2 +-
 client/src/pages/StyleGuidePage.vue           |   8 --
 .../src/pages/onboarding/AccountProfile.vue   |   2 +-
 .../personalProfile/PersonalProfilePage.vue   |   6 +-
 cypress/e2e/checkout-vv/checkout.cy.js        | 121 +++++++++++++-----
 cypress/e2e/profile/profile.cy.js             |  85 ++++++++++++
 cypress/support/commands.js                   |  11 ++
 server/vbv_lernwelt/core/serializers.py       |   6 +
 10 files changed, 212 insertions(+), 56 deletions(-)
 create mode 100644 cypress/e2e/profile/profile.cy.js

diff --git a/client/src/components/personalProfile/ProfileEdit.vue b/client/src/components/personalProfile/ProfileEdit.vue
index e668857a..398e363a 100644
--- a/client/src/components/personalProfile/ProfileEdit.vue
+++ b/client/src/components/personalProfile/ProfileEdit.vue
@@ -301,7 +301,7 @@ async function avatarUpload(e: Event) {
       <div class="flex flex-col justify-start md:flex-row md:space-x-4">
         <div class="w-full md:max-w-lg">
           <label for="org-street-address" class="block pb-1.5 leading-6">
-            {{ $t("a.Name") }}
+            {{ $t("a.Firmenname") }}
           </label>
 
           <input
@@ -439,7 +439,7 @@ async function avatarUpload(e: Event) {
     <button class="btn btn-secondary" @click="emit('cancel')">
       {{ $t("general.cancel") }}
     </button>
-    <button class="btn btn-primary" @click="save">
+    <button class="btn btn-primary" data-cy="saveButton" @click="save">
       {{ $t("general.save") }}
     </button>
   </div>
diff --git a/client/src/components/personalProfile/ProfileView.vue b/client/src/components/personalProfile/ProfileView.vue
index b41779c7..ac2e494c 100644
--- a/client/src/components/personalProfile/ProfileView.vue
+++ b/client/src/components/personalProfile/ProfileView.vue
@@ -71,17 +71,21 @@ const invoiceAddress = computed(() => {
     <h3 class="mb-2">{{ $t("a.Persönliche Informationen") }}</h3>
     <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-8 sm:py-6">
       <label class="block font-semibold leading-6">{{ $t("a.Vorname") }}</label>
-      <div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.first_name }}</div>
+      <div class="mb-3 sm:col-span-2 sm:mb-0" data-cy="firstName">
+        {{ user.first_name }}
+      </div>
       <label class="block font-semibold leading-6">{{ $t("a.Name") }}</label>
-      <div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.last_name }}</div>
+      <div class="mb-3 sm:col-span-2 sm:mb-0" data-cy="lastName">
+        {{ user.last_name }}
+      </div>
       <label class="block font-semibold leading-6">
         {{ $t("a.E-Mail Adresse") }}
       </label>
-      <div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.email }}</div>
+      <div class="mb-3 sm:col-span-2 sm:mb-0" data-cy="email">{{ user.email }}</div>
       <label class="block font-semibold leading-6">
         {{ $t("a.Telefonnummer") }}
       </label>
-      <div class="mb-3 sm:col-span-2 sm:mb-0">
+      <div class="mb-3 sm:col-span-2 sm:mb-0" data-cy="phone">
         <span v-if="user.phone_number">
           {{ displaySwissPhoneNumber(user.phone_number) }}
         </span>
@@ -90,7 +94,7 @@ const invoiceAddress = computed(() => {
       <label class="block font-semibold leading-6">
         {{ $t("a.Geburtsdatum") }}
       </label>
-      <div class="mb-3 sm:col-span-2 sm:mb-0">
+      <div class="mb-3 sm:col-span-2 sm:mb-0" data-cy="birthDate">
         <span v-if="user.birth_date">
           {{ dayjs(user.birth_date).format("DD.MM.YYYY") }}
         </span>
@@ -99,7 +103,7 @@ const invoiceAddress = computed(() => {
       <label class="block font-semibold leading-6">
         {{ $t("a.Privatadresse") }}
       </label>
-      <div class="mb-3 sm:col-span-2 sm:mb-0">
+      <div class="mb-3 sm:col-span-2 sm:mb-0" data-cy="privateAddress">
         <div v-if="privateAddress.length">
           <span v-for="(line, index) in privateAddress" :key="index">
             {{ line }}
@@ -114,13 +118,14 @@ const invoiceAddress = computed(() => {
     <h3 class="my-2">{{ $t("a.Geschäftsdaten") }}</h3>
     <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-8 sm:py-6">
       <label class="block font-semibold leading-6">{{ $t("a.Unternehmen") }}</label>
-      <div class="mb-3 sm:col-span-2 sm:mb-0">{{ organisationName }}</div>
+      <div class="mb-3 sm:col-span-2 sm:mb-0" data-cy="organisationDetailName">
+        {{ organisationName }}
+      </div>
       <label class="block font-semibold leading-6">
         {{ $t("a.Firmenanschrift") }}
       </label>
       <div class="sm:col-span-2">
-        <!-- eslint-disable vue/no-v-html -->
-        <div v-if="orgAddress">
+        <div v-if="orgAddress" data-cy="organisationAddress">
           <span v-for="(line, index) in orgAddress" :key="index">
             {{ line }}
             <br />
diff --git a/client/src/consts.ts b/client/src/consts.ts
index 25801247..656714c7 100644
--- a/client/src/consts.ts
+++ b/client/src/consts.ts
@@ -16,4 +16,4 @@ export const COURSE_MOTORFAHRZEUG_PRUEFUNG_ID = -13;
 export const ORGANISATION_OTHER_BROKER_ID = 1;
 export const ORGANISATION_OTHER_HEALTH_INSURANCE_ID = 2;
 export const ORGANISATION_OTHER_PRIVATE_INSURANCE_ID = 3;
-export const ORGANISATION_NO_COMPANY_ID = 31;
\ No newline at end of file
+export const ORGANISATION_NO_COMPANY_ID = 31;
diff --git a/client/src/pages/StyleGuidePage.vue b/client/src/pages/StyleGuidePage.vue
index 26f791bb..25ff5db5 100644
--- a/client/src/pages/StyleGuidePage.vue
+++ b/client/src/pages/StyleGuidePage.vue
@@ -13,7 +13,6 @@ import VerticalBarChart from "@/components/ui/VerticalBarChart.vue";
 import LearningPathCircle from "@/pages/learningPath/learningPathPage/LearningPathCircle.vue";
 import logger from "loglevel";
 import { reactive, ref } from "vue";
-import VueDatePicker from "@vuepic/vue-datepicker";
 import "@vuepic/vue-datepicker/dist/main.css";
 
 const state = reactive({
@@ -36,8 +35,6 @@ const state = reactive({
   },
 });
 
-const birtDate = ref("1982-06-15");
-
 const dropdownData = [
   {
     title: "Option 1",
@@ -415,11 +412,6 @@ function log(data: any) {
     ></ItDropdownSelect>
     {{ state.dropdownSelected }}
 
-    <h2 class="mb-8 mt-8">Date Picker</h2>
-    <div class="mt-2">
-      <VueDatePicker v-model="birthDate"></VueDatePicker>
-    </div>
-
     <h2 class="mb-8 mt-8">Checkbox</h2>
 
     <ItCheckbox
diff --git a/client/src/pages/onboarding/AccountProfile.vue b/client/src/pages/onboarding/AccountProfile.vue
index 2982a9a3..727dd96e 100644
--- a/client/src/pages/onboarding/AccountProfile.vue
+++ b/client/src/pages/onboarding/AccountProfile.vue
@@ -100,7 +100,7 @@ async function navigateNextRoute() {
       <ItDropdownSelect v-model="selectedOrganisation" :items="organisations" />
 
       <div v-if="isOtherOrganisation(selectedOrganisation.id)" class="my-8">
-        <label for="organisationDetailName" class="block pb-1.5 heading-3">
+        <label for="organisationDetailName" class="heading-3 block pb-1.5">
           {{ $t("a.Firmenname") }}
         </label>
         <input
diff --git a/client/src/pages/personalProfile/PersonalProfilePage.vue b/client/src/pages/personalProfile/PersonalProfilePage.vue
index 01903add..99312b07 100644
--- a/client/src/pages/personalProfile/PersonalProfilePage.vue
+++ b/client/src/pages/personalProfile/PersonalProfilePage.vue
@@ -45,7 +45,11 @@ function startEditMode() {
 
     <div class="flex flex-grow flex-col space-y-4 px-8 py-8 md:px-16">
       <div v-if="!editMode" class="flex justify-end space-x-4">
-        <button class="btn btn-secondary" @click="startEditMode">
+        <button
+          class="btn btn-secondary"
+          data-cy="editProfileButton"
+          @click="startEditMode"
+        >
           {{ $t("a.Profil bearbeiten") }}
         </button>
       </div>
diff --git a/cypress/e2e/checkout-vv/checkout.cy.js b/cypress/e2e/checkout-vv/checkout.cy.js
index 00f39ac7..e6007b44 100644
--- a/cypress/e2e/checkout-vv/checkout.cy.js
+++ b/cypress/e2e/checkout-vv/checkout.cy.js
@@ -17,22 +17,31 @@ describe("checkout.cy.js", () => {
 
     cy.get('[data-cy="account-confirm-title"]').should(
       "contain",
-      "Konto erstellen"
+      "Konto erstellen",
     );
     cy.get('[data-cy="continue-button"]').click();
 
     cy.get('[data-cy="account-profile-title"]').should(
       "contain",
-      "Profil ergänzen"
+      "Profil ergänzen",
     );
     cy.get('[data-cy="dropdown-select"]').click();
-    cy.get('[data-cy="dropdown-select-option-Baloise"]').click();
+    cy.get(
+      '[data-cy="dropdown-select-option-andere Krankenversicherer"]',
+    ).click();
+    cy.get("#organisationDetailName").type("FdH GmbH");
     cy.get('[data-cy="continue-button"]').click();
 
+    cy.loadUser("id", TEST_USER_EMPTY_ID).then((u) => {
+      expect(u.organisation_detail_name).to.equal("FdH GmbH");
+      // 2 -> andere Krankenversicherer
+      expect(u.organisation).to.equal(2);
+    });
+
     // Adressdaten ausfüllen
     cy.get('[data-cy="account-checkout-title"]').should(
       "contain",
-      "Lehrgang kaufen"
+      "Lehrgang kaufen",
     );
     cy.get("#street-address").type("Eggersmatt");
     cy.get("#street-number").type("32");
@@ -40,7 +49,7 @@ describe("checkout.cy.js", () => {
     cy.get("#city").type("Zumholz");
     cy.get('[data-cy="add-company-address"]').click();
 
-    cy.get("#company-name").type("Iterativ GmbH");
+    // cy.get("#company-name").clear().type("Iterativ GmbH");
     cy.get("#company-street-address").type("Brückfeldstrasse");
     cy.get("#company-street-number").type("16");
     cy.get("#company-postal-code").type("3012");
@@ -60,7 +69,7 @@ describe("checkout.cy.js", () => {
       expect(ci.country).to.equal("CH");
 
       expect(ci.invoice_address).to.equal("org");
-      expect(ci.organisation_detail_name).to.equal("Iterativ GmbH");
+      expect(ci.organisation_detail_name).to.equal("FdH GmbH");
       expect(ci.organisation_street).to.equal("Brückfeldstrasse");
       expect(ci.organisation_street_number).to.equal("16");
       expect(ci.organisation_postal_code).to.equal("3012");
@@ -72,12 +81,32 @@ describe("checkout.cy.js", () => {
       expect(ci.state).to.equal("ongoing");
     });
 
+    cy.loadUser("id", TEST_USER_EMPTY_ID).then((u) => {
+      expect(u.first_name).to.equal("Flasche");
+      expect(u.last_name).to.equal("Leer");
+
+      expect(u.street).to.equal("Eggersmatt");
+      expect(u.street_number).to.equal("32");
+      expect(u.postal_code).to.equal("1719");
+      expect(u.city).to.equal("Zumholz");
+      expect(u.country).to.equal("CH");
+
+      expect(u.invoice_address).to.equal("org");
+      expect(u.organisation_detail_name).to.equal("FdH GmbH");
+      expect(u.organisation_street).to.equal("Brückfeldstrasse");
+      expect(u.organisation_street_number).to.equal("16");
+      expect(u.organisation_postal_code).to.equal("3012");
+      expect(u.organisation_city).to.equal("Bern");
+      // 2 -> andere Krankenversicherer
+      expect(u.organisation).to.equal(2);
+    });
+
     // pay
     cy.get('[data-cy="pay-button"]').click();
 
     cy.get('[data-cy="checkout-success-title"]').should(
       "contain",
-      "Gratuliere"
+      "Gratuliere",
     );
     // wait for payment callback
     cy.wait(3000);
@@ -86,7 +115,7 @@ describe("checkout.cy.js", () => {
     // back on dashboard page
     cy.get('[data-cy="db-course-title"]').should(
       "contain",
-      "Versicherungsvermittler"
+      "Versicherungsvermittler",
     );
 
     cy.loadCheckoutInformation("user_id", TEST_USER_EMPTY_ID).then((ci) => {
@@ -102,13 +131,13 @@ describe("checkout.cy.js", () => {
 
     cy.get('[data-cy="account-confirm-title"]').should(
       "contain",
-      "Konto erstellen"
+      "Konto erstellen",
     );
     cy.get('[data-cy="continue-button"]').click();
 
     cy.get('[data-cy="account-profile-title"]').should(
       "contain",
-      "Profil ergänzen"
+      "Profil ergänzen",
     );
     cy.get('[data-cy="dropdown-select"]').click();
     cy.get('[data-cy="dropdown-select-option-Baloise"]').click();
@@ -117,10 +146,10 @@ describe("checkout.cy.js", () => {
     // Adressdaten ausfüllen
     cy.get('[data-cy="account-checkout-title"]').should(
       "contain",
-      "Lehrgang kaufen"
+      "Lehrgang kaufen",
     );
 
-    cy.get('#paymentMethod').select('cembra_byjuno');
+    cy.get("#paymentMethod").select("cembra_byjuno");
 
     cy.get("#street-address").type("Eggersmatt");
     cy.get("#street-number").type("32");
@@ -132,32 +161,38 @@ describe("checkout.cy.js", () => {
 
     cy.get('[data-cy="continue-pay"]').click();
 
-    cy.loadExternalApiRequestLog("request_username", "empty@example.com").then((entry) => {
-      // ends with "/v1/transactions""
-      expect(entry.api_url).to.contain("/v1/transactions");
-      expect(entry.request_username).to.contain("empty@example.com");
+    cy.loadExternalApiRequestLog("request_username", "empty@example.com").then(
+      (entry) => {
+        // ends with "/v1/transactions""
+        expect(entry.api_url).to.contain("/v1/transactions");
+        expect(entry.request_username).to.contain("empty@example.com");
 
-      expect(entry.api_request_data.amount).to.equal(32400);
-      expect(entry.api_request_data.currency).to.equal("CHF");
-      expect(entry.api_request_data.autoSettle).to.equal(true);
+        expect(entry.api_request_data.amount).to.equal(32400);
+        expect(entry.api_request_data.currency).to.equal("CHF");
+        expect(entry.api_request_data.autoSettle).to.equal(true);
 
-      expect(entry.api_request_data.customer.firstName).to.equal("Flasche");
-      expect(entry.api_request_data.customer.lastName).to.equal("Leer");
-      expect(entry.api_request_data.customer.street).to.equal("Eggersmatt 32");
-      expect(entry.api_request_data.customer.zipCode).to.equal("1719");
-      expect(entry.api_request_data.customer.city).to.equal("Zumholz");
-      expect(entry.api_request_data.customer.country).to.equal("CH");
-      expect(entry.api_request_data.customer.type).to.equal("P");
-      expect(entry.api_request_data.customer.phone).to.equal("+41792018586");
-      expect(entry.api_request_data.customer.birthDate).to.equal("1982-06-09");
+        expect(entry.api_request_data.customer.firstName).to.equal("Flasche");
+        expect(entry.api_request_data.customer.lastName).to.equal("Leer");
+        expect(entry.api_request_data.customer.street).to.equal(
+          "Eggersmatt 32",
+        );
+        expect(entry.api_request_data.customer.zipCode).to.equal("1719");
+        expect(entry.api_request_data.customer.city).to.equal("Zumholz");
+        expect(entry.api_request_data.customer.country).to.equal("CH");
+        expect(entry.api_request_data.customer.type).to.equal("P");
+        expect(entry.api_request_data.customer.phone).to.equal("+41792018586");
+        expect(entry.api_request_data.customer.birthDate).to.equal(
+          "1982-06-09",
+        );
 
-      expect(entry.api_request_data.INT.repaymentType).to.equal(3);
-      expect(entry.api_request_data.INT.riskOwner).to.equal("IJ");
-      expect(entry.api_request_data.INT.subtype).to.equal("INVOICE");
-      expect(entry.api_request_data.INT.deviceFingerprintId).to.not.be.empty;
+        expect(entry.api_request_data.INT.repaymentType).to.equal(3);
+        expect(entry.api_request_data.INT.riskOwner).to.equal("IJ");
+        expect(entry.api_request_data.INT.subtype).to.equal("INVOICE");
+        expect(entry.api_request_data.INT.deviceFingerprintId).to.not.be.empty;
 
-      expect(true).to.be.true;
-    });
+        expect(true).to.be.true;
+      },
+    );
 
     // check that results are stored on server
     cy.loadCheckoutInformation("user_id", TEST_USER_EMPTY_ID).then((ci) => {
@@ -183,5 +218,23 @@ describe("checkout.cy.js", () => {
       expect(ci.ip_address).to.not.be.empty;
       expect(ci.device_fingerprint_session_key).to.not.be.empty;
     });
+
+    cy.loadUser("id", TEST_USER_EMPTY_ID).then((u) => {
+      expect(u.first_name).to.equal("Flasche");
+      expect(u.last_name).to.equal("Leer");
+
+      expect(u.street).to.equal("Eggersmatt");
+      expect(u.street_number).to.equal("32");
+      expect(u.postal_code).to.equal("1719");
+      expect(u.city).to.equal("Zumholz");
+      expect(u.country).to.equal("CH");
+      expect(u.phone_number).to.equal("+41792018586");
+      expect(u.birth_date).to.equal("1982-06-09");
+
+      expect(u.invoice_address).to.equal("prv");
+
+      // 7 -> Baloise
+      expect(u.organisation).to.equal(7);
+    });
   });
 });
diff --git a/cypress/e2e/profile/profile.cy.js b/cypress/e2e/profile/profile.cy.js
new file mode 100644
index 00000000..627e8088
--- /dev/null
+++ b/cypress/e2e/profile/profile.cy.js
@@ -0,0 +1,85 @@
+import { TEST_USER_EMPTY_ID } from "../../consts";
+import { login } from "../helpers";
+
+describe("profile.cy.js", () => {
+  beforeEach(() => {
+    cy.manageCommand("cypress_reset");
+
+    login("empty@example.com", "test");
+    cy.visit("/profile");
+  });
+
+  it("can edit all profile fields", () => {
+    cy.get('[data-cy="editProfileButton"]').click();
+
+    cy.get("#phone").type("079 201 85 86");
+    cy.get('[data-test="dp-input"]').type("09.06.1982{enter}");
+
+    cy.get("#street-address").type("Hafen");
+    cy.get("#street-number").type("123");
+    cy.get("#postal-code").type("DE-20095");
+    cy.get("#city").type("Hamburg");
+    cy.get("#country").select("DE");
+
+    // andere broker
+    cy.get("#organisation").select("1");
+
+    cy.get("#org-detail-name").type("Judihui GmbH");
+    cy.get("#org-street-address").type("Auf der Alm");
+    cy.get("#org-street-number").type("17");
+    cy.get("#org-postal-code").type("AT-6020");
+    cy.get("#org-city").type("Innsbruck");
+    cy.get("#org-country").select("AT");
+
+    cy.get("#invoice-address-organisation").click();
+
+    cy.get('[data-cy="saveButton"]').click();
+
+    // check displayed data
+    cy.get('[data-cy="firstName"]').should("contain", "Flasche");
+    cy.get('[data-cy="lastName"]').should("contain", "Leer");
+    cy.get('[data-cy="email"]').should("contain", "empty@example.com");
+    cy.get('[data-cy="phone"]').should("contain", "079 201 85 86");
+    cy.get('[data-cy="birthDate"]').should("contain", "09.06.1982");
+
+    cy.get('[data-cy="privateAddress"]').should("contain", "Hafen 123");
+    cy.get('[data-cy="privateAddress"]').should("contain", "DE-20095 Hamburg");
+    cy.get('[data-cy="privateAddress"]').should("contain", "Deutschland");
+
+    cy.get('[data-cy="organisationDetailName"]').should(
+      "contain",
+      "andere Broker",
+    );
+    cy.get('[data-cy="organisationAddress"]').should("contain", "Judihui GmbH");
+    cy.get('[data-cy="organisationAddress"]').should(
+      "contain",
+      "Auf der Alm 17",
+    );
+    cy.get('[data-cy="organisationAddress"]').should(
+      "contain",
+      "AT-6020 Innsbruck",
+    );
+    cy.get('[data-cy="organisationAddress"]').should("contain", "Österreich");
+
+    // check stored data
+    cy.loadUser("id", TEST_USER_EMPTY_ID).then((u) => {
+      expect(u.first_name).to.equal("Flasche");
+      expect(u.last_name).to.equal("Leer");
+
+      expect(u.street).to.equal("Hafen");
+      expect(u.street_number).to.equal("123");
+      expect(u.postal_code).to.equal("DE-20095");
+      expect(u.city).to.equal("Hamburg");
+      expect(u.country).to.equal("DE");
+
+      expect(u.invoice_address).to.equal("org");
+      expect(u.organisation_detail_name).to.equal("Judihui GmbH");
+      expect(u.organisation_street).to.equal("Auf der Alm");
+      expect(u.organisation_street_number).to.equal("17");
+      expect(u.organisation_postal_code).to.equal("AT-6020");
+      expect(u.organisation_city).to.equal("Innsbruck");
+      // 1 -> andere Broker
+      expect(u.organisation).to.equal(1);
+    });
+  });
+});
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 50dfdf30..3564a74c 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -178,6 +178,17 @@ Cypress.Commands.add("loadCheckoutInformation", (key, value) => {
   );
 });
 
+Cypress.Commands.add("loadUser", (key, value) => {
+  return loadObjectJson(
+    key,
+    value,
+    "vbv_lernwelt.core.models.User",
+    "vbv_lernwelt.core.serializers.CypressUserSerializer",
+    true
+  );
+});
+
+
 Cypress.Commands.add("makeSelfEvaluation", (answers) => {
   for (let i = 0; i < answers.length; i++) {
     const answer = answers[i];
diff --git a/server/vbv_lernwelt/core/serializers.py b/server/vbv_lernwelt/core/serializers.py
index 3a656c71..31965017 100644
--- a/server/vbv_lernwelt/core/serializers.py
+++ b/server/vbv_lernwelt/core/serializers.py
@@ -131,6 +131,12 @@ class UserSerializer(serializers.ModelSerializer):
         return instance
 
 
+class CypressUserSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = User
+        fields = "__all__"
+
+
 class OrganisationSerializer(serializers.ModelSerializer):
     id = serializers.IntegerField(source="organisation_id", read_only=True)
     name = serializers.SerializerMethodField()