diff --git a/client/cypress/e2e/frontend/rooms/room-page.spec.js b/client/cypress/e2e/frontend/rooms/room-page.spec.js index 44ab8557..58658ae3 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,42 +46,38 @@ 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, @@ -94,50 +90,41 @@ 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: window.btoa('RoomNode:room-to-delete'), title: 'Delete Me', @@ -146,20 +133,20 @@ describe('The Room Page (Teacher)', () => { roomEntries: { edges: [], }, - } + }; const 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, @@ -169,32 +156,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('room-title').should('contain', 'Delete Me') - 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: window.btoa('SchoolClassNode:34'), name: 'Other Class', readOnly: false, - } - let selectedClass = me.selectedClass + }; + let selectedClass = me.selectedClass; const operations = { MeQuery: () => { return { @@ -203,16 +190,16 @@ describe('The Room Page (Teacher)', () => { schoolClasses: [...me.schoolClasses, otherClass], selectedClass, }, - } + }; }, RoomEntriesQuery, UpdateSettings() { - selectedClass = otherClass + selectedClass = otherClass; return { updateSettings: { success: true, }, - } + }; }, ModuleDetailsQuery: {}, MySchoolClassQuery: () => { @@ -220,32 +207,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, @@ -266,7 +253,7 @@ describe('The Room Page (student)', () => { lastName: 'Was Heiri', avatarUrl: '', }, - } + }; const room = { id, slug, @@ -279,58 +266,120 @@ 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.only('creates a room entry and presses "Save" twice', () => { + const MeQuery = getMinimalMe({ isTeacher: false }); + const room = { + id: 'some-room', + roomEntries: { + edges: [], + }, + }; + const operations = { + MeQuery, + RoomEntriesQuery: { + room, + }, + AddRoomEntry: () => { + return new Promise((resolve) => { + // simulate a slow-ish connection + setTimeout(() => { + resolve({ + addRoomEntry: { + roomEntry: { + slug: 'entry-slug', + title: 'Some Title', + contents: [ + { + type: 'text_block', + value: { + text: 'Redrum!', + }, + }, + ], + author: { + firstName: 'Stephen', + lastName: 'King', + id: window.btoa('PublicUserNode:stephen-king'), + }, + }, + }, + }); + }, 500); + }); + }, + }; + + cy.mockGraphqlOps({ + operations, + }); + + 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-block-title').within(() => { + cy.getByDataCy('input-with-label-input').type('Title'); + }); + + cy.getByDataCy('add-content-link').click(); + cy.getByDataCy('choose-text-widget').click(); + cy.get('.tip-tap__editor').type('Some text'); + cy.getByDataCy('save-button').click(); + cy.getByDataCy('save-button').click(); + cy.getByDataCy('room-title').should('contain', 'A Room'); + cy.wait(1000); // wait for both requests to finish, if there's more than one + cy.getByDataCy('room-entry').should('have.length', 1); + }); it('edits own room entry', () => { const room = { @@ -344,7 +393,7 @@ describe('The Room Page (student)', () => { }, ], }, - } + }; const operations = { MeQuery: MeQuery, RoomEntriesQuery: { @@ -353,15 +402,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 = { @@ -370,57 +419,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'); + }); +});