From 293bdd84ce1662798ff5cd17dba78ba9f0cf6fc9 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 17 May 2021 14:17:10 +0200
Subject: [PATCH] Fix frontend tests

---
 client/cypress/fixtures/me.minimal.js         |  10 ++
 client/cypress/fixtures/mocks.js              |   4 +
 client/cypress/fixtures/module.minimal.js     |  11 ++
 client/cypress/fixtures/spell-check.json      |  12 +-
 .../frontend/apply-module-visibility.spec.js  |   6 +-
 .../integration/frontend/snapshots.spec.js    |  21 +--
 .../integration/frontend/spellcheck.spec.js   | 121 ++++++++++++++++--
 client/cypress/support/helpers.js             |   2 +-
 .../content-blocks/assignment/Assignment.vue  |  56 ++++----
 9 files changed, 175 insertions(+), 68 deletions(-)
 create mode 100644 client/cypress/fixtures/me.minimal.js
 create mode 100644 client/cypress/fixtures/mocks.js
 create mode 100644 client/cypress/fixtures/module.minimal.js

diff --git a/client/cypress/fixtures/me.minimal.js b/client/cypress/fixtures/me.minimal.js
new file mode 100644
index 00000000..21bd49d7
--- /dev/null
+++ b/client/cypress/fixtures/me.minimal.js
@@ -0,0 +1,10 @@
+export default {
+  username: '',
+  firstName: '',
+  lastName: '',
+  avatarUrl: '',
+  email: '',
+  onboardingVisited: true,
+  schoolClasses: {},
+  id: '',
+};
diff --git a/client/cypress/fixtures/mocks.js b/client/cypress/fixtures/mocks.js
new file mode 100644
index 00000000..ceaf95a5
--- /dev/null
+++ b/client/cypress/fixtures/mocks.js
@@ -0,0 +1,4 @@
+export default {
+  UUID: () => '123-456-789',
+  GenericStreamFieldType: () => 'GenericStreamFieldType',
+};
diff --git a/client/cypress/fixtures/module.minimal.js b/client/cypress/fixtures/module.minimal.js
new file mode 100644
index 00000000..f04a353e
--- /dev/null
+++ b/client/cypress/fixtures/module.minimal.js
@@ -0,0 +1,11 @@
+export default {
+  title: 'title',
+  metaTitle: 'metaTitle',
+  heroImage: 'heroImage',
+  teaser: 'teaser',
+  intro: 'intro',
+  assignments: {},
+  objectiveGroups: [],
+  id: '',
+  chapters: [],
+};
diff --git a/client/cypress/fixtures/spell-check.json b/client/cypress/fixtures/spell-check.json
index c1075aa5..609c4f51 100644
--- a/client/cypress/fixtures/spell-check.json
+++ b/client/cypress/fixtures/spell-check.json
@@ -7,8 +7,7 @@
       "length": 3,
       "sentenceOffset": 0,
       "affected": "Hir",
-      "corrected": "Dir",
-      "__typename": "SpellCheckStepNode"
+      "corrected": "Dir"
     },
     {
       "sentence": "Hir ist ein Feler gewesen",
@@ -16,8 +15,7 @@
       "length": 5,
       "sentenceOffset": 0,
       "affected": "Feler",
-      "corrected": "Fehler",
-      "__typename": "SpellCheckStepNode"
+      "corrected": "Fehler"
     },
     {
       "sentence": "Hir ist ein Feler gewesen",
@@ -25,9 +23,7 @@
       "length": 7,
       "sentenceOffset": 0,
       "affected": "gewesen",
-      "corrected": "gewesen.",
-      "__typename": "SpellCheckStepNode"
+      "corrected": "gewesen."
     }
-  ],
-  "__typename": "SpellCheckPayload"
+  ]
 }
