From 19920bd2898f27dd4d1a7712daeefe2599191b68 Mon Sep 17 00:00:00 2001 From: KevinLu Date: Fri, 29 Jul 2022 19:03:13 +1000 Subject: [PATCH 1/9] Add cypress signup test --- cypress/e2e/auth/authentication.cy.js | 11 +++++++++ cypress/e2e/auth/signup.cy.js | 24 +++++++++++++++++++ src/modules/auth/SignUpForm/SignUpForm.tsx | 7 +++++- .../OnboardingForm/OnboardingForm.tsx | 1 + 4 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 cypress/e2e/auth/authentication.cy.js create mode 100644 cypress/e2e/auth/signup.cy.js diff --git a/cypress/e2e/auth/authentication.cy.js b/cypress/e2e/auth/authentication.cy.js new file mode 100644 index 00000000..c4532a86 --- /dev/null +++ b/cypress/e2e/auth/authentication.cy.js @@ -0,0 +1,11 @@ +describe('Authentication test', () => { + beforeEach(() => { + cy.visit('https://uat.a-comosus.link/admin'); + }); + it('Should load dashboard correctly', () => { + cy.log('Checking for sidebar'); + cy.contains('Links').should('exist'); + cy.contains('Appearance').should('exist'); + cy.contains('Logout').should('exist'); + }); +}); diff --git a/cypress/e2e/auth/signup.cy.js b/cypress/e2e/auth/signup.cy.js new file mode 100644 index 00000000..98b24e81 --- /dev/null +++ b/cypress/e2e/auth/signup.cy.js @@ -0,0 +1,24 @@ +describe('Signup test', () => { + beforeEach(() => { + cy.visit('http://localhost:3000/sign-up'); + }); + + it.only('Login should display error message', () => { + cy.get('#username').type('KevinLu'); + cy.get('#email').type('turnkevin@gmail.com'); + cy.get('#password').type('admin123'); + cy.get('.chakra-checkbox__control').click(); + cy.get('[data-testid="register"]').click(); + cy.get('#displayName').type('KevinLu'); + cy.get('[data-testid="continue-btn"]').click(); + cy.get(':nth-child(2) > .css-13qzv8t').click(); + cy.wait(500); + cy.get('#g-recaptcha *> iframe').then(($iframe) => { + const $body = $iframe.contents().find('body'); + cy.wrap($body) + .find('.recaptcha-checkbox-border') + .should('be.visible') + .click(); + }); + }); +}); diff --git a/src/modules/auth/SignUpForm/SignUpForm.tsx b/src/modules/auth/SignUpForm/SignUpForm.tsx index 7eb9a3ee..5300e357 100644 --- a/src/modules/auth/SignUpForm/SignUpForm.tsx +++ b/src/modules/auth/SignUpForm/SignUpForm.tsx @@ -103,7 +103,12 @@ export default function SignUpForm({ testId="sign-up.error" error={t('sign-up.error.user-exist')} /> - diff --git a/src/modules/onboarding/OnboardingForm/OnboardingForm.tsx b/src/modules/onboarding/OnboardingForm/OnboardingForm.tsx index bc5f21b0..8a75a63c 100644 --- a/src/modules/onboarding/OnboardingForm/OnboardingForm.tsx +++ b/src/modules/onboarding/OnboardingForm/OnboardingForm.tsx @@ -68,6 +68,7 @@ export default function OnboardingForm({ _.isNil(getFieldState('displayName').error) && toggleIsDisplayNameFilled(); }} + data-testid="continue-btn" > {t('continue')} From d4f7a9de4b385d5e52b9f4514df5af1770bf7f36 Mon Sep 17 00:00:00 2001 From: KevinLu Date: Sun, 31 Jul 2022 20:38:15 +1000 Subject: [PATCH 2/9] Refactor checkbox test-id and test username --- cypress/e2e/auth/signup.cy.js | 45 +++++++++++++------------- src/modules/auth/SignUpForm/Policy.tsx | 2 +- 2 files changed, 24 insertions(+), 23 deletions(-) diff --git a/cypress/e2e/auth/signup.cy.js b/cypress/e2e/auth/signup.cy.js index 98b24e81..b5e4bb01 100644 --- a/cypress/e2e/auth/signup.cy.js +++ b/cypress/e2e/auth/signup.cy.js @@ -1,24 +1,25 @@ -describe('Signup test', () => { - beforeEach(() => { - cy.visit('http://localhost:3000/sign-up'); - }); +describe( + 'Signup test', + { + env: { + chromeWebSecurity: false, + }, + }, + () => { + beforeEach(() => { + cy.visit('http://localhost:3000/sign-up'); + }); - it.only('Login should display error message', () => { - cy.get('#username').type('KevinLu'); - cy.get('#email').type('turnkevin@gmail.com'); - cy.get('#password').type('admin123'); - cy.get('.chakra-checkbox__control').click(); - cy.get('[data-testid="register"]').click(); - cy.get('#displayName').type('KevinLu'); - cy.get('[data-testid="continue-btn"]').click(); - cy.get(':nth-child(2) > .css-13qzv8t').click(); - cy.wait(500); - cy.get('#g-recaptcha *> iframe').then(($iframe) => { - const $body = $iframe.contents().find('body'); - cy.wrap($body) - .find('.recaptcha-checkbox-border') - .should('be.visible') - .click(); + it.only('Login should display error message', () => { + let randomStr = (Math.random() + 1).toString(36).substring(7); + cy.get('#username').type(`KevinLu${randomStr}`); + cy.get('#email').type(`turnkevin${randomStr}@gmail.com`); + cy.get('#password').type('admin123'); + cy.get('[data-testid="checkbox"]').click(); + cy.get('[data-testid="register"]').click(); + cy.get('#displayName').type('KevinLu'); + cy.get('[data-testid="continue-btn"]').click(); + cy.get(':nth-child(2) > .css-13qzv8t').click(); }); - }); -}); + }, +); diff --git a/src/modules/auth/SignUpForm/Policy.tsx b/src/modules/auth/SignUpForm/Policy.tsx index d7e8c28a..d14d9af5 100644 --- a/src/modules/auth/SignUpForm/Policy.tsx +++ b/src/modules/auth/SignUpForm/Policy.tsx @@ -17,7 +17,7 @@ export default function Policy({ name, control }: PolicyProps) { render={({ field, fieldState: { invalid, error } }) => ( - + {t('sign-up.policy.description')} {error && ( From 2faab09abf0be020cdeea9e6a89136b0bdb52df5 Mon Sep 17 00:00:00 2001 From: KevinLu Date: Sun, 31 Jul 2022 23:41:53 +1000 Subject: [PATCH 3/9] Add environment variables --- .env | 3 +-- cypress.config.ts | 1 + src/modules/onboarding/OnboardingForm/OnboardingForm.tsx | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.env b/.env index f61b9ba8..746e65e0 100644 --- a/.env +++ b/.env @@ -1,4 +1,3 @@ NEXT_PUBLIC_CLIENT_BASE_URL=https://uat.a-comosus.link NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://api.uat.a-comosus.link/graphql/ -NEXT_PUBLIC_RECAPTCHA_SITE_KEY=6LcYqNcgAAAAAEVUbCZb4cvf919b48U9Ux-Mz_cv - +NEXT_PUBLIC_RECAPTCHA_SITE_KEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI diff --git a/cypress.config.ts b/cypress.config.ts index 37d50055..cb6dc01c 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -2,6 +2,7 @@ import { defineConfig } from 'cypress'; export default defineConfig({ projectId: '21s6cy', + chromeWebSecurity: false, e2e: { setupNodeEvents(on, config) { // implement node event listeners here diff --git a/src/modules/onboarding/OnboardingForm/OnboardingForm.tsx b/src/modules/onboarding/OnboardingForm/OnboardingForm.tsx index 8a75a63c..5b5bb929 100644 --- a/src/modules/onboarding/OnboardingForm/OnboardingForm.tsx +++ b/src/modules/onboarding/OnboardingForm/OnboardingForm.tsx @@ -93,6 +93,7 @@ export default function OnboardingForm({ isDisabled={!isValid} isLoading={isOnboarding} type="submit" + data-testid="recaptcha-continue-btn" > {t('continue')} From 4f1a286d42c14f40f5d392d9ee5520a1a4bc6129 Mon Sep 17 00:00:00 2001 From: KevinLu Date: Sun, 31 Jul 2022 23:45:12 +1000 Subject: [PATCH 4/9] Combine login and signup file --- cypress/e2e/auth/authentication.cy.js | 11 ----------- cypress/e2e/auth/login.cy.js | 28 --------------------------- cypress/e2e/auth/signup.cy.js | 25 ------------------------ 3 files changed, 64 deletions(-) delete mode 100644 cypress/e2e/auth/authentication.cy.js delete mode 100644 cypress/e2e/auth/login.cy.js delete mode 100644 cypress/e2e/auth/signup.cy.js diff --git a/cypress/e2e/auth/authentication.cy.js b/cypress/e2e/auth/authentication.cy.js deleted file mode 100644 index c4532a86..00000000 --- a/cypress/e2e/auth/authentication.cy.js +++ /dev/null @@ -1,11 +0,0 @@ -describe('Authentication test', () => { - beforeEach(() => { - cy.visit('https://uat.a-comosus.link/admin'); - }); - it('Should load dashboard correctly', () => { - cy.log('Checking for sidebar'); - cy.contains('Links').should('exist'); - cy.contains('Appearance').should('exist'); - cy.contains('Logout').should('exist'); - }); -}); diff --git a/cypress/e2e/auth/login.cy.js b/cypress/e2e/auth/login.cy.js deleted file mode 100644 index 99599883..00000000 --- a/cypress/e2e/auth/login.cy.js +++ /dev/null @@ -1,28 +0,0 @@ -/// - -describe('Login Feature', function () { - beforeEach(() => { - cy.visit('http://localhost:3000/login'); - cy.fixture('auth').then((data) => { - this.authData = data; - }); - }); - - it('displays two input field by default', () => { - cy.get('form').within(() => { - cy.get('input').should('have.length', 2); - }); - }); - - it('navigate user to admin panel when logged in', () => { - const { username, password } = this.authData; - cy.login(username.valid, password.valid); - cy.url().should('contains', '/admin'); - }); - - it('display error message when entered incorrect credential', () => { - const { username, password } = this.authData; - cy.login(username.invalid, password.invalid); - cy.get('[data-test-id="login.error"]').should('be.visible'); - }); -}); diff --git a/cypress/e2e/auth/signup.cy.js b/cypress/e2e/auth/signup.cy.js deleted file mode 100644 index b5e4bb01..00000000 --- a/cypress/e2e/auth/signup.cy.js +++ /dev/null @@ -1,25 +0,0 @@ -describe( - 'Signup test', - { - env: { - chromeWebSecurity: false, - }, - }, - () => { - beforeEach(() => { - cy.visit('http://localhost:3000/sign-up'); - }); - - it.only('Login should display error message', () => { - let randomStr = (Math.random() + 1).toString(36).substring(7); - cy.get('#username').type(`KevinLu${randomStr}`); - cy.get('#email').type(`turnkevin${randomStr}@gmail.com`); - cy.get('#password').type('admin123'); - cy.get('[data-testid="checkbox"]').click(); - cy.get('[data-testid="register"]').click(); - cy.get('#displayName').type('KevinLu'); - cy.get('[data-testid="continue-btn"]').click(); - cy.get(':nth-child(2) > .css-13qzv8t').click(); - }); - }, -); From 59f3926145c1b18d25b025365c3398c97e780875 Mon Sep 17 00:00:00 2001 From: KevinLu Date: Sun, 31 Jul 2022 23:45:42 +1000 Subject: [PATCH 5/9] Refactor signup test --- cypress/e2e/auth/auth.cy.js | 41 +++++++++++++++++++ cypress/fixtures/auth.json | 6 ++- cypress/support/commands.ts | 25 +++++++++++ .../OnboardedMessage/OnboardedMessage.tsx | 4 +- 4 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 cypress/e2e/auth/auth.cy.js diff --git a/cypress/e2e/auth/auth.cy.js b/cypress/e2e/auth/auth.cy.js new file mode 100644 index 00000000..569b182a --- /dev/null +++ b/cypress/e2e/auth/auth.cy.js @@ -0,0 +1,41 @@ +/// + +describe('Auth Feature', function () { + beforeEach(() => { + cy.visit('http://localhost:3000/login'); + cy.fixture('auth').then((data) => { + this.authData = data; + }); + }); + + it('displays two input field by default', () => { + cy.get('form').within(() => { + cy.get('input').should('have.length', 2); + }); + }); + + it('navigate user to admin panel when logged in', () => { + const { username, password } = this.authData; + cy.login(username.valid, password.valid); + cy.url().should('contains', '/admin'); + }); + + it('display error message when entered incorrect credential', () => { + const { username, password } = this.authData; + cy.login(username.invalid, password.invalid); + cy.get('[data-test-id="login.error"]').should('be.visible'); + }); + + it('Signup Feature', () => { + const { username, email, password } = this.authData; + cy.signup(username.valid, email.valid, password.valid); + cy.get('[data-testid="checkbox"]').click(); + cy.get('[data-testid="register"]').click(); + cy.get('#displayName').type('KevinLu'); + cy.get('[data-testid="continue-btn"]').click(); + cy.get(':nth-child(2) > .css-13qzv8t').click(); + cy.recaptcha(); + cy.get('[data-testid="recaptcha-continue-btn"]').click(); + cy.get('[data-testid="start-building-btn"]').click(); + }); +}); diff --git a/cypress/fixtures/auth.json b/cypress/fixtures/auth.json index 4167581f..05c37d74 100644 --- a/cypress/fixtures/auth.json +++ b/cypress/fixtures/auth.json @@ -1,6 +1,10 @@ { "username": { - "valid": "norris-wu", + "valid": "tester", + "invalid": "invalid" + }, + "email": { + "valid": "tester@gmail.com", "invalid": "invalid" }, "password": { diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 51a4e03b..4dfb4362 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -19,6 +19,31 @@ Cypress.Commands.add('login', (username: string, password: string) => { }); }); +Cypress.Commands.add( + 'signup', + (username: string, email: string, password: string) => { + cy.visit('http://localhost:3000/sign-up'); + cy.get('form').within(() => { + const randomStr = (Math.random() + 1).toString(36).substring(7); + cy.get('#username').type(`KevinLu${randomStr}`); + cy.get('#email').type(`turnkevin${randomStr}@gmail.com`); + cy.get('#password').type('admin123'); + }); + }, +); + +Cypress.Commands.add('recaptcha', () => { + cy.get('iframe') + .first() + .its('0.contentDocument.body') + .should('not.be.undefined') + .and('not.be.empty') + .then(cy.wrap) + .find('#recaptcha-anchor') + .should('be.visible') + .click(); +}); + // -- This is a child command -- // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) // diff --git a/src/modules/onboarding/OnboardedMessage/OnboardedMessage.tsx b/src/modules/onboarding/OnboardedMessage/OnboardedMessage.tsx index c6916cf4..312e38ea 100644 --- a/src/modules/onboarding/OnboardedMessage/OnboardedMessage.tsx +++ b/src/modules/onboarding/OnboardedMessage/OnboardedMessage.tsx @@ -21,7 +21,9 @@ export default function OnboardedMessage({ {t('onboarded.heading.sub', { email })} - + ); } From d9df01b94fc2927ce9e3dc90f0cbfed5004a81a3 Mon Sep 17 00:00:00 2001 From: KevinLu Date: Thu, 4 Aug 2022 20:39:36 +1000 Subject: [PATCH 6/9] Refactor auth.cy file --- cypress/e2e/auth/auth.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/auth/auth.cy.js b/cypress/e2e/auth/auth.cy.js index 569b182a..c8dbe0a5 100644 --- a/cypress/e2e/auth/auth.cy.js +++ b/cypress/e2e/auth/auth.cy.js @@ -2,13 +2,13 @@ describe('Auth Feature', function () { beforeEach(() => { - cy.visit('http://localhost:3000/login'); cy.fixture('auth').then((data) => { this.authData = data; }); }); it('displays two input field by default', () => { + cy.visit('http://localhost:3000/login'); cy.get('form').within(() => { cy.get('input').should('have.length', 2); }); From b29094d6aee84caf1fc47ba085919b73227c510c Mon Sep 17 00:00:00 2001 From: KevinLu Date: Thu, 4 Aug 2022 21:20:23 +1000 Subject: [PATCH 7/9] Delete unused button --- src/modules/onboarding/OnboardedMessage/OnboardedMessage.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/modules/onboarding/OnboardedMessage/OnboardedMessage.tsx b/src/modules/onboarding/OnboardedMessage/OnboardedMessage.tsx index 2f028706..21edbcef 100644 --- a/src/modules/onboarding/OnboardedMessage/OnboardedMessage.tsx +++ b/src/modules/onboarding/OnboardedMessage/OnboardedMessage.tsx @@ -16,9 +16,6 @@ export default function OnboardedMessage({ email }: OnboardedMessageProps) { {t('onboarded.heading.main')} {t('onboarded.heading.sub', { email })} - ); } From d7e9c8f169f9d1a5e7e76f6bec38179ad40d8385 Mon Sep 17 00:00:00 2001 From: KevinLu Date: Thu, 4 Aug 2022 21:32:55 +1000 Subject: [PATCH 8/9] Delete unused button --- cypress/e2e/auth/auth.cy.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/cypress/e2e/auth/auth.cy.js b/cypress/e2e/auth/auth.cy.js index c8dbe0a5..14cceba7 100644 --- a/cypress/e2e/auth/auth.cy.js +++ b/cypress/e2e/auth/auth.cy.js @@ -17,7 +17,6 @@ describe('Auth Feature', function () { it('navigate user to admin panel when logged in', () => { const { username, password } = this.authData; cy.login(username.valid, password.valid); - cy.url().should('contains', '/admin'); }); it('display error message when entered incorrect credential', () => { @@ -36,6 +35,5 @@ describe('Auth Feature', function () { cy.get(':nth-child(2) > .css-13qzv8t').click(); cy.recaptcha(); cy.get('[data-testid="recaptcha-continue-btn"]').click(); - cy.get('[data-testid="start-building-btn"]').click(); }); }); From 425c61b1d94919a62ef98deb56c1ee9c8d4ea2ed Mon Sep 17 00:00:00 2001 From: KevinLu Date: Fri, 5 Aug 2022 20:21:14 +1000 Subject: [PATCH 9/9] Refactor signup test function --- cypress/e2e/auth/auth.cy.js | 2 +- cypress/support/commands.ts | 6 +++--- .../OnboardingForm/OnboardingForm.DisplayName.tsx | 1 + 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/cypress/e2e/auth/auth.cy.js b/cypress/e2e/auth/auth.cy.js index 14cceba7..da8096d9 100644 --- a/cypress/e2e/auth/auth.cy.js +++ b/cypress/e2e/auth/auth.cy.js @@ -30,7 +30,7 @@ describe('Auth Feature', function () { cy.signup(username.valid, email.valid, password.valid); cy.get('[data-testid="checkbox"]').click(); cy.get('[data-testid="register"]').click(); - cy.get('#displayName').type('KevinLu'); + cy.get('[data-testid="display-name"]').type('KevinLu'); cy.get('[data-testid="continue-btn"]').click(); cy.get(':nth-child(2) > .css-13qzv8t').click(); cy.recaptcha(); diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 4dfb4362..4774603a 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -25,9 +25,9 @@ Cypress.Commands.add( cy.visit('http://localhost:3000/sign-up'); cy.get('form').within(() => { const randomStr = (Math.random() + 1).toString(36).substring(7); - cy.get('#username').type(`KevinLu${randomStr}`); - cy.get('#email').type(`turnkevin${randomStr}@gmail.com`); - cy.get('#password').type('admin123'); + cy.get('[id="username"]').type(`KevinLu${randomStr}`); + cy.get('[id="email"]').type(`turnkevin${randomStr}@gmail.com`); + cy.get('[id="password"]').type('admin123'); }); }, ); diff --git a/src/modules/onboarding/OnboardingForm/OnboardingForm.DisplayName.tsx b/src/modules/onboarding/OnboardingForm/OnboardingForm.DisplayName.tsx index fb9ee1b6..b0db1c98 100644 --- a/src/modules/onboarding/OnboardingForm/OnboardingForm.DisplayName.tsx +++ b/src/modules/onboarding/OnboardingForm/OnboardingForm.DisplayName.tsx @@ -20,6 +20,7 @@ export default function DisplayName({ name, control }: DisplayNameProps) { control={control} placeholder={t('display-name.placeholder')} borderRadius={15} + data-testid="display-name" /> );