refactor: Updated packages and changed test environment

.github/workflows/ci.yml

@@ -28,7 +28,7 @@ jobs:
             - name: Install pnpm
               uses: pnpm/action-setup@v3
               with:
-                  version: 8 # Latest major
+                  version: 8 # Last major
                   run_install: false
 
             - name: Get pnpm store directory
@@ -43,8 +43,25 @@ jobs:
                   key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
                   restore-keys: |
                       ${{ runner.os }}-pnpm-store-
+
+            - name: Get installed Playwright version
+              run: echo "PLAYWRIGHT_VERSION=$(cat pnpm-lock.yaml | grep /playwright@ | sed -r 's/(.*@)([0-9.]*)(:)/\2/')" >> $GITHUB_ENV
 
             - name: Install dependencies
+              run: pnpm install --ignore-scripts
+
+            - uses: actions/cache@v3
+              name: Setup playwright cache
+              id: playwright-cache
+              with:
+                  path: '~/.cache/ms-playwright'
+                  key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+                  restore-keys: |
+                      ${{ runner.os }}-playwright-
+
+
+            - name: Install dependencies
+              if: steps.playwright-cache.outputs.cache-hit != 'true'
               run: pnpm install
 
             - name: Build Darkroom
@@ -56,9 +73,12 @@ jobs:
             - name: Build safelight
               run: pnpm build:safelight
 
-            - name: Test darkroom
+            - name: Test darkroom on Chromium
               run: pnpm test:darkroom
 
+            - name: Test darkroom on Firefox
+              run: pnpm test:darkroom-firefox
+
             - name: Test shared
               run: pnpm test:shared
 

package.json

@@ -11,8 +11,9 @@
         "build:darkroom": "cd packages/darkroom && pnpm build",
         "build:timeline": "cd packages/timeline && pnpm build",
         "build:safelight": "cd packages/safelight && pnpm build",
-        "test": "pnpm run -r test:run",
+        "test": "pnpm run -r --parallel \"/test:run.*/\"",
         "test:darkroom": "cd packages/darkroom && pnpm test:run",
+        "test:darkroom-firefox": "cd packages/darkroom && pnpm test:run-firefox",
         "test:shared": "cd packages/shared && pnpm test:run",
         "test:timeline": "cd packages/timeline && pnpm test:run",
         "dev": "pnpm build:packages && cd packages/safelight && pnpm dev",
@@ -27,11 +28,10 @@
     ],
     "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
-        "@vitest/browser": "^1.4.0",
-        "@vitest/ui": "^1.4.0",
-        "vite": "^5.2.8",
-        "vitest": "^1.4.0",
-        "vue": "^3.4.21",
-        "webdriverio": "^8.35.1"
+        "@vitest/browser": "^1.5.0",
+        "@vitest/ui": "^1.5.0",
+        "vite": "^5.2.10",
+        "vitest": "^1.5.0",
+        "vue": "^3.4.24"
     }
 }

packages/darkroom/package.json

@@ -26,7 +26,10 @@
         "build:vite": "vite build",
         "build:tsc": "tsc --emitDeclarationOnly",
         "test": "vitest",
-        "test:run": "vitest run --ui false"
+        "test-firefox": "vitest -c ./vitest.config.firefox.ts --test-timeout=10000",
+        "test:run": "vitest run --ui false",
+        "test:run-firefox": "vitest run --ui false -c ./vitest.config.firefox.ts --test-timeout=10000",
+        "postinstall": "playwright install"
     },
     "dependencies": {
         "@endo/static-module-record": "^1.1.1",
@@ -37,14 +40,14 @@
     },
     "devDependencies": {
         "@types/path-browserify": "^1.0.2",
-        "@vitest/browser": "^1.4.0",
-        "@vitest/ui": "^1.4.0",
+        "@vitest/browser": "^1.5.0",
+        "@vitest/ui": "^1.5.0",
+        "playwright": "^1.43.1",
         "rimraf": "^5.0.5",
         "typescript": "^5.4.5",
-        "vite": "^5.2.8",
-        "vite-plugin-dts": "^3.8.1",
-        "vitest": "^1.4.0",
-        "webdriverio": "^8.35.1"
+        "vite": "^5.2.10",
+        "vite-plugin-dts": "^3.8.3",
+        "vitest": "^1.5.0"
     },
     "optionalDependencies": {
         "@codemirror/lang-javascript": "^6.2.2",

packages/darkroom/vitest.config.firefox.ts

@@ -0,0 +1,17 @@
+import { defineProject, mergeConfig } from 'vitest/config';
+import config from './vitest.config';
+
+export default mergeConfig(
+    config,
+    defineProject({
+        test: {
+            name: 'Darkroom Firefox',
+            browser: {
+                name: 'firefox'
+            },
+            api: {
+                port: 6136
+            }
+        }
+    })
+);

packages/darkroom/vitest.config.ts

@@ -5,10 +5,16 @@ export default defineProject({
         reporters: !process.env.GITHUB_ACTIONS ? ['default', 'github-actions'] : ['default'],
         globals: true,
         name: 'Darkroom',
+        ui: true,
+        open: false,
         browser: {
             enabled: true,
             headless: true,
-            name: 'chrome'
+            name: 'chromium',
+            provider: 'playwright'
+        },
+        api: {
+            port: 6135
         }
     }
 });

