Add cypress test for new start page

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

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": [
         {

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

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

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');
   })
 });

client/src/components/HeaderBar.vue

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

client/src/pages/start.vue

@@ -2,7 +2,9 @@
   <div class="start-page">
     <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
         :key="index"
         :meta-title="module.metaTitle"