Add cypress test to catch double save issue on room entry creation
This commit is contained in:
parent
66b9f8ac6a
commit
eee3bf995c
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue