427 lines
10 KiB
JavaScript
427 lines
10 KiB
JavaScript
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 room = {
|
|
id,
|
|
slug,
|
|
schoolClass: selectedClass,
|
|
restricted: false,
|
|
roomEntries: {
|
|
edges: [],
|
|
},
|
|
}
|
|
|
|
const RoomEntriesQuery = {
|
|
room,
|
|
}
|
|
|
|
const operations = {
|
|
MeQuery,
|
|
RoomEntriesQuery,
|
|
AddRoomEntry: {
|
|
addRoomEntry: {
|
|
roomEntry: {
|
|
slug: 'entry-slug',
|
|
title: entryTitle,
|
|
contents: [
|
|
{
|
|
type: 'text_block',
|
|
value: {
|
|
text: entryText,
|
|
},
|
|
},
|
|
],
|
|
author: {
|
|
firstName: 'Rachel',
|
|
lastName: 'Green',
|
|
id: window.btoa('PublicUserNode:rachels-id'),
|
|
},
|
|
},
|
|
errors: [],
|
|
},
|
|
},
|
|
}
|
|
|
|
const checkRadioButton = () => {
|
|
cy.get(
|
|
'.base-input-container__input:checked + .base-input-container__radiobutton svg'
|
|
).should('have.length', 1)
|
|
}
|
|
|
|
beforeEach(() => {
|
|
cy.setup()
|
|
})
|
|
|
|
it('displays new room entry with author name', () => {
|
|
cy.mockGraphqlOps({
|
|
operations,
|
|
})
|
|
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.get('.tip-tap__editor').type(entryText)
|
|
cy.getByDataCy('save-button').click()
|
|
|
|
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,
|
|
UpdateRoomVisibility: {
|
|
updateRoomVisibility: {
|
|
success: true,
|
|
room: {
|
|
...room,
|
|
restricted: true,
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
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()
|
|
})
|
|
|
|
it('deletes the room and goes back to the overview', () => {
|
|
const MeQuery = getMinimalMe()
|
|
const schoolClass = MeQuery.me.selectedClass
|
|
const roomToDelete = {
|
|
id: window.btoa('RoomNode:room-to-delete'),
|
|
title: 'Delete Me',
|
|
schoolClass,
|
|
slug: 'delete-me',
|
|
roomEntries: {
|
|
edges: [],
|
|
},
|
|
}
|
|
const otherRoom = {
|
|
id: window.btoa('RoomNode:otherRoom'),
|
|
slug: 'other-slug',
|
|
title: 'Other Room',
|
|
schoolClass,
|
|
}
|
|
let rooms = [roomToDelete, otherRoom]
|
|
const operations = {
|
|
MeQuery,
|
|
RoomsQuery() {
|
|
return {
|
|
rooms,
|
|
}
|
|
},
|
|
RoomEntriesQuery: {
|
|
room: roomToDelete,
|
|
},
|
|
DeleteRoom: {
|
|
deleteRoom: {
|
|
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.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)
|
|
})
|
|
|
|
it('changes class while on room page', () => {
|
|
const { me } = MeQuery
|
|
const otherClass = {
|
|
id: window.btoa('SchoolClassNode:34'),
|
|
name: 'Other Class',
|
|
readOnly: false,
|
|
}
|
|
let selectedClass = me.selectedClass
|
|
const operations = {
|
|
MeQuery: () => {
|
|
return {
|
|
me: {
|
|
...me,
|
|
schoolClasses: [...me.schoolClasses, otherClass],
|
|
selectedClass,
|
|
},
|
|
}
|
|
},
|
|
RoomEntriesQuery,
|
|
UpdateSettings() {
|
|
selectedClass = otherClass
|
|
return {
|
|
updateSettings: {
|
|
success: true,
|
|
},
|
|
}
|
|
},
|
|
ModuleDetailsQuery: {},
|
|
MySchoolClassQuery: () => {
|
|
return {
|
|
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')
|
|
})
|
|
})
|
|
|
|
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 roomEntry = {
|
|
id: 'entry-id',
|
|
slug: entrySlug,
|
|
title: 'My Entry',
|
|
contents: [
|
|
{
|
|
type: 'text_block',
|
|
value: {
|
|
text: 'some text',
|
|
},
|
|
},
|
|
],
|
|
comments: [{}, {}],
|
|
author: {
|
|
...me,
|
|
id: authorId,
|
|
firstName: 'Hans',
|
|
lastName: 'Was Heiri',
|
|
avatarUrl: '',
|
|
},
|
|
}
|
|
const room = {
|
|
id,
|
|
slug,
|
|
schoolClass: selectedClass,
|
|
restricted: false,
|
|
roomEntries: {
|
|
edges: [
|
|
{
|
|
node: roomEntry,
|
|
},
|
|
],
|
|
},
|
|
}
|
|
|
|
const RoomEntriesQuery = {
|
|
room,
|
|
}
|
|
|
|
beforeEach(() => {
|
|
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.getByDataCy('room-title').should('exist')
|
|
cy.getByDataCy('room-actions').should('not.exist')
|
|
})
|
|
|
|
it('creates a room entry', () => {
|
|
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.getByDataCy('content-form-section-title').should(
|
|
'have.text',
|
|
'Titel (Pflichtfeld)'
|
|
)
|
|
})
|
|
|
|
it('edits own room entry', () => {
|
|
const room = {
|
|
id: 'some-room',
|
|
slug,
|
|
// schoolClass: me.selectedClass,
|
|
roomEntries: {
|
|
edges: [
|
|
{
|
|
node: roomEntry,
|
|
},
|
|
],
|
|
},
|
|
}
|
|
const operations = {
|
|
MeQuery: MeQuery,
|
|
RoomEntriesQuery: {
|
|
room,
|
|
},
|
|
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)
|
|
})
|
|
|
|
it('deletes room entry', () => {
|
|
const DeleteRoomEntry = {
|
|
deleteRoomEntry: {
|
|
success: true,
|
|
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)
|
|
})
|
|
|
|
it('shows room entries with comment count', () => {
|
|
const operations = {
|
|
MeQuery,
|
|
RoomEntriesQuery,
|
|
}
|
|
cy.mockGraphqlOps({
|
|
operations,
|
|
})
|
|
|
|
cy.visit(`/room/${slug}`)
|
|
cy.getByDataCy('room-entry')
|
|
.should('have.length', 1)
|
|
.within(() => {
|
|
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.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')
|
|
})
|
|
})
|