Add Cypress test for checkout process

client/src/components/dashboard/NoCourseSession.vue

@@ -24,7 +24,9 @@ const user = useUserStore();
         <p class="mb-4">
           {{ $t("start.vvDescription") }}
         </p>
-        <a href="/start/vv" class="btn-primary">{{ $t("a.Mehr erfahren") }}</a>
+        <a href="/start/vv" class="btn-primary" data-cy="start-vv">
+          {{ $t("a.Mehr erfahren") }}
+        </a>
       </div>
 
       <div>
@@ -39,6 +41,7 @@ const user = useUserStore();
         <router-link
           :to="{ name: 'accountProfile', params: { courseType: 'uk' } }"
           class="btn-primary"
+          data-cy="start-uk"
         >
           {{ $t("a.Jetzt mit Lehrgang starten") }}
         </router-link>

client/src/pages/onboarding/AccountConfirm.vue

@@ -9,7 +9,9 @@ const userStore = useUserStore();
 <template>
   <WizardPage :step="0.5">
     <template #content>
-      <h2 class="my-10">{{ $t("a.Konto erstellen") }}</h2>
+      <h2 class="my-10" data-cy="account-confirm-title">
+        {{ $t("a.Konto erstellen") }}
+      </h2>
       <InfoBox color="text-green-500" icon="it-icon-check">
         <template #content>
           <p class="text-lg font-bold">
@@ -27,7 +29,11 @@ const userStore = useUserStore();
     </template>
 
     <template #footer>
-      <router-link :to="{ name: 'accountProfile' }" class="btn-blue flex items-center">
+      <router-link
+        :to="{ name: 'accountProfile' }"
+        class="btn-blue flex items-center"
+        data-cy="continue-button"
+      >
         {{ $t("general.next") }}
         <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
       </router-link>

client/src/pages/onboarding/AccountProfile.vue

