Fix old cypress test

Also add new scripts for sorry-cypress

bin/test-sorry-cypress.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+cd client/
+
+if [[ -z "${CYPRESS_API_URL+x}" ]]; then
+  echo "CYPRESS_API_URL not set"
+  exit 1
+fi
+if [[ -z "${CYPRESS_RECORD_KEY+x}" ]]; then
+  echo "CYPRESS_RECORD_KEY not set"
+  exit 2
+fi
+
+now=`date +%F-%T`
+build_id="skillbox-build-${now}"
+
+#CYPRESS_API_URL="https://iterativ-cypress-director.herokuapp.com/"
+#cmd=""
+
+cmd() {
+  npx cy2 run --parallel --record  --config-file cypress.frontend.json --ci-build-id ${build_id}
+}
+
+#cmd
+
+for number in {1..6}
+do
+  echo "running command ${number}"
+  cmd &
+done
+
+wait
+#exit 0

client/cypress.e2e.json

@@ -6,6 +6,7 @@
     "mochaFile": "cypress/test-reports/e2e/cypress-results-[hash].xml",
     "toConsole": true
   },
+  "projectId": "msk-ee",
   "integrationFolder": "cypress/integration/e2e",
   "$schema": "https://on.cypress.io/cypress.schema.json"
 }

client/cypress.frontend.json

@@ -6,6 +6,7 @@
     "mochaFile": "cypress/test-reports/frontend/cypress-results-[hash].xml",
     "toConsole": true
   },
+  "projectId": "msk-fe",
   "integrationFolder": "cypress/integration/frontend",
   "$schema": "https://on.cypress.io/cypress.schema.json"
 }

client/cypress/fixtures/mocks.js

@@ -3,48 +3,41 @@ const selectedClass = {
   name: 'Moordale',
   readOnly: false,
   code: 'XXXX',
-  members: []
+  members: [],
 };
 
-let classMemberIndex = 0;
+let idIndex = 0;
 
