test: add tests for ui

.github/workflows/ci.yaml

@@ -35,6 +35,23 @@ jobs:
       - name: Test
         run: pnpm test
 
+  test-e2e:
+    name: Test E2E
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: ./.github/actions/setup-and-build
+
+      - name: Install Playwright Dependencies
+        run: pnpm exec playwright install chromium --with-deps
+        working-directory: e2e
+
+      - name: Test
+        run: pnpm test
+        working-directory: e2e
+
   docs:
     name: Docs
     runs-on: ubuntu-latest

.gitignore

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

.npmrc

@@ -0,0 +1 @@
+shell-emulator=true

e2e/README.md

@@ -0,0 +1,42 @@
+# UI Tests
+
+> Tests for verifying TutorialKit works as expected in the browser. Tests are run against locally linked `@tutorialkit` packages.
+
+## Running
+
+- `pnpm exec playwright install chromium --with-deps` - When running the tests first time
+- `pnpm test`
+
+## Development
+
+- `pnpm start` - Starts example/fixture project's development server
+- `pnpm test:ui` - Start Playwright in UI mode
+
+## Structure
+
+Test cases are located in `test` directory.
+Each test file has its own `chapter`, that contains `lesson`s for test cases:
+
+For example Navigation tests:
+
+```
+├── src/content/tutorial
+│   └── tests
+│       └──── navigation
+│           ├── page-one
+│           ├── page-three
+│           └── page-two
+└── test
+    └── navigation.test.ts
+```
+
+Or File Tree tests:
+
+```
+├── src/content/tutorial
+│   └── tests
+│       └── file-tree
+│           └── lesson-and-solution
+└── test
+    └── file-tree.test.ts
+```

e2e/astro.config.ts

@@ -0,0 +1,23 @@
+import { createRequire } from 'node:module';
+import { resolve } from 'node:path';
+import tutorialkit from '@tutorialkit/astro';
+import { defineConfig } from 'astro/config';
+
+const require = createRequire(import.meta.url);
+const astroDist = resolve(require.resolve('astro/package.json'), '..');
+const swapFunctionEntry = resolve(astroDist, 'dist/transitions/swap-functions.js');
+
+export default defineConfig({
+  devToolbar: { enabled: false },
+  server: { port: 4329 },
+  integrations: [tutorialkit()],
+
+  vite: {
+    resolve: {
+      alias: {
+        // work-around for https://github.com/stackblitz/tutorialkit/pull/238
+        'node_modules/astro/dist/transitions/swap-functions': swapFunctionEntry,
+      },
+    },
+  },
+});

e2e/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "tutorialkit-e2e",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "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"
+  }
+}

e2e/playwright.config.ts

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

e2e/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 };

e2e/src/content/tutorial/meta.md

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

e2e/src/content/tutorial/tests/file-tree/lesson-and-solution/_files/example.html

@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <title>Lesson file example.html title</title>
+  </head>
+  <body>
+    Lesson file example.html content
+  </body>
+</html>

e2e/src/content/tutorial/tests/file-tree/lesson-and-solution/_files/example.js

@@ -0,0 +1 @@
+export default 'Lesson file example.js content';

e2e/src/content/tutorial/tests/file-tree/lesson-and-solution/_solution/example.html

@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <title>Solution file example.html title</title>
+  </head>
+  <body>
+    Solution file example.html content
+  </body>
+</html>

e2e/src/content/tutorial/tests/file-tree/lesson-and-solution/_solution/example.js

@@ -0,0 +1 @@
+export default 'Solution file example.js content';

e2e/src/content/tutorial/tests/file-tree/lesson-and-solution/content.md

@@ -0,0 +1,6 @@
+---
+type: lesson
+title: Lesson and solution
+---
+
+# File Tree test - Lesson and solution

e2e/src/content/tutorial/tests/file-tree/meta.md

@@ -0,0 +1,4 @@
+---
+type: chapter
+title: File Tree
+---

e2e/src/content/tutorial/tests/file-tree/no-solution/_files/example.html

@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <title>Lesson file example.html title</title>
+  </head>
+  <body>
+    Lesson file example.html content
+  </body>
+</html>

e2e/src/content/tutorial/tests/file-tree/no-solution/_files/example.js

@@ -0,0 +1 @@
+export default 'Lesson file example.js content';

e2e/src/content/tutorial/tests/file-tree/no-solution/content.md

@@ -0,0 +1,6 @@
+---
+type: lesson
+title: No solution
+---
+
+# File Tree test - No solution

e2e/src/content/tutorial/tests/meta.md

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

e2e/src/content/tutorial/tests/navigation/meta.md

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

e2e/src/content/tutorial/tests/navigation/page-one/content.md

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

e2e/src/content/tutorial/tests/navigation/page-three/content.md

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

e2e/src/content/tutorial/tests/navigation/page-two/content.md

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