packages/safelight/package.json

@@ -40,9 +40,9 @@
         "primevue": "^3.51.0",
         "rxjs": "^7.8.1",
         "uuid": "^9.0.1",
-        "vue": "^3.4.21",
+        "vue": "^3.4.24",
         "vue-markdown-render": "^2.1.1",
-        "vue-router": "^4.3.0"
+        "vue-router": "^4.3.2"
     },
     "devDependencies": {
         "@babel/types": "^7.24.0",
@@ -53,8 +53,8 @@
         "@types/luxon": "^3.4.2",
         "@types/node": "^20.12.7",
         "@types/uuid": "^9.0.8",
-        "@typescript-eslint/eslint-plugin": "^7.6.0",
-        "@typescript-eslint/parser": "^7.6.0",
+        "@typescript-eslint/eslint-plugin": "^7.7.0",
+        "@typescript-eslint/parser": "^7.7.0",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vue/tsconfig": "^0.5.1",
         "autoprefixer": "^10.4.19",
@@ -63,25 +63,25 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-tailwindcss": "^3.15.1",
-        "eslint-plugin-vue": "^9.24.1",
+        "eslint-plugin-vue": "^9.25.0",
         "lightningcss": "^1.24.1",
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
-        "prettier-plugin-tailwindcss": "^0.5.13",
+        "prettier-plugin-tailwindcss": "^0.5.14",
         "rollup-plugin-visualizer": "^5.12.0",
-        "sass": "^1.74.1",
+        "sass": "^1.75.0",
         "strip-ansi": "^7.1.0",
         "tailwindcss": "^3.4.3",
         "ts-node-dev": "^2.0.0",
         "tsx": "^4.7.2",
         "typescript": "^5.4.5",
-        "typescript-eslint": "^7.6.0",
+        "typescript-eslint": "^7.7.0",
         "unplugin-auto-import": "^0.17.5",
-        "unplugin-turbo-console": "^1.6.1",
+        "unplugin-turbo-console": "^1.8.3",
         "unplugin-vue-components": "^0.26.0",
-        "unplugin-vue-router": "^0.8.5",
-        "vite": "^5.2.8",
+        "unplugin-vue-router": "^0.8.6",
+        "vite": "^5.2.10",
         "vite-plugin-mkcert": "^1.17.5",
-        "vue-tsc": "^2.0.12"
+        "vue-tsc": "^2.0.14"
     }
 }

packages/shared/package.json

@@ -21,7 +21,7 @@
         "mime-matcher": "^1.0.5",
         "rxjs": "^7.8.1",
         "uuid": "^9.0.1",
-        "vue": "^3.4.21"
+        "vue": "^3.4.24"
     },
     "devDependencies": {
         "@tsconfig/node20": "^20.1.4",

packages/shared/vitest.config.ts

@@ -11,7 +11,7 @@ export default defineProject({
         ui: true,
         open: false,
         api: {
-            port: 5125
+            port: 6138
         }
     }
 });

packages/timeline/package.json

@@ -36,7 +36,7 @@
         "@vueuse/gesture": "^2.0.0",
         "@vueuse/math": "^10.9.0",
         "primevue": "^3.51.0",
-        "vue": "3.4.21"
+        "vue": "^3.4.24"
     },
     "devDependencies": {
         "@types/node": "^20.12.7",
@@ -45,8 +45,8 @@
         "@vue/tsconfig": "^0.5.1",
         "happy-dom": "^14.7.1",
         "typescript": "^5.4.5",
-        "vite": "^5.2.8",
-        "vitest": "^1.4.0",
-        "vue-tsc": "^2.0.12"
+        "vite": "^5.2.10",
+        "vitest": "^1.5.0",
+        "vue-tsc": "^2.0.14"
     }
 }

packages/timeline/tests/timelineItemRenders.test.ts

@@ -19,14 +19,16 @@ test('Timeline item renders', () => {
         }
     });
 
-    const item = wrapper.element.querySelector('.timelineItem');
+    const item = wrapper.find('.timelineItem');
     expect(item).toBeDefined();
 });
 
 test('Multiple timeline items renders', () => {
     expect(Timeline).toBeTruthy();
 
+    document.write('<app id="app"></app>');
     const wrapper = mount(Timeline, {
+        attachTo: '#app',
         props: {
             items: {
                 '1': {
@@ -54,9 +56,9 @@ test('Multiple timeline items renders', () => {
         }
     });
 
-    const item = wrapper.element.querySelectorAll<HTMLDivElement>('.timelineItem');
+    const item = wrapper.findAll<HTMLDivElement>('.timelineItem');
     expect(item).toHaveLength(3);
-    expect(item[0].style.top).toBe('-32px');
-    expect(item[1].style.top).toBe('-64px');
-    expect(item[2].style.top).toBe('-96px');
+    expect(item[0].element.style.top).toBe('-32px');
+    expect(item[1].element.style.top).toBe('-64px');
+    expect(item[2].element.style.top).toBe('-96px');
 });

packages/timeline/vitest.config.ts

@@ -9,6 +9,9 @@ export default defineProject({
         name: 'timeline',
         environment: 'happy-dom',
         ui: true,
-        open: false
+        open: false,
+        api: {
+            port: 6139
+        }
     }
 });