import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps' import { getLangByName } from '../../support/helpers' /* global cy */ let lastPost = {} let loginCredentials = { email: 'peterpan@example.org', password: '1234' } const narratorParams = { name: 'Peter Pan', avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/nerrsoft/128.jpg', ...loginCredentials } Given('I am logged in', () => { cy.login(loginCredentials) }) Given('we have a selection of tags and categories as well as posts', () => { cy.factory() .authenticateAs(loginCredentials) .create('Category', { id: 'cat1', name: 'Just For Fun', slug: 'justforfun', icon: 'smile' }) .create('Category', { id: 'cat2', name: 'Happyness & Values', slug: 'happyness-values', icon: 'heart-o' }) .create('Category', { id: 'cat3', name: 'Health & Wellbeing', slug: 'health-wellbeing', icon: 'medkit' }) .create('Tag', { id: 't1', name: 'Ecology' }) .create('Tag', { id: 't2', name: 'Nature' }) .create('Tag', { id: 't3', name: 'Democracy' }) const someAuthor = { id: 'authorId', email: 'author@example.org', password: '1234' } cy.factory() .create('User', someAuthor) .authenticateAs(someAuthor) .create('Post', { id: 'p0' }) .create('Post', { id: 'p1' }) cy.factory() .authenticateAs(loginCredentials) .create('Post', { id: 'p2' }) .relate('Post', 'Categories', { from: 'p0', to: 'cat1' }) .relate('Post', 'Categories', { from: 'p1', to: 'cat2' }) .relate('Post', 'Categories', { from: 'p2', to: 'cat1' }) .relate('Post', 'Tags', { from: 'p0', to: 't1' }) .relate('Post', 'Tags', { from: 'p0', to: 't2' }) .relate('Post', 'Tags', { from: 'p0', to: 't3' }) .relate('Post', 'Tags', { from: 'p1', to: 't2' }) .relate('Post', 'Tags', { from: 'p1', to: 't3' }) .relate('Post', 'Tags', { from: 'p2', to: 't3' }) }) Given('we have the following user accounts:', table => { table.hashes().forEach(params => { cy.factory().create('User', params) }) }) Given('I have a user account', () => { cy.factory().create('User', narratorParams) }) Given('my user account has the role {string}', role => { cy.factory().create('User', { role, ...loginCredentials }) }) When('I log out', cy.logout) When('I visit {string}', page => { cy.openPage(page) }) When('I visit the {string} page', page => { cy.openPage(page) }) Given('I am on the {string} page', page => { cy.openPage(page) }) When('I fill in my email and password combination and click submit', () => { cy.login(loginCredentials) }) When(/(?:when )?I refresh the page/, () => { cy.reload() }) When('I log out through the menu in the top right corner', () => { cy.get('.avatar-menu').click() cy.get('.avatar-menu-popover') .find('a[href="/logout"]') .click() }) Then('I can see my name {string} in the dropdown menu', () => { cy.get('.avatar-menu-popover').should('contain', narratorParams.name) }) Then('I see the login screen again', () => { cy.location('pathname').should('contain', '/login') }) Then('I can click on my profile picture in the top right corner', () => { cy.get('.avatar-menu').click() cy.get('.avatar-menu-popover') }) Then('I am still logged in', () => { cy.get('.avatar-menu').click() cy.get('.avatar-menu-popover').contains(narratorParams.name) }) When('I select {string} in the language menu', name => { cy.switchLanguage(name, true) }) Given('I previously switched the language to {string}', name => { cy.switchLanguage(name, true) }) Then('the whole user interface appears in {string}', name => { const lang = getLangByName(name) cy.get(`html[lang=${lang.code}]`) cy.getCookie('locale').should('have.property', 'value', lang.code) }) Then('I see a button with the label {string}', label => { cy.contains('button', label) }) When(`I click on {string}`, linkOrButton => { cy.contains(linkOrButton).click() }) When(`I click on the menu item {string}`, linkOrButton => { cy.contains('.ds-menu-item', linkOrButton).click() }) When('I press {string}', label => { cy.contains(label).click() }) Given('we have the following posts in our database:', table => { table.hashes().forEach(({ Author, ...postAttributes }) => { const userAttributes = { name: Author, email: `${Author}@example.org`, password: '1234' } postAttributes.deleted = Boolean(postAttributes.deleted) const disabled = Boolean(postAttributes.disabled) cy.factory() .create('User', userAttributes) .authenticateAs(userAttributes) .create('Post', postAttributes) if (disabled) { const moderatorParams = { email: 'moderator@example.org', role: 'moderator', password: '1234' } cy.factory() .create('User', moderatorParams) .authenticateAs(moderatorParams) .mutate('mutation($id: ID!) { disable(id: $id) }', postAttributes) } }) }) Then('I see a success message:', message => { cy.contains(message) }) When('I click on the avatar menu in the top right corner', () => { cy.get('.avatar-menu').click() }) When( 'I click on the big plus icon in the bottom right corner to create post', () => { cy.get('.post-add-button').click() } ) Given('I previously created a post', () => { cy.factory() .authenticateAs(loginCredentials) .create('Post', lastPost) }) When('I choose {string} as the title of the post', title => { lastPost.title = title.replace('\n', ' ') cy.get('input[name="title"]').type(lastPost.title) }) When('I type in the following text:', text => { lastPost.content = text.replace('\n', ' ') cy.get('.ProseMirror').type(lastPost.content) }) Then('the post shows up on the landing page at position {int}', index => { cy.openPage('landing') const selector = `:nth-child(${index}) > .ds-card > .ds-card-content` cy.get(selector).should('contain', lastPost.title) cy.get(selector).should('contain', lastPost.content) }) Then('I get redirected to {string}', route => { cy.location('pathname').should('contain', route.replace('...', '')) }) Then('the post was saved successfully', () => { cy.get('.ds-card-content > .ds-heading').should('contain', lastPost.title) cy.get('.content').should('contain', lastPost.content) }) Then(/^I should see only ([0-9]+) posts? on the landing page/, postCount => { cy.get('.post-card').should('have.length', postCount) }) Then('the first post on the landing page has the title:', title => { cy.get('.post-card:first').should('contain', title) }) Then( 'the page {string} returns a 404 error with a message:', (route, message) => { // TODO: how can we check HTTP codes with cypress? cy.visit(route, { failOnStatusCode: false }) cy.get('.error').should('contain', message) } ) Given('my user account has the following login credentials:', table => { loginCredentials = table.hashes()[0] cy.debug() cy.factory().create('User', loginCredentials) }) When('I fill the password form with:', table => { table = table.rowsHash() cy.get('input[id=oldPassword]') .type(table['Your old password']) .get('input[id=newPassword]') .type(table['Your new passsword']) .get('input[id=confirmPassword]') .type(table['Confirm new password']) }) When('submit the form', () => { cy.get('form').submit() }) Then('I cannot login anymore with password {string}', password => { cy.reload() const { email } = loginCredentials cy.visit(`/login`) cy.get('input[name=email]') .trigger('focus') .type(email) cy.get('input[name=password]') .trigger('focus') .type(password) cy.get('button[name=submit]') .as('submitButton') .click() cy.get('.iziToast-wrapper').should('contain', 'Incorrect email address or password.') }) Then('I can login successfully with password {string}', password => { cy.reload() cy.login({ ...loginCredentials, ...{password} }) cy.get('.iziToast-wrapper').should('contain', "You are logged in!") }) When('I log in with the following credentials:', table => { const { email, password } = table.hashes()[0] cy.login({ email, password }) }) When('open the notification menu and click on the first item', () => { cy.get('.notifications-menu').click() cy.get('.notification-mention-post').first().click() }) Then('see {int} unread notifications in the top menu', count => { cy.get('.notifications-menu').should('contain', count) }) Then('I get to the post page of {string}', path => { path = path.replace('...', '') cy.url().should('contain', '/post/') cy.url().should('contain', path) }) When('I start to write a new post with the title {string} beginning with:', (title, intro) => { cy.get('.post-add-button').click() cy.get('input[name="title"]').type(title) cy.get('.ProseMirror').type(intro) }) When('mention {string} in the text', (mention) => { cy.get('.ProseMirror').type(' @') cy.get('.suggestion-list__item').contains(mention).click() cy.debug() }) Then('the notification gets marked as read', () => { cy.get('.notification').first().should('have.class', 'read') }) Then('there are no notifications in the top menu', () => { cy.get('.notifications-menu').should('contain', '0') })