Add first implementation of a test with mocked GraphQL calls

client/cypress/integration/spellcheck.spec.js

@@ -0,0 +1,153 @@
+const schema = require('../../../schema_formatted.json');
+
+describe('Spellcheck', () => {
+  beforeEach(() => {
+    cy.server();
+    cy.mockGraphql({
+      schema: schema,
+      // endpoint: '/api/graphql'
+    });
+  });
+
+  it('should highlight three errors', () => {
+    let module = {
+      id: 'TW9kdWxlTm9kZToxNw==',
+      title: 'Whatevs',
+      metaTitle: 'Modul 1',
+      teaser: 'Die Berufsbildung ist ein neuer Lebensabschnit',
+      intro: '\n                        <p>Sie stehen am Anfang eines neuen Lebensabschnitts. In Ihrer Rolle als Berufslernende oder Berufslernender haben Sie Verantwortung \u00fcbernommen.</p>\n                        <p>Wie erging es Ihnen am ersten Arbeits- und Schultag?</p>\n                        ',
+      slug: 'lohn-und-budget',
+      heroImage: 'https://hep-skillbox-files-prod.s3-eu-central-1.amazonaws.com/original_images/dummy_7bzqodY.jpg',
+      solutionsEnabled: false,
+      bookmark: {note: null, '__typename': 'ModuleBookmarkNode'},
+      __typename: 'ModuleNode',
+      assignments: {
+        'edges': [{
+          'node': {
+            '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': '\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'},
+                '__typename': 'SubmissionFeedbackNode'
+              },
+              '__typename': 'StudentSubmissionNode'
+            },
+            '__typename': 'AssignmentNode'
+          },
+          '__typename': 'AssignmentNodeEdge'
+        }],
+        '__typename': 'AssignmentNodeConnection'
+      },
+      'objectiveGroups': {
+        'edges': [], '__typename': 'ObjectiveGroupNodeConnection'
+      },
+      'chapters': {
+        'edges': [{
+          'node': {
+            'id': 'Q2hhcHRlck5vZGU6MTg=',
+            'title': '1.1 Lehrbeginn',
+            'description': 'Wie sieht Ihr Konsumverhalten aus?',
+            'bookmark': {
+              'note': {'id': 'Tm90ZU5vZGU6Mg==', 'text': 'Chapter Chapter', '__typename': 'NoteNode'},
+              '__typename': 'ChapterBookmarkNode'
+            },
+            'contentBlocks': {
+              'edges': [{
+                'node': {
+                  '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': {'edges': [], '__typename': 'SchoolClassNodeConnection'},
+                  'visibleFor': {'edges': [], '__typename': 'SchoolClassNodeConnection'},
+                  '__typename': 'ContentBlockNode'
+                },
+                '__typename': 'ContentBlockNodeEdge'
+              }],
+              '__typename': 'ContentBlockNodeConnection'
+            },
+            '__typename': 'ChapterNode'
+          },
+          '__typename': 'ChapterNodeEdge'
+        }],
+        '__typename': 'ChapterNodeConnection'
+      }
+    };
+
+    cy.mockGraphqlOps({
+      // endpoint: '/api/graphql',
+      operations: {
+        MeQuery: {
+          me: {
+            permissions: []
+          }
+        },
+        ModulesQuery: {
+          module
+        },
+        SpellCheck: {
+          spellCheck: {
+            correct: false,
+            results: [{
+              sentence: 'Hir ist ein Feler gewesen',
+              offset: 0,
+              length: 3,
+              affected: 'Hir',
+              corrected: 'Dir',
+              __typename: 'SpellCheckStepNode'
+            }, {
+              sentence: 'Hir ist ein Feler gewesen',
+              offset: 12,
+              length: 5,
+              affected: 'Feler',
+              corrected: 'Fehler',
+              __typename: 'SpellCheckStepNode'
+            }, {
+              sentence: 'Hir ist ein Feler gewesen',
+              offset: 18,
+              length: 7,
+              affected: 'gewesen',
+              corrected: 'gewesen.',
+              __typename: 'SpellCheckStepNode'
+            }],
+            __typename: 'SpellCheckPayload'
+          }
+        }
+      }
+    });
+
+    cy.apolloLogin('rahel.cueni', 'test');
+    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);
+  });
+});

client/cypress/support/commands.js

