chore: setup Playwright & add base test (#60)

.github/workflows/ci.yml

@@ -24,16 +24,27 @@ jobs:
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v2
-      
-      - name: Use Node.js 16
+
+      - name: Use Node.js 18
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 18.x
 
-      - run: npm install
+      - run: npm ci
       - run: npm run format
       - run: npm run lint
       - run: npm run build
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v3
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
       - name: "Check for unstaged changes"
         run: |
           git status --porcelain

.gitignore

@@ -2,4 +2,10 @@ dist
 node_modules
 
 # VScode devcontainer
-.devcontainer
+.devcontainer
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.ladle/config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  stories: "tests/**/*.stories.tsx",
+};

package.json

@@ -20,12 +20,17 @@
     "bundle-size": "npm run build && monosize measure",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
+    "test": "playwright test",
+    "test:serve": "ladle serve --port 3000",
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix",
     "prepublishOnly": "npm run lint && npm run format && npm run build",
     "release": "release-it"
   },
   "devDependencies": {
+    "@ladle/react": "^4.0.2",
+    "@playwright/test": "^1.40.1",
+    "playwright": "^1.40.1",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "eslint": "^8.2.0",

playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+
+  use: {
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry",
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  webServer: {
+    command: "npm run test:serve",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+    stdout: "pipe",
+    stderr: "pipe",
+  },
+});

src/index.ts

@@ -3,19 +3,17 @@
  * Licensed under the MIT License.
  */
 
-export {
-  Keyborg,
-  KeyborgCallback,
-  createKeyborg,
-  disposeKeyborg,
-} from "./Keyborg";
+export type { Keyborg, KeyborgCallback } from "./Keyborg";
+export { createKeyborg, disposeKeyborg } from "./Keyborg";
 
+export type {
+  KeyborgFocusInEvent,
+  KeyborgFocusInEventDetails,
+} from "./FocusEvent";
 export {
   getLastFocusedProgrammatically,
   nativeFocus,
   KEYBORG_FOCUSIN,
-  KeyborgFocusInEvent,
-  KeyborgFocusInEventDetails,
 } from "./FocusEvent";
 
 export const version = process.env.PKG_VERSION;

tests/focus-behavior.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from "@playwright/test";
+
+test("Buttons scenario", async ({ page }) => {
+  await page.goto("/?mode=preview&story=focus-behavior--buttons");
+
+  await expect(page.getByTestId("keyboard-mode")).toContainText("false");
+
+  // Click the button [nav by mouse]
+  await page.getByText("Button A").click();
+  await expect(page.getByTestId("keyboard-mode")).toContainText("false");
+
+  // Press Tab [nav by keyboard]
+  await page.keyboard.press("Tab");
+
+  expect(await page.locator("*:focus")).toHaveText("Button B");
+  await expect(page.getByTestId("keyboard-mode")).toContainText("true");
+
+  // Press Tab [nav by keyboard]
+  await page.keyboard.press("Tab");
+
+  expect(await page.locator("*:focus")).toHaveText("Button C");
+  await expect(page.getByTestId("keyboard-mode")).toContainText("true");
+
+  // Click the button [nav by mouse]
+  await page.getByText("Button B").click();
+  await expect(page.getByTestId("keyboard-mode")).toContainText("false");
+});

tests/focus-behavior.stories.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { createKeyborg } from "../src";
+
+function KeyboardMode() {
+  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] =
+    React.useState(false);
+  const keyborg = createKeyborg(window);
+
+  React.useEffect(() => {
+    setIsNavigatingWithKeyboard(keyborg.isNavigatingWithKeyboard());
+    keyborg.subscribe(setIsNavigatingWithKeyboard);
+
+    return () => keyborg.unsubscribe(setIsNavigatingWithKeyboard);
+  }, [keyborg]);
+
+  return (
+    <div style={{ border: "2px solid grey", padding: 5 }}>
+      Is navigating with keyboard:{" "}
+      <code data-testid="keyboard-mode">
+        {isNavigatingWithKeyboard.toString()}
+      </code>
+    </div>
+  );
+}
+
+export const Buttons = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+    <h1>Focus Behavior with Buttons</h1>
+
+    <div
+      style={{ border: "2px solid blue", display: "flex", gap: 5, padding: 20 }}
+    >
+      <button>Button A</button>
+      <button>Button B</button>
+      <button>Button C</button>
+    </div>
+
+    <KeyboardMode />
+  </div>
+);

tsconfig.json

@@ -2,7 +2,9 @@
   "compilerOptions": {
     "declaration": true,
     "noResolve": false,
+    "jsx": "preserve",
     "module": "ES2015",
+    "moduleResolution": "node",
     "target": "ES2019",
     "noImplicitAny": true,
     "noImplicitReturns": true,
@@ -15,6 +17,6 @@
     "outDir": "./dist/",
     "lib": ["DOM", "ESNext"]
   },
-  "include": ["./src/**/*"],
+  "include": ["./src/**/*", "./tests/**/*", "./playwright.config.ts"],
   "exclude": ["dist", "node_modules"]
 }

vite.config.mts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  define: {
+    "process.env.PKG_VERSION": JSON.stringify("local"),
+  },
+});