test(bruno room): add playwright tests to bruno's room

dsm23 · Nov 6, 2024 · f8d3b3c · f8d3b3c
1 parent 613f76d
commit f8d3b3c
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 4 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/react-apps/bruno-room/index.html b/react-apps/bruno-room/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>React App - Bruno Room | Threejs Journey</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/react-apps/bruno-room/package.json b/react-apps/bruno-room/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "e2e": "playwright test",
     "lint:js": "eslint \"**/*.{js,mjs,ts,tsx}\" --report-unused-disable-directives --max-warnings 0",
     "lint:css": "stylelint \"**/*.css\" --max-warnings 0 --allow-empty-input --cache --cache-strategy=content --cache-location=.stylelintcache",
     "lint": "turbo run lint:js lint:css",
@@ -21,7 +22,10 @@
     "three-stdlib": "^2.34.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.10.0",
+    "@playwright/test": "^1.48.2",
     "@repo/eslint-config": "workspace:*",
+    "@repo/playwright-config": "workspace:*",
     "@repo/stylelint-config": "workspace:*",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

diff --git a/react-apps/bruno-room/playwright-tests/home.spec.ts b/react-apps/bruno-room/playwright-tests/home.spec.ts
@@ -0,0 +1,28 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+test("has title", async ({ page }) => {
+  await page.goto("/");
+
+  await expect(page).toHaveTitle("React App - Bruno Room | Threejs Journey");
+});
+
+test("has heading", async ({ page }) => {
+  await page.goto("/");
+
+  await expect(page.getByRole("heading", { name: "Bruno room" })).toBeVisible();
+});
+
+test("should not have any automatically detectable accessibility issues", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  const mainTag = page.locator("main");
+
+  await mainTag.waitFor();
+
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+
+  expect(accessibilityScanResults.violations).toEqual([]);
+});
diff --git a/react-apps/bruno-room/playwright.config.ts b/react-apps/bruno-room/playwright.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from "@playwright/test";
+import config from "@repo/playwright-config";
+
+const PORT = process.env.PORT || "30000";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig(config(PORT));
diff --git a/react-apps/bruno-room/src/App.tsx b/react-apps/bruno-room/src/App.tsx
@@ -9,7 +9,7 @@ import Sudo from "./components/Sudo";
 
 const App = () => (
   <main>
-    <h1 className="sr-only">Bruno's room</h1>
+    <h1 className="sr-only">Bruno room</h1>
     <Canvas
       flat
       dpr={[1, 2]}

diff --git a/react-apps/bruno-room/src/index.css b/react-apps/bruno-room/src/index.css
@@ -35,10 +35,13 @@ body {
   }
 }
 
+main {
+  display: grid;
+  height: 100dvh;
+}
+
 canvas {
-  display: block;
   max-width: 100%;
-  min-height: 100dvh;
   animation: fade-in 1s ease 0.3s forwards;
   cursor: grab;
   touch-action: none;