diff --git a/e2e-tests/.eslintignore b/e2e-tests/.eslintignore index 3c3629e64..48192fb7f 100644 --- a/e2e-tests/.eslintignore +++ b/e2e-tests/.eslintignore @@ -1 +1,2 @@ node_modules +playwright diff --git a/e2e-tests/.eslintrc.js b/e2e-tests/.eslintrc.js index 98f13d176..49c60ba99 100644 --- a/e2e-tests/.eslintrc.js +++ b/e2e-tests/.eslintrc.js @@ -2,13 +2,13 @@ module.exports = { root: true, env: { node: true, - cypress: true, }, parser: '@typescript-eslint/parser', plugins: ['cypress', 'prettier', '@typescript-eslint' /*, 'jest' */], extends: [ 'standard', 'eslint:recommended', + 'plugin:cypress/recommended', 'plugin:prettier/recommended', 'plugin:@typescript-eslint/recommended', ], diff --git a/e2e-tests/cypress.config.ts b/e2e-tests/cypress.config.ts index e26259626..1424ab99f 100644 --- a/e2e-tests/cypress.config.ts +++ b/e2e-tests/cypress.config.ts @@ -6,7 +6,7 @@ let emailLink: string async function setupNodeEvents( on: Cypress.PluginEvents, - config: Cypress.PluginConfigOptions + config: Cypress.PluginConfigOptions, ): Promise { await addCucumberPreprocessorPlugin(on, config) @@ -14,7 +14,7 @@ async function setupNodeEvents( 'file:preprocessor', browserify(config, { typescript: require.resolve('typescript'), - }) + }), ) on('task', { diff --git a/e2e-tests/cypress/e2e/models/OverviewPage.ts b/e2e-tests/cypress/e2e/models/OverviewPage.ts index e8f881eba..1ee9fa47b 100644 --- a/e2e-tests/cypress/e2e/models/OverviewPage.ts +++ b/e2e-tests/cypress/e2e/models/OverviewPage.ts @@ -3,7 +3,6 @@ export class OverviewPage { navbarName = '[data-test="navbar-item-username"]' rightLastTransactionsList = '.rightside-last-transactions' - goto() { cy.visit('/overview') diff --git a/e2e-tests/cypress/e2e/models/ResetPasswordPage.ts b/e2e-tests/cypress/e2e/models/ResetPasswordPage.ts index 153b41a82..7131be3c8 100644 --- a/e2e-tests/cypress/e2e/models/ResetPasswordPage.ts +++ b/e2e-tests/cypress/e2e/models/ResetPasswordPage.ts @@ -14,9 +14,7 @@ export class ResetPasswordPage { } repeatNewPassword(password: string) { - cy.get(this.newPasswordRepeatInput) - .find('input[type=password]') - .type(password) + cy.get(this.newPasswordRepeatInput).find('input[type=password]').type(password) return this } diff --git a/e2e-tests/cypress/e2e/models/SendPage.ts b/e2e-tests/cypress/e2e/models/SendPage.ts index 07b531c4a..25bf8c02b 100644 --- a/e2e-tests/cypress/e2e/models/SendPage.ts +++ b/e2e-tests/cypress/e2e/models/SendPage.ts @@ -5,30 +5,21 @@ export class SendPage { submitBtn = '.btn-gradido' enterReceiverEmail(email: string) { - cy.get('[data-test="input-identifier"]').find('input') - .clear() - .type(email) + cy.get('[data-test="input-identifier"]').find('input').clear().type(email) return this } enterAmount(amount: string) { - cy.get('[data-test="input-amount"]') - .find('input') - .clear() - .type(amount) + cy.get('[data-test="input-amount"]').find('input').clear().type(amount) return this } enterMemoText(text: string) { - cy.get('[data-test="input-textarea"]') - .find('textarea') - .clear() - .type(text) + cy.get('[data-test="input-textarea"]').find('textarea').clear().type(text) return this } submit() { - cy.get(this.submitBtn) - .click() + cy.get(this.submitBtn).click() } } diff --git a/e2e-tests/cypress/e2e/models/UserEMailSite.ts b/e2e-tests/cypress/e2e/models/UserEMailSite.ts index f46f5677b..af5deefeb 100644 --- a/e2e-tests/cypress/e2e/models/UserEMailSite.ts +++ b/e2e-tests/cypress/e2e/models/UserEMailSite.ts @@ -8,10 +8,7 @@ export class UserEMailSite { emailSubject = '.subject' openRecentPasswordResetEMail() { - cy.get(this.emailList) - .find('email-item') - .filter(':contains(asswor)') - .click() + cy.get(this.emailList).find('email-item').filter(':contains(asswor)').click() expect(cy.get(this.emailSubject)).to('contain', 'asswor') } } diff --git a/e2e-tests/cypress/support/index.ts b/e2e-tests/cypress/support/index.ts index f8d1abacf..6224f0f0e 100644 --- a/e2e-tests/cypress/support/index.ts +++ b/e2e-tests/cypress/support/index.ts @@ -7,6 +7,7 @@ import './e2e' declare global { namespace Cypress { + // eslint-disable-next-line @typescript-eslint/no-unused-vars interface Chainable { login(email: string, password: string): Chainable } diff --git a/e2e-tests/cypress/support/step_definitions/common_steps.ts b/e2e-tests/cypress/support/step_definitions/common_steps.ts index c5d3004ac..c2128a308 100644 --- a/e2e-tests/cypress/support/step_definitions/common_steps.ts +++ b/e2e-tests/cypress/support/step_definitions/common_steps.ts @@ -1,4 +1,4 @@ -import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor' +import { Given, Then } from '@badeball/cypress-cucumber-preprocessor' import { OverviewPage } from '../../e2e/models/OverviewPage' import { SideNavMenu } from '../../e2e/models/SideNavMenu' import { Toasts } from '../../e2e/models/Toasts' @@ -9,12 +9,9 @@ Given('the user navigates to page {string}', (page: string) => { // login related -Given( - 'the user is logged in as {string} {string}', - (email: string, password: string) => { - cy.login(email, password) - } -) +Given('the user is logged in as {string} {string}', (email: string, password: string) => { + cy.login(email, password) +}) Then('the user is logged in with username {string}', (username: string) => { const overviewPage = new OverviewPage() diff --git a/e2e-tests/cypress/support/step_definitions/email_steps.ts b/e2e-tests/cypress/support/step_definitions/email_steps.ts index 31141e574..a2e6dbcb8 100644 --- a/e2e-tests/cypress/support/step_definitions/email_steps.ts +++ b/e2e-tests/cypress/support/step_definitions/email_steps.ts @@ -1,4 +1,4 @@ -import { And, Then, When } from '@badeball/cypress-cucumber-preprocessor' +import { Then, When } from '@badeball/cypress-cucumber-preprocessor' import { OverviewPage } from '../../e2e/models/OverviewPage' import { ResetPasswordPage } from '../../e2e/models/ResetPasswordPage' import { UserEMailSite } from '../../e2e/models/UserEMailSite' @@ -23,13 +23,15 @@ Then('the user receives an e-mail containing the {string} link', (linkName: stri linkPattern = /\/overview/ break default: - throw new Error(`Error in "Then the user receives an e-mail containing the {string} link" step: incorrect linkname string "${linkName}"`) + throw new Error( + `Error in "Then the user receives an e-mail containing the {string} link" step: incorrect linkname string "${linkName}"`, + ) } - + cy.origin( Cypress.env('mailserverURL'), { args: { emailSubject, linkPattern, userEMailSite } }, - ({ emailSubject, linkPattern, userEMailSite }) => { + ({ emailSubject, linkPattern, userEMailSite }) => { cy.visit('/') // navigate to user's e-mail site (on fake mail server) cy.get(userEMailSite.emailInbox).should('be.visible') @@ -39,11 +41,9 @@ Then('the user receives an e-mail containing the {string} link', (linkName: stri .first() .click() - cy.get(userEMailSite.emailMeta) - .find(userEMailSite.emailSubject) - .contains(emailSubject) + cy.get(userEMailSite.emailMeta).find(userEMailSite.emailSubject).contains(emailSubject) - cy.get('.email-content', { timeout: 2000}) + cy.get('.email-content', { timeout: 2000 }) .find('.plain-text') .contains(linkPattern) .invoke('text') @@ -51,41 +51,42 @@ Then('the user receives an e-mail containing the {string} link', (linkName: stri const emailLink = text.match(linkPattern)[0] cy.task('setEmailLink', emailLink) }) - } + }, ) }) -And('the user receives the transaction e-mail about {string} GDD from {string}', (amount: string, senderName:string) => { - cy.origin( - Cypress.env('mailserverURL'), - { args: { amount, senderName, userEMailSite } }, - ({ amount, senderName, userEMailSite }) => { - const subject = `${senderName} hat dir ${amount} Gradido gesendet` - const linkPattern = /\/transactions/ - cy.visit('/') - cy.get(userEMailSite.emailInbox).should('be.visible') +When( + 'the user receives the transaction e-mail about {string} GDD from {string}', + (amount: string, senderName: string) => { + cy.origin( + Cypress.env('mailserverURL'), + { args: { amount, senderName, userEMailSite } }, + ({ amount, senderName, userEMailSite }) => { + const subject = `${senderName} hat dir ${amount} Gradido gesendet` + const linkPattern = /\/transactions/ + cy.visit('/') + cy.get(userEMailSite.emailInbox).should('be.visible') - cy.get(userEMailSite.emailList) - .find('.email-item') - .filter(`:contains(${subject})`) - .first() - .click() - - cy.get(userEMailSite.emailMeta) - .find(userEMailSite.emailSubject) - .contains(subject) - - cy.get('.email-content', { timeout: 2000}) - .find('.plain-text') - .contains(linkPattern) - .invoke('text') - .then((text) => { - const emailLink = text.match(linkPattern)[0] - cy.task('setEmailLink', emailLink) - }) - } - ) -}) + cy.get(userEMailSite.emailList) + .find('.email-item') + .filter(`:contains(${subject})`) + .first() + .click() + + cy.get(userEMailSite.emailMeta).find(userEMailSite.emailSubject).contains(subject) + + cy.get('.email-content', { timeout: 2000 }) + .find('.plain-text') + .contains(linkPattern) + .invoke('text') + .then((text) => { + const emailLink = text.match(linkPattern)[0] + cy.task('setEmailLink', emailLink) + }) + }, + ) + }, +) When('the user opens the {string} link in the browser', (linkName: string) => { const resetPasswordPage = new ResetPasswordPage() @@ -101,10 +102,13 @@ When('the user opens the {string} link in the browser', (linkName: string) => { cy.get(resetPasswordPage.newPasswordInput).should('be.visible') break case 'transaction': + // eslint-disable-next-line no-case-declarations const overviewPage = new OverviewPage() cy.get(overviewPage.rightLastTransactionsList).should('be.visible') break default: - throw new Error(`Error in "Then the user receives an e-mail containing the {string} link" step: incorrect link name string "${linkName}"`) + throw new Error( + `Error in "Then the user receives an e-mail containing the {string} link" step: incorrect link name string "${linkName}"`, + ) } }) diff --git a/e2e-tests/cypress/support/step_definitions/send_coin_steps.ts b/e2e-tests/cypress/support/step_definitions/send_coin_steps.ts index ba9eab4b4..d26733221 100644 --- a/e2e-tests/cypress/support/step_definitions/send_coin_steps.ts +++ b/e2e-tests/cypress/support/step_definitions/send_coin_steps.ts @@ -9,7 +9,7 @@ When( sendPage.enterReceiverEmail(email) sendPage.enterAmount(amount) sendPage.enterMemoText(memoText) - } + }, ) And('the user submits the send form', () => { @@ -17,17 +17,25 @@ And('the user submits the send form', () => { cy.get(sendPage.confirmationBox).should('be.visible') }) +Then( + 'the transaction details are presented for confirmation {string} {string} {string} {string} {string}', + ( + receiverEmail: string, + sendAmount: string, + memoText: string, + senderBalance: string, + newSenderBalance: string, + ) => { + cy.get('.transaction-confirm-send').contains(receiverEmail) + cy.get('.transaction-confirm-send').contains(`+ ${sendAmount} GDD`) + cy.get('.transaction-confirm-send').contains(memoText) + cy.get('.transaction-confirm-send').contains(`+ ${senderBalance} GDD`) + cy.get('.transaction-confirm-send').contains(`− ${sendAmount} GDD`) + cy.get('.transaction-confirm-send').contains(`+ ${newSenderBalance} GDD`) + }, +) -Then('the transaction details are presented for confirmation {string} {string} {string} {string} {string}', (receiverEmail: string, sendAmount: string, memoText: string, senderBalance: string, newSenderBalance: string) => { - cy.get('.transaction-confirm-send').contains(receiverEmail) - cy.get('.transaction-confirm-send').contains(`+ ${sendAmount} GDD`) - cy.get('.transaction-confirm-send').contains(memoText) - cy.get('.transaction-confirm-send').contains(`+ ${senderBalance} GDD`) - cy.get('.transaction-confirm-send').contains(`− ${sendAmount} GDD`) - cy.get('.transaction-confirm-send').contains(`+ ${newSenderBalance} GDD`) -}) - -When('the user submits the transaction by confirming', (receiverName: string, amount) => { +When('the user submits the transaction by confirming', () => { cy.intercept({ method: 'POST', url: '/graphql', @@ -38,11 +46,14 @@ When('the user submits the transaction by confirming', (receiverName: string, am cy.wait('@sendCoins').then((interception) => { cy.wrap(interception.response?.statusCode).should('eq', 200) - cy.wrap(interception.request.body) - .should('have.property', 'query', `mutation ($identifier: String!, $amount: Decimal!, $memo: String!) { + cy.wrap(interception.request.body).should( + 'have.property', + 'query', + `mutation ($identifier: String!, $amount: Decimal!, $memo: String!) { sendCoins(identifier: $identifier, amount: $amount, memo: $memo) } -` ) +`, + ) cy.wrap(interception.response?.body) .should('have.nested.property', 'data.sendCoins') .and('equal', true) @@ -50,21 +61,30 @@ When('the user submits the transaction by confirming', (receiverName: string, am cy.get('[data-test="send-transaction-success-text"]').should('be.visible') }) -Then('the {string} and {string} are displayed on the {string} page', (name: string, amount: string, page: string) => { - switch (page) { - case 'overview': - cy.get('.align-items-center').contains(`${name}`) - cy.get('.align-items-center').contains(`${amount} GDD`) - break - case 'send': - cy.get('.align-items-center').contains(`${name}`) - cy.get('.align-items-center').contains(`${amount} GDD`) - break - case 'transactions': - cy.get('div.mt-3 > div > div.test-list-group-item').eq(0).contains('div.gdd-transaction-list-item-name', `${name}`) - cy.get('div.mt-3 > div > div.test-list-group-item').eq(0).contains('[data-test="transaction-amount"]', `${amount} GDD`) - break - default: - throw new Error(`Error in "Then the {string} and {string} are displayed on the {string}} page" step: incorrect page name string "${page}"`) - } -}) \ No newline at end of file +Then( + 'the {string} and {string} are displayed on the {string} page', + (name: string, amount: string, page: string) => { + switch (page) { + case 'overview': + cy.get('.align-items-center').contains(`${name}`) + cy.get('.align-items-center').contains(`${amount} GDD`) + break + case 'send': + cy.get('.align-items-center').contains(`${name}`) + cy.get('.align-items-center').contains(`${amount} GDD`) + break + case 'transactions': + cy.get('div.mt-3 > div > div.test-list-group-item') + .eq(0) + .contains('div.gdd-transaction-list-item-name', `${name}`) + cy.get('div.mt-3 > div > div.test-list-group-item') + .eq(0) + .contains('[data-test="transaction-amount"]', `${amount} GDD`) + break + default: + throw new Error( + `Error in "Then the {string} and {string} are displayed on the {string}} page" step: incorrect page name string "${page}"`, + ) + } + }, +) diff --git a/e2e-tests/cypress/support/step_definitions/user_authentication_steps.ts b/e2e-tests/cypress/support/step_definitions/user_authentication_steps.ts index 5b25f5391..f96499409 100644 --- a/e2e-tests/cypress/support/step_definitions/user_authentication_steps.ts +++ b/e2e-tests/cypress/support/step_definitions/user_authentication_steps.ts @@ -13,26 +13,21 @@ When('the user submits no credentials', () => { loginPage.submitLogin() }) -When( - 'the user submits the credentials {string} {string}', - (email: string, password: string) => { - cy.intercept('POST', '/graphql', (req) => { - if ( - req.body.hasOwnProperty('query') && - req.body.query.includes('mutation') - ) { - req.alias = 'login' - } - }) +When('the user submits the credentials {string} {string}', (email: string, password: string) => { + cy.intercept('POST', '/graphql', (req) => { + // eslint-disable-next-line no-prototype-builtins + if (req.body.hasOwnProperty('query') && req.body.query.includes('mutation')) { + req.alias = 'login' + } + }) - loginPage.enterEmail(email) - loginPage.enterPassword(password) - loginPage.submitLogin() - cy.wait('@login').then((interception) => { - expect(interception.response.statusCode).equals(200) - }) - } -) + loginPage.enterEmail(email) + loginPage.enterPassword(password) + loginPage.submitLogin() + cy.wait('@login').then((interception) => { + expect(interception.response.statusCode).equals(200) + }) +}) // password reset related diff --git a/e2e-tests/cypress/support/step_definitions/user_profile_change_password_steps.ts b/e2e-tests/cypress/support/step_definitions/user_profile_change_password_steps.ts index 1dcbe69ef..c08236cde 100644 --- a/e2e-tests/cypress/support/step_definitions/user_profile_change_password_steps.ts +++ b/e2e-tests/cypress/support/step_definitions/user_profile_change_password_steps.ts @@ -1,4 +1,4 @@ -import { And, When } from '@badeball/cypress-cucumber-preprocessor' +import { And, DataTable, When } from '@badeball/cypress-cucumber-preprocessor' import { ProfilePage } from '../../e2e/models/ProfilePage' import { Toasts } from '../../e2e/models/Toasts' @@ -10,8 +10,8 @@ And('the user opens the change password menu', () => { cy.get(profilePage.submitNewPasswordBtn).should('be.disabled') }) -When('the user fills the password form with:', (table) => { - let hashedTableRows = table.rowsHash() +When('the user fills the password form with:', (table: DataTable) => { + const hashedTableRows = table.rowsHash() profilePage.enterOldPassword(hashedTableRows['Old password']) profilePage.enterNewPassword(hashedTableRows['New password']) profilePage.enterRepeatPassword(hashedTableRows['Repeat new password']) @@ -22,7 +22,7 @@ And('the user submits the password form', () => { profilePage.submitPasswordForm() }) -When('the user is presented a {string} message', (type: string) => { +When('the user is presented a {string} message', () => { const toast = new Toasts() cy.get(toast.toastSlot).within(() => { cy.get(toast.toastTypeSuccess) diff --git a/e2e-tests/cypress/support/step_definitions/user_registration_steps.ts b/e2e-tests/cypress/support/step_definitions/user_registration_steps.ts index e90956b6e..df4972077 100644 --- a/e2e-tests/cypress/support/step_definitions/user_registration_steps.ts +++ b/e2e-tests/cypress/support/step_definitions/user_registration_steps.ts @@ -10,7 +10,7 @@ When( registrationPage.enterFirstname(firstname) registrationPage.enterLastname(lastname) registrationPage.enterEmail(email) - } + }, ) And('the user agrees to the privacy policy', () => {