e2e/src/content/tutorial/tests/preview/meta.md

@@ -0,0 +1,5 @@
+---
+type: chapter
+title: Preview
+mainCommand: 'node ./index.mjs'
+---

e2e/src/content/tutorial/tests/preview/multiple/content.md

@@ -0,0 +1,9 @@
+---
+type: lesson
+title: Multiple
+previews:
+  - [8000, "First Server"]
+  - [8000, "Second Server", "/about.html"]
+---
+
+# Preview test - Multiple

e2e/src/content/tutorial/tests/preview/single/content.md

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

e2e/src/env.d.ts

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

e2e/src/templates/default/index.mjs

@@ -0,0 +1,22 @@
+import http from 'node:http';
+
+const server = http.createServer((req, res) => {
+  if (req.url === '/' || req.url === '/index.html') {
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.end('Index page');
+
+    return;
+  }
+
+  if (req.url === '/about.html') {
+    res.writeHead(200, { 'Content-Type': 'text/html' });
+    res.end('About page');
+
+    return;
+  }
+
+  res.writeHead(200, { 'Content-Type': 'text/html' });
+  res.end('Not found');
+});
+
+server.listen(8000);

e2e/test/file-tree.test.ts

@@ -0,0 +1,59 @@
+import { test, expect } from '@playwright/test';
+import { readLessonFilesAndSolution } from './utils.js';
+
+const BASE_URL = '/tests/file-tree';
+
+const fixtures = readLessonFilesAndSolution('file-tree/lesson-and-solution', 'file-tree/no-solution');
+
+test('user can see lesson and solution files', async ({ page }) => {
+  const testCase = 'lesson-and-solution';
+  await page.goto(`${BASE_URL}/${testCase}`);
+
+  await expect(page.getByRole('heading', { level: 1, name: 'File Tree test - Lesson and solution' })).toBeVisible();
+
+  // lesson files
+  for (const file of ['example.html', 'example.js']) {
+    await page.getByRole('button', { name: file }).click();
+    await expect(page.getByRole('button', { name: file, pressed: true })).toBeVisible();
+
+    await expect(page.getByRole('textbox', { name: 'Editor' })).toHaveText(fixtures[testCase].files[file], {
+      useInnerText: true,
+    });
+  }
+
+  await page.getByRole('button', { name: 'Solve', disabled: false }).click();
+  await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible();
+
+  // solution files
+  for (const file of ['example.html', 'example.js']) {
+    await page.getByRole('button', { name: file }).click();
+    await expect(page.getByRole('button', { name: file, pressed: true })).toBeVisible();
+
+    // TODO: Figure out why this is flaky
+    await page.waitForTimeout(1_000);
+
+    await expect(page.getByRole('textbox', { name: 'Editor' })).toHaveText(fixtures[testCase].solution[file], {
+      useInnerText: true,
+    });
+  }
+});
+
+test('user can see cannot click solve on lessons without solution files', async ({ page }) => {
+  const testCase = 'no-solution';
+  await page.goto(`${BASE_URL}/${testCase}`);
+
+  await expect(page.getByRole('heading', { level: 1, name: 'File Tree test - No solution' })).toBeVisible();
+
+  // lesson files
+  for (const file of ['example.html', 'example.js']) {
+    await page.getByRole('button', { name: file }).click();
+    await expect(page.getByRole('button', { name: file, pressed: true })).toBeVisible();
+
+    await expect(page.getByRole('textbox', { name: 'Editor' })).toHaveText(fixtures[testCase].files[file], {
+      useInnerText: true,
+    });
+  }
+
+  // reset-button should be immediately visible
+  await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible();
+});

e2e/test/navigation.test.ts

@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test';
+
+const BASE_URL = '/tests/navigation/page-one';
+
+test('user can navigate between lessons using nav bar links', async ({ page }) => {
+  await page.goto(BASE_URL);
+  await expect(page.getByRole('heading', { level: 1, name: 'Navigation test - Page one' })).toBeVisible();
+
+  // navigate forwards
+  await navigateToPage('Page two');
+  await navigateToPage('Page three');
+
+  // navigate backwards
+  await navigateToPage('Page two');
+  await navigateToPage('Page one');
+
+  async function navigateToPage(title: string) {
+    await page.getByRole('link', { name: title }).click();
+    await expect(page.getByRole('heading', { level: 1, name: `Navigation test - ${title}` })).toBeVisible();
+  }
+});
+
+test('user can navigate between lessons using breadcrumbs', async ({ page }) => {
+  await page.goto(BASE_URL);
+
+  await page.getByRole('button', { name: 'Tests / Navigation / Page one' }).click({ force: true });
+  await page.getByRole('region', { name: 'Navigation' }).getByRole('link', { name: 'Page three' }).click();
+
+  await expect(page.getByRole('heading', { level: 1, name: 'Navigation test - Page three' })).toBeVisible();
+});