setup unit and e2e tests

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -35,4 +35,8 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-/sandbox/
+/sandbox/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -100,7 +100,41 @@ I haven't setup Prettier or a Linter yet.
 
 ### Testing
 
-There are no automated tests yet, @jbilcke-hf will act as the "QA engineer".
+@jbilcke-hf is working to add tests, and will also act as the "QA engineer".
+
+#### Unit tests
+
+Note: I've just added Vitest, we don't have tests yet.
+
+`npm run test`
+
+#### End-to-end tests
+
+
+Note: I've just added Playwright, we don't have tests yet.
+
+  `npx playwright test`
+    Runs the end-to-end tests.
+
+  `npx playwright test --ui`
+    Starts the interactive UI mode.
+
+  `npx playwright test --project=chromium`
+    Runs the tests only on Desktop Chrome.
+
+  `npx playwright test example`
+    Runs the tests in a specific file.
+
+ ` npx playwright test --debug`
+    Runs the tests in debug mode.
+
+  `npx playwright codegen`
+    Auto generate tests with Codegen.
+
+We suggest that you begin by typing:
+
+    `npx playwright test`
+
 
 ### Architecture
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aitube/clapper",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "private": true,
   "description": "🎬 Clapper",
   "scripts": {
@@ -8,12 +8,14 @@
     "build": "npm i && next build",
     "start": "next start",
     "lint": "next lint",
-    "lint:fix": "next lint --fix"
+    "lint:fix": "next lint --fix",
+    "test:unit": "vitest",
+    "test:e2e": "npx playwright test"
   },
   "dependencies": {
     "@aitube/broadway": "0.0.22",
     "@aitube/clap": "0.0.30",
-    "@aitube/clapper-services": "0.0.23",
+    "@aitube/clapper-services": "0.0.25",
     "@aitube/engine": "0.0.26",
     "@aitube/timeline": "0.0.42",
     "@fal-ai/serverless-client": "^0.11.0",
@@ -55,12 +57,14 @@
     "@react-three/uikit": "^0.3.4",
     "@react-three/uikit-lucide": "^0.3.4",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@types/dom-speech-recognition": "^0.0.4",
     "@upstash/ratelimit": "^1.1.3",
     "@upstash/redis": "^1.31.1",
     "autoprefixer": "10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.1",
+    "date-fns": "^3.6.0",
     "fflate": "^0.8.2",
     "fluent-ffmpeg": "^2.1.3",
     "framer-motion": "11.1.7",
@@ -100,17 +104,22 @@
     "zx": "^8.1.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.45.1",
+    "@testing-library/react": "^16.0.0",
     "@types/fluent-ffmpeg": "^2.1.24",
     "@types/is-hotkey": "^0.1.10",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/uuid": "^9.0.8",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
+    "jsdom": "^24.1.0",
     "postcss": "^8",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.3",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^2.0.2"
   }
 }

playwright.config.ts

