Add cypress test for new start page

This commit is contained in:
Ramon Wenger 2020-06-29 16:54:52 +02:00
parent 943ac76859
commit 841b75e0db
7 changed files with 454 additions and 41 deletions

View File

@ -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 <p>Sie stehen am Anfang eines neuen Lebensabschnitts. In Ihrer Rolle als Berufslernende oder Berufslernender haben Sie Verantwortung übernommen.</p>\n <p>Wie erging es Ihnen am ersten Arbeits- und Schultag?</p>\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 <p>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?</p>\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 <p>Sie stehen am Anfang eines neuen Lebensabschnitts. In Ihrer Rolle als Berufslernende oder Berufslernender haben Sie Verantwortung übernommen.</p>\n <p>Wie erging es Ihnen am ersten Arbeits- und Schultag?</p>\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 <p>Sie stehen am Anfang eines neuen Lebensabschnitts. In Ihrer Rolle als Berufslernende oder Berufslernender haben Sie Verantwortung übernommen.</p>\n <p>Wie erging es Ihnen am ersten Arbeits- und Schultag?</p>\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"
}
}
}

View File

@ -4,6 +4,7 @@
"pk": 5, "pk": 5,
"username": "rahel.cueni", "username": "rahel.cueni",
"email": "rahel.cueni@skillbox.example", "email": "rahel.cueni@skillbox.example",
"expiryDate": "3596153600",
"firstName": "Rahel", "firstName": "Rahel",
"lastName": "Cueni", "lastName": "Cueni",
"avatarUrl": "", "avatarUrl": "",
@ -17,6 +18,11 @@
"id": "U2Nob29sQ2xhc3NOb2RlOjI=", "id": "U2Nob29sQ2xhc3NOb2RlOjI=",
"__typename": "SchoolClassNode" "__typename": "SchoolClassNode"
}, },
"lastTopic": {
"id": "VG9waWNOb2RlOjU=",
"slug": "geld-und-kauf",
"__typename": "TopicNode"
},
"schoolClasses": { "schoolClasses": {
"edges": [ "edges": [
{ {

View File

@ -0,0 +1,70 @@
{
"TW9kdWxlTm9kZToyOA==": {
"id": "TW9kdWxlTm9kZToyOA==",
"title": "Lohn und Budget",
"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": "",
"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 <p>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?</p>\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"
}
}

View File

@ -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"
}
}

View File

@ -1,12 +1,47 @@
const schema = require('../fixtures/schema.json'); const schema = require('../fixtures/schema.json');
const assignments = require('../fixtures/assignments.json'); const assignments = require('../fixtures/assignments.json');
const lohnModule = require('../fixtures/module.json'); const mePayload = require('../fixtures/me.join-class.json');
const geldModule = require('../fixtures/module-geld.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', () => { describe('Current Module', () => {
before(() => { before(() => {
cy.server(); 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({ cy.mockGraphql({
schema: schema, schema: schema,
// endpoint: '/api/graphql' // endpoint: '/api/graphql'
@ -14,16 +49,7 @@ describe('Current Module', () => {
MeQuery: variables => { MeQuery: variables => {
return { return {
me: { me: {
'lastModule': { ...me,
// 'id': 'TW9kdWxlTm9kZToxNw==',
'slug': 'lohn-und-budget',
'__typename': 'ModuleNode'
},
'lastTopic': {
'id': 'VG9waWNOb2RlOjU=',
'slug': 'geld-und-kauf',
'__typename': 'TopicNode'
},
'__typename': 'UserNode', '__typename': 'UserNode',
'permissions': [] 'permissions': []
} }
@ -33,28 +59,25 @@ describe('Current Module', () => {
assignments assignments
}, },
ModulesQuery: variables => { ModulesQuery: variables => {
let module;
if (variables.slug === 'lohn-und-budget') {
module = lohnModule;
} else {
module = geldModule
}
return { return {
module module: fullModules[variables.slug]
}
},
TopicsQuery: topics,
Topic: topic,
UpdateLastTopic: {
'updateLastTopic': {
'topic': topic.topic,
'__typename': 'UpdateLastTopicPayload'
} }
}, },
UpdateLastModule: variables => { UpdateLastModule: variables => {
let module; console.log(variables);
if (variables.input.id === 'TW9kdWxlTm9kZToxNw==') { console.log(moduleTeasers);
module = lohnModule console.log(moduleTeasers[variables.input.id]);
} else {
module = geldModule
}
return { return {
updateLastModule: { updateLastModule: {
module, lastModule: moduleTeasers[variables.input.id],
errors: null,
__typename: 'UpdateLastModulePayload' __typename: 'UpdateLastModulePayload'
} }
} }
@ -67,21 +90,42 @@ describe('Current Module', () => {
cy.viewport('macbook-15'); cy.viewport('macbook-15');
cy.apolloLogin('nico.zickgraf', 'test'); cy.apolloLogin('nico.zickgraf', 'test');
cy.visit('/book/topic/geld-und-kauf'); cy.visit('/');
cy.contains('Modul 1').click();
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.goToModule('1. Geld und Kauf', 'Modul 2');
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.get('[data-cy=module-title]').should('contain', 'Geld'); 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.goToModule('1. Geld und Kauf', 'Modul 1');
cy.get('[data-cy="current-module-link"]').click(); cy.get('[data-cy=module-title]').should('contain', 'Lohn und Budget');
cy.get('[data-cy=module-title]').should('contain', 'Geld') 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');
}) })
}); });

View File

@ -2,6 +2,7 @@
<header class="header-bar"> <header class="header-bar">
<a <a
class="header-bar__sidebar-link" class="header-bar__sidebar-link"
data-cy="open-sidebar-link"
@click="openSidebar('navigation')"> @click="openSidebar('navigation')">
<hamburger class="header-bar__sidebar-icon"/> <hamburger class="header-bar__sidebar-icon"/>
</a> </a>

View File

@ -2,7 +2,9 @@
<div class="start-page"> <div class="start-page">
<header-bar class="start-page__header"/> <header-bar class="start-page__header"/>
<div class="start-page__modules start-sections"> <div
class="start-page__modules start-sections"
data-cy="start-modules-list">
<module-teaser <module-teaser
:key="index" :key="index"
:meta-title="module.metaTitle" :meta-title="module.metaTitle"