From f8458b813997b771bf83a2c233561b845a9e6115 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Fri, 10 Jul 2020 16:46:10 +0200
Subject: [PATCH] Add onboarding cypress test, fix join class procedure

---
 client/cypress/fixtures/me.new-student.json   |  2 +-
 .../cypress/integration/new-student.spec.js   | 10 +--
 client/cypress/integration/onboarding.spec.js | 68 +++++++++++++++++++
 client/cypress/support/commands.js            |  4 ++
 .../src/components/profile/ProfileSidebar.vue |  1 +
 client/src/main.js                            |  8 ++-
 client/src/pages/onboarding.vue               |  2 +
 7 files changed, 88 insertions(+), 7 deletions(-)
 create mode 100644 client/cypress/integration/onboarding.spec.js

diff --git a/client/cypress/fixtures/me.new-student.json b/client/cypress/fixtures/me.new-student.json
index 580adbd8..054803d9 100644
--- a/client/cypress/fixtures/me.new-student.json
+++ b/client/cypress/fixtures/me.new-student.json
@@ -13,7 +13,7 @@
       "edges": [],
       "__typename": "SchoolClassNodeConnection"
     },
-    "onboardingVisited": true,
+    "onboardingVisited": false,
     "__typename": "UserNode",
     "permissions": []
   }
diff --git a/client/cypress/integration/new-student.spec.js b/client/cypress/integration/new-student.spec.js
index b75cb5e4..0cd9d0f1 100644
--- a/client/cypress/integration/new-student.spec.js
+++ b/client/cypress/integration/new-student.spec.js
@@ -3,7 +3,6 @@ const me = require('../fixtures/me.new-student.json');
 
 describe('New student', () => {
   it('shows "Enter Code" page and adds the user to a class', () => {
-
     cy.server();
 
     cy.mockGraphql({
@@ -12,9 +11,9 @@ describe('New student', () => {
 
     cy.apolloLogin('hansli', 'test');
 
-    const __typename = "SchoolClassNode";
-    const name = "KF1A";
-    const id = "U2Nob29sQ2xhc3NOb2RlOjI=";
+    const __typename = 'SchoolClassNode';
+    const name = 'KF1A';
+    const id = 'U2Nob29sQ2xhc3NOb2RlOjI=';
 
     cy.mockGraphqlOps({
       operations: {
@@ -47,6 +46,9 @@ describe('New student', () => {
     cy.get('[data-cy=join-class-title]').should('contain', 'Zugangscode');
     cy.get('[data-cy=input-class-code]').type('XXXX');
     cy.get('[data-cy=join-class]').click();
+    cy.skipOnboarding();
+    cy.get('[data-cy=user-widget-avatar]').click();
+    cy.get('[data-cy=class-list-link]').click();
     cy.get('[data-cy=class-list-title]').should('contain', 'Klassenliste');
   });
 });
diff --git a/client/cypress/integration/onboarding.spec.js b/client/cypress/integration/onboarding.spec.js
new file mode 100644
index 00000000..c6febd44
--- /dev/null
+++ b/client/cypress/integration/onboarding.spec.js
@@ -0,0 +1,68 @@
+const schema = require('../fixtures/schema.json');
+const me = require('../fixtures/me.join-class.json');
+
+describe('Onboarding', () => {
+  beforeEach(() => {
+    cy.server();
+
+    cy.mockGraphql({
+      schema: schema,
+    });
+  });
+
+  it('shows the onboarding steps and finishes them', () => {
+    cy.apolloLogin('hansli', 'test');
+
+    cy.mockGraphqlOps({
+      operations: {
+        MeQuery: {
+          me: {
+            ...me.me,
+            onboardingVisited: false
+          }
+        }
+      }
+    });
+
+    cy.visit('/');
+    cy.assertStartPage(true);
+    cy.get('[data-cy=onboarding-next-link]').click();
+    cy.get('[data-cy=onboarding-next-link]').click();
+    cy.get('[data-cy=onboarding-next-link]').click();
+    cy.get('[data-cy=onboarding-next-link]').click();
+    cy.assertStartPage(false);
+  });
+
+  it('shows the onboarding steps and skips them', () => {
+    cy.apolloLogin('hansli', 'test');
+
+    cy.mockGraphqlOps({
+      operations: {
+        MeQuery: {
+          me: {
+            ...me.me,
+            onboardingVisited: false
+          }
+        }
+      }
+    });
+
+    cy.visit('/');
+    cy.assertStartPage(true);
+    cy.skipOnboarding();
+    cy.assertStartPage(false);
+  });
+
+  it('does not show the onboarding', () => {
+    cy.apolloLogin('hansli', 'test');
+
+    cy.mockGraphqlOps({
+      operations: {
+        MeQuery: me
+      }
+    });
+
+    cy.visit('/');
+    cy.assertStartPage(false);
+  });
+});
diff --git a/client/cypress/support/commands.js b/client/cypress/support/commands.js
index f73fdb71..abc4a852 100644
--- a/client/cypress/support/commands.js
+++ b/client/cypress/support/commands.js
@@ -170,3 +170,7 @@ Cypress.Commands.add('assertStartPage', (onboarding) => {
     cy.get('[data-cy=start-modules-list]').should('exist');
   }
 });
+
+Cypress.Commands.add('skipOnboarding', (onboarding) => {
+  cy.get('[data-cy=onboarding-skip-link]').click();
+});
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index 8961e962..391f602f 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -26,6 +26,7 @@
           <div @click="close">
             <router-link
               :to="{name: 'my-class'}"
+              data-cy="class-list-link"
               class="profile-sidebar__link">Klassenliste
             </router-link>
           </div>
diff --git a/client/src/main.js b/client/src/main.js
index b62fa24c..09da8f64 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -139,6 +139,10 @@ function networkErrorCallback(statusCode) {
   }
 }
 
+function joiningClass(to) {
+  return (to.name === 'join-class' || to.name === 'licenseActivation')
+}
+
 router.beforeEach(async (to, from, next) => {
   if (to.path === '/logout') {
     publicApolloClient.resetStore();
@@ -157,12 +161,12 @@ router.beforeEach(async (to, from, next) => {
     return;
   }
 
-  if ((to.name !== 'join-class' && to.name !== 'licenseActivation') && loginRequired(to) && await redirectStudentsWithoutClass()) {
+  if (!joiningClass(to) && loginRequired(to) && await redirectStudentsWithoutClass()) {
     next({name: 'join-class'})
     return
   }
 
-  if ((to.name.indexOf('onboarding') === -1) && loginRequired(to) && await redirectUsersToOnboarding()) {
+  if ((to.name.indexOf('onboarding') === -1) && !joiningClass(to) && loginRequired(to) && await redirectUsersToOnboarding()) {
     next({name: 'onboarding-start'})
     return
   }
diff --git a/client/src/pages/onboarding.vue b/client/src/pages/onboarding.vue
index 0a6f0622..a03ac9c0 100644
--- a/client/src/pages/onboarding.vue
+++ b/client/src/pages/onboarding.vue
@@ -9,10 +9,12 @@
       <router-view/>
       <a
         class="onboarding__button button button--primary button--big"
+        data-cy="onboarding-next-link"
         @click="next">{{ nextLabel }}
       </a>
       <a
         class="onboarding__secondary-link"
+        data-cy="onboarding-skip-link"
         @click.prevent="completeOnboarding">Einführung überspringen</a>
     </div>
   </div>