diff --git a/cypress.json b/cypress.json index 2e7d79d..ec459f3 100644 --- a/cypress.json +++ b/cypress.json @@ -1,5 +1,5 @@ { - "baseUrl": "http://localhost:4173/", + "baseUrl": "http://localhost:3000", "fileServerFolder": "dist", "fixturesFolder": false, "projectId": "etow1b", diff --git a/cypress/e2e/auth.spec.ts b/cypress/e2e/auth.spec.ts new file mode 100644 index 0000000..75c0117 --- /dev/null +++ b/cypress/e2e/auth.spec.ts @@ -0,0 +1,29 @@ +describe('User Sign up and Login', () => { + beforeEach(() => { + cy.viewport('macbook-13') + }) + + it('should redirect unauthenticated user to login page', function () { + cy.visit('/domain') + cy.location('pathname').should('equal', '/login') + }) + + it('should display success message after login', function () { + cy.login('e2eTest', 'e2eTest') + // cy.checkMessage("success", "Login Success"); + }) + it('should redirect to the home page after login', function () { + cy.login('e2eTest', 'e2eTest') + cy.location('pathname').should('equal', '/') + }) + + it('should error for an invalid user', function () { + cy.login('invalidUserName', 'invalidPa$$word') + cy.checkMessage('error', 'Wrong username or password') + }) + + it('should error for an invalid password for existing user', function () { + cy.login('e2eTest', 'invalidPa$$word') + cy.checkMessage('error', 'Wrong username or password') + }) +}) diff --git a/cypress/global.d.ts b/cypress/global.d.ts index cd36c8b..e47fe26 100644 --- a/cypress/global.d.ts +++ b/cypress/global.d.ts @@ -1,4 +1,20 @@ +/// declare module '@cypress/code-coverage/task' { const task: Cypress.PluginConfig export = task } + +declare namespace Cypress { + interface Chainable { + getBySel(dataTestAttribute: string, arguments_?: any): Chainable + + getBySelLike( + dataTestPrefixAttribute: string, + arguments_?: any + ): Chainable + + login(username: string, password: string, loginOptions?: LoginOptions): void + + checkMessage(type: string, content: string): void + } +} diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts new file mode 100644 index 0000000..c06f3e4 --- /dev/null +++ b/cypress/support/commands.ts @@ -0,0 +1,42 @@ +// @ts-check +Cypress.Commands.add('getBySel', (selector, ...arguments_) => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + return cy.get(`[data-test=${selector}]`, ...arguments_) +}) + +Cypress.Commands.add('getBySelLike', (selector, ...arguments_) => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + return cy.get(`[data-test*=${selector}]`, ...arguments_) +}) + +Cypress.Commands.add('login', (username: string, password: string) => { + const loginPath = '/login' + const log = Cypress.log({ + name: 'login', + displayName: 'LOGIN', + message: [`🔐 Authenticating | ${username}`], + autoEnd: false + }) + + cy.visit(loginPath) + + cy.getBySel('login-username').type(username) + cy.getBySel('login-password').type(password) + + cy.getBySel('login-submit').click() + + log.end() +}) + +// todo: add antd message type for the type arg +Cypress.Commands.add('checkMessage', (type: string, content = '') => { + if (content) { + // eslint-disable-next-line cypress/require-data-selectors + cy.get(`.ant-message-${type}`) + .should('be.visible') + .and('have.text', content) + } else { + // eslint-disable-next-line cypress/require-data-selectors + cy.get(`.ant-message-${type}`).should('be.visible') + } +}) diff --git a/cypress/support/index.ts b/cypress/support/index.ts index eaee3e9..8afdc96 100644 --- a/cypress/support/index.ts +++ b/cypress/support/index.ts @@ -1,2 +1,3 @@ import '@cypress/code-coverage/support' import '@testing-library/cypress/add-commands' +import './commands' diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx index 6bc4199..a34f134 100644 --- a/src/pages/Login/index.tsx +++ b/src/pages/Login/index.tsx @@ -211,14 +211,20 @@ const Index: React.FC = () => { } ]} > - + - + @@ -232,6 +238,7 @@ const Index: React.FC = () => { type='primary' htmlType='submit' loading={loading} + data-test='login-submit' block > {t('Login.signIn')}