714 lines
20 KiB
JavaScript

const {
notifications,
workflowStatus,
editorStatus,
publishTypes,
colorError,
colorNormal,
textColorNormal,
} = require('./constants');
function login(user) {
cy.viewport(1200, 1200);
if (user) {
cy.visit('/', {
onBeforeLoad: () => {
// https://github.com/cypress-io/cypress/issues/1208
window.indexedDB.deleteDatabase('localforage');
window.localStorage.setItem('netlify-cms-user', JSON.stringify(user));
if (user.netlifySiteURL) {
window.localStorage.setItem('netlifySiteURL', user.netlifySiteURL);
}
},
});
if (user.netlifySiteURL && user.email && user.password) {
cy.get('input[name="email"]')
.clear()
.type(user.email);
cy.get('input[name="password"]')
.clear()
.type(user.password);
cy.contains('button', 'Login').click();
}
} else {
cy.visit('/');
cy.contains('button', 'Login').click();
}
cy.contains('a', 'New Post');
}
function assertNotification(message) {
cy.get('.notif__container').within(() => {
cy.contains(message);
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(500);
cy.contains(message).invoke('hide');
});
}
function assertColorOn(cssProperty, color, opts) {
if (opts.type && opts.type === 'label') {
(opts.scope ? opts.scope : cy).contains('label', opts.label).should($el => {
expect($el).to.have.css(cssProperty, color);
});
} else if (opts.type && opts.type === 'field') {
const assertion = $el => expect($el).to.have.css(cssProperty, color);
if (opts.isMarkdown) {
(opts.scope ? opts.scope : cy)
.contains('label', opts.label)
.next()
.children()
.eq(0)
.children()
.eq(1)
.should(assertion);
} else {
(opts.scope ? opts.scope : cy)
.contains('label', opts.label)
.next()
.should(assertion);
}
} else if (opts.el) {
opts.el.should($el => {
expect($el).to.have.css(cssProperty, color);
});
}
}
function exitEditor() {
cy.contains('a', 'Writing in').click();
}
function goToWorkflow() {
cy.contains('a', 'Workflow').click();
}
function goToCollections() {
cy.contains('a', 'Content').click();
}
function goToMediaLibrary() {
cy.contains('button', 'Media').click();
}
function assertUnpublishedEntryInEditor() {
cy.contains('button', 'Delete unpublished entry');
}
function assertPublishedEntryInEditor() {
cy.contains('button', 'Delete published entry');
}
function assertUnpublishedChangesInEditor() {
cy.contains('button', 'Delete unpublished changes');
}
function goToEntry(entry) {
goToCollections();
cy.get('a h2')
.first()
.contains(entry.title)
.click();
}
function updateWorkflowStatus({ title }, fromColumnHeading, toColumnHeading) {
cy.contains('h2', fromColumnHeading)
.parent()
.contains('a', title)
.drag();
cy.contains('h2', toColumnHeading)
.parent()
.drop();
assertNotification(notifications.updated);
}
function publishWorkflowEntry({ title }, timeout) {
cy.contains('h2', workflowStatus.ready, { timeout })
.parent()
.within(() => {
cy.contains('a', title)
.parent()
.within(() => {
cy.contains('button', 'Publish new entry').click({ force: true });
});
});
assertNotification(notifications.published);
}
function deleteWorkflowEntry({ title }) {
cy.contains('a', title)
.parent()
.within(() => {
cy.contains('button', 'Delete new entry').click({ force: true });
});
assertNotification(notifications.deletedUnpublished);
}
const STATUS_BUTTON_TEXT = 'Status:';
function assertWorkflowStatusInEditor(status) {
cy.contains('[role="button"]', STATUS_BUTTON_TEXT).as('setStatusButton');
cy.get('@setStatusButton')
.parent()
.within(() => {
cy.get('@setStatusButton').click();
cy.contains('[role="menuitem"] span', status)
.parent()
.within(() => {
cy.get('svg');
});
cy.get('@setStatusButton').click();
});
}
function assertPublishedEntry(entry) {
if (Array.isArray(entry)) {
const entries = entry.reverse();
cy.get('a h2').then(els => {
cy.wrap(els.slice(0, entries.length)).each((el, idx) => {
cy.wrap(el).contains(entries[idx].title);
});
});
} else {
cy.get('a h2')
.first()
.contains(entry.title);
}
}
function deleteEntryInEditor() {
cy.contains('button', 'Delete').click();
assertNotification(notifications.deletedUnpublished);
}
function assertOnCollectionsPage() {
cy.url().should('contain', '/#/collections/posts');
}
function assertEntryDeleted(entry) {
cy.get('body').then($body => {
const entriesHeaders = $body.find('a h2');
if (entriesHeaders.length > 0) {
if (Array.isArray(entry)) {
const titles = entry.map(e => e.title);
cy.get('a h2').each(el => {
expect(titles).not.to.include(el.text());
});
} else {
cy.get('a h2').each(el => {
expect(entry.title).not.to.equal(el.text());
});
}
}
});
}
function assertWorkflowStatus({ title }, status) {
cy.contains('h2', status)
.parent()
.contains('a', title);
}
function updateWorkflowStatusInEditor(newStatus) {
selectDropdownItem(STATUS_BUTTON_TEXT, newStatus);
assertNotification(notifications.updated);
}
function publishEntryInEditor(publishType) {
selectDropdownItem('Publish', publishType);
assertNotification(notifications.published);
}
function publishAndCreateNewEntryInEditor() {
selectDropdownItem('Publish', publishTypes.publishAndCreateNew);
assertNotification(notifications.published);
cy.url().should('eq', `http://localhost:8080/#/collections/posts/new`);
cy.get('[id^="title-field"]').should('have.value', '');
}
function publishAndDuplicateEntryInEditor(entry) {
selectDropdownItem('Publish', publishTypes.publishAndDuplicate);
assertNotification(notifications.published);
cy.url().should('eq', `http://localhost:8080/#/collections/posts/new`);
cy.get('[id^="title-field"]').should('have.value', entry.title);
}
function selectDropdownItem(label, item) {
cy.contains('[role="button"]', label).as('dropDownButton');
cy.get('@dropDownButton')
.parent()
.within(() => {
cy.get('@dropDownButton').click();
cy.contains('[role="menuitem"] span', item).click();
});
}
function flushClockAndSave() {
cy.clock().then(clock => {
// some input fields are de-bounced thus require advancing the clock
if (clock) {
// https://github.com/cypress-io/cypress/issues/1273
clock.tick(150);
clock.tick(150);
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(500);
}
cy.contains('button', 'Save').click();
assertNotification(notifications.saved);
});
}
function populateEntry(entry, onDone = flushClockAndSave) {
const keys = Object.keys(entry);
for (const key of keys) {
const value = entry[key];
if (key === 'body') {
cy.getMarkdownEditor()
.first()
.click()
.clear({ force: true })
.type(value, { force: true });
} else {
cy.get(`[id^="${key}-field"]`)
.first()
.clear({ force: true });
cy.get(`[id^="${key}-field"]`)
.first()
.type(value, { force: true });
}
}
onDone();
}
function newPost() {
cy.contains('a', 'New Post').click();
}
function createPost(entry) {
newPost();
populateEntry(entry);
}
function createPostAndExit(entry) {
createPost(entry);
exitEditor();
}
function advanceClock(clock) {
if (clock) {
// https://github.com/cypress-io/cypress/issues/1273
clock.tick(150);
clock.tick(150);
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(500);
}
}
function publishEntry({ createNew = false, duplicate = false } = {}) {
cy.clock().then(clock => {
// some input fields are de-bounced thus require advancing the clock
advanceClock(clock);
if (createNew) {
advanceClock(clock);
selectDropdownItem('Publish', publishTypes.publishAndCreateNew);
advanceClock(clock);
} else if (duplicate) {
advanceClock(clock);
selectDropdownItem('Publish', publishTypes.publishAndDuplicate);
advanceClock(clock);
} else {
selectDropdownItem('Publish', publishTypes.publishNow);
}
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(500);
});
}
function createPostAndPublish(entry) {
newPost();
populateEntry(entry, publishEntry);
exitEditor();
}
function createPostPublishAndCreateNew(entry) {
newPost();
populateEntry(entry, () => publishEntry({ createNew: true }));
cy.url().should('eq', `http://localhost:8080/#/collections/posts/new`);
cy.get('[id^="title-field"]').should('have.value', '');
exitEditor();
}
function createPostPublishAndDuplicate(entry) {
newPost();
populateEntry(entry, () => publishEntry({ duplicate: true }));
cy.url().should('eq', `http://localhost:8080/#/collections/posts/new`);
cy.get('[id^="title-field"]').should('have.value', entry.title);
exitEditor();
}
function editPostAndPublish(entry1, entry2) {
goToEntry(entry1);
cy.contains('button', 'Delete entry');
cy.contains('span', 'Published');
populateEntry(entry2, publishEntry);
// existing entry slug should remain the same after save
cy.url().should(
'eq',
`http://localhost:8080/#/collections/posts/entries/1970-01-01-${entry1.title
.toLowerCase()
.replace(/\s/, '-')}`,
);
}
function editPostPublishAndCreateNew(entry1, entry2) {
goToEntry(entry1);
cy.contains('button', 'Delete entry');
cy.contains('span', 'Published');
populateEntry(entry2, () => publishEntry({ createNew: true }));
cy.url().should('eq', `http://localhost:8080/#/collections/posts/new`);
cy.get('[id^="title-field"]').should('have.value', '');
}
function editPostPublishAndDuplicate(entry1, entry2) {
goToEntry(entry1);
cy.contains('button', 'Delete entry');
cy.contains('span', 'Published');
populateEntry(entry2, () => publishEntry({ duplicate: true }));
cy.url().should('eq', `http://localhost:8080/#/collections/posts/new`);
cy.get('[id^="title-field"]').should('have.value', entry2.title);
}
function duplicatePostAndPublish(entry1) {
goToEntry(entry1);
cy.contains('button', 'Delete entry');
selectDropdownItem('Published', 'Duplicate');
publishEntry();
cy.url().should(
'eq',
`http://localhost:8080/#/collections/posts/entries/1970-01-01-${entry1.title
.toLowerCase()
.replace(/\s/, '-')}-1`,
);
}
function updateExistingPostAndExit(fromEntry, toEntry) {
goToWorkflow();
cy.contains('h2', fromEntry.title)
.parent()
.click({ force: true });
populateEntry(toEntry);
exitEditor();
goToWorkflow();
cy.contains('h2', toEntry.title);
}
function unpublishEntry(entry) {
goToCollections();
cy.contains('h2', entry.title)
.parent()
.click({ force: true });
selectDropdownItem('Published', 'Unpublish');
assertNotification(notifications.unpublished);
goToWorkflow();
assertWorkflowStatus(entry, workflowStatus.ready);
}
function duplicateEntry(entry) {
selectDropdownItem('Published', 'Duplicate');
cy.url().should('contain', '/#/collections/posts/new');
flushClockAndSave();
updateWorkflowStatusInEditor(editorStatus.ready);
publishEntryInEditor(publishTypes.publishNow);
exitEditor();
cy.get('a h2').should($h2s => {
expect($h2s.eq(0)).to.contain(entry.title);
expect($h2s.eq(1)).to.contain(entry.title);
});
}
function validateObjectFields({ limit, author }) {
cy.get('a[href^="#/collections/settings"]').click();
cy.get('a[href^="#/collections/settings/entries/general"]').click();
cy.get('input[type=number]').type(limit);
cy.contains('button', 'Save').click();
assertNotification(notifications.error.missingField);
assertFieldErrorStatus('Default Author', colorError);
cy.contains('label', 'Default Author').click();
cy.focused().type(author);
cy.contains('button', 'Save').click();
assertNotification(notifications.saved);
assertFieldErrorStatus('Default Author', colorNormal);
}
function validateNestedObjectFields({ limit, author }) {
cy.get('a[href^="#/collections/settings"]').click();
cy.get('a[href^="#/collections/settings/entries/general"]').click();
cy.contains('label', 'Default Author').click();
cy.focused().type(author);
cy.contains('button', 'Save').click();
assertNotification(notifications.error.missingField);
cy.get('input[type=number]').type(limit + 1);
cy.contains('button', 'Save').click();
assertFieldValidationError(notifications.validation.range);
cy.get('input[type=number]')
.clear()
.type(-1);
cy.contains('button', 'Save').click();
assertFieldValidationError(notifications.validation.range);
cy.get('input[type=number]')
.clear()
.type(limit);
cy.contains('button', 'Save').click();
assertNotification(notifications.saved);
}
function validateListFields({ name, description }) {
cy.get('a[href^="#/collections/settings"]').click();
cy.get('a[href^="#/collections/settings/entries/authors"]').click();
cy.contains('button', 'Add').click();
cy.contains('button', 'Save').click();
assertNotification(notifications.error.missingField);
assertFieldErrorStatus('Authors', colorError);
cy.get('div[class*=ListControl]')
.eq(2)
.as('listControl');
assertFieldErrorStatus('Name', colorError, { scope: cy.get('@listControl') });
assertColorOn('background-color', colorError, {
type: 'label',
label: 'Description',
scope: cy.get('@listControl'),
isMarkdown: true,
});
assertListControlErrorStatus([colorError, colorError], '@listControl');
cy.get('input')
.eq(2)
.type(name);
cy.getMarkdownEditor()
.eq(2)
.type(description);
flushClockAndSave();
assertNotification(notifications.saved);
assertFieldErrorStatus('Authors', colorNormal);
}
function validateNestedListFields() {
cy.get('a[href^="#/collections/settings"]').click();
cy.get('a[href^="#/collections/settings/entries/hotel_locations"]').click();
// add first city list item
cy.contains('button', 'hotel locations').click();
cy.contains('button', 'cities').click();
cy.contains('label', 'City')
.next()
.type('Washington DC');
cy.contains('label', 'Number of Hotels in City')
.next()
.type('5');
cy.contains('button', 'city locations').click();
// add second city list item
cy.contains('button', 'cities').click();
cy.contains('label', 'Cities')
.next()
.find('div[class*=ListControl]')
.eq(2)
.as('secondCitiesListControl');
cy.get('@secondCitiesListControl')
.contains('label', 'City')
.next()
.type('Boston');
cy.get('@secondCitiesListControl')
.contains('button', 'city locations')
.click();
cy.contains('button', 'Save').click();
assertNotification(notifications.error.missingField);
// assert on fields
assertFieldErrorStatus('Hotel Locations', colorError);
assertFieldErrorStatus('Cities', colorError);
assertFieldErrorStatus('City', colorNormal);
assertFieldErrorStatus('City', colorNormal, { scope: cy.get('@secondCitiesListControl') });
assertFieldErrorStatus('Number of Hotels in City', colorNormal);
assertFieldErrorStatus('Number of Hotels in City', colorError, {
scope: cy.get('@secondCitiesListControl'),
});
assertFieldErrorStatus('City Locations', colorError);
assertFieldErrorStatus('City Locations', colorError, {
scope: cy.get('@secondCitiesListControl'),
});
assertFieldErrorStatus('Hotel Name', colorError);
assertFieldErrorStatus('Hotel Name', colorError, { scope: cy.get('@secondCitiesListControl') });
// list control aliases
cy.contains('label', 'Hotel Locations')
.next()
.find('div[class*=ListControl]')
.first()
.as('hotelLocationsListControl');
cy.contains('label', 'Cities')
.next()
.find('div[class*=ListControl]')
.eq(0)
.as('firstCitiesListControl');
cy.contains('label', 'City Locations')
.next()
.find('div[class*=ListControl]')
.eq(0)
.as('firstCityLocationsListControl');
cy.contains('label', 'Cities')
.next()
.find('div[class*=ListControl]')
.eq(3)
.as('secondCityLocationsListControl');
// assert on list controls
assertListControlErrorStatus([colorError, colorError], '@hotelLocationsListControl');
assertListControlErrorStatus([colorError, colorError], '@firstCitiesListControl');
assertListControlErrorStatus([colorError, colorError], '@secondCitiesListControl');
assertListControlErrorStatus([colorError, colorError], '@firstCityLocationsListControl');
assertListControlErrorStatus([colorError, colorError], '@secondCityLocationsListControl');
cy.contains('label', 'Hotel Name')
.next()
.type('The Ritz Carlton');
cy.contains('button', 'Save').click();
assertNotification(notifications.error.missingField);
assertListControlErrorStatus([colorNormal, textColorNormal], '@firstCitiesListControl');
// fill out rest of form and save
cy.get('@secondCitiesListControl')
.contains('label', 'Number of Hotels in City')
.type(3);
cy.get('@secondCitiesListControl')
.contains('label', 'Hotel Name')
.type('Grand Hyatt');
cy.contains('label', 'Country')
.next()
.type('United States');
flushClockAndSave();
assertNotification(notifications.saved);
}
function validateObjectFieldsAndExit(setting) {
validateObjectFields(setting);
exitEditor();
}
function validateNestedObjectFieldsAndExit(setting) {
validateNestedObjectFields(setting);
exitEditor();
}
function validateListFieldsAndExit(setting) {
validateListFields(setting);
exitEditor();
}
function validateNestedListFieldsAndExit(setting) {
validateNestedListFields(setting);
exitEditor();
}
function assertFieldValidationError({ message, fieldLabel }) {
cy.contains('label', fieldLabel)
.siblings('ul[class*=ControlErrorsList]')
.contains(message);
assertFieldErrorStatus(fieldLabel, colorError);
}
function assertFieldErrorStatus(label, color, opts = { isMarkdown: false }) {
assertColorOn('background-color', color, {
type: 'label',
label,
scope: opts.scope,
isMarkdown: opts.isMarkdown,
});
assertColorOn('border-color', color, {
type: 'field',
label,
scope: opts.scope,
isMarkdown: opts.isMarkdown,
});
}
function assertListControlErrorStatus(colors = ['', ''], alias) {
cy.get(alias).within(() => {
// assert list item border has correct color
assertColorOn('border-right-color', colors[0], {
el: cy
.root()
.children()
.eq(2),
});
// collapse list item
cy.get('button[class*=TopBarButton-button]')
.first()
.click();
// assert list item label text has correct color
assertColorOn('color', colors[1], { el: cy.get('div[class*=NestedObjectLabel]').first() });
// uncollapse list item
cy.get('button[class*=TopBarButton-button]')
.first()
.click();
});
}
module.exports = {
login,
createPost,
createPostAndExit,
createPostAndPublish,
updateExistingPostAndExit,
exitEditor,
goToWorkflow,
goToCollections,
goToMediaLibrary,
updateWorkflowStatus,
publishWorkflowEntry,
deleteWorkflowEntry,
assertWorkflowStatusInEditor,
assertPublishedEntry,
deleteEntryInEditor,
assertOnCollectionsPage,
assertEntryDeleted,
assertWorkflowStatus,
updateWorkflowStatusInEditor,
validateObjectFieldsAndExit,
validateNestedObjectFieldsAndExit,
validateListFieldsAndExit,
validateNestedListFieldsAndExit,
unpublishEntry,
publishEntryInEditor,
duplicateEntry,
newPost,
populateEntry,
goToEntry,
publishEntry,
createPostPublishAndCreateNew,
createPostPublishAndDuplicate,
editPostAndPublish,
editPostPublishAndCreateNew,
editPostPublishAndDuplicate,
duplicatePostAndPublish,
publishAndCreateNewEntryInEditor,
publishAndDuplicateEntryInEditor,
assertNotification,
assertFieldValidationError,
flushClockAndSave,
assertPublishedEntryInEditor,
assertUnpublishedEntryInEditor,
assertUnpublishedChangesInEditor,
};