-function* classMemberIdGenerator() {
+function* idGenerator(entity) {
-  while (classMemberIndex < 99) {
+  while (true) {
-    classMemberIndex += 1;
+    console.log(`generating id for ${entity}, ${idIndex}`);
-    yield btoa(`ClassMemberNode:${classMemberIndex}`);
+    idIndex += 1;
+    yield btoa(`${entity}:${idIndex}`);
   }
 }
 
-const classMemberIdIterator = classMemberIdGenerator();
+const classMemberIdIterator = idGenerator('ClassMemberNode');
+const chapterIdIterator = idGenerator('ChapterNode');
+const moduleIdIterator = idGenerator('ModuleNode');
+const contentBlockIdIterator = idGenerator('ContentBlockNode');
 
-const getClassMemberId = () => {
+const getClassMemberId = () => classMemberIdIterator.next().value;
-  return classMemberIdIterator.next().value;
+const getChapterId = () => chapterIdIterator.next().value;
-};
+const getModuleId = () => moduleIdIterator.next().value;
+const getContentBlockId = () => contentBlockIdIterator.next().value;
 
 export default {
   UUID: () => '123-456-789',
   GenericStreamFieldType: () => ({type: 'text_block', value: 'Generic Stream Field Type'}),
   DateTime: () => '2021-01-01Z10:01:23',
   SnapshotNode: () => ({
-    //   id: ID!
-    //   module: ModuleNode!
     chapters: [],
-    //   chapters: [SnapshotChapterNode]
-    //   hiddenContentBlocks(offset: Int, before: String, after: String, first: Int, last: Int, slug: String, title: String): ContentBlockNodeConnection!
-    //   created: DateTime!
-    //   creator: String!
-    //   shared: Boolean!
-    //   objectiveGroups: [SnapshotObjectiveGroupNode]
-    //   hiddenObjectives(offset: Int, before: String, after: String, first: Int, last: Int, text: String): ObjectiveNodeConnection!
     title: 'MockSnapshotTitle',
     metaTitle: 'MockSnapshotMetaTitle',
-    //   heroImage: String
-    //   changes: SnapshotChangesNode
-    //   mine: Boolean
   }),
   ChapterNode: () => ({
     slug: 'chapter-slug',
-    id: 'chapter-id',
+    id: getChapterId(),
     title: 'chapter-title',
     description: 'chapter-description',
 
@@ -55,7 +48,7 @@ export default {
     slug: 'content-block-slug',
     userCreated: false,
     type: '',
-    id: 'content-block-id',
+    id: getContentBlockId(),
   }),
   AssignmentNode: () => ({
     id: 'assignment-id',
@@ -69,12 +62,15 @@ export default {
     selectedClass,
     schoolClasses: {
       edges: [
-        {node: selectedClass}
+        {node: selectedClass},
-      ]
+      ],
+    },
+    recentModules: {
+      edges: []
     }
   }),
   SchoolClassNode: () => ({
-    readOnly: false
+    readOnly: false,
   }),
   ClassMemberNode: () => ({
     firstName: 'First Name',
@@ -82,6 +78,21 @@ export default {
     active: true,
     isTeacher: false,
     isMe: false,
-    id: getClassMemberId()
+    id: getClassMemberId(),
+  }),
+  ModuleNode: () => ({
+    title: 'Module Title',
+    slug: 'some slug',
+    metaTitle: 'Meta Title',
+    heroImage: '',
+    teaser: '',
+    intro: '',
+    assignments: {nodes: []},
+    id: getModuleId(),
+  }),
+  TopicNode: () => ({
+    modules: {
+      edges: []
+    }
   })
 };

client/cypress/fixtures/topics.json

@@ -1,27 +0,0 @@
-{
-  "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/frontend/current-module.spec.js

@@ -1,166 +1,205 @@
-const assignments = require('../../fixtures/assignments.json');
+const topics = [
-const mePayload = require('../../fixtures/me.join-class.json');
+  {
-const topics = require('../../fixtures/topics.json');
+    id: 'VG9waWNOb2RlOjU=',
-const baseTopic = require('../../fixtures/geld-und-kauf.json');
+    order: 1,
+    title: 'Geld und Kauf',
+    slug: 'geld-und-kauf',
+  },
+  {
+    id: 'VG9waWNOb2RlOjUz',
+    order: 2,
+    title: 'Berufliche Grundbildung',
+    slug: 'berufliche-grundbildung',
+  },
+];
 
-const moduleTeasers = require('../../fixtures/module-teasers.json');
+let recentModules = [];
-const fullModules = require('../../fixtures/full-modules.json');
 
-const topic = {
+const me = () => {
+  console.log('getting me');
+  return {
+    lastModule: {
+      slug: 'lohn-und-budget',
+      id: 'last-module-id',
+    },
+    lastTopic: {
+      id: 'VG9waWNOb2RlOjU=',
+      slug: 'geld-und-kauf',
+    },
+    recentModules: {
+      edges: recentModules,
+    },
+  };
+};
+
+const getId = (id) => btoa(`ModuleNode:${id}`);
+
+const modules = {
+  [getId(1)]: {
+    title: 'Lohn und Budget',
+    metaTitle: 'Modul 1',
+    slug: 'lohn-und-budget',
+    id: getId(1),
+  },
+  [getId(2)]: {
+    title: 'Geld',
+    metaTitle: 'Modul 2',
+    slug: 'geld',
+    id: getId(2),
+  },
+  [getId(3)]: {
+    title: 'Lerntipps',
+    metaTitle: 'Modul 4',
+    slug: 'lerntipps',
+    id: getId(3),
+  },
+  [getId(4)]: {
+    title: 'Random',
+    metaTitle: 'Modul 5',
+    slug: 'random',
+    id: getId(4),
+  },
+};
+
+const slugs = {
+  'lohn-und-budget': getId(1),
+  'geld': getId(2),
+  'lerntipps': getId(3),
+  'random': getId(4),
+};
+
+const getModuleBySlug = (slug) => {
+  console.log('getModuleBySlug', slug);
+  const id = slugs[slug];
+  console.log(id);
+  return modules[id];
+};
+
+const moduleNodes = Object.values(modules).map(module => ({
+  node: module,
+}));
+console.log(moduleNodes);
+
+const getTopic = () => ({
   topic: {
-    ...baseTopic.topic,
+    title: 'Geld und Kauf',
+    id: 'VG9waWNOb2RlOjU=',
+    teaser: 'Topic 2',
     modules: {
-      '__typename': 'ModuleNodeConnection',
+      edges: moduleNodes,
-      edges: [
-        ...Object.values(moduleTeasers).map(module => {
-          return {
-            node: module,
-            __typename: 'ModuleNodeEdge',
-          };
-        }),
-      ],
     },
   },
-};
+});
 
-const me = {
+const getOperations = () => ({
-  ...mePayload.me,
+  MeQuery: {
-  lastModule: {
+    me: me(),
-    // 'id': 'TW9kdWxlTm9kZToxNw==',
-    'slug': 'lohn-und-budget',
-    '__typename': 'ModuleNode',
-  },
-  lastTopic: {
-    'id': 'VG9waWNOb2RlOjU=',
-    'slug': 'geld-und-kauf',
-    '__typename': 'TopicNode',
-  },
-  recentModules: {
-    'edges': [],
-    '__typename': 'ModuleNodeConnection',
-  },
-};
-
-const operations = {
-  MeQuery: variables => {
-    return {
-      me: {
-        ...me,
-        '__typename': 'UserNode',
-        'permissions': [],
-      },
-    };
   },
   AssignmentsQuery: {
-    assignments,
+    assignments: [],
   },
-  ModulesQuery: variables => {
+  ModuleDetailsQuery: variables => ({module: getModuleBySlug(variables.slug)}),
-    return {
+  TopicsQuery: {
-      module: fullModules[variables.slug],
+    topics: {
-    };
+      edges: topics.map(topic => ({node: topic})),
-  },
-  TopicsQuery: topics,
-  Topic: topic,
-  UpdateLastTopic: {
-    'updateLastTopic': {
-      'topic': topic.topic,
-      '__typename': 'UpdateLastTopicPayload',
     },
   },
-  UpdateLastModule: variables => {
+  Topic: getTopic(),
+  UpdateLastTopic: () => {
+    const Topic = getTopic();
+    const topic = Topic.topic;
     return {
-      updateLastModule: {
+      updateLastTopic: {
-        lastModule: moduleTeasers[variables.input.id],
+        topic,
-        __typename: 'UpdateLastModulePayload',
       },
     };
   },
-};
+  NewsTeasers: {
+    newsTeasers: {
+      edges: [],
+    },
+  },
+  UpdateLastModule: ({input: {id}}) => {
+    const lastModule = modules[id];
+    return {
+      updateLastModule: {
+        lastModule,
+      },
+    };
+  },
+});
 
-Cypress.Commands.add('checkHome', (n, skipHome) => {
+const checkHome = (n, skipHome) => {
+  cy.log(`Checking if home has ${n} teasers`);
   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) => {
+const goToModule = (topicTitle, moduleMetaTitle) => {
+  cy.log(`Going to module ${moduleMetaTitle} in topic ${topicTitle}`);
   cy.get('[data-cy=open-sidebar-link]').click();
   cy.contains(topicTitle).click();
   cy.get('[data-cy=topic-title]').should('exist').should('contain', topicTitle);
   cy.contains(moduleMetaTitle).click();
-});
+};
 
 describe('Current Module', () => {
   before(() => {
-    cy.server();
+    cy.setup();
-
-    cy.task('getSchema').then(schema => {
-      cy.mockGraphql({
-        schema,
-        // endpoint: '/api/graphql'
-        // mocks,
-        operations,
-      });
-    });
-
-    // cy.mockGraphql({
-    //   schema: schema,
-    //   // endpoint: '/api/graphql'
-    //   operations,
-    // });
   });
 
-  // it('is set correctly', () => {
+  it('is set correctly', () => {
-  //   cy.viewport('macbook-15');
+    cy.mockGraphqlOps({
-  //
+      operations: getOperations(),
-  //   cy.fakeLogin('ross.geller', 'test');
+    });
-  //   // cy.apolloLogin('ross.geller', 'test');
+
-  //   cy.visit('/');
+    cy.visit('/');
-  //
+
-  //   // module list exists, but does not have anything in it
+    // module list exists, but does not have anything in it
-  //   cy.checkHome(0, true);
+    checkHome(0, true);
-  //   cy.get('[data-cy=no-modules-yet]').should('exist').should('contain', 'Sie haben sich noch kein Modul angeschaut. Legen Sie jetzt los!');
+    cy.get('[data-cy=no-modules-yet]').should('exist').should('contain', 'Sie haben sich noch kein Modul angeschaut. Legen Sie jetzt los!');
-  //
+
-  //   cy.goToModule('Geld und Kauf', 'Modul 2');
+    goToModule('Geld und Kauf', 'Modul 2');
-  //   cy.get('[data-cy=module-title]').should('contain', 'Geld');
+    cy.get('[data-cy=module-title]').should('contain', 'Geld');
-  //   cy.checkHome(1);
+    checkHome(1);
-  //   cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Geld');
+    cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Geld');
-  //
+
-  //   cy.goToModule('Geld und Kauf', 'Modul 1');
+    goToModule('Geld und Kauf', 'Modul 1');
-  //   cy.get('[data-cy=module-title]').should('contain', 'Lohn und Budget');
+    cy.get('[data-cy=module-title]').should('contain', 'Lohn und Budget');
-  //   cy.checkHome(2);
+    checkHome(2);
-  //   cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Lohn und Budget');
+    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(1).should('contain', 'Geld');
-  //
+
-  //   cy.goToModule('Geld und Kauf', 'Modul 4');
+    goToModule('Geld und Kauf', 'Modul 4');
-  //   cy.get('[data-cy=module-title]').should('contain', 'Lerntipps');
+    cy.get('[data-cy=module-title]').should('contain', 'Lerntipps');
-  //   cy.checkHome(3);
+    checkHome(3);
-  //   cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Lerntipps');
+    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(1).should('contain', 'Lohn und Budget');
-  //   cy.get('[data-cy=start-module-teaser]').eq(2).should('contain', 'Geld');
+    cy.get('[data-cy=start-module-teaser]').eq(2).should('contain', 'Geld');
-  //
+
-  //   // module list is full, should switch only the order around
+    // module list is full, should switch only the order around
-  //   cy.goToModule('Geld und Kauf', 'Modul 2');
+    goToModule('Geld und Kauf', 'Modul 2');
-  //   cy.get('[data-cy=module-title]').should('contain', 'Geld');
+    cy.get('[data-cy=module-title]').should('contain', 'Geld');
-  //   cy.checkHome(3);
+    checkHome(3);
-  //   cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Geld');
+    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(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]').eq(2).should('contain', 'Lohn und Budget');
-  //
+
-  //   cy.goToModule('Geld und Kauf', 'Modul 5');
+    goToModule('Geld und Kauf', 'Modul 5');
-  //   cy.get('[data-cy=module-title]').should('contain', 'Random');
+    cy.get('[data-cy=module-title]').should('contain', 'Random');
-  //   cy.checkHome(3);
+    checkHome(3);
-  //   cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Random');
+    cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Random');
-  //   cy.get('[data-cy=start-module-teaser]').eq(1).should('contain', 'Geld');
+    cy.get('[data-cy=start-module-teaser]').eq(1).should('contain', 'Geld');
-  //   cy.get('[data-cy=start-module-teaser]').eq(2).should('contain', 'Lerntipps');
+    cy.get('[data-cy=start-module-teaser]').eq(2).should('contain', 'Lerntipps');
-  //
+
-  //   cy.get('[data-cy=start-module-teaser]').last().click();
+    cy.get('[data-cy=start-module-teaser]').last().click();
-  //   cy.get('[data-cy=module-title]').should('contain', 'Lerntipps');
+    cy.get('[data-cy=module-title]').should('contain', 'Lerntipps');
-  //   cy.checkHome(3);
+    checkHome(3);
-  //   cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Lerntipps');
+    cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Lerntipps');
-  //   cy.get('[data-cy=start-module-teaser]').eq(1).should('contain', 'Random');
+    cy.get('[data-cy=start-module-teaser]').eq(1).should('contain', 'Random');
-  //   cy.get('[data-cy=start-module-teaser]').eq(2).should('contain', 'Geld');
+    cy.get('[data-cy=start-module-teaser]').eq(2).should('contain', 'Geld');
-  // });
+  });
 });

client/cypress/integration/frontend/custom-content-block.spec.js

@@ -1,18 +1,6 @@
 import getMe from '../../fixtures/me.minimal';
 import module from '../../fixtures/module.minimal';
-import mocks from '../../fixtures/mocks';
 
-//   title: String
-//   slug: String!
-//   hiddenFor: [SchoolClassNode]
-//   visibleFor: [SchoolClassNode]
-//   userCreated: Boolean!
-//   contents: GenericStreamFieldType
-//   type: String
-//   id: ID!
-//   mine: Boolean
-//   bookmarks: [ContentBlockBookmarkNode]
-//   originalCreator: PublicUserNode
 const chapters = [{
   title: 'ABC',
   description: 'DEF',
@@ -43,24 +31,17 @@ const operations = {
 
 describe('Custom Content Block', () => {
   before(() => {
-    cy.task('getSchema').then(schema => {
+    cy.setup();
-      cy.mockGraphql({
-        schema,
-        mocks,
-        operations,
-      });
-    });
-    cy.viewport('macbook-15');
   });
 
-  it.skip('Deletes the custom content block and removes it from the view', () => {
+  it('Deletes the custom content block and removes it from the view', () => {
     cy.fakeLogin('ross.geller', 'test');
     cy.visit('module/some-module');
 
     cy.log('Toggling Edit Mode');
     cy.getByDataCy('toggle-editing').click();
 
-        cy.getByDataCy('module-title').should('exist');
+    cy.getByDataCy('module-title').should('exist');
     cy.get('.content-block').should('have.length', 1);
 
     cy.log('Opening More Menu');

client/cypress/tsconfig.json

@@ -3,7 +3,7 @@
     "allowJs": true,
     "checkJs": true,
     "resolveJsonModule": true,
-    "lib": ["es2015", "dom"],
+    "lib": ["es2017", "dom"],
     "target": "ES5",
     "types": [
       "cypress"

client/package-lock.json

@@ -7967,6 +7967,30 @@
         "array-find-index": "^1.0.1"
       }
     },
+    "cy2": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/cy2/-/cy2-1.2.1.tgz",
+      "integrity": "sha512-wT99aBDkMcsmbAYK6mwfDTbH43tN/hyaJ2NrLYfjid9bDTx3rn7UaPKWOIRZtT7L2v32zbMp/GTRtHO3HWb23Q==",
+      "requires": {
+        "js-yaml": "^4.0.0",
+        "npm-which": "^3.0.1"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+          "requires": {
+            "argparse": "^2.0.1"
+          }
+        }
+      }
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -16090,6 +16114,14 @@
         "npm-bundled": "^1.0.1"
       }
     },
+    "npm-path": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/npm-path/-/npm-path-2.0.4.tgz",
+      "integrity": "sha512-IFsj0R9C7ZdR5cP+ET342q77uSRdtWOlWpih5eC+lu29tIDbNEgDbzgVJ5UFvYHWhxDZ5TFkJafFioO0pPQjCw==",
+      "requires": {
+        "which": "^1.2.10"
+      }
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -16098,6 +16130,16 @@
         "path-key": "^2.0.0"
       }
     },
+    "npm-which": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/npm-which/-/npm-which-3.0.1.tgz",
+      "integrity": "sha1-kiXybsOihcIJyuZ8OxGmtKtxQKo=",
+      "requires": {
+        "commander": "^2.9.0",
+        "npm-path": "^2.0.2",
+        "which": "^1.2.10"
+      }
+    },
     "npmlog": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",

client/package.json

@@ -19,7 +19,8 @@
     "cypress:e2e:test": "cypress run --config-file cypress.e2e.json",
     "cypress:frontend:test": "cypress run --config-file cypress.frontend.json",
     "install:cypress": "cypress install",
-    "test:unit": "jest"
+    "test:unit": "jest",
+    "cypress:parallel": "CYPRESS_API_URL=\"https://iterativ-cypress-director.herokuapp.com/\" cy2 run --parallel --record --key somekey --config-file cypress.frontend.json --ci-build-id some-id"
   },
   "dependencies": {
     "@babel/core": "^7.5.4",
@@ -44,6 +45,7 @@
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
+    "cy2": "^1.2.1",
     "dayjs": "^1.10.4",
     "debounce": "^1.2.0",
     "eslint": "^4.15.0",

client/src/pages/module/module.vue

@@ -1,9 +1,13 @@
 <template>
-  <module
+  <div v-if="module.id">
-    :module="module"
+    <module
-    @editNote="editNote"
+      :module="module"
-    @addNote="addNote"
+      v-if="module.id"
-    @bookmark="bookmark"/>
+      @editNote="editNote"
+      @addNote="addNote"
+      @bookmark="bookmark"/>
+  </div>
+
 </template>
 
 <script>
@@ -18,12 +22,13 @@
 
   import meMixin from '@/mixins/me';
   import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery';
+  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
   export default {
     mixins: [meMixin],
 
     components: {
-      Module
+      Module,
     },
 
     data() {
@@ -32,10 +37,6 @@
       };
     },
 
-    created() {
-      this.updateLastVisitedModule(this.module.id);
-    },
-
     apollo: {
       module() {
         return {
@@ -46,9 +47,8 @@
           update(data) {
             return this.$getRidOfEdges(data).module || {};
           },
-          result() {
+          result({data: {module: {id}}}) {
-            // scroll only after the module has been loaded completely
+            this.updateLastVisitedModule(id);
-            // this.scrollTo();
           },
           fetchPolicy: 'cache-first',
         };
@@ -61,6 +61,7 @@
     methods: {
       updateLastVisitedModule(moduleId) {
         if (!moduleId) {
+          this.$log.warn('no module id');
           return;
         }
         this.$apollo.mutate({
@@ -70,6 +71,45 @@
               id: moduleId,
             },
           },
+          update: (store, {data: {updateLastModule: {lastModule}}}) => {
+            const {id, slug} = lastModule;
+            this.$log.debug('updating last module', id, slug);
+            const query = ME_QUERY;
+            let {me} = store.readQuery({
+              query,
+            });
+            me.lastModule = {
+              id,
+              slug,
+              __typename: 'ModuleNode',
+            };
+
+            if (!me.recentModules || !me.recentModules.edges) {
+              me.recentModules = {
+                __typename: 'ModuleNodeConnection',
+                edges: [],
+              };
+            }
+            const foundIndex = me.recentModules.edges.findIndex(edge => edge.node.slug === lastModule.slug);
+            let edges = me.recentModules.edges;
+            if (foundIndex > -1) {
+              edges = [...edges.slice(0, foundIndex), ...edges.slice(foundIndex + 1, edges.length)];
+            }
+            me.recentModules.edges = [
+              {
+                node: lastModule,
+                __typename: 'ModuleNodeEdge',
+              },
+              ...edges.slice(0, 2),
+            ];
+            store.writeQuery({
+              query,
+              data: {
+                me,
+              },
+            });
+          },
+
         });
       },
       bookmark(bookmarked) {

client/src/pages/topic.vue

@@ -31,7 +31,7 @@
       </div>
       <div class="topic__modules">
         <module-teaser
-          :key="module.id"
+          :key="module.slug"
           v-bind="module"
           v-for="module in modules"/>
       </div>