From 841b75e0db509a060385e6447cc4b57b2a9200cc Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Mon, 29 Jun 2020 16:54:52 +0200 Subject: [PATCH] Add cypress test for new start page --- client/cypress/fixtures/full-modules.json | 263 ++++++++++++++++++ client/cypress/fixtures/me.join-class.json | 6 + client/cypress/fixtures/module-teasers.json | 70 +++++ client/cypress/fixtures/topics.json | 27 ++ .../integration/current-module.spec.js | 124 ++++++--- client/src/components/HeaderBar.vue | 1 + client/src/pages/start.vue | 4 +- 7 files changed, 454 insertions(+), 41 deletions(-) create mode 100644 client/cypress/fixtures/full-modules.json create mode 100644 client/cypress/fixtures/module-teasers.json create mode 100644 client/cypress/fixtures/topics.json diff --git a/client/cypress/fixtures/full-modules.json b/client/cypress/fixtures/full-modules.json new file mode 100644 index 00000000..435ab820 --- /dev/null +++ b/client/cypress/fixtures/full-modules.json @@ -0,0 +1,263 @@ +{ + "lohn-und-budget": { + "id": "TW9kdWxlTm9kZToyOA==", + "title": "Lohn und Budget", + "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 übernommen.

\n

Wie erging es Ihnen am ersten Arbeits- und Schultag?

\n ", + "slug": "lohn-und-budget", + "heroImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==", + "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": "🙂😐🤬👍🤢🤢🤢🤢😮🤗", + "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": null, + "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": [ + ], + "hiddenFor": { + "edges": [], + "__typename": "SchoolClassNodeConnection" + }, + "visibleFor": { + "edges": [], + "__typename": "SchoolClassNodeConnection" + }, + "__typename": "ContentBlockNode" + }, + "__typename": "ContentBlockNodeEdge" + } + ], + "__typename": "ContentBlockNodeConnection" + }, + "__typename": "ChapterNode" + }, + "__typename": "ChapterNodeEdge" + } + ], + "__typename": "ChapterNodeConnection" + } + }, + "geld": { + "id": "TW9kdWxlTm9kZTo0Mg==", + "title": "Geld", + "metaTitle": "Modul 2", + "teaser": " Geld braucht jeder von uns im t\u00e4glichen Leben.", + "intro": "\n

Jeder B\u00fcrger nutzt es. Nahezu jeden Tag. Kaum ein Tag vergeht, an dem wir nicht mit M\u00fcnzen oder Geldscheinen bezahlen, bargeldlose \u00dcberweisungen t\u00e4tigen oder andere Zahlungsmethoden verwenden. Doch was genau befindet sich da eigentlich in unserem Geldbeutel? Was ist das, was auf unseren Konten liegt und die Bezeichnung Geld tr\u00e4gt?

\n ", + "slug": "geld", + "heroImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==", + "solutionsEnabled": false, + "bookmark": null, + "__typename": "ModuleNode", + "assignments": { + "edges": [], + "__typename": "AssignmentNodeConnection" + }, + "objectiveGroups": { + "edges": [], + "__typename": "ObjectiveGroupNodeConnection" + }, + "chapters": { + "edges": [ + { + "node": { + "id": "Q2hhcHRlck5vZGU6MzI=", + "title": "2.1 Eine Welt ohne Geld?", + "description": "", + "bookmark": null, + "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": [ + ], + "hiddenFor": { + "edges": [], + "__typename": "SchoolClassNodeConnection" + }, + "visibleFor": { + "edges": [], + "__typename": "SchoolClassNodeConnection" + }, + "__typename": "ContentBlockNode" + }, + "__typename": "ContentBlockNodeEdge" + } + ], + "__typename": "ContentBlockNodeConnection" + }, + "__typename": "ChapterNode" + }, + "__typename": "ChapterNodeEdge" + } + ], + "__typename": "ChapterNodeConnection" + } + }, + "lerntipps": { + "id": "TW9kdWxlTm9kZTo3MA==", + "title": "Lerntipps", + "metaTitle": "Modul 4", + "teaser": "Lerntipps", + "intro": "\n

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

\n

Wie erging es Ihnen am ersten Arbeits- und Schultag?

\n ", + "slug": "lerntipps", + "heroImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==", + "solutionsEnabled": false, + "bookmark": { + "note": null, + "__typename": "ModuleBookmarkNode" + }, + "__typename": "ModuleNode", + "assignments": { + "edges": [], + "__typename": "AssignmentNodeConnection" + }, + "objectiveGroups": { + "edges": [], + "__typename": "ObjectiveGroupNodeConnection" + }, + "chapters": { + "edges": [ + { + "node": { + "id": "Q2hhcHRlck5vZGU6MTg=", + "title": "1.1 Lehrbeginn", + "description": "Wie sieht Ihr Konsumverhalten aus?", + "bookmark": null, + "contentBlocks": { + "edges": [], + "__typename": "ContentBlockNodeConnection" + }, + "__typename": "ChapterNode" + }, + "__typename": "ChapterNodeEdge" + } + ], + "__typename": "ChapterNodeConnection" + } + }, + "random": { + "id": "TW9kdWxlTm9kZTo1NA==", + "title": "Random", + "metaTitle": "Modul 5", + "teaser": "Random", + "intro": "\n

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

\n

Wie erging es Ihnen am ersten Arbeits- und Schultag?

\n ", + "slug": "random", + "heroImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==", + "solutionsEnabled": false, + "bookmark": { + "note": null, + "__typename": "ModuleBookmarkNode" + }, + "__typename": "ModuleNode", + "assignments": { + "edges": [], + "__typename": "AssignmentNodeConnection" + }, + "objectiveGroups": { + "edges": [], + "__typename": "ObjectiveGroupNodeConnection" + }, + "chapters": { + "edges": [ + { + "node": { + "id": "Q2hhcHRlck5vZGU6MTg=", + "title": "1.1 Lehrbeginn", + "description": "Wie sieht Ihr Konsumverhalten aus?", + "bookmark": null, + "contentBlocks": { + "edges": [], + "__typename": "ContentBlockNodeConnection" + }, + "__typename": "ChapterNode" + }, + "__typename": "ChapterNodeEdge" + } + ], + "__typename": "ChapterNodeConnection" + } + } +} diff --git a/client/cypress/fixtures/me.join-class.json b/client/cypress/fixtures/me.join-class.json index 7774e6f0..7af1531a 100644 --- a/client/cypress/fixtures/me.join-class.json +++ b/client/cypress/fixtures/me.join-class.json @@ -4,6 +4,7 @@ "pk": 5, "username": "rahel.cueni", "email": "rahel.cueni@skillbox.example", + "expiryDate": "3596153600", "firstName": "Rahel", "lastName": "Cueni", "avatarUrl": "", @@ -17,6 +18,11 @@ "id": "U2Nob29sQ2xhc3NOb2RlOjI=", "__typename": "SchoolClassNode" }, + "lastTopic": { + "id": "VG9waWNOb2RlOjU=", + "slug": "geld-und-kauf", + "__typename": "TopicNode" + }, "schoolClasses": { "edges": [ { diff --git a/client/cypress/fixtures/module-teasers.json b/client/cypress/fixtures/module-teasers.json new file mode 100644 index 00000000..ee265107 --- /dev/null +++ b/client/cypress/fixtures/module-teasers.json @@ -0,0 +1,70 @@ +{ + "TW9kdWxlTm9kZToyOA==": { + "id": "TW9kdWxlTm9kZToyOA==", + "title": "Lohn und Budget", + "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": "", + "solutionsEnabled": false, + "topic": { + "slug": "geld-und-kauf", + "title": "Geld und Kauf", + "__typename": "TopicNode" + }, + "bookmark": null, + "__typename": "ModuleNode" + }, + "TW9kdWxlTm9kZTo0Mg==": { + "id": "TW9kdWxlTm9kZTo0Mg==", + "title": "Geld", + "metaTitle": "Modul 2", + "teaser": " Geld braucht jeder von uns im t\u00e4glichen Leben.", + "intro": "\n

Jeder B\u00fcrger nutzt es. Nahezu jeden Tag. Kaum ein Tag vergeht, an dem wir nicht mit M\u00fcnzen oder Geldscheinen bezahlen, bargeldlose \u00dcberweisungen t\u00e4tigen oder andere Zahlungsmethoden verwenden. Doch was genau befindet sich da eigentlich in unserem Geldbeutel? Was ist das, was auf unseren Konten liegt und die Bezeichnung Geld tr\u00e4gt?

\n ", + "slug": "geld", + "heroImage": "", + "solutionsEnabled": false, + "topic": { + "slug": "geld-und-kauf", + "title": "Geld und Kauf", + "__typename": "TopicNode" + }, + "bookmark": null, + "__typename": "ModuleNode" + }, + "TW9kdWxlTm9kZTo3MA==": { + "id": "TW9kdWxlTm9kZTo3MA==", + "title": "Lerntipps", + "metaTitle": "Modul 4", + "teaser": "Wie gehen Sie vor, wenn Sie sich auf eine Pr\u00fcfung vor-bereiten?", + "intro": "Ea ullam nam expedita voluptates consequuntur voluptates vitae. Earum eos iste sint mollitia ab.\nVoluptate autem commodi consequuntur enim magni. Incidunt temporibus voluptatibus numquam.", + "slug": "lerntipps", + "heroImage": "", + "solutionsEnabled": false, + "topic": { + "slug": "geld-und-kauf", + "title": "Geld und Kauf", + "__typename": "TopicNode" + }, + "bookmark": null, + "__typename": "ModuleNode" + }, + "TW9kdWxlTm9kZTo1NA==": { + "id": "TW9kdWxlTm9kZTo1NA==", + "title": "Random", + "metaTitle": "Modul 5", + "teaser": "Wie gehen Sie vor, wenn Sie sich auf eine Pr\u00fcfung vor-bereiten?", + "intro": "Ea ullam nam expedita voluptates consequuntur voluptates vitae. Earum eos iste sint mollitia ab.\nVoluptate autem commodi consequuntur enim magni. Incidunt temporibus voluptatibus numquam.", + "slug": "random", + "heroImage": "", + "solutionsEnabled": false, + "topic": { + "slug": "geld-und-kauf", + "title": "Geld und Kauf", + "__typename": "TopicNode" + }, + "bookmark": null, + "__typename": "ModuleNode" + } +} diff --git a/client/cypress/fixtures/topics.json b/client/cypress/fixtures/topics.json new file mode 100644 index 00000000..0323f83a --- /dev/null +++ b/client/cypress/fixtures/topics.json @@ -0,0 +1,27 @@ +{ + "topics": { + "edges": [ + { + "node": { + "id": "VG9waWNOb2RlOjU=", + "order": 1, + "title": "Geld und Kauf", + "slug": "geld-und-kauf", + "__typename": "TopicNode" + }, + "__typename": "TopicEdge" + }, + { + "node": { + "id": "VG9waWNOb2RlOjUz", + "order": 2, + "title": "Berufliche Grundbildung", + "slug": "berufliche-grundbildung", + "__typename": "TopicNode" + }, + "__typename": "TopicEdge" + } + ], + "__typename": "TopicConnection" + } +} diff --git a/client/cypress/integration/current-module.spec.js b/client/cypress/integration/current-module.spec.js index 1e8ba306..c25aeb50 100644 --- a/client/cypress/integration/current-module.spec.js +++ b/client/cypress/integration/current-module.spec.js @@ -1,12 +1,47 @@ const schema = require('../fixtures/schema.json'); const assignments = require('../fixtures/assignments.json'); -const lohnModule = require('../fixtures/module.json'); -const geldModule = require('../fixtures/module-geld.json'); +const mePayload = require('../fixtures/me.join-class.json'); +const topics = require('../fixtures/topics.json'); +const topic = require('../fixtures/geld-und-kauf.json'); + +const moduleTeasers = require('../fixtures/module-teasers.json'); +const fullModules = require('../fixtures/full-modules.json'); + +Cypress.Commands.add('checkHome', (n, skipHome) => { + if (!skipHome) { + cy.get('[data-cy="home-link"]').click(); + } + cy.get('[data-cy=start-modules-list]').should('exist'); + cy.get('[data-cy=start-module-teaser]').should('have.length', n); +}); + +Cypress.Commands.add('goToModule', (topicTitle, moduleMetaTitle) => { + cy.get('[data-cy=open-sidebar-link]').click(); + cy.contains(topicTitle).click(); + cy.contains(moduleMetaTitle).click(); +}); describe('Current Module', () => { before(() => { cy.server(); + let me = { + ...mePayload.me, + lastModule: { + // 'id': 'TW9kdWxlTm9kZToxNw==', + 'slug': 'lohn-und-budget', + '__typename': 'ModuleNode' + }, + lastTopic: { + 'id': 'VG9waWNOb2RlOjU=', + 'slug': 'geld-und-kauf', + '__typename': 'TopicNode' + }, + recentModules: { + 'edges': [], + '__typename': 'ModuleNodeConnection' + }, + }; cy.mockGraphql({ schema: schema, // endpoint: '/api/graphql' @@ -14,16 +49,7 @@ describe('Current Module', () => { MeQuery: variables => { return { me: { - 'lastModule': { - // 'id': 'TW9kdWxlTm9kZToxNw==', - 'slug': 'lohn-und-budget', - '__typename': 'ModuleNode' - }, - 'lastTopic': { - 'id': 'VG9waWNOb2RlOjU=', - 'slug': 'geld-und-kauf', - '__typename': 'TopicNode' - }, + ...me, '__typename': 'UserNode', 'permissions': [] } @@ -33,28 +59,25 @@ describe('Current Module', () => { assignments }, ModulesQuery: variables => { - let module; - if (variables.slug === 'lohn-und-budget') { - module = lohnModule; - } else { - module = geldModule - } return { - module + module: fullModules[variables.slug] + } + }, + TopicsQuery: topics, + Topic: topic, + UpdateLastTopic: { + 'updateLastTopic': { + 'topic': topic.topic, + '__typename': 'UpdateLastTopicPayload' } }, UpdateLastModule: variables => { - let module; - if (variables.input.id === 'TW9kdWxlTm9kZToxNw==') { - module = lohnModule - } else { - module = geldModule - } - + console.log(variables); + console.log(moduleTeasers); + console.log(moduleTeasers[variables.input.id]); return { updateLastModule: { - module, - errors: null, + lastModule: moduleTeasers[variables.input.id], __typename: 'UpdateLastModulePayload' } } @@ -67,21 +90,42 @@ describe('Current Module', () => { cy.viewport('macbook-15'); cy.apolloLogin('nico.zickgraf', 'test'); - cy.visit('/book/topic/geld-und-kauf'); - cy.contains('Modul 1').click(); + cy.visit('/'); - cy.get('[data-cy=module-title]').should('contain', 'Lohn und Budget'); + // module list exists, but does not have anything in it + cy.checkHome(0, true); - cy.get('[data-cy="home-link"]').click(); - cy.get('[data-cy="current-module-link"]').click(); - cy.get('[data-cy=module-title]').should('contain', 'Lohn und Budget'); - - cy.visit('/book/topic/geld-und-kauf'); - cy.contains('Modul 2').click(); + cy.goToModule('1. Geld und Kauf', 'Modul 2'); cy.get('[data-cy=module-title]').should('contain', 'Geld'); + cy.checkHome(1); + cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Geld'); - cy.get('[data-cy="home-link"]').click(); - cy.get('[data-cy="current-module-link"]').click(); - cy.get('[data-cy=module-title]').should('contain', 'Geld') + cy.goToModule('1. Geld und Kauf', 'Modul 1'); + cy.get('[data-cy=module-title]').should('contain', 'Lohn und Budget'); + cy.checkHome(2); + cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Lohn und Budget'); + cy.get('[data-cy=start-module-teaser]').eq(1).should('contain', 'Geld'); + + cy.goToModule('1. Geld und Kauf', 'Modul 4'); + cy.get('[data-cy=module-title]').should('contain', 'Lerntipps'); + cy.checkHome(3); + cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Lerntipps'); + cy.get('[data-cy=start-module-teaser]').eq(1).should('contain', 'Lohn und Budget'); + cy.get('[data-cy=start-module-teaser]').eq(2).should('contain', 'Geld'); + + // module list is full, should switch only the order around + cy.goToModule('1. Geld und Kauf', 'Modul 2'); + cy.get('[data-cy=module-title]').should('contain', 'Geld'); + cy.checkHome(3); + cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Geld'); + cy.get('[data-cy=start-module-teaser]').eq(1).should('contain', 'Lerntipps'); + cy.get('[data-cy=start-module-teaser]').eq(2).should('contain', 'Lohn und Budget'); + + cy.get('[data-cy=start-module-teaser]').last().click(); + cy.get('[data-cy=module-title]').should('contain', 'Lohn und Budget'); + cy.checkHome(3); + cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Lohn und Budget'); + cy.get('[data-cy=start-module-teaser]').eq(1).should('contain', 'Geld'); + cy.get('[data-cy=start-module-teaser]').eq(2).should('contain', 'Lerntipps'); }) }); diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue index 26a0769b..eec12ebb 100644 --- a/client/src/components/HeaderBar.vue +++ b/client/src/components/HeaderBar.vue @@ -2,6 +2,7 @@
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue index 81dc79fe..98bb599e 100644 --- a/client/src/pages/start.vue +++ b/client/src/pages/start.vue @@ -2,7 +2,9 @@
-
+