chore: use vitest workspaces (scalar#977)

* chore: use vitest workspaces

* chore: update modal test to be more robust

* chore: add vitest extension and configuration for debugging

---------

Co-authored-by: Brynn Hawker <brynn@hawker.me>

.github/workflows/ci.yml

@@ -34,7 +34,7 @@ jobs:
       - name: Check types
         run: pnpm turbo types:check
       - name: Run tests
-        run: pnpm turbo test
+        run: pnpm test
       - if: matrix.node-version == 20
         name: Send bundle stats and build information to RelativeCI
         uses: relative-ci/agent-action@v2

.vscode/extensions.json

@@ -5,6 +5,7 @@
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "bradlc.vscode-tailwindcss",
-    "cpylua.language-postcss"
+    "cpylua.language-postcss",
+    "zixuanchen.vitest-explorer"
   ]
 }

.vscode/settings.json

@@ -51,5 +51,7 @@
   "tailwindCSS.experimental.configFile": {
     "packages/components/tailwind.config.ts": "packages/components/**"
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vitest.commandLine": "pnpm vitest",
+  "vitest.enable": true
 }

package.json

@@ -20,7 +20,9 @@
     "turbo": "^1.10.15",
     "typescript": "^5.2.2",
     "vite-node": "^0.34.4",
-    "vue-eslint-parser": "^9.3.1"
+    "vue-eslint-parser": "^9.3.1",
+    "@vitest/coverage-v8": "^0.34.4",
+    "vitest": "^0.34.4"
   },
   "pnpm": {
     "patchedDependencies": {
@@ -44,7 +46,7 @@
     "lint": "pnpm -r lint:check",
     "lint:fix": "pnpm -r lint:fix",
     "preview:standalone": "pnpm --filter api-reference preview:standalone",
-    "test": "pnpm -r test",
+    "test": "vitest",
     "types:check": "pnpm -r types:check"
   }
 }

packages/components/src/components/ScalarModal/ScalarModal.spec.ts

@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest'
 
 import ScalarModal, { useModal } from './ScalarModal.vue'
 
-describe('ScalarIconButton', () => {
+describe('ScalarModal', () => {
   it('renders properly', async () => {
     const state = useModal()
     const wrapper = mount(ScalarModal, {
@@ -12,13 +12,16 @@ describe('ScalarIconButton', () => {
       },
     })
 
-    // Wait for icon to load
+    // Wait for modal to load
     await flushPromises()
 
-    expect(wrapper.html()).toBe(
-      `<!--teleport start-->
-<!--teleport end-->
-<div style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"></div>`,
+    // Grab the first child div
+    const el = wrapper.find('*').element as HTMLElement
+
+    // Check some of the attributes
+    expect(el.nodeName.toLowerCase()).toBe('div')
+    expect(el.style.cssText).toBe(
+      'position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;',
     )
   })
 })

packages/swagger-parser/src/helpers/parse.test.ts

@@ -55,7 +55,9 @@ describe('parse', () => {
 
   it('reads yaml', () =>
     new Promise((resolve) => {
-      const swaggerYaml = getFile('./tests/fixtures/swagger.yaml')
+      const swaggerYaml = getFile(
+        './packages/swagger-parser/tests/fixtures/swagger.yaml',
+      )
 
       parse(swaggerYaml).then((result) => {
         expect(result.info.title).toBe('Sample API')

turbo.json

@@ -8,9 +8,6 @@
     },
     "types:check": {
       "dependsOn": ["^build"]
-    },
-    "test": {
-      "dependsOn": ["^build"]
     }
   }
 }

vitest.workspace.ts

@@ -0,0 +1 @@
+export default ['packages/*']