Add playwright to make sure that tabs tests can run in CI

Author: leeyi45

.github/workflows/pull-request.yml

@@ -75,7 +75,7 @@ jobs:
 
         - name: Test bundles and tabs
           if: needs.paths-filter.outputs.modules == 'true'
-          run: yarn test:modules
+          run: playwright install --with-deps && yarn test:modules
 
         - name: Build manifest
           if: needs.paths-filter.outputs.devserver == 'true'

devserver/vite.config.ts

@@ -33,7 +33,7 @@ export default defineConfig(({ mode }) => {
         find: /^js-slang\/context/,
         replacement: pathlib.resolve(import.meta.dirname, 'src', 'mockModuleContext.ts')
       }, {
-        // This alias configuration allows us to edit the modules library and the changes
+        // This alias configuration allows us to edit the modules library and have the changes
         // be reflected in real time when in hot-reload mode
         find: /^@sourceacademy\/modules-lib/,
         replacement: '.',

lib/modules-lib/src/tabs/index.ts

@@ -3,6 +3,11 @@
  * @module Tabs
  * @title Tabs Library
  */
+
+// This file is necessary so that the documentation generated by typedoc comes out in
+// the correct format. Don't actually import anything from this file
+// (not that you should be able to)
+
 export { default as AnimationCanvas, type AnimCanvasProps } from './AnimationCanvas';
 export { default as AnimationError } from './AnimationError';
 export { default as AutoLoopSwitch, type AutoLoopSwitchProps } from './AutoLoopSwitch';

package.json

@@ -58,6 +58,7 @@
     "@types/node": "^22.15.30",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
+    "@vitest/browser": "^3.2.3",
     "@vitest/coverage-v8": "^3.2.3",
     "@vitest/eslint-plugin": "^1.3.4",
     "@yarnpkg/types": "^4.0.1",
@@ -71,9 +72,11 @@
     "husky": "^9.1.7",
     "jsdom": "^26.1.0",
     "jsonc-eslint-parser": "^2.4.0",
+    "playwright": "^1.54.1",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.33.1",
     "vitest": "^3.2.3",
+    "vitest-browser-react": "^1.0.0",
     "yarnhook": "^0.6.0"
   },
   "dependencies": {

yarn.lock

@@ -3474,6 +3474,7 @@ __metadata:
     "@types/node": "npm:^22.15.30"
     "@types/react": "npm:^18.3.1"
     "@types/react-dom": "npm:^18.3.1"
+    "@vitest/browser": "npm:^3.2.3"
     "@vitest/coverage-v8": "npm:^3.2.3"
     "@vitest/eslint-plugin": "npm:^1.3.4"
     "@yarnpkg/types": "npm:^4.0.1"
@@ -3489,11 +3490,13 @@ __metadata:
     jsdom: "npm:^26.1.0"
     jsonc-eslint-parser: "npm:^2.4.0"
     lodash: "npm:^4.17.21"
+    playwright: "npm:^1.54.1"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     typescript: "npm:^5.8.2"
     typescript-eslint: "npm:^8.33.1"
     vitest: "npm:^3.2.3"
+    vitest-browser-react: "npm:^1.0.0"
     yarnhook: "npm:^0.6.0"
   languageName: unknown
   linkType: soft