From 5be12bc7ea56f9721376a18dc00e091bb61d2450 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 3 Apr 2024 09:45:52 +0200
Subject: [PATCH] Force-remove isRequired property on all survey questions

Resolves MS-910 #complete
---
 client/cypress/e2e/frontend/survey.spec.js | 104 ------------
 client/cypress/e2e/frontend/survey.spec.ts | 175 +++++++++++++++++++++
 client/src/pages/survey.vue                |  23 ++-
 3 files changed, 197 insertions(+), 105 deletions(-)
 delete mode 100644 client/cypress/e2e/frontend/survey.spec.js
 create mode 100644 client/cypress/e2e/frontend/survey.spec.ts

diff --git a/client/cypress/e2e/frontend/survey.spec.js b/client/cypress/e2e/frontend/survey.spec.js
deleted file mode 100644
index f5b33178..00000000
--- a/client/cypress/e2e/frontend/survey.spec.js
+++ /dev/null
@@ -1,104 +0,0 @@
-const module = require('../../fixtures/module.json');
-
-describe('Survey', () => {
-  beforeEach(() => {
-    cy.setup();
-  });
-
-  it('should display a matrix correctly', () => {
-    // todo: fix bitbucket hickup and re-enable
-    let answer = null;
-
-    cy.mockGraphqlOps({
-      operations: {
-        MeQuery: {
-          me: {
-            permissions: [],
-          },
-        },
-        ModuleQuery: (variables) => ({ module }),
-        SurveyQuery: () => ({
-          survey: {
-            id: 'U3VydmV5Tm9kZTox',
-            title: 'Test',
-            data: ` {
- "title": "Titel Übung",
- "logoPosition": "right",
- "pages": [
-  {
-   "name": "page1",
-   "elements": [
-    {
-     "type": "matrixdropdown",
-     "name": "question3",
-     "title": "Frage",
-     "columns": [
-      {
-       "name": "Column 1",
-       "title": "Spalte A"
-      },
-      {
-       "name": "Column 2",
-       "title": "Spalte B"
-      }
-     ],
-     "choices": [
-      "Placeholder"
-     ],
-     "cellType": "checkbox",
-     "rows": [
-      {
-       "value": "Row 1",
-       "text": "Zeile 1"
-      },
-      {
-       "value": "Row 2",
-       "text": "Zeile 2"
-      },
-      {
-       "value": "Row 3",
-       "text": "Zeile 3"
-      }
-     ]
-    }
-   ],
-   "title": "Titel Seite 1"
-  }
- ]
-}
-
-`,
-            module: {
-              id: 'TW9kdWxlTm9kZToxNw==',
-              __typename: 'ModuleNode',
-            },
-            answer,
-            __typename: 'SurveyNode',
-          },
-        }),
-        UpdateAnswer: (variables) => {
-          answer = variables.input.answer;
-          return {
-            updateAnswer: {
-              answer,
-              __typename: 'UpdateAnswerPayload',
-            },
-          };
-        },
-        ModuleSolutions: {
-          module: {
-            solutionsEnabled: false,
-          },
-        },
-      },
-    });
-
-    cy.visit('/survey/U3VydmV5Tm9kZTox');
-
-    cy.get('h1').should('contain', 'Titel Übung');
-
-    cy.get('.base-input-container__label').should('not.be.visible');
-
-    // cy.get('[value="Speichern & Weiter"]').click();
-  });
-});
diff --git a/client/cypress/e2e/frontend/survey.spec.ts b/client/cypress/e2e/frontend/survey.spec.ts
new file mode 100644
index 00000000..c26ba696
--- /dev/null
+++ b/client/cypress/e2e/frontend/survey.spec.ts
@@ -0,0 +1,175 @@
+const module = require('../../fixtures/module.json');
+
+const defaultData = ` {
+ "title": "Titel Übung",
+ "logoPosition": "right",
+ "pages": [
+  {
+   "name": "page1",
+   "elements": [
+    {
+     "type": "matrixdropdown",
+     "name": "question3",
+     "title": "Frage",
+     "columns": [
+      {
+       "name": "Column 1",
+       "title": "Spalte A"
+      },
+      {
+       "name": "Column 2",
+       "title": "Spalte B"
+      }
+     ],
+     "choices": [
+      "Placeholder"
+     ],
+     "cellType": "checkbox",
+     "rows": [
+      {
+       "value": "Row 1",
+       "text": "Zeile 1"
+      },
+      {
+       "value": "Row 2",
+       "text": "Zeile 2"
+      },
+      {
+       "value": "Row 3",
+       "text": "Zeile 3"
+      }
+     ]
+    }
+   ],
+   "title": "Titel Seite 1"
+  }
+ ]
+}
+
+`;
+
+const requiredData = `
+{
+  "pages": [
+    {
+      "name": "Übung1",
+      "title": "Diebstahlversicherung",
+      "elements": [
+        {
+          "name": "Name dem Aufgaben",
+          "type": "panel",
+          "title": "question title",
+          "elements": [
+            {
+              "name": "question1",
+              "type": "comment",
+              "title": "Welche Faktoren sollten die drei bei der Festlegung der Prämienhöhe berücksichtigen? Begründen Sie Ihre Antwort.",
+              "isRequired": true,
+              "correctAnswer": "Die Anzahl Versicherter: Je mehr Lernende mitmachen, desto höher ist die Summe der Prämien und desto mehr Geld steht zur Schadenszahlung zur Verfügung. Die Höhe der maximal auszuzahlenden Schadenssumme: Je höher die maximale Schadenssumme ist, desto höher muss die einzelne Prämie angesetzt sein. Die Höhe der maximalen Schadenssumme hängt ihrerseits vom zu erwartenden Schaden ab. Die Nachfrage nach der Versicherung: Je höher die Prämie ist, desto weniger Lernende werden die Versicherung abschliessen.",
+              "requiredErrorText": "Bitte beantworten Sie die Frage."
+            },
+            {
+              "name": "question2",
+              "type": "comment",
+              "title": "Wie hoch würden Sie die Prämie ansetzen? Begründen Sie Ihre Antwort.",
+              "isRequired": true,
+              "correctAnswer": "correct answer",
+              "requiredErrorText": "Bitte beantworten Sie die Frage."
+            },
+            {
+              "name": "question3",
+              "type": "comment",
+              "title": "Wie hoch würden Sie die maximale Schadenssumme ansetzen? Begründen Sie Ihre Antwort.",
+              "isRequired": true,
+              "correctAnswer": "Individuelle Antworten, etwa: Nimmt man an, jede sechste Person wird einmal im Jahr bestohlen (50 Bestohlene), sollte man die maximale Schadenssumme auf CHF 180.– begrenzen. Bei einer Prämie von CHF 30.– würden dann Marion, Mats und Ricarda weder einen Gewinn noch einen Verlust machen. Bei zu knapper Kalkulation laufen die drei Versicherungsanbieter Gefahr, Verluste zu machen. Daher müssen sie periodisch die Schäden nach Häufigkeit und Schadensgrösse analysieren.",
+              "requiredErrorText": "Bitte beantworten Sie die Frage."
+            }
+          ]
+        }
+      ]
+    },
+    { "name": "page2" }
+  ],
+  "title": "Übung ",
+  "completeText": "Abschliessen",
+  "pageNextText": "Weiter",
+  "pagePrevText": "Zurück",
+  "requiredText": "",
+  "completedHtml": "<p>Sie haben die Übung abgeschlossen.</p>",
+  "showProgressBar": "bottom",
+  "showQuestionNumbers": "off",
+  "sendResultOnPageNext": true,
+  "questionErrorLocation": "bottom"
+}
+`;
+
+const getOperations = (data) => {
+  let answer = null;
+  return {
+    MeQuery: {
+      me: {
+        permissions: [],
+      },
+    },
+    ModuleQuery: (_variables) => ({ module }),
+    SurveyQuery: () => ({
+      survey: {
+        id: 'U3VydmV5Tm9kZTox',
+        title: 'Test',
+        data,
+        module: {
+          id: 'TW9kdWxlTm9kZToxNw==',
+          __typename: 'ModuleNode',
+        },
+        answer,
+        __typename: 'SurveyNode',
+      },
+    }),
+    UpdateAnswer: (variables) => {
+      answer = variables.input.answer;
+      return {
+        updateAnswer: {
+          answer,
+          __typename: 'UpdateAnswerPayload',
+        },
+      };
+    },
+    ModuleSolutions: {
+      module: {
+        solutionsEnabled: false,
+      },
+    },
+  };
+};
+
+describe('Survey', () => {
+  beforeEach(() => {
+    cy.setup();
+    cy.mockGraphqlOps({
+      operations: getOperations(defaultData),
+    });
+  });
+
+  it('should display a matrix correctly', () => {
+    // todo: fix bitbucket hickup and re-enable
+
+    cy.visit('/survey/U3VydmV5Tm9kZTox');
+
+    cy.get('h1').should('contain', 'Titel Übung');
+
+    cy.get('.base-input-container__label').should('not.be.visible');
+
+    // cy.get('[value="Speichern & Weiter"]').click();
+  });
+
+  it('should be able to continue without filling out required fields', () => {
+    cy.mockGraphqlOps({
+      operations: getOperations(requiredData),
+    });
+
+    cy.visit('/survey/U3VydmV5Tm9kZTox');
+    cy.get('#sv-nav-complete > .sv-action__content > .button').scrollIntoView().click();
+    cy.get('.survey__panel-title').should('not.exist');
+    cy.get('.survey__body > p').should('have.text', 'Sie haben die Übung abgeschlossen.');
+  });
+});
diff --git a/client/src/pages/survey.vue b/client/src/pages/survey.vue
index b822b22e..4f03a1ef 100644
--- a/client/src/pages/survey.vue
+++ b/client/src/pages/survey.vue
@@ -17,7 +17,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import '@/styles/survey.modern.css';
 import '@/styles/survey.reset.css';
 import '@/styles/_survey.scss';
@@ -239,6 +239,27 @@ export default {
       if (survey.answer && survey.answer.data) {
         answer = JSON.parse(survey.answer.data);
       }
+      // we now need to traverse all the `pages` and all the `elements` inside them, which themselves have `elements`,
+      // and we need to delete their `isRequired` keys
+      json = {
+        ...json,
+        pages: json.pages.map((page) => {
+          return {
+            ...page,
+            elements: page.elements?.map((element) => {
+              return {
+                ...element,
+                elements: element.elements?.map((subElement) => {
+                  return {
+                    ...subElement,
+                    isRequired: false,
+                  };
+                }),
+              };
+            }),
+          };
+        }),
+      };
 
       if (!this.completed) {
         this.survey = this.initSurvey(json, answer);