From 919edf1a24a0db32ec4082281e9abc8cd3645cbd Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Mon, 29 Aug 2022 16:22:31 +0200
Subject: [PATCH] Add cypress tests for circle page

---
 .../src/components/circle/LearningContent.vue |  2 +
 .../components/circle/LearningSequence.vue    |  1 +
 client/src/components/circle/italy.json       |  0
 client/src/components/circle/map.html         | 10 ----
 client/src/components/ui/ItCheckbox.vue       |  8 ++-
 cypress/e2e/circle.cy.js                      | 53 +++++++++++++++++++
 cypress/e2e/learningPath.cy.js                |  2 +-
 .../core/management/commands/cypress_reset.py |  3 +-
 8 files changed, 66 insertions(+), 13 deletions(-)
 delete mode 100644 client/src/components/circle/italy.json
 delete mode 100644 client/src/components/circle/map.html
 create mode 100644 cypress/e2e/circle.cy.js
diff --git a/client/src/components/circle/LearningContent.vue b/client/src/components/circle/LearningContent.vue
index 6e950076..44e6ca56 100644
--- a/client/src/components/circle/LearningContent.vue
+++ b/client/src/components/circle/LearningContent.vue
@@ -30,6 +30,7 @@ const block = computed(() => {
       <button
         type="button"
         class="btn-text inline-flex items-center px-3 py-2 font-normal"
+        data-cy="close-learnng-content"
         @click="circleStore.closeLearningContent()"
       >
         <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
@@ -41,6 +42,7 @@ const block = computed(() => {
       <button
         type="button"
         class="btn-blue"
+        data-cy="complete-and-continue"
         @click="circleStore.continueFromLearningContent()"
       >
         Abschliessen und weiter
diff --git a/client/src/components/circle/LearningSequence.vue b/client/src/components/circle/LearningSequence.vue
index 2de781af..29ffccf3 100644
--- a/client/src/components/circle/LearningSequence.vue
+++ b/client/src/components/circle/LearningSequence.vue
@@ -68,6 +68,7 @@ const allFinished = computed(() => {
           <ItCheckbox
             :modelValue="learningContent.completed"
             @click="toggleCompleted(learningContent)"
+            :data-cy="`lc-${learningContent.slug}`"
           >
             <span @click.stop="circleStore.openLearningContent(learningContent)">{{ learningContent.contents[0].type }}: {{ learningContent.title }}</span>
           </ItCheckbox>
diff --git a/client/src/components/circle/italy.json b/client/src/components/circle/italy.json
deleted file mode 100644
index e69de29b..00000000
diff --git a/client/src/components/circle/map.html b/client/src/components/circle/map.html
deleted file mode 100644
index 6b6499c3..00000000
--- a/client/src/components/circle/map.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>$Title$</title>
-</head>
-<body>
-$END$
-</body>
-</html>
diff --git a/client/src/components/ui/ItCheckbox.vue b/client/src/components/ui/ItCheckbox.vue
index 984ec348..37355963 100644
--- a/client/src/components/ui/ItCheckbox.vue
+++ b/client/src/components/ui/ItCheckbox.vue
@@ -30,6 +30,8 @@ defineEmits(['update:modelValue'])
         bg-[url('/static/icons/icon-checkbox-checked.svg')]
         hover:bg-[url('/static/icons/icon-checkbox-checked-hover.svg')]
         disabled:opacity-50
+        cy-checkbox
+        cy-checkbox-checked
         "
     ></div>
     <div
@@ -40,9 +42,13 @@ defineEmits(['update:modelValue'])
         bg-contain
         bg-[url('/static/icons/icon-checkbox-unchecked.svg')]
         hover:bg-[url('/static/icons/icon-checkbox-unchecked-hover.svg')]
+        cy-checkbox
+        cy-checkbox-unchecked
       "
     ></div>
-    <div class="flex-auto pl-4"><slot></slot></div>
+    <div class="flex-auto pl-4">
+      <slot></slot>
+    </div>
   </div>
 
 </template>
diff --git a/cypress/e2e/circle.cy.js b/cypress/e2e/circle.cy.js
new file mode 100644
index 00000000..788f5174
--- /dev/null
+++ b/cypress/e2e/circle.cy.js
@@ -0,0 +1,53 @@
+import { login } from "./helpers";
+
+describe("circle page", () => {
+  beforeEach(() => {
+    cy.manageCommand("cypress_reset");
+
+    login("admin", "test");
+    cy.visit("/circle/analyse");
+  });
+
+  it("can open circle page", () => {
+    cy.get('[data-cy="circle-title"]').should("contain", "Analyse");
+  });
+
+  it("can toggle learning content", () => {
+    cy.get('[data-cy="circle-title"]').should("contain", "Analyse");
+
+    cy.get(
+      '[data-cy="lc-ermittlung-des-kundenbedarfs-4"] > .cy-checkbox'
+    ).click();
+
+    cy.get(
+      '[data-cy="lc-ermittlung-des-kundenbedarfs-4"] > .cy-checkbox-checked'
+    ).should("have.class", "cy-checkbox-checked");
+
+    // completion data should still be there after reload
+    cy.reload();
+    cy.get(
+      '[data-cy="lc-ermittlung-des-kundenbedarfs-4"] > .cy-checkbox-checked'
+    ).should("have.class", "cy-checkbox-checked");
+  });
+
+  it("can open learning contents and complete them by continuing", () => {
+    cy.get('[data-cy="lc-ermittlung-des-kundenbedarfs-4"]').click();
+
+    cy.get('[data-cy="complete-and-continue"]').click();
+    cy.get('[data-cy="complete-and-continue"]').click();
+    cy.get('[data-cy="complete-and-continue"]').click();
+
+    cy.get('[data-cy="close-learnng-content"]').click();
+
+    cy.get(
+      '[data-cy="lc-ermittlung-des-kundenbedarfs-4"] > .cy-checkbox-checked'
+    ).should("have.class", "cy-checkbox-checked");
+    cy.get('[data-cy="lc-kundenanalyse"] > .cy-checkbox-checked').should(
+      "have.class",
+      "cy-checkbox-checked"
+    );
+    cy.get(
+      '[data-cy="lc-kundenbedürfnisse-erkennen-2"] > .cy-checkbox-checked'
+    ).should("have.class", "cy-checkbox-checked");
+  });
+});
diff --git a/cypress/e2e/learningPath.cy.js b/cypress/e2e/learningPath.cy.js
index 450c9c21..306d8c86 100644
--- a/cypress/e2e/learningPath.cy.js
+++ b/cypress/e2e/learningPath.cy.js
@@ -1,6 +1,6 @@
 import { login } from "./helpers";
 
-describe("learningPath", () => {
+describe("learningPath page", () => {
   beforeEach(() => {
     cy.manageCommand("cypress_reset");
   });
diff --git a/server/vbv_lernwelt/core/management/commands/cypress_reset.py b/server/vbv_lernwelt/core/management/commands/cypress_reset.py
index 79ac351f..b7ebdb62 100644
--- a/server/vbv_lernwelt/core/management/commands/cypress_reset.py
+++ b/server/vbv_lernwelt/core/management/commands/cypress_reset.py
@@ -1,5 +1,6 @@
 import djclick as click
 
+from vbv_lernwelt.completion.models import CircleCompletion
 from vbv_lernwelt.learnpath.create_default_learning_path import create_default_learning_path, \
     delete_default_learning_path
 
@@ -13,4 +14,4 @@ def command(reset_learning_path):
         delete_default_learning_path()
         create_default_learning_path(skip_locales=True)
 
-
+    CircleCompletion.objects.all().delete()
