feat: e2e test using POM pattern (#33)

feat: e2e test using POM pattern

e2e/homepage.spec.ts

@@ -1,27 +1,39 @@
-import { test } from './base-test'
+import { test } from './base-test';
+import { HomePage } from './pages/home.page';
 
-const { expect } = test
+const { expect } = test;
 
-test('Homepage contains Senarai title', async ({
-  page,
-  queries: { getByRole },
-}) => {
-  await page.goto('/')
+test.describe('Senarai Homepage E2E Test', () => {
+    let homePage: HomePage;
 
-  // Expect the title to be Senari.
-  await expect(page).toHaveTitle(/Senarai/)
+    test.beforeEach(async ({ page }) => {
+        homePage = new HomePage(page);
+        await homePage.open();
+        await expect(page).toHaveURL('/');
+        await expect(page).toHaveTitle(/Senarai/);
+    });
 
-  // Locate PAUD text (case insensitive).
-  const paud = await getByRole('link', {
-    name: /^paud$/i,
-  })
+    test('user should be able to see all activities', async () => {
+        await expect(homePage.activityCard).toHaveText([
+            `Senarai`,
+            `PAUD`,
+            `PAUD ke atas`,
+            `SD`,
+            `SD ke atas`,
+            `SMP`,
+            `SMP ke atas`,
+            `SMA`,
+            `SMA ke atas`,
+            `Kuliah`,
+            `Profesional`,
+            `Semua Usia`,
+            `For Parents`,
+        ]);
+    });
 
-  // Expect the attribute "to be strictly equal" to the value.
-  await expect(paud).toHaveAttribute('href', '/activities/paud')
-
-  // Click the PAUD link.
-  await paud.click()
-
-  // Expects the new URL to be correct.
-  await expect(page).toHaveURL('/activities/paud')
-})
+    test('user should be able to navigate to an activity', async ({ page }) => {
+        await homePage.goToPaudActivity();
+        await expect(page).toHaveURL('/activities/paud');
+        await expect(page).toHaveTitle(/Senarai | Aktivitas PAUD/);
+    });
+});

e2e/pages/home.page.ts

@@ -0,0 +1,23 @@
+import { Page, Locator } from '@playwright/test';
+
+export class HomePage {
+  readonly page: Page;
+  readonly activityCard: Locator;
+  readonly paudActivity: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.activityCard = page.getByRole('heading');
+    this.paudActivity = page.getByRole('link', {
+      name: /^paud$/i,
+    });
+  }
+
+  async open() {
+    await this.page.goto('/');
+  }
+
+  async goToPaudActivity() {
+    await this.paudActivity.click();
+  }
+}

package.json

@@ -45,7 +45,7 @@
     "@faker-js/faker": "7.5.0",
     "@jackfranklin/test-data-bot": "2.0.0",
     "@playwright-testing-library/test": "4.4.0",
-    "@playwright/test": "1.26.0",
+    "@playwright/test": "1.27.1",
     "@remix-run/dev": "^1.7.2",
     "@remix-run/eslint-config": "^1.7.2",
     "@remix-run/serve": "^1.7.2",

playwright.config.ts

@@ -40,7 +40,7 @@ const config: PlaywrightTestConfig<Fixtures> = {
     baseURL: 'http://localhost:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: 'retain-on-failure',
   },
 
   /* Configure projects for major browsers */