test: add test/ui

Author: AriPerkkio

.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

.npmrc

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

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "build": "pnpm run --stream --filter=@tutorialkit/* --filter=create-tutorial build",
+    "build": "pnpm run --stream --filter='@tutorialkit/*' --filter=create-tutorial build",
     "dev": "TUTORIALKIT_DEV=true pnpm -r --parallel --stream --filter='./packages/**' run dev",
     "changelog": "./scripts/changelog.mjs",
     "clean": "./scripts/clean.sh",
@@ -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"

packages/components/react/src/Panels/EditorPanel.tsx

@@ -125,7 +125,7 @@ function FileTab({ i18n, editorDocument, helpAction, onHelpClick }: FileTabProps
         <span className="text-sm">{fileName}</span>
       </div>
       {!!helpAction && (
-        <button onClick={onHelpClick} className="panel-button px-2 py-0.5 -mr-1 -my-1">
+        <button onClick={onHelpClick} disabled={!onHelpClick} className="panel-button px-2 py-0.5 -mr-1 -my-1">
           {helpAction === 'solve' && <div className="i-ph-lightbulb-duotone text-lg" />}
           {helpAction === 'solve' && i18n.solveButtonText}
           {helpAction === 'reset' && <div className="i-ph-clock-counter-clockwise-duotone" />}

packages/components/react/src/Panels/WorkspacePanel.tsx

@@ -40,6 +40,7 @@ export function WorkspacePanel({ tutorialStore, theme }: Props) {
 
   const selectedFile = useStore(tutorialStore.selectedFile);
   const currentDocument = useStore(tutorialStore.currentDocument);
+  const lessonFullyLoaded = useStore(tutorialStore.lessonFullyLoaded);
 
   const lesson = tutorialStore.lesson!;
 
@@ -158,7 +159,7 @@ export function WorkspacePanel({ tutorialStore, theme }: Props) {
           i18n={lesson.data.i18n as I18n}
           hideRoot={lesson.data.hideRoot}
           helpAction={helpAction}
-          onHelpClick={onHelpClick}
+          onHelpClick={lessonFullyLoaded ? onHelpClick : undefined}
           onFileSelect={onFileSelect}
           selectedFile={selectedFile}
           onEditorScroll={onEditorScroll}

packages/components/react/src/core/CodeMirrorEditor/index.tsx

@@ -208,6 +208,7 @@ function newEditorState(
   return EditorState.create({
     doc: content,
     extensions: [
+      EditorView.contentAttributes.of({ 'aria-label': 'Editor' }),
       EditorView.domEventHandlers({
         scroll: debounce((_event, view) => {
           onScrollRef.current?.({ left: view.scrollDOM.scrollLeft, top: view.scrollDOM.scrollTop });

pnpm-lock.yaml

@@ -0,0 +1,11 @@
+# CLI Tests
+
+> Tests for verifying `@tutorialkit/cli` works with the actual built template, including their package manager lockfiles.
+
+## Running
+
+- `cd <root of the project>`
+- `pnpm cli:build-release`
+- `cd test/cli`
+- `pnpm test`
+

test/cli/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
+```