Add onboarding cypress test, fix join class procedure

client/cypress/fixtures/me.new-student.json

@@ -13,7 +13,7 @@
       "edges": [],
       "__typename": "SchoolClassNodeConnection"
     },
-    "onboardingVisited": true,
+    "onboardingVisited": false,
     "__typename": "UserNode",
     "permissions": []
   }

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

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

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();
+});

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>

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
   }

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>