diff --git a/e2e/_utils.ts b/e2e/_utils.ts new file mode 100644 index 000000000..88858fc1f --- /dev/null +++ b/e2e/_utils.ts @@ -0,0 +1,6 @@ +import { Page } from "@playwright/test"; + + +export const clearLocalStorage = (page: Page) => { + return page.evaluate(`window.localStorage.clear()`); +} \ No newline at end of file diff --git a/e2e/authentication.spec.ts b/e2e/authentication.spec.ts index 556704052..0f4e72151 100644 --- a/e2e/authentication.spec.ts +++ b/e2e/authentication.spec.ts @@ -1,5 +1,6 @@ import { test, expect, Page } from '@playwright/test'; import { faker } from '@faker-js/faker'; +import { clearLocalStorage } from './_utils'; let authPage: Page; @@ -7,9 +8,16 @@ test.describe('authentication', () => { test.beforeAll(async ({ browser }) => { authPage = await browser.newPage(); }); + test.afterAll(async () => { + await authPage.close(); + }); + test.afterEach(async ({ context }) => { + context.clearCookies(); + await clearLocalStorage(authPage); + }); test.describe('login', () => { - test.beforeAll(async () => { + test.beforeEach(async () => { await authPage.goto('/auth/login'); }); test('should show the login page.', async () => { @@ -31,11 +39,23 @@ test.describe('authentication', () => { await authPage.getByRole('link', { name: 'Sign up' }).click(); await expect(authPage.url()).toContain('/auth/register'); }); - test('should the email or password is not correct.', async () => {}); + test('should the email or password is not correct.', async () => { + await authPage.getByLabel('Email Address').click(); + await authPage.getByLabel('Email Address').fill(faker.internet.email()); + + await authPage.getByLabel('Password').click(); + await authPage.getByLabel('Password').fill(faker.internet.password()); + + await authPage.getByRole('button', { name: 'Log in' }).click(); + + await expect(authPage.locator('body')).toContainText( + 'The email and password you entered did not match our records.' + ); + }); }); test.describe('register', () => { - test.beforeAll(async () => { + test.beforeEach(async () => { await authPage.goto('/auth/register'); }); test('should first name, last name, email and password be required.', async () => { @@ -56,18 +76,20 @@ test.describe('authentication', () => { }); test('should signup successfully.', async () => { const form = authPage.locator('form'); - await form - .locator('input[name="first_name"]') - .fill(faker.person.firstName()); - await form - .locator('input[name="last_name"]') - .fill(faker.person.lastName()); - await form.locator('input[name="email"]').fill(faker.internet.email()); - await form - .locator('input[name="password"]') - .fill(faker.internet.password()); + await form.getByLabel('First Name').click(); + await form.getByLabel('First Name').fill(faker.person.firstName()); + + await form.getByLabel('Email').click(); + await form.getByLabel('Email').fill(faker.internet.email()); + + await form.getByLabel('Last Name').click(); + await form.getByLabel('Last Name').fill(faker.person.lastName()); + + await form.getByLabel('Password').click(); + await form.getByLabel('Password').fill(faker.internet.password()); await authPage.getByRole('button', { name: 'Register' }).click(); + await expect(authPage.locator('h1')).toContainText( 'Register a New Organization now!' ); @@ -75,7 +97,13 @@ test.describe('authentication', () => { }); test.describe('reset password', () => { - test.beforeAll(async () => { + test.beforeAll(async ({ browser }) => { + authPage = await browser.newPage(); + }); + test.afterAll(async () => { + await authPage.close(); + }); + test.beforeEach(async () => { await authPage.goto('/auth/send_reset_password'); }); test('should email be required.', async () => { diff --git a/e2e/onboarding.spec.ts b/e2e/onboarding.spec.ts index e94fda9aa..1d25cd9bd 100644 --- a/e2e/onboarding.spec.ts +++ b/e2e/onboarding.spec.ts @@ -2,6 +2,7 @@ import { test, expect, Page } from '@playwright/test'; import { faker } from '@faker-js/faker'; let authPage: Page; +let businessLegalName: string = faker.company.name(); test.describe('onboarding', () => { test.beforeAll(async ({ browser }) => { @@ -9,19 +10,15 @@ test.describe('onboarding', () => { await authPage.goto('/auth/register'); const form = authPage.locator('form'); - await form - .locator('input[name="first_name"]') - .fill(faker.person.firstName()); - await form.locator('input[name="last_name"]').fill(faker.person.lastName()); - await form.locator('input[name="email"]').fill(faker.internet.email()); - await form - .locator('input[name="password"]') - .fill(faker.internet.password()); + + await form.getByLabel('First Name').fill(faker.person.firstName()); + await form.getByLabel('Email').fill(faker.internet.email()); + await form.getByLabel('Last Name').fill(faker.person.lastName()); + await form.getByLabel('Password').fill(faker.internet.password()); await authPage.getByRole('button', { name: 'Register' }).click(); }); - - test.only('should validation catch all required fields', async () => { + test('should validation catch all required fields', async () => { const form = authPage.locator('form'); await authPage.getByRole('button', { name: 'Save & Continue' }).click(); @@ -32,24 +29,57 @@ test.describe('onboarding', () => { await expect(form).toContainText('Fiscal year is a required field'); await expect(form).toContainText('Time zone is a required field'); }); - test('should sign-out when click on Signout link', () => {}); + test.describe('after onboarding', () => { + test.beforeAll(async () => { + await authPage.getByLabel('Legal Organization Name').click(); + await authPage + .getByLabel('Legal Organization Name') + .fill(businessLegalName); - test('should onboarding process success', () => { - // await page.getByRole('textbox').click(); - // await page.getByRole('textbox').fill('sdafasdf'); - // await page.getByRole('button', { name: 'Select Business Location...' }).click(); - // await page.locator('a').filter({ hasText: 'Armenia' }).click(); - // await page.getByRole('button', { name: 'Select Base Currency...' }).click(); - // await page.locator('a').filter({ hasText: 'USD - US Dollar' }).click(); - // await page.getByRole('button', { name: 'Select Fiscal Year...' }).click(); - // await page.locator('a').filter({ hasText: 'May - April' }).click(); - // await page.getByRole('button', { name: 'Select Time Zone...' }).click(); - // await page.getByText('Pacific/Midway (SST)-11:00').click(); - // await page.getByRole('button', { name: 'Save & Continue' }).click(); - // await page.getByRole('heading', { name: 'Congrats! You are ready to go' }).click(); - // await page.getByRole('button', { name: 'Go to dashboard' }).click(); + // Fill Business Location. + await authPage + .getByRole('button', { name: 'Select Business Location...' }) + .click(); + await authPage.locator('a').filter({ hasText: 'Albania' }).click(); + + // Fill Base Currency. + await authPage + .getByRole('button', { name: 'Select Base Currency...' }) + .click(); + await authPage + .locator('a') + .filter({ hasText: 'AED - United Arab Emirates Dirham' }) + .click(); + + // Fill Fasical Year. + await authPage + .getByRole('button', { name: 'Select Fiscal Year...' }) + .click(); + await authPage.locator('a').filter({ hasText: 'June - May' }).click(); + + // Fill Timezone. + await authPage + .getByRole('button', { name: 'Select Time Zone...' }) + .click(); + await authPage.getByText('Pacific/Marquesas-09:30').click(); + + // Click on Submit button + await authPage.getByRole('button', { name: 'Save & Continue' }).click(); + }); + test('should onboarding process success', async () => { + await expect(authPage.locator('body')).toContainText( + 'Congrats! You are ready to go', + { + timeout: 30000, + } + ); + }); + test('should go to the dashboard after clicking on "Go to dashboard" button.', async () => { + await authPage.getByRole('button', { name: 'Go to dashboard' }).click(); + + await expect( + authPage.locator('[data-testId="dashboard-topbar"] h1') + ).toContainText(businessLegalName); + }); }); - - - test('should go to the dashboard after clicking on "Go to dashboard" button.', () => {}); }); diff --git a/packages/webapp/package-lock.json b/packages/webapp/package-lock.json index b7d381a9e..0918dffb5 100644 --- a/packages/webapp/package-lock.json +++ b/packages/webapp/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bigcapital/webapp", - "version": "1.7.1", + "version": "0.9.6", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1205,9 +1205,9 @@ } }, "@blueprintjs-formik/core": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.3.3.tgz", - "integrity": "sha512-ko7g54YSEcSq2K/GEpmiTG0foGLqe7DwgXGhkGxYEiHhLAUv8WvQmrFsm8e/KOW7n8mLGq0uaZVe2l8m3JTGGQ==", + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.3.4.tgz", + "integrity": "sha512-gksuBYXXvX7IhZXbPEFEAHgmJWp1vt/GTMW0GYBkCoGBAvXy08hIHjMc85M0WNyen+tic3NRas6I2wsjgokgqw==", "requires": { "lodash.get": "^4.4.2", "lodash.keyby": "^4.6.0", @@ -1227,9 +1227,9 @@ } }, "@blueprintjs-formik/select": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@blueprintjs-formik/select/-/select-0.2.3.tgz", - "integrity": "sha512-j/zkX0B9wgtoHgK6Z/rlowB7F7zemrAajBU+d3caCoEYMMqwAI0XA++GytqrIhv5fEGjkZ1hkxS9j8eqX8vtjA==", + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@blueprintjs-formik/select/-/select-0.2.5.tgz", + "integrity": "sha512-Sztf5dOemedUBfEjnDWD8ryfMU/x95hyhIgJT5/ywC/jQfX+d/K2OhujklTrCDzQilUeAJLoVkSdV+w77n8ckQ==", "requires": { "lodash.get": "^4.4.2", "lodash.keyby": "^4.6.0", diff --git a/packages/webapp/package.json b/packages/webapp/package.json index dc9228e83..96ac5d16f 100644 --- a/packages/webapp/package.json +++ b/packages/webapp/package.json @@ -3,9 +3,9 @@ "version": "0.9.6", "private": true, "dependencies": { - "@blueprintjs-formik/core": "^0.3.3", + "@blueprintjs-formik/core": "^0.3.4", "@blueprintjs-formik/datetime": "^0.3.4", - "@blueprintjs-formik/select": "^0.2.3", + "@blueprintjs-formik/select": "^0.2.5", "@blueprintjs/core": "^3.50.2", "@blueprintjs/datetime": "^3.23.12", "@blueprintjs/popover2": "^0.11.1", diff --git a/packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx b/packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx index c9e8e6946..549785a87 100644 --- a/packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx +++ b/packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx @@ -53,7 +53,7 @@ function DashboardTopbar({ }; return ( -
+