@@ -0,0 +1,78 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * 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({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

src/components/toolbars/top-menu/assistant/index.tsx

@@ -14,13 +14,13 @@ import {
 import { useUI } from "@/services/ui"
 import { SettingsCategory } from "@aitube/clapper-services"
 import { AssistantModelList } from "../lists/AssistantModelList"
-import { useInitAssistant } from "@/services/assistant/useAssistant"
+import { useVoiceAssistant } from "@/services/assistant/useVoiceAssistant"
 
 export function TopMenuAssistant() {
   const setShowSettings = useUI(s => s.setShowSettings)
 
   // this should only be called on and at only one place in the project!
-  useInitAssistant()
+  useVoiceAssistant()
 
   return (
     <MenubarMenu>

src/lib/hf/adapter/findMainGradioEndpoint.ts

@@ -23,9 +23,9 @@ export function findMainGradioEndpoint({
   const sortableEndpoints = endpoints.map(({ isNamed, name, endpoint, score }) => {
     console.log(`found endpoint: ${name}`)
 
-    const isContinuous = !!endpoint.type?.continuous
-    const isGenerator = !!endpoint.type?.generator
-    const canCancel = !!endpoint.type?.cancel
+    // const isContinuous = !!endpoint.type?.continuous
+    // const isGenerator = !!endpoint.type?.generator
+    // const canCancel = !!endpoint.type?.cancel
     
     let gradioFields: Record<string, Partial<SupportedFields>> = {}
     let allGradioFields = getDefaultFields()

src/lib/utils/formatDuration.test.ts

@@ -0,0 +1,10 @@
+import { expect, test } from 'vitest'
+
+import { formatDuration } from './formatDuration'
+
+test('formatDuration', () => {
+  expect(formatDuration(0)).toBe('00:00:00:000')
+  expect(formatDuration(1050)).toBe('00:00:01:050')
+  expect(formatDuration(60500)).toBe('00:01:00:500')
+  expect(formatDuration(3600999)).toBe('01:00:00:999')
+})

src/lib/utils/formatDuration.ts

@@ -1,25 +1,27 @@
-export const HOUR = 60 * 60 * 1000; // Converted to milliseconds
-export const MINUTE = 60 * 1000; // Converted to milliseconds
+
+import {  intervalToDuration } from 'date-fns'
 
 export function formatDuration(float_ms: number) {
 
-  let float_s = float_ms / 1000; // Converted to seconds
-  
-  const hours = Math.floor(float_s / HOUR);
-  float_s = float_s % HOUR;
-  const minutes = Math.floor(float_s / MINUTE);
-  float_s = float_s % MINUTE;
-  const seconds = float_s;
+  const duration = intervalToDuration({ start: 0, end: float_ms })
 
-  return `${twoDigits(hours)}:${twoDigits(minutes)}:${twoDigits(seconds, 3)}`;
-}
+  const hours = duration.hours || 0
+  const minutes = duration.minutes || 0
+  const seconds = duration.seconds || 0
+
+  const total =
+    (hours * 60 * 60 * 1000)
+     + (minutes * 60 * 1000)
+     + (seconds * 1000)
 
-export function twoDigits(number: number, decimal = 0) {
-  let [int, dec] = number.toFixed(decimal).split(".");
-  dec = dec || "";
-  if (dec == "") {
-    return int.padStart(2, "0");
-  } else {
-    return int.padStart(2, "0") + "." + dec;
-  }
-}
+  const formatted = [
+    duration.hours || 0,
+    duration.minutes || 0,
+    duration.seconds || 0,
+    float_ms - total
+  ]
+  .map((num, i) => String(num as number).padStart(i === 3 ? 3 : 2, '0'))
+  .join(':')
+
+  return formatted
+}

src/services/assistant/getDefaultAssistantState.ts

@@ -2,9 +2,6 @@ import { AssistantState } from "@aitube/clapper-services"
 
 export function getDefaultAssistantState(): AssistantState {
   const state: AssistantState = {
-    isVoiceEnabled: false,
-    transcript: "",
-
     history: [],
   }
 

src/services/assistant/useAssistant.ts

@@ -1,10 +1,8 @@
 "use client"
 
-import { useEffect } from "react"
-import { useVoiceToText } from "react-speakup"
 import { create } from "zustand"
 import { AssistantRequest, AssistantStore, ChatEvent } from "@aitube/clapper-services"
-import { ClapOutputType, ClapProject, ClapSegmentCategory, newSegment, UUID } from "@aitube/clap"
+import { ClapOutputType, ClapSegmentCategory, newSegment, UUID } from "@aitube/clap"
 import { DEFAULT_DURATION_IN_MS_PER_STEP, findFreeTrack, TimelineSegment, TimelineStore, useTimeline } from "@aitube/timeline"
 
 import { getDefaultAssistantState } from "./getDefaultAssistantState"
@@ -13,36 +11,11 @@ import { useSettings } from "../settings"
 import { askAssistant } from "./askAssistant"
 import { useRenderer } from "../renderer"
 
-// URL to the speech to text websocket server
-export const STT_API_URL = process.env.NEXT_PUBLIC_SPEECH_TO_TEXT_API_URL || ""
-
 const enableTextToSpeech = false
 
 export const useAssistant = create<AssistantStore>((set, get) => ({
   ...getDefaultAssistantState(),
 
-  toggleVoice: (): boolean => {
-   
-    if (!navigator?.mediaDevices?.getUserMedia || !MediaRecorder.isTypeSupported("audio/webm")) {
-      console.error("This environment doesn't support microphone recording")
-      return false
-    }
-
-    if (!enableTextToSpeech) {
-      console.error("Text to speech is currently disabled, aborting")
-      return false
-    }
-
-    const isVoiceEnabled = !get().isVoiceEnabled
-
-    set({ isVoiceEnabled })
-
-    return isVoiceEnabled
-  },
-
-  setVoiceTranscript: (transcript: string) => {
-    set({ transcript })
-  },
   runCommand: (prompt: string) => {
 
     const query = prompt
@@ -256,26 +229,3 @@ export const useAssistant = create<AssistantStore>((set, get) => ({
     }
   }
 }))
-
-export function useInitAssistant() {
-  const isVoiceEnabled = useAssistant(s => s.isVoiceEnabled)
-  const toggleVoice = useAssistant(s => s.toggleVoice)
-  const setVoiceTranscript = useAssistant(s => s.setVoiceTranscript)
-  const { startListening, stopListening, transcript } = useVoiceToText({
-    continuous: true
-  })
-
-  useEffect(() => {
-    if (isVoiceEnabled) {
-      console.log(`TODO: startListening`)
-
-      startListening()
-    } else {
-      stopListening()
-    }
-  }, [isVoiceEnabled])
-
-  useEffect(() =>  {
-    setVoiceTranscript(transcript)
-  }, [transcript])
-}

src/services/assistant/useVoiceAssistant.ts

@@ -0,0 +1,13 @@
+import { useEffect } from "react"
+
+import { useMic } from "../mic/useMic"
+import { useAssistant } from "./useAssistant"
+
+export function useVoiceAssistant() {
+  const processMessage = useAssistant(s => s.processMessage)
+  const transcript = useMic(s => s.transcript)
+
+  useEffect(() =>  {
+    processMessage(transcript)
+  }, [transcript])
+}

src/services/debug.ts

@@ -1,5 +1,6 @@
 import { useTasks } from "@/components/tasks/useTasks"
 import { useAssistant } from "./assistant/useAssistant"
+import { useMic } from "./mic/useMic"
 import { useAudio } from "./audio/useAudio"
 import { useBroadcast } from "./broadcast/useBroadcast"
 import { useEditors, useEntityEditor, useProjectEditor, useScriptEditor, useSegmentEditor } from "./editors"
@@ -18,6 +19,7 @@ if (typeof window !== "undefined") {
   const w = window as any
   w.useTasks = useTasks
   w.useAssistant = useAssistant
+  w.useMic = useMic
   w.useAudio = useAudio
   w.useBroadcast = useBroadcast
   w.useEditors = useEditors

src/services/mic/getDefaultMicState.ts

@@ -0,0 +1,16 @@
+import { MicState } from "@aitube/clapper-services"
+
+export function getDefaultMicState(): MicState {
+  return {
+    isSupported: typeof window === 'undefined' || !('webkitSpeechRecognition' in window),
+    isListening: false,
+    transcript: '',
+    interimResults: true,
+    error: '',
+    lang: 'en-US',
+    grammar: '#JSGF V1.0; grammer punctuation; public <punc> =. |, |? | | ; | : ;',
+    grammarWeight: 1,
+    continuous: false,
+    recognition: undefined,
+  }
+}

src/services/mic/useMic.ts

@@ -0,0 +1,76 @@
+"use client"
+
+import { create } from "zustand"
+import { MicStore } from "@aitube/clapper-services"
+
+import { getDefaultMicState } from "./getDefaultMicState"
+
+export const useMic = create<MicStore>((set, get) => ({
+  ...getDefaultMicState(),
+
+  init: () => {
+    const { isSupported, interimResults, lang, continuous, grammar, grammarWeight } = get()
+
+    if (!isSupported) {
+      return
+    }
+    
+    // Initialize webkitSpeechRecognition
+    const recognition: SpeechRecognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)()
+
+    if (!recognition) {
+      set({ isSupported: false, error: 'this browser doesn\'t support speech recognition' })
+      return
+    }
+
+    recognition.interimResults = interimResults
+    recognition.lang = lang
+    recognition.continuous = continuous
+
+    const speechRecognitionList = new window.webkitSpeechGrammarList()
+    speechRecognitionList.addFromString(grammar, grammarWeight)
+    recognition.grammars = speechRecognitionList
+
+    const handleResult = (event: SpeechRecognitionEvent) => {
+      let transcript = '';
+      for (let i = 0; i < event.results.length; i++) {
+        transcript += event.results?.[i]?.[0]?.transcript || '';
+      }
+      set({ transcript });
+    };
+
+    const handleError = (event: SpeechRecognitionErrorEvent) => {
+      let error = `${event.error} ${event.message})`
+
+      if (event.error === 'aborted') {
+        error = 'speech recognition aborted'
+      }
+      set({ isListening: false, error })
+    };
+
+    const handleEnd = () => {
+      set({ isListening: false, transcript: '' })
+    };
+
+    recognition.addEventListener('result', handleResult);
+    recognition.addEventListener('error', handleError);
+    recognition.addEventListener('end', handleEnd);
+
+    set({ recognition })
+  },
+  start: () => {
+    const { isSupported, recognition, isListening } = get()
+    if (!isSupported || !recognition || isListening) { return }
+    recognition.start()
+    set({ isListening: true, error: '' })
+  },
+  stop: () => {
+    const { isSupported, recognition, isListening } = get()
+    if (!isSupported || !recognition || !isListening) { return }
+    recognition.stop()
+    set({ isListening: false, error: '' })
+  },
+  clear: () => {
+    set({ transcript: '', error: '' })
+  },
+}))

src/services/plugins/usePlugins.ts

@@ -18,6 +18,7 @@ import { fetchAndRun } from "./fetchAndRun"
 import { useEditors, useEntityEditor, useProjectEditor, useSegmentEditor } from "../editors"
 import { useSimulator } from "../simulator/useSimulator"
 import { useIO } from "../io/useIO"
+import { useMic } from "../mic/useMic"
 
 export const usePlugins = create<PluginsStore>((set, get) => ({
   ...getDefaultPluginsState(),
@@ -49,6 +50,7 @@ export const usePlugins = create<PluginsStore>((set, get) => ({
     return {
       audio: useAudio,
       assistant: useAssistant,
+      mic: useMic,
       segmentEditor: useSegmentEditor,
       entityEditor: useEntityEditor,
       projectEditor: useProjectEditor,

tests/examples.spec.txt

@@ -0,0 +1,437 @@
+import { test, expect, type Page } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('https://demo.playwright.dev/todomvc');
+});
+
+const TODO_ITEMS = [
+  'buy some cheese',
+  'feed the cat',
+  'book a doctors appointment'
+] as const;
+
+test.describe('New Todo', () => {
+  test('should allow me to add todo items', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    // Create 1st todo.
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press('Enter');
+
+    // Make sure the list only has one todo item.
+    await expect(page.getByTestId('todo-title')).toHaveText([
+      TODO_ITEMS[0]
+    ]);
+
+    // Create 2nd todo.
+    await newTodo.fill(TODO_ITEMS[1]);
+    await newTodo.press('Enter');
+
+    // Make sure the list now has two todo items.
+    await expect(page.getByTestId('todo-title')).toHaveText([
+      TODO_ITEMS[0],
+      TODO_ITEMS[1]
+    ]);
+
+    await checkNumberOfTodosInLocalStorage(page, 2);
+  });
+
+  test('should clear text input field when an item is added', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    // Create one todo item.
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press('Enter');
+
+    // Check that input is empty.
+    await expect(newTodo).toBeEmpty();
+    await checkNumberOfTodosInLocalStorage(page, 1);
+  });
+
+  test('should append new items to the bottom of the list', async ({ page }) => {
+    // Create 3 items.
+    await createDefaultTodos(page);
+
+    // create a todo count locator
+    const todoCount = page.getByTestId('todo-count')
+  
+    // Check test using different methods.
+    await expect(page.getByText('3 items left')).toBeVisible();
+    await expect(todoCount).toHaveText('3 items left');
+    await expect(todoCount).toContainText('3');
+    await expect(todoCount).toHaveText(/3/);
+
+    // Check all items in one call.
+    await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+});
+
+test.describe('Mark all as completed', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test.afterEach(async ({ page }) => {
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test('should allow me to mark all items as completed', async ({ page }) => {
+    // Complete all todos.
+    await page.getByLabel('Mark all as complete').check();
+
+    // Ensure all todos have 'completed' class.
+    await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']);
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+  });
+
+  test('should allow me to clear the complete state of all items', async ({ page }) => {
+    const toggleAll = page.getByLabel('Mark all as complete');
+    // Check and then immediately uncheck.
+    await toggleAll.check();
+    await toggleAll.uncheck();
+
+    // Should be no completed classes.
+    await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']);
+  });
+
+  test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => {
+    const toggleAll = page.getByLabel('Mark all as complete');
+    await toggleAll.check();
+    await expect(toggleAll).toBeChecked();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+    // Uncheck first todo.
+    const firstTodo = page.getByTestId('todo-item').nth(0);
+    await firstTodo.getByRole('checkbox').uncheck();
+
+    // Reuse toggleAll locator and make sure its not checked.
+    await expect(toggleAll).not.toBeChecked();
+
+    await firstTodo.getByRole('checkbox').check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+    // Assert the toggle all is checked again.
+    await expect(toggleAll).toBeChecked();
+  });
+});
+
+test.describe('Item', () => {
+
+  test('should allow me to mark items as complete', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    // Create two items.
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
+    }
+
+    // Check first item.
+    const firstTodo = page.getByTestId('todo-item').nth(0);
+    await firstTodo.getByRole('checkbox').check();
+    await expect(firstTodo).toHaveClass('completed');
+
+    // Check second item.
+    const secondTodo = page.getByTestId('todo-item').nth(1);
+    await expect(secondTodo).not.toHaveClass('completed');
+    await secondTodo.getByRole('checkbox').check();
+
+    // Assert completed class.
+    await expect(firstTodo).toHaveClass('completed');
+    await expect(secondTodo).toHaveClass('completed');
+  });
+
+  test('should allow me to un-mark items as complete', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    // Create two items.
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
+    }
+
+    const firstTodo = page.getByTestId('todo-item').nth(0);
+    const secondTodo = page.getByTestId('todo-item').nth(1);
+    const firstTodoCheckbox = firstTodo.getByRole('checkbox');
+
+    await firstTodoCheckbox.check();
+    await expect(firstTodo).toHaveClass('completed');
+    await expect(secondTodo).not.toHaveClass('completed');
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    await firstTodoCheckbox.uncheck();
+    await expect(firstTodo).not.toHaveClass('completed');
+    await expect(secondTodo).not.toHaveClass('completed');
+    await checkNumberOfCompletedTodosInLocalStorage(page, 0);
+  });
+
+  test('should allow me to edit an item', async ({ page }) => {
+    await createDefaultTodos(page);
+
+    const todoItems = page.getByTestId('todo-item');
+    const secondTodo = todoItems.nth(1);
+    await secondTodo.dblclick();
+    await expect(secondTodo.getByRole('textbox', { name: 'Edit' })).toHaveValue(TODO_ITEMS[1]);
+    await secondTodo.getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+    await secondTodo.getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+    // Explicitly assert the new text value.
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      'buy some sausages',
+      TODO_ITEMS[2]
+    ]);
+    await checkTodosInLocalStorage(page, 'buy some sausages');
+  });
+});
+
+test.describe('Editing', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test('should hide other controls when editing', async ({ page }) => {
+    const todoItem = page.getByTestId('todo-item').nth(1);
+    await todoItem.dblclick();
+    await expect(todoItem.getByRole('checkbox')).not.toBeVisible();
+    await expect(todoItem.locator('label', {
+      hasText: TODO_ITEMS[1],
+    })).not.toBeVisible();
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test('should save edits on blur', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).dispatchEvent('blur');
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      'buy some sausages',
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, 'buy some sausages');
+  });
+
+  test('should trim entered text', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('    buy some sausages    ');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      'buy some sausages',
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, 'buy some sausages');
+  });
+
+  test('should remove the item if an empty text string was entered', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      TODO_ITEMS[2],
+    ]);
+  });
+
+  test('should cancel edits on escape', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Escape');
+    await expect(todoItems).toHaveText(TODO_ITEMS);
+  });
+});
+
+test.describe('Counter', () => {
+  test('should display the current number of todo items', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+    
+    // create a todo count locator
+    const todoCount = page.getByTestId('todo-count')
+
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press('Enter');
+
+    await expect(todoCount).toContainText('1');
+
+    await newTodo.fill(TODO_ITEMS[1]);
+    await newTodo.press('Enter');
+    await expect(todoCount).toContainText('2');
+
+    await checkNumberOfTodosInLocalStorage(page, 2);
+  });
+});
+
+test.describe('Clear completed button', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+  });
+
+  test('should display the correct text', async ({ page }) => {
+    await page.locator('.todo-list li .toggle').first().check();
+    await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible();
+  });
+
+  test('should remove completed items when clicked', async ({ page }) => {
+    const todoItems = page.getByTestId('todo-item');
+    await todoItems.nth(1).getByRole('checkbox').check();
+    await page.getByRole('button', { name: 'Clear completed' }).click();
+    await expect(todoItems).toHaveCount(2);
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test('should be hidden when there are no items that are completed', async ({ page }) => {
+    await page.locator('.todo-list li .toggle').first().check();
+    await page.getByRole('button', { name: 'Clear completed' }).click();
+    await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden();
+  });
+});
+
+test.describe('Persistence', () => {
+  test('should persist its data', async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
+
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
+    }
+
+    const todoItems = page.getByTestId('todo-item');
+    const firstTodoCheck = todoItems.nth(0).getByRole('checkbox');
+    await firstTodoCheck.check();
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(firstTodoCheck).toBeChecked();
+    await expect(todoItems).toHaveClass(['completed', '']);
+
+    // Ensure there is 1 completed item.
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    // Now reload.
+    await page.reload();
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(firstTodoCheck).toBeChecked();
+    await expect(todoItems).toHaveClass(['completed', '']);
+  });
+});
+
+test.describe('Routing', () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    // make sure the app had a chance to save updated todos in storage
+    // before navigating to a new view, otherwise the items can get lost :(
+    // in some frameworks like Durandal
+    await checkTodosInLocalStorage(page, TODO_ITEMS[0]);
+  });
+
+  test('should allow me to display active items', async ({ page }) => {
+    const todoItem = page.getByTestId('todo-item');
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole('link', { name: 'Active' }).click();
+    await expect(todoItem).toHaveCount(2);
+    await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test('should respect the back button', async ({ page }) => {
+    const todoItem = page.getByTestId('todo-item'); 
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    await test.step('Showing all items', async () => {
+      await page.getByRole('link', { name: 'All' }).click();
+      await expect(todoItem).toHaveCount(3);
+    });
+
+    await test.step('Showing active items', async () => {
+      await page.getByRole('link', { name: 'Active' }).click();
+    });
+
+    await test.step('Showing completed items', async () => {
+      await page.getByRole('link', { name: 'Completed' }).click();
+    });
+
+    await expect(todoItem).toHaveCount(1);
+    await page.goBack();
+    await expect(todoItem).toHaveCount(2);
+    await page.goBack();
+    await expect(todoItem).toHaveCount(3);
+  });
+
+  test('should allow me to display completed items', async ({ page }) => {
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole('link', { name: 'Completed' }).click();
+    await expect(page.getByTestId('todo-item')).toHaveCount(1);
+  });
+
+  test('should allow me to display all items', async ({ page }) => {
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole('link', { name: 'Active' }).click();
+    await page.getByRole('link', { name: 'Completed' }).click();
+    await page.getByRole('link', { name: 'All' }).click();
+    await expect(page.getByTestId('todo-item')).toHaveCount(3);
+  });
+
+  test('should highlight the currently applied filter', async ({ page }) => {
+    await expect(page.getByRole('link', { name: 'All' })).toHaveClass('selected');
+    
+    //create locators for active and completed links
+    const activeLink = page.getByRole('link', { name: 'Active' });
+    const completedLink = page.getByRole('link', { name: 'Completed' });
+    await activeLink.click();
+
+    // Page change - active items.
+    await expect(activeLink).toHaveClass('selected');
+    await completedLink.click();
+
+    // Page change - completed items.
+    await expect(completedLink).toHaveClass('selected');
+  });
+});
+
+async function createDefaultTodos(page: Page) {
+  // create a new todo locator
+  const newTodo = page.getByPlaceholder('What needs to be done?');
+
+  for (const item of TODO_ITEMS) {
+    await newTodo.fill(item);
+    await newTodo.press('Enter');
+  }
+}
+
+async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) {
+  return await page.waitForFunction(e => {
+    return JSON.parse(localStorage['react-todos']).length === e;
+  }, expected);
+}
+
+async function checkNumberOfCompletedTodosInLocalStorage(page: Page, expected: number) {
+  return await page.waitForFunction(e => {
+    return JSON.parse(localStorage['react-todos']).filter((todo: any) => todo.completed).length === e;
+  }, expected);
+}
+
+async function checkTodosInLocalStorage(page: Page, title: string) {
+  return await page.waitForFunction(t => {
+    return JSON.parse(localStorage['react-todos']).map((todo: any) => todo.title).includes(t);
+  }, title);
+}

tests/main.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Clapper/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+
+  // TODO: replace by our own real tests
+  // Click the get started link.
+  // await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  // await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});

tsconfig.json

@@ -21,6 +21,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "vitest.config.mts"],
   "exclude": ["node_modules"]
 }

vitest.config.mts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+ 
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    exclude: [
+      '**/node_modules/**',
+      '**/.next/**',
+      '**/tests/**', // <- we ignore since those are Playwright tests, not Vitest tests
+    ],
+  }
+})