diff --git a/client/cypress/integration/frontend/apply-module-visibility.spec.js b/client/cypress/integration/frontend/apply-module-visibility.spec.js
index b7a97849..c7492f0b 100644
--- a/client/cypress/integration/frontend/apply-module-visibility.spec.js
+++ b/client/cypress/integration/frontend/apply-module-visibility.spec.js
@@ -1,10 +1,6 @@
 // import * as schema from '../fixtures/schema.json';
 import {getModules, getMe} from '../../support/helpers';
-
-const mocks = {
-  UUID: () => 'Whatever',
-  GenericStreamFieldType: () => '',
-};
+import mocks from '../../fixtures/mocks';
 
 const operations = {
   MeQuery() {
diff --git a/client/cypress/integration/frontend/snapshots.spec.js b/client/cypress/integration/frontend/snapshots.spec.js
index 75aa370b..8522af15 100644
--- a/client/cypress/integration/frontend/snapshots.spec.js
+++ b/client/cypress/integration/frontend/snapshots.spec.js
@@ -1,29 +1,19 @@
 import minimalMe from '../../fixtures/me.minimal';
+import module from '../../fixtures/module.minimal';
+import mocks from '../../fixtures/mocks';
 
 const me = isTeacher => ({
   ...minimalMe,
   isTeacher,
 });
 
-const module = () => ({
-  title: 'title',
-  metaTitle: 'metaTitle',
-  heroImage: 'heroImage',
-  teaser: 'teaser',
-  intro: 'intro',
-  assignments: {},
-  objectiveGroups: [],
-  id: '',
-  chapters: [],
-});
-
 const operations = isTeacher => ({
   operations: {
     MeQuery: {
       me: me(isTeacher),
     },
     ModuleDetailsQuery: {
-      module: module(),
+      module,
     },
   },
 });
@@ -35,10 +25,7 @@ describe('Snapshot', () => {
     cy.task('getSchema').then(schema => {
       cy.mockGraphql({
         schema,
-        mocks: {
-          UUID: () => '123-456-789',
-          GenericStreamFieldType: () => 'GenericStreamFieldType',
-        },
+        mocks,
       });
     });
 
diff --git a/client/cypress/integration/frontend/spellcheck.spec.js b/client/cypress/integration/frontend/spellcheck.spec.js
index adeb0495..bbaa6ccb 100644
--- a/client/cypress/integration/frontend/spellcheck.spec.js
+++ b/client/cypress/integration/frontend/spellcheck.spec.js
@@ -1,7 +1,6 @@
 import {mockUpdateLastModule} from '../../support/helpers';
+import module from '../../fixtures/module.minimal';
 
-const assignments = require('../../fixtures/assignments.json');
-const module = require('../../fixtures/module.json');
 const spellCheck = require('../../fixtures/spell-check.json');
 
 const operations = {
@@ -11,22 +10,128 @@ const operations = {
       onboardingVisited: true,
     },
   },
-  AssignmentsQuery: {
-    assignments,
+  AssignmentQuery: {
+    assignment: {
+      id: '',
+      title: 'Ein Auftragstitel',
+      assignment: 'Ein Auftrag',
+      submission: {
+        id: 'U3R1ZGVudFN1Ym1pc3Npb25Ob2RlOjE=',
+        text: 'Hir ist ein Feler gewesen',
+        final: false,
+        document: '',
+        submissionFeedback: {
+          'id': 'U3VibWlzc2lvbkZlZWRiYWNrTm9kZTox',
+          'text': '\ud83d\ude42\ud83d\ude10\ud83e\udd2c\ud83d\udc4d\ud83e\udd22\ud83e\udd22\ud83e\udd22\ud83e\udd22\ud83d\ude2e\ud83e\udd17',
+          'teacher': {
+            'firstName': 'Nico',
+            'lastName': 'Zickgraf',
+            '__typename': 'UserNode',
+          },
+        },
+      },
+    },
   },
-  ModulesQuery: {
-    module,
+  ModuleDetailsQuery: {
+    module: {
+      ...module,
+      assignments: [
+        {
+          'id': 'QXNzaWdubWVudE5vZGU6MQ==',
+          'title': 'Ein Auftragstitel',
+          'assignment': 'Ein Auftrag',
+          'solution': null,
+          'submission': {
+            'id': 'U3R1ZGVudFN1Ym1pc3Npb25Ob2RlOjE=',
+            'text': 'Hir ist ein Feler gewesen',
+            'final': false,
+            'document': '',
+            'submissionFeedback': {
+              'id': 'U3VibWlzc2lvbkZlZWRiYWNrTm9kZTox',
+              'text': '🙂😐🤬👍🤢🤢🤢🤢😮🤗',
+              'teacher': {
+                'firstName': 'Nico',
+                'lastName': 'Zickgraf',
+                '__typename': 'UserNode',
+              },
+              '__typename': 'SubmissionFeedbackNode',
+            },
+            '__typename': 'StudentSubmissionNode',
+          },
+          '__typename': 'AssignmentNode',
+        },
+      ],
+      chapters: [
+        {
+          'id': 'Q2hhcHRlck5vZGU6MTg=',
+          'title': '1.1 Lehrbeginn',
+          'description': 'Wie sieht Ihr Konsumverhalten aus?',
+          'bookmark': {
+            'note': {
+              'id': 'Tm90ZU5vZGU6Mg==',
+              'text': 'Chapter Chapter',
+              '__typename': 'NoteNode',
+            },
+            '__typename': 'ChapterBookmarkNode',
+          },
+          contentBlocks: [
+            {
+              'id': 'Q29udGVudEJsb2NrTm9kZToxOQ==',
+              'slug': 'assignment',
+              'title': 'Assignment',
+              'type': 'NORMAL',
+              'contents': [
+                {
+                  'type': 'assignment',
+                  'value': {
+                    'title': 'Ein Auftragstitel',
+                    'assignment': 'Ein Auftrag',
+                    'id': 'QXNzaWdubWVudE5vZGU6MQ==',
+                  },
+                  'id': 'df8212ee-3e82-49fa-977e-c4b60789163e',
+                },
+              ],
+              'userCreated': false,
+              'mine': false,
+              'bookmarks': [
+                {
+                  'uuid': 'df8212ee-3e82-49fa-977e-c4b60789163e',
+                  'note': {
+                    'id': 'Tm90ZU5vZGU6Mw==',
+                    'text': 'Noch eine Notiz',
+                    '__typename': 'NoteNode',
+                  },
+                  '__typename': 'ContentBlockBookmarkNode',
+                },
+              ],
+              'hiddenFor': [],
+              'visibleFor': [],
+              '__typename': 'ContentBlockNode',
+            },
+          ],
+        },
+      ],
+    },
   },
   SpellCheck: {
     spellCheck,
   },
+  UpdateAssignment: {
+    updateAssignment: {
+      assignment: {
+        id: '',
+        title: 'title',
+        assignment: '',
+        solution: '',
+      },
+    },
+  },
   ...mockUpdateLastModule(),
 };
 
 describe('Spellcheck', () => {
   before(() => {
     cy.server();
-
     cy.task('getSchema').then(schema => {
       cy.mockGraphql({
         schema,
@@ -40,9 +145,7 @@ describe('Spellcheck', () => {
     cy.visit('/module/lohn-und-budget/');
 
     cy.get('.spellcheck__correction').should('have.length', 0);
-
     cy.get('.submission-form-container__spellcheck').click();
-
     cy.get('.spellcheck__correction').should('have.length', 3);
   });
 });
diff --git a/client/cypress/support/helpers.js b/client/cypress/support/helpers.js
index bfb2b43a..f704d728 100644
--- a/client/cypress/support/helpers.js
+++ b/client/cypress/support/helpers.js
@@ -22,7 +22,7 @@ export const getMe = ({schoolClasses, teacher}) => {
       'firstName': 'Rahel',
       'lastName': 'Cueni',
       'avatarUrl': '',
-      'isTeacher': false,
+      'isTeacher': teacher,
       'lastModule': {
         'id': 'TW9kdWxlTm9kZToxNw==',
         'slug': 'lohn-und-budget',
diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index 3ca642f3..87772616 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-  import {mapGetters, mapActions} from 'vuex';
+  import {mapActions, mapGetters} from 'vuex';
   import ASSIGNMENT_QUERY from '@/graphql/gql/queries/assignmentQuery.gql';
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
   import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
@@ -66,7 +66,7 @@
     components: {
       Solution,
       SubmissionForm,
-      SpellCheck
+      SpellCheck,
     },
 
     data() {
@@ -75,13 +75,13 @@
           submission: this.initialSubmission(),
         },
         me: {
-          permissions: []
+          permissions: [],
         },
         inputType: 'text',
         unsaved: false,
         saving: 0,
         corrections: '',
-        spellcheckLoading: false
+        spellcheckLoading: false,
       };
     },
 
@@ -98,7 +98,7 @@
       },
       solution() {
         return {
-          text: this.assignment.solution
+          text: this.assignment.solution,
         };
       },
       id() {
@@ -107,7 +107,7 @@
       feedbackText() {
         let feedback = this.assignment.submission.submissionFeedback;
         return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${feedback.text}`;
-      }
+      },
     },
 
     methods: {
@@ -122,20 +122,20 @@
                 id: this.assignment.id,
                 answer: this.assignment.submission.text,
                 document: this.assignment.submission.document,
-              }
-            }
+              },
+            },
           },
           update(store, {data: {updateAssignment: {successful, updatedAssignment}}}) {
             try {
               if (successful) {
                 const query = ASSIGNMENT_QUERY;
                 const variables = {
-                  id: updatedAssignment.id
+                  id: updatedAssignment.id,
                 };
                 const data = store.readQuery({query, variables});
 
                 data.assignment = Object.assign({}, updatedAssignment, {
-                  submission
+                  submission,
                 });
                 store.writeQuery({query, variables, data});
               }
@@ -143,7 +143,7 @@
               console.error(e);
               // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
             }
-          }
+          },
         }).then(() => {
           this.saving--;
           if (this.saving === 0) {
@@ -177,10 +177,10 @@
                 id: this.assignment.id,
                 answer: this.assignment.submission.text,
                 document: this.assignment.submission.document,
-                final: true
-              }
-            }
-          }
+                final: true,
+              },
+            },
+          },
         });
       },
       reopen() {
@@ -192,10 +192,10 @@
                 id: this.assignment.id,
                 answer: this.assignment.submission.text,
                 document: this.assignment.submission.document,
-                final: false
-              }
-            }
-          }
+                final: false,
+              },
+            },
+          },
         });
       },
       initialSubmission() {
@@ -213,16 +213,16 @@
           variables: {
             input: {
               assignment: this.assignment.id,
-              text: this.assignment.submission.text
-            }
+              text: this.assignment.submission.text,
+            },
           },
           update(store, {data: {spellCheck: {results}}}) {
             self.corrections = results;
-          }
+          },
         }).then(() => {
           this.spellcheckLoading = false;
         });
-      }
+      },
     },
 
     apollo: {
@@ -230,7 +230,7 @@
         query: ASSIGNMENT_QUERY,
         variables() {
           return {
-            id: this.value.id
+            id: this.value.id,
           };
         },
         result(response) {
@@ -240,12 +240,12 @@
           if (this.assignment.id === this.scrollToAssignmentId && 'stale' in response) {
             this.$nextTick(() => this.scrollToAssignmentReady(true));
           }
-        }
+        },
       },
       me: {
-        query: ME_QUERY
-      }
-    }
+        query: ME_QUERY,
+      },
+    },
   };
 </script>