Add new cypress test for changing class in room view

client/cypress/integration/e2e/users/coupon.spec.js

@@ -1,4 +1,5 @@
 import { GraphQLError } from 'graphql';
+import {assertStartPage} from '../../../support/helpers';
 
 const schema = require('../../../fixtures/schema.json');
 
@@ -30,7 +31,7 @@ describe('Email Verification', () => {
 
     cy.visit('/license-activation');
     redeemCoupon('12345asfd');
-    cy.assertStartPage();
+    assertStartPage();
   });
 
   it('displays error if input is missing', () => {

client/cypress/integration/frontend/onboarding.spec.js

@@ -1,6 +1,4 @@
-import {mockUpdateOnboardingProgress} from '../../support/helpers';
+import {assertStartPage} from '../../support/helpers';
-
-const me = require('../../fixtures/me.join-class.json');
 
 describe('Onboarding', () => {
   beforeEach(() => {
@@ -29,12 +27,12 @@ describe('Onboarding', () => {
     });
 
     cy.visit('/');
-    cy.assertStartPage(true);
+    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);
+    assertStartPage(false);
   });
 
   it('shows the onboarding steps and skips them', () => {
@@ -58,9 +56,9 @@ describe('Onboarding', () => {
     });
 
     cy.visit('/');
-    cy.assertStartPage(true);
+    assertStartPage(true);
     cy.getByDataCy('onboarding-skip-link').click();
-    cy.assertStartPage(false);
+    assertStartPage(false);
   });
 
   it('does not show the onboarding', () => {
@@ -73,6 +71,6 @@ describe('Onboarding', () => {
     });
 
     cy.visit('/');
-    cy.assertStartPage(false);
+    assertStartPage(false);
   });
 });

client/cypress/integration/frontend/rooms/room-page.spec.js

@@ -1,6 +1,8 @@
 import {getMinimalMe} from '../../../support/helpers';
 
 describe('The Room Page', () => {
+  const MeQuery = getMinimalMe();
+  const selectedClass = MeQuery.me.selectedClass;
   const entryText = 'something should be here';
   const entryTitle = 'some title';
   const slug = 'ein-historisches-festival';
@@ -8,6 +10,7 @@ describe('The Room Page', () => {
   const room = {
     id,
     slug,
+    schoolClass: selectedClass,
     restricted: false,
     roomEntries: {
       edges: [],
@@ -19,7 +22,7 @@ describe('The Room Page', () => {
   };
 
   const operations = {
-    MeQuery: getMinimalMe({}),
+    MeQuery,
     RoomEntriesQuery,
     AddRoomEntry: {
       addRoomEntry: {
@@ -136,11 +139,11 @@ describe('The Room Page', () => {
     const roomToDelete = {
       id: 'room-to-delete',
       roomEntries: {
-        edges: []
+        edges: [],
-      }
+      },
     };
     const otherRoom = {
-      id: 'otherRoom'
+      id: 'otherRoom',
     };
     let rooms = [roomToDelete, otherRoom];
     const operations = {
@@ -148,21 +151,21 @@ describe('The Room Page', () => {
       RoomsQuery() {
         return {
           rooms: {
-            edges: rooms.map(room => ({node: room}))
+            edges: rooms.map(room => ({node: room})),
-          }
+          },
         };
       },
       RoomEntriesQuery: {
-        room: roomToDelete
+        room: roomToDelete,
       },
       DeleteRoom: {
         deleteRoom: {
-          success: true
+          success: true,
-        }
+        },
-      }
+      },
     };
     cy.mockGraphqlOps({
-      operations
+      operations,
     });
 
     cy.visit(`/rooms`);
@@ -190,22 +193,22 @@ describe('The Room Page', () => {
               contents: [],
               author: {
                 ...me,
-                id: authorId
+                id: authorId,
-              }
+              },
-            }
+            },
-          }
+          },
-        ]
+        ],
-      }
+      },
     };
     const operations = {
       MeQuery: MeQuery,
       RoomEntriesQuery: {
-        room
+        room,
       },
-      RoomEntryQuery: {}
+      RoomEntryQuery: {},
     };
     cy.mockGraphqlOps({
-      operations
+      operations,
     });
     cy.visit(`/room/${slug}`);
     cy.getByDataCy('room-entry-actions').click();
@@ -217,22 +220,58 @@ describe('The Room Page', () => {
     const room = {
       id: 'some-room',
       roomEntries: {
-        edges: []
+        edges: [],
-      }
+      },
     };
     const operations = {
       MeQuery,
       RoomEntriesQuery: {
-        room
+        room,
       },
     };
 
     cy.mockGraphqlOps({
-      operations
+      operations,
     });
 
     cy.visit(`/room/${slug}`);
     cy.getByDataCy('add-room-entry-button').click();
     cy.getByDataCy('add-room-entry-modal').should('exist');
   });
+
+  it.only('changes class while on room page', () => {
+    const {me} = MeQuery;
+    const operations = {
+      MeQuery: {
+        me: {
+          ...me,
+          schoolClasses: {
+            edges: [
+              ...me.schoolClasses.edges,
+              {
+                node: {
+                  id: btoa('SchoolClassNode:other-class'),
+                  name: 'Other Class'
+                },
+              },
+            ],
+          },
+        },
+      },
+      RoomEntriesQuery,
+      UpdateSettings: {
+        updateSettings: {
+          success: true
+        }
+      }
+    };
+
+    cy.mockGraphqlOps({
+      operations,
+    });
+    cy.visit(`/room/${slug}`);
+    cy.getByDataCy('room-title').should('contain', 'A Room');
+    cy.selectClass('Other Class');
+    cy.url().should('include', 'rooms');
+  });
 });

