From 9ac0707befde7671c82e88aad226b609e23cfdac Mon Sep 17 00:00:00 2001 From: giancarlo Date: Thu, 11 Apr 2024 20:11:49 +0800 Subject: [PATCH] Refactor account settings and e2e tests Renamed several components related to account settings and updated corresponding data-test selectors for more clarity. Adjusted e2e tests to reflect these changes and added tests for new functionalities, like changing password and deleting account. In addition, generator description in monorepo configuration was simplified. Minor changes were also made to e2e test utilities for better error handling. --- apps/e2e/tests/account/account.po.ts | 26 +++++++++---- apps/e2e/tests/account/account.spec.ts | 38 +++++++++++++++++-- apps/e2e/tests/authentication/auth.po.ts | 5 +++ apps/e2e/tests/authentication/auth.spec.ts | 8 +++- apps/e2e/tests/utils/mailbox.ts | 5 +++ .../components/personal-account-dropdown.tsx | 3 +- .../account-danger-zone.tsx | 1 + .../password/update-password-form.tsx | 6 +-- turbo/generators/config.ts | 2 +- 9 files changed, 78 insertions(+), 16 deletions(-) diff --git a/apps/e2e/tests/account/account.po.ts b/apps/e2e/tests/account/account.po.ts index faa8589a5..437b5f475 100644 --- a/apps/e2e/tests/account/account.po.ts +++ b/apps/e2e/tests/account/account.po.ts @@ -14,15 +14,27 @@ export class AccountPageObject { return this.auth.signUpFlow('/home/settings'); } - async updateProfileName(name: string) { - await this.page.locator('[data-test="update-account-name-form"] input').fill(name); - await this.page.locator('[data-test="update-account-name-form"] button').click(); + async updateName(name: string) { + await this.page.fill('[data-test="update-account-name-form"] input', name); + await this.page.click('[data-test="update-account-name-form"] button'); } - async updateProfileEmail(email: string) { - await this.page.locator('[data-test="account-email-form-email-input"]').fill(email); - await this.page.locator('[data-test="account-email-form-repeat-email-input"]').fill(email); - await this.page.locator('[data-test="account-email-form"] button').click(); + async updateEmail(email: string) { + await this.page.fill('[data-test="account-email-form-email-input"]', email); + await this.page.fill('[data-test="account-email-form-repeat-email-input"]', email); + await this.page.click('[data-test="account-email-form"] button'); + } + + async updatePassword(password: string) { + await this.page.fill('[data-test="account-password-form-password-input"]', password); + await this.page.fill('[data-test="account-password-form-repeat-password-input"]', password); + await this.page.click('[data-test="account-password-form"] button'); + } + + async deleteAccount() { + await this.page.click('[data-test="delete-account-button"]'); + await this.page.fill('[data-test="delete-account-input-field"]', 'DELETE'); + await this.page.click('[data-test="confirm-delete-account-button"]'); } getProfileName() { diff --git a/apps/e2e/tests/account/account.spec.ts b/apps/e2e/tests/account/account.spec.ts index 1c06dc000..7692a90c5 100644 --- a/apps/e2e/tests/account/account.spec.ts +++ b/apps/e2e/tests/account/account.spec.ts @@ -10,12 +10,12 @@ test.describe('Account Settings', () => { account = new AccountPageObject(page); await account.setup(); - }) + }); test('user can update their profile name', async () => { const name = 'John Doe'; - await account.updateProfileName(name); + await account.updateName(name); await page.waitForResponse((resp) => { return resp.url().includes('accounts'); @@ -27,7 +27,7 @@ test.describe('Account Settings', () => { test('user can update their email', async () => { const email = account.auth.createRandomEmail(); - await account.updateProfileEmail(email); + await account.updateEmail(email); const req = await page.waitForResponse((resp) => { return resp.url().includes('auth/v1/user'); @@ -35,4 +35,36 @@ test.describe('Account Settings', () => { expect(req.status()).toBe(200); }); + + test('user can update their password', async () => { + const password = (Math.random() * 1000).toString(); + + await account.updatePassword(password); + + await page.waitForResponse((resp) => { + return resp.url().includes('auth/v1/user'); + }); + + await account.auth.signOut(); + }); +}); + +test.describe('Account Deletion', () => { + let page: Page; + let account: AccountPageObject; + + test.beforeAll(async ({ browser }) => { + page = await browser.newPage(); + account = new AccountPageObject(page); + + await account.setup(); + }); + + test('user can delete their own account', async () => { + await account.deleteAccount(); + + await page.waitForURL('http://localhost:3000'); + + expect(page.url()).toEqual('http://localhost:3000/'); + }); }); \ No newline at end of file diff --git a/apps/e2e/tests/authentication/auth.po.ts b/apps/e2e/tests/authentication/auth.po.ts index c01776b07..1b0342005 100644 --- a/apps/e2e/tests/authentication/auth.po.ts +++ b/apps/e2e/tests/authentication/auth.po.ts @@ -22,6 +22,11 @@ export class AuthPageObject { }); } + async signOut() { + await this.page.click('[data-test="account-dropdown-trigger"]'); + await this.page.click('[data-test="account-dropdown-sign-out"]'); + } + async signIn(params: { email: string, password: string diff --git a/apps/e2e/tests/authentication/auth.spec.ts b/apps/e2e/tests/authentication/auth.spec.ts index 620df8a90..1e21835af 100644 --- a/apps/e2e/tests/authentication/auth.spec.ts +++ b/apps/e2e/tests/authentication/auth.spec.ts @@ -26,6 +26,8 @@ test.describe('Auth flow', () => { await auth.visitConfirmEmailLink(email); + await page.waitForURL('http://localhost:3000/home'); + expect(page.url()).toContain('http://localhost:3000/home'); }); @@ -40,9 +42,13 @@ test.describe('Auth flow', () => { password: 'password', }); - await page.waitForTimeout(500); + await page.waitForURL('http://localhost:3000/home'); expect(page.url()).toContain('/home'); + + await auth.signOut(); + + expect(page.url()).toContain('/'); }); }); diff --git a/apps/e2e/tests/utils/mailbox.ts b/apps/e2e/tests/utils/mailbox.ts index 32db5b687..b7c0297ac 100644 --- a/apps/e2e/tests/utils/mailbox.ts +++ b/apps/e2e/tests/utils/mailbox.ts @@ -47,6 +47,11 @@ export class Mailbox { const url = `http://localhost:54324/api/v1/mailbox/${mailbox}`; const response = await fetch(url); + + if (!response.ok) { + throw new Error(`Failed to fetch emails: ${response.statusText}`); + } + const json = (await response.json()) as Array<{ id: string }>; if (!json || !json.length) { diff --git a/packages/features/accounts/src/components/personal-account-dropdown.tsx b/packages/features/accounts/src/components/personal-account-dropdown.tsx index ec59020b4..0c72c1e67 100644 --- a/packages/features/accounts/src/components/personal-account-dropdown.tsx +++ b/packages/features/accounts/src/components/personal-account-dropdown.tsx @@ -67,7 +67,7 @@ export function PersonalAccountDropdown({
diff --git a/packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx b/packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx index 8019a3e84..9b82dc1e0 100644 --- a/packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx +++ b/packages/features/accounts/src/components/personal-account-settings/password/update-password-form.tsx @@ -93,7 +93,7 @@ export const UpdatePasswordForm = ({ return (
@@ -118,7 +118,7 @@ export const UpdatePasswordForm = ({