ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Update test

This commit is contained in:
Ramon Wenger 2023-04-20 11:19:38 +02:00
parent b39d610dbc
commit 5bcaaec858
1 changed files with 168 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

317
client/cypress/e2e/frontend/rooms/room-page.spec.js
View File

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