playwright test improvement (#155)

* upgrade playwright

* fix lint

* integrate test report

* add selector id

* implement page-object-model & add more test

.gitignore

@@ -8,4 +8,6 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
-.idea
+.idea
+playwright-report
+test-results

README.md

@@ -25,4 +25,3 @@ Untuk menambahkan data developer silakan ubah file `src/data/people.js`. Data so
 ```
 
 dan untuk menambahkan data perusahaan yang masih melakukan hiring silakan ubah file `src/data/employer.js`.
-

package.json

@@ -15,7 +15,7 @@
     "postinstall": "husky install"
   },
   "devDependencies": {
-    "@playwright/test": "^1.28.1",
+    "@playwright/test": "^1.30.0",
     "@sveltejs/adapter-auto": "^1.0.0",
     "@sveltejs/kit": "^1.8.3",
     "eslint": "^8.28.0",

playwright.config.js

@@ -5,6 +5,10 @@ const config = {
     port: 4173,
   },
   testDir: "tests",
+  reporter: "html",
+  use: {
+    trace: "retain-on-failure",
+  },
 };
 
 export default config;

src/routes/+layout.svelte

@@ -9,11 +9,11 @@
   <Nav />
   <slot />
   <hr />
-  Dipersembahkan oleh <a
-    href="https://deeptech.id"
-    target="_blank"
-    rel="noreferrer">DeepTech Foundation</a
-  >. Kode sumber tersedia di <a
+  Dipersembahkan oleh
+  <a href="https://deeptech.id" target="_blank" rel="noreferrer"
+    >DeepTech Foundation</a
+  >. Kode sumber tersedia di
+  <a
     href="https://github.com/rizafahmi/carikerja"
     target="_blank"
     rel="noreferrer">GitHub</a

src/routes/+page.svelte

@@ -154,6 +154,7 @@
       on:select={handleStackChange}
       items={getAllTechStack}
       isMulti={true}
+      id="inputTechStack"
     />
   </div>
   <div>
@@ -162,6 +163,7 @@
       on:select={handleLocationChange}
       on:clear={handleLocationChange}
       items={getAllLocation}
+      id="inputLocation"
     />
   </div>
 </div>
@@ -172,7 +174,7 @@
       <ul>
         <li>⏲️ {p.status}</li>
         <li>💻 {p.role}</li>
-        <li>📍 {p.location}</li>
+        <li id="listLocation">📍 {p.location}</li>
         {#if p.tech_stack.length != 0}
           <li>
             ⚙️

tests/home.test.js

@@ -0,0 +1,17 @@
+import {test, expect} from "@playwright/test";
+import {HomePage} from "./pages/home.page.js";
+
+test.describe("Cari Kerja Home Page E2E Test", () => {
+  test.beforeEach(async ({page}) => {
+    const homePage = new HomePage(page);
+    await homePage.open();
+    expect(await page.textContent("h4")).toBe(
+      "Kata siapa cari software engineer yang berpengalaman itu susah?",
+    );
+  });
+
+  test("user should be able to filter using location", async ({page}) => {
+    const homePage = new HomePage(page);
+    await homePage.filterByLocation("bandung");
+  });
+});

tests/pages/home.page.js

@@ -0,0 +1,29 @@
+import {expect} from "@playwright/test";
+
+export class HomePage {
+  /**
+   * @param { import('@playwright/test').Page} page
+   */
+
+  constructor(page) {
+    this.page = page;
+    this.inputLocation = page.locator("#inputLocation");
+    this.listLocation = page.locator("#listLocation");
+  }
+
+  async open() {
+    await this.page.goto("/");
+  }
+
+  /**
+   * @param {string} location
+   */
+  async filterByLocation(location) {
+    await this.inputLocation.click();
+    await this.inputLocation.fill(location);
+    await this.page.keyboard.press("Enter");
+    for (const li of await this.listLocation.all()) {
+      expect(li).toContainText(location, {ignoreCase: true});
+    }
+  }
+}