From ff7a6b93b38f97bd7f1b6f912aab2abd5c66a7fc Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 7 Jan 2020 10:26:50 +0100 Subject: [PATCH] Add first implementation of a test with mocked GraphQL calls --- client/cypress/integration/spellcheck.spec.js | 153 ++++++++++++++++++ client/cypress/support/commands.js | 6 +- client/cypress/support/index.js | 8 +- client/package-lock.json | 69 ++++++++ client/package.json | 1 + 5 files changed, 231 insertions(+), 6 deletions(-) create mode 100644 client/cypress/integration/spellcheck.spec.js diff --git a/client/cypress/integration/spellcheck.spec.js b/client/cypress/integration/spellcheck.spec.js new file mode 100644 index 00000000..d65b8de1 --- /dev/null +++ b/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

Sie stehen am Anfang eines neuen Lebensabschnitts. In Ihrer Rolle als Berufslernende oder Berufslernender haben Sie Verantwortung \u00fcbernommen.

\n

Wie erging es Ihnen am ersten Arbeits- und Schultag?

\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); + }); +}); diff --git a/client/cypress/support/commands.js b/client/cypress/support/commands.js index e0eaddad..c75b0efd 100644 --- a/client/cypress/support/commands.js +++ b/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); } }); diff --git a/client/cypress/support/index.js b/client/cypress/support/index.js index ac5a4f7f..c8f6ff9e 100644 --- a/client/cypress/support/index.js +++ b/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 => { - win.fetch = null; - win.Blob = null; -}); +// Cypress.on('window:before:load', win => { +// win.fetch = null; +// win.Blob = null; +// }); diff --git a/client/package-lock.json b/client/package-lock.json index e994281d..24e4ae86 100644 --- a/client/package-lock.json +++ b/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" } diff --git a/client/package.json b/client/package.json index 0660bb1e..ec20a10b 100644 --- a/client/package.json +++ b/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",