test: Added E2E test for hooks

Author: Bob Fanger

playwright/tests/hooks.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from "@playwright/test";
+
+test.use({ viewport: { width: 480, height: 360 } });
+test.describe("hooks", () => {
+  test("counter", async ({ page }) => {
+    await page.goto("/hooks");
+    await expect(page.locator('[data-testid="count"]')).toHaveText("0");
+    await page.locator('[data-testid="add"]').click();
+    await expect(page.locator('[data-testid="count"]')).toHaveText("1");
+    await page.locator('[data-testid="add"]').click();
+    await expect(page.locator('[data-testid="count"]')).toHaveText("2");
+  });
+
+  test("authentication", async ({ page }) => {
+    await page.goto("/hooks", { waitUntil: "networkidle" });
+    await expect(
+      page.locator('[data-testid="not-authenticated"]')
+    ).toBeVisible();
+    await expect(
+      page.locator('[data-testid="authenticated"]')
+    ).not.toBeVisible();
+    await page.locator('[data-testid="login"]').click();
+    await expect(page.locator('[data-testid="authenticated"]')).toBeVisible();
+    await page.locator('[data-testid="logout"]').click();
+    await expect(
+      page.locator('[data-testid="not-authenticated"]')
+    ).toBeVisible();
+  });
+});

src/routes/hooks/+page.svelte

@@ -22,16 +22,16 @@
 {#if $countHook}
   {@const [count, setCount] = $countHook}
 
-  <div>Count: {count}</div>
-  <button on:click={() => setCount(count + 1)}>+</button>
+  <div>Count: <span data-testid="count">{count}</span></div>
+  <button data-testid="add" on:click={() => setCount(count + 1)}>+</button>
   <hr />
 {/if}
 <react:AuthProvider value={auth}>
   <Nested />
 </react:AuthProvider>
 
 {#if auth.authenticated}
-  <button on:click={onLogout}>Logout</button>
+  <button on:click={onLogout} data-testid="logout">Logout</button>
 {:else}
-  <button on:click={onLogin}>Login</button>
+  <button on:click={onLogin} data-testid="login">Login</button>
 {/if}

src/routes/hooks/HookWithContext.svelte

@@ -6,7 +6,7 @@
 </script>
 
 {#if $auth?.authenticated}
-  <div>Authenticated</div>
+  <div data-testid="authenticated">Authenticated</div>
 {:else}
-  <div>Not authenticated</div>
+  <div data-testid="not-authenticated">Not authenticated</div>
 {/if}