From 704da5a749b16fa2b540a8bf9d07bced1b746659 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Wed, 1 Sep 2021 14:27:57 +0200 Subject: [PATCH] Add new cypress test for changing class in room view --- .../integration/e2e/users/coupon.spec.js | 3 +- .../integration/frontend/onboarding.spec.js | 14 ++- .../frontend/rooms/room-page.spec.js | 87 ++++++++++++++----- .../integration/frontend/spellcheck.spec.js | 7 +- client/cypress/support/commands.js | 8 -- client/cypress/support/helpers.js | 57 ++++++------ client/src/pages/room.vue | 16 +++- 7 files changed, 118 insertions(+), 74 deletions(-) diff --git a/client/cypress/integration/e2e/users/coupon.spec.js b/client/cypress/integration/e2e/users/coupon.spec.js index 5513909a..4c1ea33f 100644 --- a/client/cypress/integration/e2e/users/coupon.spec.js +++ b/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', () => { diff --git a/client/cypress/integration/frontend/onboarding.spec.js b/client/cypress/integration/frontend/onboarding.spec.js index adc8b7a7..3b9d3d64 100644 --- a/client/cypress/integration/frontend/onboarding.spec.js +++ b/client/cypress/integration/frontend/onboarding.spec.js @@ -1,6 +1,4 @@ -import {mockUpdateOnboardingProgress} from '../../support/helpers'; - -const me = require('../../fixtures/me.join-class.json'); +import {assertStartPage} from '../../support/helpers'; 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); }); }); diff --git a/client/cypress/integration/frontend/rooms/room-page.spec.js b/client/cypress/integration/frontend/rooms/room-page.spec.js index aea0bc6c..857f82e7 100644 --- a/client/cypress/integration/frontend/rooms/room-page.spec.js +++ b/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'); + }); }); diff --git a/client/cypress/integration/frontend/spellcheck.spec.js b/client/cypress/integration/frontend/spellcheck.spec.js index dd802d0b..f7e43c88 100644 --- a/client/cypress/integration/frontend/spellcheck.spec.js +++ b/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', () => { diff --git a/client/cypress/support/commands.js b/client/cypress/support/commands.js index d8ab2a20..29bb00de 100644 --- a/client/cypress/support/commands.js +++ b/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}]`); }); diff --git a/client/cypress/support/helpers.js b/client/cypress/support/helpers.js index b24bce42..ea187e2f 100644 --- a/client/cypress/support/helpers.js +++ b/client/cypress/support/helpers.js @@ -1,16 +1,25 @@ // todo: clean up this file -export const getMinimalMe = ({readOnly = false, classReadOnly = false, isTeacher = true} = {}) => ({ - me: { - id: btoa('PrivateUserNode:1'), - readOnly, - isTeacher, - selectedClass: { - id: 'selectedClassId', - readOnly: classReadOnly, +export const getMinimalMe = ({readOnly = false, classReadOnly = false, isTeacher = true} = {}) => { + const selectedClass = { + name: 'Selected Class', + id: btoa('SchoolClassNode:selectedClassId'), + readOnly: classReadOnly, + }; + return { + 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: {}, - }, - }, - }; -}; diff --git a/client/src/pages/room.vue b/client/src/pages/room.vue index 63c0ae75..e8aa865e 100644 --- a/client/src/pages/room.vue +++ b/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: {