@@ -24,6 +24,8 @@
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
+import 'cypress-graphql-mock';
+
 Cypress.Commands.add('apolloLogin', (username, password) => {
   const payload = {
     'operationName': 'Login',
@@ -46,7 +48,7 @@ Cypress.Commands.add('apolloLogin', (username, password) => {
 });
 
 // todo: replace with apollo call
-Cypress.Commands.add("login", (username, password, visitLogin=false) => {
+Cypress.Commands.add("login", (username, password, visitLogin = false) => {
   if (visitLogin) {
     cy.visit('/login');
   }
@@ -88,7 +90,7 @@ Cypress.Commands.add('startGraphQLCapture', () => {
 // from https://stackoverflow.com/questions/53814647/how-can-i-alias-specific-graphql-requests-in-cypress
 Cypress.Commands.add('waitFor', operationName => {
   cy.wait('@graphQL').then(({request}) => {
-    if(request.body.operationName !== operationName) {
+    if (request.body.operationName !== operationName) {
       return cy.waitFor(operationName);
     }
   });

client/cypress/support/index.js

@@ -20,7 +20,7 @@ import './commands'
 // require('./commands')
 
 // from https://stackoverflow.com/questions/49079005/how-to-stub-a-call-to-graphql-using-cypress#49088084
-Cypress.on('window:before:load', win => {
+// Cypress.on('window:before:load', win => {
-  win.fetch = null;
+//   win.fetch = null;
-  win.Blob = null;
+//   win.Blob = null;
-});
+// });

client/package-lock.json

@@ -7244,6 +7244,15 @@
         }
       }
     },
+    "cypress-graphql-mock": {
+      "version": "0.5.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/cypress-graphql-mock/-/cypress-graphql-mock-0.5.0-alpha.4.tgz",
+      "integrity": "sha512-dgsczorpXRyG0Jak0N8RdNcyJv+9FPE1cS9UlKEx8g+JBABZF3mVDjpzksnWDvSAUHGrhD+nHFgtgqMXojQVAw==",
+      "requires": {
+        "graphql-tools": "^4.0.3",
+        "tslib": "^1.9.3"
+      }
+    },
     "d": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
@@ -7463,6 +7472,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
     },
+    "deprecated-decorator": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/deprecated-decorator/-/deprecated-decorator-0.1.6.tgz",
+      "integrity": "sha1-AJZjF7ehL+kvPMgx91g68ym4bDc="
+    },
     "des.js": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.0.tgz",
@@ -9742,6 +9756,60 @@
       "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.10.1.tgz",
       "integrity": "sha512-jApXqWBzNXQ8jYa/HLkZJaVw9jgwNqZkywa2zfFn16Iv1Zb7ELNHkJaXHR7Quvd5SIGsy6Ny7SUKATgnu05uEg=="
     },
+    "graphql-tools": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/graphql-tools/-/graphql-tools-4.0.6.tgz",
+      "integrity": "sha512-jHLQw8x3xmSNRBCsaZqelXXsFfUSUSktSCUP8KYHiX1Z9qEuwcMpAf+FkdBzk8aTAFqOlPdNZ3OI4DKKqGKUqg==",
+      "requires": {
+        "apollo-link": "^1.2.3",
+        "apollo-utilities": "^1.0.1",
+        "deprecated-decorator": "^0.1.6",
+        "iterall": "^1.1.3",
+        "uuid": "^3.1.0"
+      },
+      "dependencies": {
+        "apollo-link": {
+          "version": "1.2.13",
+          "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.13.tgz",
+          "integrity": "sha512-+iBMcYeevMm1JpYgwDEIDt/y0BB7VWyvlm/7x+TIPNLHCTCMgcEgDuW5kH86iQZWo0I7mNwQiTOz+/3ShPFmBw==",
+          "requires": {
+            "apollo-utilities": "^1.3.0",
+            "ts-invariant": "^0.4.0",
+            "tslib": "^1.9.3",
+            "zen-observable-ts": "^0.8.20"
+          },
+          "dependencies": {
+            "apollo-utilities": {
+              "version": "1.3.3",
+              "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.3.tgz",
+              "integrity": "sha512-F14aX2R/fKNYMvhuP2t9GD9fggID7zp5I96MF5QeKYWDWTrkRdHRp4+SVfXUVN+cXOaB/IebfvRtzPf25CM0zw==",
+              "requires": {
+                "@wry/equality": "^0.1.2",
+                "fast-json-stable-stringify": "^2.0.0",
+                "ts-invariant": "^0.4.0",
+                "tslib": "^1.10.0"
+              },
+              "dependencies": {
+                "tslib": {
+                  "version": "1.10.0",
+                  "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+                  "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+                }
+              }
+            }
+          }
+        },
+        "zen-observable-ts": {
+          "version": "0.8.20",
+          "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.20.tgz",
+          "integrity": "sha512-2rkjiPALhOtRaDX6pWyNqK1fnP5KkJJybYebopNSn6wDG1lxBoFs2+nwwXKoA6glHIrtwrfBBy6da0stkKtTAA==",
+          "requires": {
+            "tslib": "^1.9.3",
+            "zen-observable": "^0.8.0"
+          }
+        }
+      }
+    },
     "growl": {
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/growl/-/growl-1.9.2.tgz",
@@ -11669,6 +11737,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }

client/package.json

@@ -37,6 +37,7 @@
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
+    "cypress-graphql-mock": "^0.5.0-alpha.4",
     "debounce": "^1.2.0",
     "eslint": "^4.15.0",
     "eslint-config-standard": "^10.2.1",