test: add tests for ui

.github/workflows/ci.yaml

@@ -32,6 +32,9 @@ jobs:
       - name: Lint
         run: pnpm lint
 
+      - name: Install Playwright Dependencies
+        run: pnpm exec playwright install chromium --with-deps
+
       - name: Test
         run: pnpm test
 

.gitignore

@@ -23,3 +23,5 @@ tsconfig.tsbuildinfo
 tsconfig.build.tsbuildinfo
 .tmp
 .tmp-*
+/test/**/test-results
+/test/**/.astro

package.json

@@ -16,7 +16,7 @@
     "demo": "pnpm run --filter=demo.tutorialkit.dev dev",
     "demo:build": "pnpm run build && pnpm run --filter=demo.tutorialkit.dev build",
     "lint": "eslint \"{packages,docs,extensions,integration}/**/*\"",
-    "test": "pnpm run --stream --filter=@tutorialkit/* test --run"
+    "test": "CI=true pnpm run --stream --filter=@tutorialkit/* test"
   },
   "license": "MIT",
   "packageManager": "[email protected]",
@@ -30,6 +30,7 @@
     "eslint-plugin-astro": "^1.2.3",
     "husky": "^9.0.11",
     "is-ci": "^3.0.1",
+    "playwright": "^1.46.0",
     "prettier": "^3.3.2",
     "prettier-plugin-astro": "^0.14.1",
     "tempfile": "^5.0.0"

test/ui/astro.config.ts

@@ -0,0 +1,8 @@
+import tutorialkit from '@tutorialkit/astro';
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  devToolbar: { enabled: false },
+  server: { port: 4329 },
+  integrations: [tutorialkit()],
+});

test/ui/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@tutorialkit/test-ui",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "astro dev",
+    "preview": "astro build && astro preview",
+    "test": "playwright test",
+    "test:ui": "pnpm run test --ui"
+  },
+  "devDependencies": {
+    "@astrojs/react": "^3.6.0",
+    "@iconify-json/ph": "^1.1.13",
+    "@iconify-json/svg-spinners": "^1.1.2",
+    "@playwright/test": "^1.46.0",
+    "@tutorialkit/astro": "workspace:*",
+    "@tutorialkit/components-react": "workspace:*",
+    "@tutorialkit/runtime": "workspace:*",
+    "@tutorialkit/theme": "workspace:*",
+    "@tutorialkit/types": "workspace:*",
+    "@types/node": "^22.2.0",
+    "@unocss/reset": "^0.59.4",
+    "@unocss/transformer-directives": "^0.62.0",
+    "astro": "^4.12.0",
+    "fast-glob": "^3.3.2",
+    "playwright": "^1.46.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "unocss": "^0.59.4"
+  }
+}

test/ui/playwright.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  webServer: {
+    command: 'pnpm preview',
+    url: 'http://localhost:4329',
+    reuseExistingServer: !process.env.CI,
+    stdout: 'ignore',
+    stderr: 'pipe',
+  },
+  use: {
+    baseURL: 'http://localhost:4329',
+  },
+});

test/ui/src/content/config.ts

@@ -0,0 +1,9 @@
+import { contentSchema } from '@tutorialkit/types';
+import { defineCollection } from 'astro:content';
+
+const tutorial = defineCollection({
+  type: 'content',
+  schema: contentSchema,
+});
+
+export const collections = { tutorial };

test/ui/src/content/tutorial/meta.md

@@ -0,0 +1,5 @@
+---
+type: tutorial
+mainCommand: ''
+prepareCommands: []
+---

test/ui/src/content/tutorial/tests/meta.md

@@ -0,0 +1,4 @@
+---
+type: part
+title: Tests
+---

test/ui/src/content/tutorial/tests/navigation/meta.md

@@ -0,0 +1,10 @@
+---
+type: chapter
+title: Navigation
+lessons:
+  - page-one
+  - page-two
+  - page-three
+mainCommand: ''
+prepareCommands: []
+---

test/ui/src/content/tutorial/tests/navigation/page-one/content.md

@@ -0,0 +1,6 @@
+---
+type: lesson
+title: Page one
+---
+
+# Navigation test - Page one

test/ui/src/content/tutorial/tests/navigation/page-three/content.md

@@ -0,0 +1,6 @@
+---
+type: lesson
+title: Page three
+---
+
+# Navigation test - Page three

test/ui/src/content/tutorial/tests/navigation/page-two/content.md

@@ -0,0 +1,6 @@
+---
+type: lesson
+title: Page two
+---
+
+# Navigation test - Page two

test/ui/src/content/tutorial/tests/preview/meta.md

@@ -0,0 +1,10 @@
+---
+type: chapter
+title: Preview
+lessons:
+  - single
+  - multiple
+template: vite
+mainCommand: 'pnpm start'
+prepareCommands: ['pnpm install']
+---

test/ui/src/content/tutorial/tests/preview/multiple/content.md

@@ -0,0 +1,9 @@
+---
+type: lesson
+title: Multiple
+previews:
+  - [5173, "First Server"]
+  - [5173, "Second Server"]
+---
+
+# Preview test - Multiple

test/ui/src/content/tutorial/tests/preview/single/content.md

@@ -0,0 +1,8 @@
+---
+type: lesson
+title: Single
+previews:
+  - [5173, "Vite Dev Server"]
+---
+
+# Preview test - Single

test/ui/src/env.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="@tutorialkit/astro/types" />
+/// <reference types="astro/client" />

test/ui/src/templates/default/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Default template</title>
+  </head>
+  <body>
+    <main>
+      <h1>Default template</h1>
+    </main>
+  </body>
+</html>

test/ui/src/templates/default/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "default-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module"
+}

test/ui/src/templates/vite/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite Template</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

test/ui/src/templates/vite/main.js

@@ -0,0 +1,5 @@
+document.querySelector('#app').innerHTML = `
+  <div>
+    <h1>Hello Vite Template!</h1>
+  </div>
+`;

test/ui/src/templates/vite/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "vite-project",
+  "private": true,
+  "type": "module",
+  "packageManager": "[email protected]",
+  "scripts": {
+    "start": "vite"
+  },
+  "devDependencies": {
+    "vite": "^5.4.0"
+  }
+}