@@ -70,7 +70,9 @@ const nextRoute = computed(() => {
 <template>
   <WizardPage :step="1">
     <template #content>
-      <h2 class="my-10">{{ $t("a.Profil ergänzen") }}</h2>
+      <h2 class="my-10" data-cy="account-profile-title">
+        {{ $t("a.Profil ergänzen") }}
+      </h2>
 
       <h3 class="mb-3">{{ $t("a.Gesellschaft") }}</h3>
 
@@ -120,6 +122,7 @@ const nextRoute = computed(() => {
           :disabled="!validOrganisation"
           class="btn-blue flex items-center"
           role="link"
+          data-cy="continue-button"
           @click="navigate"
         >
           {{ $t("general.next") }}

client/src/pages/onboarding/vv/CheckoutAddress.vue

@@ -180,7 +180,9 @@ const executePayment = async () => {
 <template>
   <WizardPage :step="2">
     <template #content>
-      <h2 class="my-10">{{ $t("a.Lehrgang kaufen") }}</h2>
+      <h2 class="my-10" data-cy="account-checkout-title">
+        {{ $t("a.Lehrgang kaufen") }}
+      </h2>
       <p class="mb-4">
         <i18next
           :translation="$t('a.Der Preis für den Lehrgang {course} beträgt {price}.')"
@@ -234,6 +236,7 @@ const executePayment = async () => {
       <button
         v-if="!useCompanyAddress"
         class="underline"
+        data-cy="add-company-address"
         @click="setUseCompanyAddress(true)"
       >
         <template v-if="userOrganisationName">
@@ -285,7 +288,7 @@ const executePayment = async () => {
         <it-icon-arrow-left class="it-icon mr-2 h-6 w-6" />
         {{ $t("general.back") }}
       </router-link>
-      <button class="btn-blue flex items-center" @click="executePayment">
+      <button class="btn-blue flex items-center" data-cy="continue-pay" @click="executePayment">
         {{ $t("a.Mit Kreditkarte bezahlen") }}
         <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
       </button>

client/src/pages/onboarding/vv/CheckoutComplete.vue

@@ -6,7 +6,7 @@ const user = useUserStore();
 
 <template>
   <div class="flex flex-grow flex-col items-center gap-y-8 p-16">
-    <h1 class="my-10">{{ $t("a.Gratuliere!") }}</h1>
+    <h1 class="my-10" data-cy="checkout-success-title">{{ $t("a.Gratuliere!") }}</h1>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="472"
@@ -43,7 +43,7 @@ const user = useUserStore();
         </template>
       </i18next>
     </p>
-    <router-link to="/" class="btn-blue flex items-center">
+    <router-link to="/" class="btn-blue flex items-center" data-cy="start-vv-button">
       {{ $t("a.Jetzt mit Lehrgang starten") }}
     </router-link>
   </div>

cypress/consts.js

@@ -1,8 +1,16 @@
 // ids for cypress test data
-export const ADMIN_USER_ID = "872efd96-3bd7-4a1e-a239-2d72cad9f604";
+export const ADMIN_USER_ID = "872efd96-3bd7-4a1e-a239-2d72cad9f604"
-export const TEST_TRAINER1_USER_ID = "b9e71f59-c44f-4290-b93a-9b3151e9a2fc";
+export const TEST_SUPERVISOR1_USER_ID = "a9a8b741-f115-4521-af2d-7dfef673b8c5"
-export const TEST_STUDENT1_USER_ID = "65c73ad0-6d53-43a9-a4a4-64143f27b03a";
+export const TEST_TRAINER1_USER_ID = "b9e71f59-c44f-4290-b93a-9b3151e9a2fc"
-export const TEST_STUDENT2_USER_ID = "19c40d94-15cc-4198-aaad-ef707c4b0900";
+export const TEST_TRAINER2_USER_ID = "299941ae-1e4b-4f45-8180-876c3ad340b4"
+export const TEST_STUDENT1_USER_ID = "65c73ad0-6d53-43a9-a4a4-64143f27b03a"
+export const TEST_STUDENT2_USER_ID = "19c40d94-15cc-4198-aaad-ef707c4b0900"
+export const TEST_STUDENT3_USER_ID = "bcf94dba-53bc-474b-a22d-e4af39aa042b"
+export const TEST_MENTOR1_USER_ID = "d1f5f5a9-5b0a-4e1a-9e1a-9e9b5b5e1b1b"
+export const TEST_STUDENT1_VV_USER_ID = "5ff59857-8de5-415e-a387-4449f9a0337a"
+export const TEST_STUDENT2_VV_AND_VV_MENTOR_USER_ID = "7e8ebf0b-e6e2-4022-88f4-6e663ba0a9db"
+export const TEST_USER_EMPTY_ID = "daecbabe-4ab9-4edf-a71f-4119042ccb02"
+
 
 export const TEST_COURSE_SESSION_BERN_ID = -1;
 export const TEST_COURSE_SESSION_ZURICH_ID = -2;

cypress/e2e/checkout-vv/checkout.cy.js

@@ -0,0 +1,97 @@
+import { TEST_USER_EMPTY_ID } from "../../consts";
+import { login } from "../helpers";
+
+describe("checkout.cy.js", () => {
+  beforeEach(() => {
+    cy.manageCommand("cypress_reset");
+
+    login("empty@example.com", "test");
+    cy.visit("/");
+  });
+
+  it("can register and buy Versicherungsvermittlerin with credit card", () => {
+    cy.get('[data-cy="start-vv"]').click();
+
+    // wähle "Deutsch"
+    cy.get('[href="/onboarding/vv-de/account/create"]').click();
+
+    cy.get('[data-cy="account-confirm-title"]').should(
+      "contain",
+      "Konto erstellen"
+    );
+    cy.get('[data-cy="continue-button"]').click();
+
+    cy.get('[data-cy="account-profile-title"]').should(
+      "contain",
+      "Profil ergänzen"
+    );
+    cy.get('[data-cy="dropdown-select"]').click();
+    cy.get('[data-cy="dropdown-select-option-Baloise"]').click();
+    cy.get('[data-cy="continue-button"]').click();
+
+    // Adressdaten ausfüllen
+    cy.get('[data-cy="account-checkout-title"]').should(
+      "contain",
+      "Lehrgang kaufen"
+    );
+    cy.get("#street-address").type("Eggersmatt");
+    cy.get("#street-number").type("32");
+    cy.get("#postal-code").type("1719");
+    cy.get("#city").type("Zumholz");
+    cy.get('[data-cy="add-company-address"]').click();
+
+    cy.get("#company-name").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");
+    cy.get("#company-city").type("Bern");
+
+    cy.get('[data-cy="continue-pay"]').click();
+
+    // check that results are stored on server
+    cy.loadCheckoutInformation("user_id", TEST_USER_EMPTY_ID).then((ci) => {
+      expect(ci.first_name).to.equal("Flasche");
+      expect(ci.last_name).to.equal("Leer");
+
+      expect(ci.street).to.equal("Eggersmatt");
+      expect(ci.street_number).to.equal("32");
+      expect(ci.postal_code).to.equal("1719");
+      expect(ci.city).to.equal("Zumholz");
+      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_street).to.equal("Brückfeldstrasse");
+      expect(ci.organisation_street_number).to.equal("16");
+      expect(ci.organisation_postal_code).to.equal("3012");
+      expect(ci.organisation_city).to.equal("Bern");
+
+      expect(ci.product_name).to.equal("Versicherungsvermittler/-in VBV");
+      expect(ci.product_name).to.equal("Versicherungsvermittler/-in VBV");
+      expect(ci.product_price).to.equal(32400);
+
+      expect(ci.state).to.equal("ongoing");
+    });
+
+    // pay
+    cy.get('[data-cy="pay-button"]').click();
+
+    cy.get('[data-cy="checkout-success-title"]').should(
+      "contain",
+      "Gratuliere"
+    );
+    // wait for payment callback
+    cy.wait(3000);
+    cy.get('[data-cy="start-vv-button"]').click();
+
+    // back on dashboard page
+    cy.get('[data-cy="db-course-title"]').should(
+      "contain",
+      "Versicherungsvermittler"
+    );
+
+    cy.loadCheckoutInformation("user_id", TEST_USER_EMPTY_ID).then((ci) => {
+      expect(ci.state).to.equal("paid");
+    });
+  });
+});

cypress/support/commands.js

@@ -133,7 +133,7 @@ Cypress.Commands.add("loadAssignmentCompletion", (key, value) => {
     key,
     value,
     "vbv_lernwelt.assignment.models.AssignmentCompletion",
-    "vbv_lernwelt.assignment.serializers.AssignmentCompletionSerializer",
+    "vbv_lernwelt.assignment.serializers.CypressAssignmentCompletionSerializer",
     true
   );
 });
@@ -148,6 +148,16 @@ Cypress.Commands.add("loadFeedbackResponse", (key, value) => {
   );
 });
 
+Cypress.Commands.add("loadCheckoutInformation", (key, value) => {
+  return loadObjectJson(
+    key,
+    value,
+    "vbv_lernwelt.shop.models.CheckoutInformation",
+    "vbv_lernwelt.shop.serializers.CypressCheckoutInformationSerializer",
+    true
+  );
+});
+
 Cypress.Commands.add("makeSelfEvaluation", (answers) => {
   for (let i = 0; i < answers.length; i++) {
     const answer = answers[i];

server/vbv_lernwelt/assignment/serializers.py

@@ -3,7 +3,7 @@ from rest_framework import serializers
 from vbv_lernwelt.assignment.models import AssignmentCompletion
 
 
-class AssignmentCompletionSerializer(serializers.ModelSerializer):
+class CypressAssignmentCompletionSerializer(serializers.ModelSerializer):
     class Meta:
         model = AssignmentCompletion
         fields = [

server/vbv_lernwelt/shop/datatrans_fake_server.py

@@ -88,8 +88,8 @@ def fake_datatrans_pay_view(request, api_url=""):
                       <label>failed</label>
                     </div>
                     <div>
-                      <button type="submit">
+                      <button type="submit" data-cy="pay-button">
-                        Pay with selected Status
+                        Pay with selected status
                       </button>
                     </div>
                   </fieldset>

server/vbv_lernwelt/shop/serializers.py

@@ -1 +1,9 @@
+from rest_framework import serializers
 
+from vbv_lernwelt.shop.models import CheckoutInformation
+
+
+class CypressCheckoutInformationSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = CheckoutInformation
+        fields = "__all__"