diff --git a/client/cypress/e2e/frontend/rooms/room-page.spec.js b/client/cypress/e2e/frontend/rooms/room-page.spec.js index 7f422769..44ab8557 100644 --- a/client/cypress/e2e/frontend/rooms/room-page.spec.js +++ b/client/cypress/e2e/frontend/rooms/room-page.spec.js @@ -1,12 +1,12 @@ -import { getMinimalMe } from '../../../support/helpers'; +import { getMinimalMe } from '../../../support/helpers' describe('The Room Page (Teacher)', () => { - const MeQuery = getMinimalMe(); - const selectedClass = MeQuery.me.selectedClass; - const entryText = 'something should be here'; - const entryTitle = 'some title'; - const slug = 'ein-historisches-festival'; - const id = btoa('RoomNode:1'); + const MeQuery = getMinimalMe() + const selectedClass = MeQuery.me.selectedClass + const entryText = 'something should be here' + const entryTitle = 'some title' + const slug = 'ein-historisches-festival' + const id = btoa('RoomNode:1') const room = { id, slug, @@ -15,11 +15,11 @@ describe('The Room Page (Teacher)', () => { roomEntries: { edges: [], }, - }; + } const RoomEntriesQuery = { room, - }; + } const operations = { MeQuery, @@ -46,38 +46,42 @@ describe('The Room Page (Teacher)', () => { errors: [], }, }, - }; + } const checkRadioButton = () => { - cy.get('.base-input-container__input:checked + .base-input-container__radiobutton svg').should('have.length', 1); - }; + cy.get( + '.base-input-container__input:checked + .base-input-container__radiobutton svg' + ).should('have.length', 1) + } beforeEach(() => { - cy.setup(); - }); + cy.setup() + }) it('displays new room entry with author name', () => { cy.mockGraphqlOps({ operations, - }); - cy.visit(`/room/${slug}`); + }) + cy.visit(`/room/${slug}`) - cy.getByDataCy('add-room-entry-button').click(); - cy.getByDataCy('add-content-link').first().click(); - cy.getByDataCy('choose-text-widget').click(); - cy.getByDataCy('input-with-label-input').type(entryTitle); + cy.getByDataCy('add-room-entry-button').click() + cy.getByDataCy('add-content-link').first().click() + cy.getByDataCy('choose-text-widget').click() + cy.getByDataCy('input-with-label-input').type(entryTitle) - cy.get('.tip-tap__editor').type(entryText); - cy.getByDataCy('save-button').click(); + cy.get('.tip-tap__editor').type(entryText) + cy.getByDataCy('save-button').click() - cy.get('.room-entry__content:first').should('contain', entryText).should('contain', 'Rachel Green'); - }); + cy.get('.room-entry__content:first') + .should('contain', entryText) + .should('contain', 'Rachel Green') + }) // todo: re-enable once cypress can do it correctly it.skip('changes visibility of a room', () => { const MeQuery = getMinimalMe({ isTeacher: true, - }); + }) const operations = { MeQuery, RoomEntriesQuery, @@ -90,61 +94,72 @@ describe('The Room Page (Teacher)', () => { }, }, }, - }; + } cy.mockGraphqlOps({ operations, - }); + }) - cy.visit(`/room/${slug}`); - cy.getByDataCy('room-visibility-status').should('contain', 'alle Lernenden'); - cy.getByDataCy('toggle-more-actions-menu').click(); - cy.getByDataCy('change-visibility').click(); - cy.getByDataCy('modal-title').should('contain', 'Sichtbarkeit anpassen'); - cy.get('.change-visibility__radio').should('have.length', 2); - cy.get('.change-visibility__radio--selected').should('have.length', 1); - checkRadioButton(); - cy.get('.change-visibility__radio--selected').should('have.length', 1).should('contain', 'alle Lernenden'); - checkRadioButton(); - cy.getByDataCy('select-option').eq(0).click(); - cy.get('.change-visibility__radio--selected').should('have.length', 1); - checkRadioButton(); - cy.getByDataCy('select-option').eq(1).click(); - cy.getByDataCy('select-option').eq(1).click(); - cy.get('.change-visibility__radio--selected').should('have.length', 1).should('contain', 'eigenen Beiträge'); - checkRadioButton(); - cy.getByDataCy('modal-save-button').click(); - cy.getByDataCy('room-visibility-status').should('contain', 'eigenen Beiträge'); - cy.getByDataCy('toggle-more-actions-menu').click(); - cy.getByDataCy('change-visibility').click(); - cy.getByDataCy('modal-title').should('contain', 'Sichtbarkeit anpassen'); - cy.get('.change-visibility__radio--selected').should('have.length', 1).should('contain', 'eigenen Beiträge'); - checkRadioButton(); - }); + cy.visit(`/room/${slug}`) + cy.getByDataCy('room-visibility-status').should('contain', 'alle Lernenden') + cy.getByDataCy('toggle-more-actions-menu').click() + cy.getByDataCy('change-visibility').click() + cy.getByDataCy('modal-title').should('contain', 'Sichtbarkeit anpassen') + cy.get('.change-visibility__radio').should('have.length', 2) + cy.get('.change-visibility__radio--selected').should('have.length', 1) + checkRadioButton() + cy.get('.change-visibility__radio--selected') + .should('have.length', 1) + .should('contain', 'alle Lernenden') + checkRadioButton() + cy.getByDataCy('select-option').eq(0).click() + cy.get('.change-visibility__radio--selected').should('have.length', 1) + checkRadioButton() + cy.getByDataCy('select-option').eq(1).click() + cy.getByDataCy('select-option').eq(1).click() + cy.get('.change-visibility__radio--selected') + .should('have.length', 1) + .should('contain', 'eigenen Beiträge') + checkRadioButton() + cy.getByDataCy('modal-save-button').click() + cy.getByDataCy('room-visibility-status').should( + 'contain', + 'eigenen Beiträge' + ) + cy.getByDataCy('toggle-more-actions-menu').click() + cy.getByDataCy('change-visibility').click() + cy.getByDataCy('modal-title').should('contain', 'Sichtbarkeit anpassen') + cy.get('.change-visibility__radio--selected') + .should('have.length', 1) + .should('contain', 'eigenen Beiträge') + checkRadioButton() + }) it('deletes the room and goes back to the overview', () => { - const MeQuery = getMinimalMe(); - const schoolClass = MeQuery.me.selectedClass; + const MeQuery = getMinimalMe() + const schoolClass = MeQuery.me.selectedClass const roomToDelete = { - id: btoa('RoomNode:room-to-delete'), + id: window.btoa('RoomNode:room-to-delete'), + title: 'Delete Me', schoolClass, slug: 'delete-me', roomEntries: { edges: [], }, - }; + } const otherRoom = { - id: btoa('RoomNode:otherRoom'), + id: window.btoa('RoomNode:otherRoom'), slug: 'other-slug', + title: 'Other Room', schoolClass, - }; - let rooms = [roomToDelete, otherRoom]; + } + let rooms = [roomToDelete, otherRoom] const operations = { MeQuery, RoomsQuery() { return { rooms, - }; + } }, RoomEntriesQuery: { room: roomToDelete, @@ -154,31 +169,32 @@ describe('The Room Page (Teacher)', () => { success: true, }, }, - }; + } cy.mockGraphqlOps({ operations, - }); + }) - cy.visit(`/rooms`); - cy.getByDataCy('room-widget').should('have.length', 2); - cy.getByDataCy('room-widget').first().click(); - cy.getByDataCy('toggle-more-actions-menu').click(); + cy.visit(`/rooms`) + cy.getByDataCy('room-widget').should('have.length', 2) + cy.getByDataCy('room-widget').first().click() + cy.getByDataCy('room-title').should('contain', 'Delete Me') + cy.getByDataCy('toggle-more-actions-menu').click() cy.getByDataCy('delete-room').within(() => { - cy.get('a').click(); - }); - cy.getByDataCy('modal-save-button').click(); - cy.url().should('include', 'rooms'); - cy.getByDataCy('room-widget').should('have.length', 1); - }); + cy.get('a').click() + }) + cy.getByDataCy('modal-save-button').click() + cy.url().should('include', 'rooms') + cy.getByDataCy('room-widget').should('have.length', 1) + }) it('changes class while on room page', () => { - const { me } = MeQuery; + const { me } = MeQuery const otherClass = { - id: btoa('SchoolClassNode:34'), + id: window.btoa('SchoolClassNode:34'), name: 'Other Class', readOnly: false, - }; - let selectedClass = me.selectedClass; + } + let selectedClass = me.selectedClass const operations = { MeQuery: () => { return { @@ -187,16 +203,16 @@ describe('The Room Page (Teacher)', () => { schoolClasses: [...me.schoolClasses, otherClass], selectedClass, }, - }; + } }, RoomEntriesQuery, UpdateSettings() { - selectedClass = otherClass; + selectedClass = otherClass return { updateSettings: { success: true, }, - }; + } }, ModuleDetailsQuery: {}, MySchoolClassQuery: () => { @@ -204,32 +220,32 @@ describe('The Room Page (Teacher)', () => { me: { selectedClass, }, - }; + } }, RoomsQuery: { rooms: [], }, - }; + } cy.mockGraphqlOps({ operations, - }); - cy.visit(`/room/${slug}`); - cy.getByDataCy('room-title').should('contain', 'A Room'); - cy.selectClass('Other Class'); - cy.url().should('include', 'rooms'); - cy.getByDataCy('current-class-name').should('contain', 'Other Class'); - }); -}); + }) + cy.visit(`/room/${slug}`) + cy.getByDataCy('room-title').should('contain', 'A Room') + cy.selectClass('Other Class') + cy.url().should('include', 'rooms') + cy.getByDataCy('current-class-name').should('contain', 'Other Class') + }) +}) describe('The Room Page (student)', () => { - const slug = 'ein-historisches-festival'; - const MeQuery = getMinimalMe({ isTeacher: false }); - const { me } = MeQuery; - const id = atob(me.id).split(':')[1]; - const authorId = btoa(`PublicUserNode:${id}`); - const entrySlug = 'entry-slug'; - const { selectedClass } = me; + const slug = 'ein-historisches-festival' + const MeQuery = getMinimalMe({ isTeacher: false }) + const { me } = MeQuery + const id = atob(me.id).split(':')[1] + const authorId = btoa(`PublicUserNode:${id}`) + const entrySlug = 'entry-slug' + const { selectedClass } = me const roomEntry = { id: 'entry-id', slug: entrySlug, @@ -250,7 +266,7 @@ describe('The Room Page (student)', () => { lastName: 'Was Heiri', avatarUrl: '', }, - }; + } const room = { id, slug, @@ -263,55 +279,58 @@ describe('The Room Page (student)', () => { }, ], }, - }; + } const RoomEntriesQuery = { room, - }; + } beforeEach(() => { - cy.setup(); - }); + cy.setup() + }) it('room actions should not exist for student', () => { const operations = { MeQuery: getMinimalMe({ isTeacher: false }), RoomEntriesQuery, - }; + } cy.mockGraphqlOps({ operations, - }); - cy.visit(`/room/${slug}`); + }) + cy.visit(`/room/${slug}`) - cy.getByDataCy('room-title').should('exist'); - cy.getByDataCy('room-actions').should('not.exist'); - }); + cy.getByDataCy('room-title').should('exist') + cy.getByDataCy('room-actions').should('not.exist') + }) it('creates a room entry', () => { - const MeQuery = getMinimalMe({ isTeacher: false }); + const MeQuery = getMinimalMe({ isTeacher: false }) const room = { id: 'some-room', roomEntries: { edges: [], }, - }; + } const operations = { MeQuery, RoomEntriesQuery: { room, }, - }; + } cy.mockGraphqlOps({ operations, - }); + }) - cy.visit(`/room/${slug}`); - cy.getByDataCy('add-room-entry-button').click(); + cy.visit(`/room/${slug}`) + cy.getByDataCy('add-room-entry-button').click() - cy.getByDataCy('content-form-section-title').should('have.text', 'Titel (Pflichtfeld)'); - }); + cy.getByDataCy('content-form-section-title').should( + 'have.text', + 'Titel (Pflichtfeld)' + ) + }) it('edits own room entry', () => { const room = { @@ -325,7 +344,7 @@ describe('The Room Page (student)', () => { }, ], }, - }; + } const operations = { MeQuery: MeQuery, RoomEntriesQuery: { @@ -334,15 +353,15 @@ describe('The Room Page (student)', () => { RoomEntryQuery: { roomEntry, }, - }; + } cy.mockGraphqlOps({ operations, - }); - cy.visit(`/room/${slug}`); - cy.getByDataCy('room-entry-actions').click(); - cy.getByDataCy('edit-room-entry').click(); - cy.location('pathname').should('include', entrySlug); - }); + }) + cy.visit(`/room/${slug}`) + cy.getByDataCy('room-entry-actions').click() + cy.getByDataCy('edit-room-entry').click() + cy.location('pathname').should('include', entrySlug) + }) it('deletes room entry', () => { const DeleteRoomEntry = { @@ -351,57 +370,57 @@ describe('The Room Page (student)', () => { errors: null, roomSlug: slug, }, - }; + } const operations = { MeQuery, RoomEntriesQuery, DeleteRoomEntry, - }; + } cy.mockGraphqlOps({ operations, - }); + }) - cy.visit(`/room/${slug}`); - cy.getByDataCy('room-entry').should('have.length', 1); - cy.getByDataCy('room-entry-actions').click(); - cy.getByDataCy('delete-room-entry').click(); - cy.getByDataCy('delete-room-entry').should('not.exist'); - cy.getByDataCy('modal-save-button').click(); - cy.getByDataCy('room-entry').should('have.length', 0); - }); + cy.visit(`/room/${slug}`) + cy.getByDataCy('room-entry').should('have.length', 1) + cy.getByDataCy('room-entry-actions').click() + cy.getByDataCy('delete-room-entry').click() + cy.getByDataCy('delete-room-entry').should('not.exist') + cy.getByDataCy('modal-save-button').click() + cy.getByDataCy('room-entry').should('have.length', 0) + }) it('shows room entries with comment count', () => { const operations = { MeQuery, RoomEntriesQuery, - }; + } cy.mockGraphqlOps({ operations, - }); + }) - cy.visit(`/room/${slug}`); + cy.visit(`/room/${slug}`) cy.getByDataCy('room-entry') .should('have.length', 1) .within(() => { - cy.getByDataCy('entry-count').should('contain.text', '2'); - }); - }); + cy.getByDataCy('entry-count').should('contain.text', '2') + }) + }) it('does not show actions on mobile', () => { const operations = { MeQuery, RoomEntriesQuery, - }; + } cy.mockGraphqlOps({ operations, - }); - cy.viewport('iphone-8'); + }) + cy.viewport('iphone-8') - cy.visit(`/room/${slug}`); - cy.getByDataCy('room-actions').should('not.exist'); - cy.getByDataCy('room-entry').should('have.length', 1); - cy.getByDataCy('room-entry-actions').should('not.be.visible'); - }); -}); + cy.visit(`/room/${slug}`) + cy.getByDataCy('room-actions').should('not.exist') + cy.getByDataCy('room-entry').should('have.length', 1) + cy.getByDataCy('room-entry-actions').should('not.be.visible') + }) +})