From 934d18546824422a4901b5bd75e46c679cb4193e Mon Sep 17 00:00:00 2001
From: depa panjie purnama <depa.article@gmail.com>
Date: Fri, 24 Feb 2023 09:41:16 +0700
Subject: [PATCH] playwright test improvement (#155)

* upgrade playwright

* fix lint

* integrate test report

* add selector id

* implement page-object-model & add more test
---
 .gitignore                |  4 +++-
 README.md                 |  1 -
 package.json              |  2 +-
 playwright.config.js      |  4 ++++
 pnpm-lock.yaml            | 14 +++++++-------
 src/routes/+layout.svelte | 10 +++++-----
 src/routes/+page.svelte   |  4 +++-
 tests/home.test.js        | 17 +++++++++++++++++
 tests/pages/home.page.js  | 29 +++++++++++++++++++++++++++++
 tests/test.js             |  8 --------
 10 files changed, 69 insertions(+), 24 deletions(-)
 create mode 100644 tests/home.test.js
 create mode 100644 tests/pages/home.page.js
 delete mode 100644 tests/test.js

diff --git a/.gitignore b/.gitignore
index 218f4f0..696f7d5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,6 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
-.idea
\ No newline at end of file
+.idea
+playwright-report
+test-results
\ No newline at end of file
diff --git a/README.md b/README.md
index f4b694c..998580f 100644
--- a/README.md
+++ b/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`.
-
diff --git a/package.json b/package.json
index 20151d4..f268646 100644
--- a/package.json
+++ b/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",
diff --git a/playwright.config.js b/playwright.config.js
index b5e4384..17d98e0 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -5,6 +5,10 @@ const config = {
     port: 4173,
   },
   testDir: "tests",
+  reporter: "html",
+  use: {
+    trace: "retain-on-failure",
+  },
 };
 
 export default config;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5609617..7a181e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,7 +1,7 @@
 lockfileVersion: 5.4
 
 specifiers:
-  '@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
@@ -20,7 +20,7 @@ specifiers:
   vitest: ^0.25.3
 
 devDependencies:
-  '@playwright/test': 1.29.1
+  '@playwright/test': 1.30.0
   '@sveltejs/adapter-auto': 1.0.0_@sveltejs+kit@1.8.3
   '@sveltejs/kit': 1.8.3_svelte@3.55.0+vite@4.0.3
   eslint: 8.28.0
@@ -312,13 +312,13 @@ packages:
       fastq: 1.13.0
     dev: true
 
-  /@playwright/test/1.29.1:
-    resolution: {integrity: sha512-iQxk2DX5U9wOGV3+/Jh9OHPsw5H3mleUL2S4BgQuwtlAfK3PnKvn38m4Rg9zIViGHVW24opSm99HQm/UFLEy6w==}
+  /@playwright/test/1.30.0:
+    resolution: {integrity: sha512-SVxkQw1xvn/Wk/EvBnqWIq6NLo1AppwbYOjNLmyU0R1RoQ3rLEBtmjTnElcnz8VEtn11fptj1ECxK0tgURhajw==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
       '@types/node': 18.11.9
-      playwright-core: 1.29.1
+      playwright-core: 1.30.0
     dev: true
 
   /@polka/url/1.0.0-next.21:
@@ -1502,8 +1502,8 @@ packages:
     hasBin: true
     dev: true
 
-  /playwright-core/1.29.1:
-    resolution: {integrity: sha512-20Ai3d+lMkWpI9YZYlxk8gxatfgax5STW8GaMozAHwigLiyiKQrdkt7gaoT9UQR8FIVDg6qVXs9IoZUQrDjIIg==}
+  /playwright-core/1.30.0:
+    resolution: {integrity: sha512-7AnRmTCf+GVYhHbLJsGUtskWTE33SwMZkybJ0v6rqR1boxq2x36U7p1vDRV7HO2IwTZgmycracLxPEJI49wu4g==}
     engines: {node: '>=14'}
     hasBin: true
     dev: true
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 105fb45..66de26a 100644
--- a/src/routes/+layout.svelte
+++ b/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
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b0011d0..868fe32 100644
--- a/src/routes/+page.svelte
+++ b/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>
             ⚙️
diff --git a/tests/home.test.js b/tests/home.test.js
new file mode 100644
index 0000000..3db7d75
--- /dev/null
+++ b/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");
+  });
+});
diff --git a/tests/pages/home.page.js b/tests/pages/home.page.js
new file mode 100644
index 0000000..7c519aa
--- /dev/null
+++ b/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});
+    }
+  }
+}
diff --git a/tests/test.js b/tests/test.js
deleted file mode 100644
index e6a9307..0000000
--- a/tests/test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import {expect, test} from "@playwright/test";
-
-test("index page has expected h4", async ({page}) => {
-  await page.goto("/");
-  expect(await page.textContent("h4")).toBe(
-    "Kata siapa cari software engineer yang berpengalaman itu susah?",
-  );
-});