client/cypress/integration/frontend/spellcheck.spec.js

@@ -1,4 +1,3 @@
-import {mockUpdateLastModule} from '../../support/helpers';
 import module from '../../fixtures/module.minimal';
 
 const spellCheck = require('../../fixtures/spell-check.json');
@@ -126,7 +125,11 @@ const operations = {
       },
     },
   },
-  ...mockUpdateLastModule(),
+  UpdateLastModule: {
+    updateLastModule: {
+      lastModule: {},
+    },
+  },
 };
 
 describe('Spellcheck', () => {

client/cypress/support/commands.js

@@ -119,14 +119,6 @@ Cypress.Commands.add('enterPassword', (password) => {
   cy.get('[data-cy="login-button"]').click();
 });
 
-Cypress.Commands.add('assertStartPage', (onboarding) => {
-  if (onboarding) {
-    cy.get('[data-cy=onboarding-page]').should('exist');
-  } else {
-    cy.get('[data-cy=start-modules-list]').should('exist');
-  }
-});
-
 Cypress.Commands.add('getByDataCy', (selector) => {
   return cy.get(`[data-cy=${selector}]`);
 });

client/cypress/support/helpers.js

@@ -1,16 +1,25 @@
 // todo: clean up this file
 
-export const getMinimalMe = ({readOnly = false, classReadOnly = false, isTeacher = true} = {}) => ({
+export const getMinimalMe = ({readOnly = false, classReadOnly = false, isTeacher = true} = {}) => {
-  me: {
+  const selectedClass = {
-    id: btoa('PrivateUserNode:1'),
+    name: 'Selected Class',
-    readOnly,
+    id: btoa('SchoolClassNode:selectedClassId'),
-    isTeacher,
+    readOnly: classReadOnly,
-    selectedClass: {
+  };
-      id: 'selectedClassId',
+  return {
-      readOnly: classReadOnly,
+    me: {
+      id: btoa('PrivateUserNode:1'),
+      readOnly,
+      isTeacher,
+      selectedClass,
+      schoolClasses: {
+        edges: [
+          {node: selectedClass},
+        ],
+      },
     },
-  },
+  };
-});
+};
 
 const getSchoolClassNode = (id, schoolClassName) => ({
   'id': btoa(`SchoolClassNode:${id}`),
@@ -18,6 +27,14 @@ const getSchoolClassNode = (id, schoolClassName) => ({
   '__typename': 'SchoolClassNode',
 });
 
+export const assertStartPage = (onboarding) => {
+  if (onboarding) {
+    cy.get('[data-cy=onboarding-page]').should('exist');
+  } else {
+    cy.get('[data-cy=start-modules-list]').should('exist');
+  }
+};
+
 export const getMe = ({schoolClasses, teacher}) => {
   let schoolClassNodes;
   if (schoolClasses) {
@@ -329,23 +346,3 @@ export const getModules = () => {
     },
   };
 };
-
-export const mockUpdateOnboardingProgress = () => {
-  return {
-    UpdateOnboardingProgress: {
-      updateOnboardingProgress: {
-        success: true,
-      },
-    },
-  };
-};
-
-export const mockUpdateLastModule = () => {
-  return {
-    UpdateLastModule: {
-      updateLastModule: {
-        lastModule: {},
-      },
-    },
-  };
-};

client/src/pages/room.vue

@@ -50,6 +50,7 @@
   import me from '@/mixins/me';
   import BackLink from '@/components/BackLink';
   import RoomVisibilityWidget from '@/components/rooms/RoomVisibilityWidget';
+  import {ROOMS_PAGE} from '@/router/room.names';
 
   export default {
     props: ['slug'],
@@ -62,7 +63,20 @@
       },
       isReadOnly() {
         return this.me.readOnly || this.me.selectedClass.readOnly;
-      }
+      },
+    },
+
+    mounted() {
+      this.$watch(
+        'me.selectedClass.id',
+        (newValue, _) => {
+          if (this.room.schoolClass.id !== newValue) {
+            this.$router.push({
+              name: ROOMS_PAGE,
+            });
+          }
+        },
+      );
     },
 
     apollo: {