feat(e2e): E2E onboarding process

e2e/_utils.ts

@@ -0,0 +1,13 @@
+import { Page } from '@playwright/test';
+
+export const clearLocalStorage = (page: Page) => {
+  return page.evaluate(`window.localStorage.clear()`);
+};
+
+export const defaultPageConfig = () => {
+  return {
+    extraHTTPHeaders: {
+      'ngrok-skip-browser-warning': 'any-value',
+    },
+  };
+};

e2e/authentication.spec.ts

@@ -1,14 +1,23 @@
 import { test, expect, Page } from '@playwright/test';
+import { faker } from '@faker-js/faker';
+import { clearLocalStorage, defaultPageConfig } from './_utils';
 
 let authPage: Page;
 
 test.describe('authentication', () => {
   test.beforeAll(async ({ browser }) => {
-    authPage = await browser.newPage();
+    authPage = await browser.newPage({ ...defaultPageConfig() });
+  });
+  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 () => {
@@ -30,10 +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 () => {
+      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 () => {
@@ -52,10 +74,36 @@ test.describe('authentication', () => {
         'Password is a required field'
       );
     });
+    test('should signup successfully.', async () => {
+      const form = authPage.locator('form');
+      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!'
+      );
+    });
   });
 
   test.describe('reset password', () => {
-    test.beforeAll(async () => {
+    test.beforeAll(async ({ browser }) => {
+      authPage = await browser.newPage({ ...defaultPageConfig() });
+    });
+    test.afterAll(async () => {
+      await authPage.close();
+    });
+    test.beforeEach(async () => {
       await authPage.goto('/auth/send_reset_password');
     });
     test('should email be required.', async () => {

e2e/onboarding.spec.ts

@@ -0,0 +1,86 @@
+import { test, expect, Page } from '@playwright/test';
+import { faker } from '@faker-js/faker';
+import { defaultPageConfig } from './_utils';
+
+let authPage: Page;
+let businessLegalName: string = faker.company.name();
+
+test.describe('onboarding', () => {
+  test.beforeAll(async ({ browser }) => {
+    authPage = await browser.newPage({ ...defaultPageConfig() });
+    await authPage.goto('/auth/register');
+
+    const form = authPage.locator('form');
+
+    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('should validation catch all required fields', async () => {
+    const form = authPage.locator('form');
+
+    await authPage.getByRole('button', { name: 'Save & Continue' }).click();
+
+    await expect(form).toContainText('Organization name is a required field');
+    await expect(form).toContainText('Location is a required field');
+    await expect(form).toContainText('Base currency is a required field');
+    await expect(form).toContainText('Fiscal year is a required field');
+    await expect(form).toContainText('Time zone is a required field');
+  });
+  test.describe('after onboarding', () => {
+    test.beforeAll(async () => {
+      await authPage.getByLabel('Legal Organization Name').click();
+      await authPage
+        .getByLabel('Legal Organization Name')
+        .fill(businessLegalName);
+
+      // 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);
+    });
+  });
+});

package.json

@@ -18,12 +18,13 @@
     "shared/*"
   ],
   "devDependencies": {
+    "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
     "@commitlint/config-lerna-scopes": "^17.4.2",
+    "@faker-js/faker": "^8.0.2",
+    "@playwright/test": "^1.32.3",
     "husky": "^8.0.3",
-    "lerna": "^6.4.1",
-    "@commitlint/cli": "^17.4.2",
-    "@playwright/test": "^1.32.3"
+    "lerna": "^6.4.1"
   },
   "engines": {
     "node": "14.x"

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.4",
+    "@blueprintjs-formik/select": "^0.2.5",
     "@blueprintjs/core": "^3.50.2",
     "@blueprintjs/datetime": "^3.23.12",
     "@blueprintjs/popover2": "^0.11.1",

packages/webapp/src/components/Dashboard/DashboardTopbar/DashboardTopbar.tsx

@@ -53,7 +53,7 @@ function DashboardTopbar({
   };
 
   return (
-    <div class="dashboard__topbar">
+    <div class="dashboard__topbar" data-testId={'dashboard-topbar'}>
       <div class="dashboard__topbar-left">
         <div class="dashboard__topbar-sidebar-toggle">
           <Tooltip