Add initial cypress test for students to join classes

client/cypress/integration/bookmarks.spec.js

@@ -1,4 +1,4 @@
-describe('Survey', () => {
+describe('Bookmarks', () => {
   beforeEach(() => {
     // todo: mock all the graphql queries and mutations
     cy.exec("python ../server/manage.py prepare_bookmarks_for_cypress");

client/cypress/integration/join-class.spec.js

@@ -0,0 +1,24 @@
+describe('Survey', () => {
+  beforeEach(() => {
+    // todo: mock all the graphql queries and mutations
+    // cy.exec("python ../server/manage.py prepare_bookmarks_for_cypress");
+
+    cy.viewport('macbook-15');
+    cy.apolloLogin('rahel.cueni', 'test');
+  });
+
+  it('should join class', () => {
+    cy.visit('/me/profile');
+
+    cy.get('[data-cy=class-selection]').click();
+    cy.get('[data-cy=class-selection-entry]').should('have.length', 1);
+
+    cy.get('[data-cy=join-class-link]').click();
+
+    cy.get('[data-cy=input-class-code]').type('XXXX');
+    cy.get('[data-cy=join-class]').click();
+
+    cy.get('[data-cy=class-selection]').click();
+    cy.get('[data-cy=class-selection-entry]').should('have.length', 2);
+  })
+})

client/src/components/ClassSelectionWidget.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="class-selection" v-if="currentClassSelection">
-    <div class="class-selection__selected-class selected-class" @click="showPopover = !showPopover">
+    <div data-cy="class-selection" class="class-selection__selected-class selected-class"
+         @click="showPopover = !showPopover">
       <p class="selected-class__text">Klasse: {{currentClassSelection.name}}</p>
     </div>
-      <widget-popover v-if="showPopover"
-                      @hide-me="showPopover = false"
-                      :mobile="mobile"
-                      class="class-selection__popover">
-        <li class="popover-links__link popover-links__link--large" v-for="schoolClass in schoolClasses"
+    <widget-popover v-if="showPopover"
+                    @hide-me="showPopover = false"
+                    :mobile="mobile"
+                    class="class-selection__popover">
+      <li data-cy="class-selection-entry" class="popover-links__link popover-links__link--large"
+          v-for="schoolClass in schoolClasses"
           :key="schoolClass.id"
           :label="schoolClass.name"
           :item="schoolClass"
           @click="updateFilter(schoolClass)">
-          {{schoolClass.name}}
-        </li>
+        {{schoolClass.name}}
+      </li>
     </widget-popover>
   </div>
 </template>
@@ -111,8 +113,8 @@
       line-height: $large-spacing;
       @include regular-text;
       color: $color-silver-dark;
-      }
     }
+  }
 
   .popover-links__link {
     cursor: pointer;

client/src/pages/joinClass.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <h1>Join Class</h1>
+    <div>
+      <input data-cy="input-class-code">
+      <a data-cy="join-class">Beitreten</a>
+    </div>
+  </div>
+</template>

client/src/pages/profile.vue

@@ -10,6 +10,9 @@
       <router-link to="/me/profile" active-class="top-navigation__link--active"
                   class="top-navigation__link profile-submenu__item submenu-item">Profil
       </router-link>
+      <router-link to="/me/join-class" active-class="top-navigation__link--active" data-cy="join-class-link"
+                  class="top-navigation__link profile-submenu__item submenu-item">Klasse beitreten
+      </router-link>
     </nav>
     <router-view></router-view>
   </div>

client/src/router/index.js

@@ -30,6 +30,7 @@ import moduleRoom from '@/pages/moduleRoom'
 import login from '@/pages/login'
 import registration from '@/pages/registration'
 import waitForClass from '@/pages/waitForClass'
+import joinClass from '@/pages/joinClass'
 
 import store from '@/store/index';
 
@@ -109,6 +110,7 @@ const routes = [
       {path: 'profile', name: 'profile', component: profile, meta: {isProfile: true}},
       {path: 'myclasses', name: 'my-classes', component: myClasses, meta: {isProfile: true}},
       {path: 'activity', name: 'activity', component: activity, meta: {isProfile: true}},
+      {path: 'join-class', name: 'join-class', component: joinClass, meta: {isProfile: true}},
       {path: '', name: 'profile-activity', component: activity, meta: {isProfile: true}},
     ]
   },