refactor: switch to vitest

CONTRIBUTING.md

@@ -84,15 +84,17 @@ pnpm run lint
 
 ### Unit tests
 
-We use [Peeky](https://peeky.dev/) to run unit tests on workspaces listed under the `packages` folder.
+We use [Vitest](https://vitest.dev/) to run unit tests on workspaces listed under the `packages` folder.
 
 For developping:
 
 ```sh
 # Root of the mono-repo
-pnpm run test:open
+pnpm run test:dev
 ```
 
+(You can also run this in specific package folders.)
+
 For running all tests in the terminal:
 
 ```sh

package.json

@@ -11,7 +11,7 @@
     "build": "pnpm run -r build",
     "watch": "pnpm run build && pnpm run -r --parallel --filter \"./packages/**\" watch",
     "test": "pnpm run -r --parallel --filter \"./packages/**\" test",
-    "test:open": "pnpm run -r --parallel --filter \"./packages/**\" test:open",
+    "test:dev": "pnpm run -r --parallel --filter \"./packages/**\" test:dev",
     "test:examples": "pnpm run -r --workspace-concurrency 1 --filter \"./examples/**\" test:examples",
     "release": "pnpm run lint && pnpm run test && pnpm run build && sheep release -b main",
     "docs:dev": "vitepress dev docs",
@@ -37,7 +37,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.17.0",
-    "floating-vue": "2.0.0-beta.24",
+    "floating-vue": "2.0.0-beta.19",
     "postcss": "^8.4.27",
     "rimraf": "^3.0.2",
     "tailwindcss": "^3.3.3",

packages/histoire-controls/package.json

@@ -36,8 +36,8 @@
     "build:types": "vue-tsc --declaration --emitDeclarationOnly",
     "watch": "concurrently \"vite build --watch\" \"pnpm run build:types --watch\"",
     "watch:full": "concurrently \"vite build --watch\" \"pnpm run build:css --watch\" \"pnpm run build:types --watch\"",
-    "test:open": "peeky open --port 5010",
-    "test": "peeky run"
+    "test": "vitest run",
+    "test:dev": "vitest"
   },
   "dependencies": {
     "@codemirror/commands": "^6.2.4",
@@ -51,21 +51,21 @@
     "@histoire/vendors": "workspace:^"
   },
   "devDependencies": {
-    "@peeky/server": "^0.14.0",
-    "@peeky/test": "^0.14.1",
     "@types/node": "^17.0.45",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/runtime-dom": "^3.3.4",
     "@vue/test-utils": "^2.4.1",
     "@vueuse/core": "^9.13.0",
     "autoprefixer": "^10.4.15",
     "concurrently": "^7.6.0",
-    "floating-vue": "2.0.0-beta.24",
+    "floating-vue": "2.0.0-beta.19",
+    "jsdom": "^22.1.0",
     "postcss": "^8.4.27",
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^4.9.5",
     "vite": "^4.4.9",
+    "vitest": "^0.34.1",
     "vue": "^3.3.4",
     "vue-tsc": "^1.8.8"
   }

packages/histoire-controls/src/components/checkbox/__snapshots__/HstCheckbox.spec.ts.snap

@@ -1,71 +1,5 @@
-// Peeky snapshots v1.0
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`HstCheckbox toggle to checked 1`] = `
-<label
-  class="histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center"
-  role="checkbox"
-  tabindex="0"
->
-  <span class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip">
-    Label
-  </span>
-  <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
-    <span class="htw-block htw-grow htw-max-w-full">
-      <div class="histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
-        <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-black/25 dark:htw-border-white/25 htw-delay-150">
-        </div>
-        <svg
-          width="16"
-          height="16"
-          viewbox="0 0 24 24"
-          class="htw-relative htw-z-10"
-        >
-          <path
-            d="m 4 12 l 5 5 l 10 -10"
-            fill="none"
-            class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none"
-            stroke-dasharray="21.21"
-            stroke-dashoffset="21.21"
-          >
-          </path>
-        </svg>
-      </div>
-    </span>
-  </span>
-</label>
-`;
+exports[`HstCheckbox > toggle to checked 1`] = `"<label class=\\"histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center\\" role=\\"checkbox\\" tabindex=\\"0\\"><span class=\\"htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip\\">Label</span><span class=\\"htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1\\"><span class=\\"htw-block htw-grow htw-max-w-full\\"><div class=\\"histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative\\"><div class=\\"htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-black/25 dark:htw-border-white/25 htw-delay-150\\"></div><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 24 24\\" class=\\"htw-relative htw-z-10\\"><path d=\\"m 4 12 l 5 5 l 10 -10\\" fill=\\"none\\" class=\\"htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none\\" stroke-dasharray=\\"21.21\\" stroke-dashoffset=\\"21.21\\"></path></svg></div></span></span></label>"`;
 
-exports[`HstCheckbox toggle to unchecked 1`] = `
-<label
-  class="histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center"
-  role="checkbox"
-  tabindex="0"
->
-  <span class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip">
-    Label
-  </span>
-  <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
-    <span class="htw-block htw-grow htw-max-w-full">
-      <div class="histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
-        <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-primary-500 htw-border-8">
-        </div>
-        <svg
-          width="16"
-          height="16"
-          viewbox="0 0 24 24"
-          class="htw-relative htw-z-10"
-        >
-          <path
-            d="m 4 12 l 5 5 l 10 -10"
-            fill="none"
-            class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none htw-delay-150"
-            stroke-dasharray="21.21"
-            stroke-dashoffset="0"
-          >
-          </path>
-        </svg>
-      </div>
-    </span>
-  </span>
-</label>
-`;
+exports[`HstCheckbox > toggle to unchecked 1`] = `"<label class=\\"histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap histoire-checkbox htw-cursor-pointer htw-items-center\\" role=\\"checkbox\\" tabindex=\\"0\\"><span class=\\"htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip\\">Label</span><span class=\\"htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1\\"><span class=\\"htw-block htw-grow htw-max-w-full\\"><div class=\\"histoire-simple-checkbox htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative\\"><div class=\\"htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-primary-500 htw-border-8\\"></div><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 24 24\\" class=\\"htw-relative htw-z-10\\"><path d=\\"m 4 12 l 5 5 l 10 -10\\" fill=\\"none\\" class=\\"htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-none htw-delay-150\\" stroke-dasharray=\\"21.21\\" stroke-dashoffset=\\"0\\"></path></svg></div></span></span></label>"`;

packages/histoire-controls/tsconfig.json

@@ -12,8 +12,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "types": [
-      "node",
-      "@peeky/test"
+      "node"
     ],
     "lib": [
       "ESNext",

packages/histoire-controls/vite.config.ts

@@ -1,3 +1,5 @@
+/// <reference types="vitest" />
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
@@ -6,15 +8,17 @@ export default defineConfig({
     vue(),
   ],
   resolve: {
-    alias: {
-      'floating-vue': '@histoire/vendors/floating-vue',
-      '@iconify/vue': '@histoire/vendors/iconify',
-      pinia: '@histoire/vendors/pinia',
-      'scroll-into-view-if-needed': '@histoire/vendors/scroll',
-      'vue-router': '@histoire/vendors/vue-router',
-      '@vueuse/core': '@histoire/vendors/vue-use',
-      vue: '@histoire/vendors/vue',
-    },
+    alias: process.env.VITEST
+      ? {}
+      : {
+        'floating-vue': '@histoire/vendors/floating-vue',
+        '@iconify/vue': '@histoire/vendors/iconify',
+        pinia: '@histoire/vendors/pinia',
+        'scroll-into-view-if-needed': '@histoire/vendors/scroll',
+        'vue-router': '@histoire/vendors/vue-router',
+        '@vueuse/core': '@histoire/vendors/vue-use',
+        vue: '@histoire/vendors/vue',
+      },
   },
 
   build: {
@@ -34,4 +38,9 @@ export default defineConfig({
       ],
     },
   },
+
+  test: {
+    environment: 'jsdom',
+    globals: true,
+  },
 })

packages/histoire-vendors/tsconfig.json

@@ -11,8 +11,7 @@
     "skipLibCheck": true,
     "declaration": true,
     "types": [
-      "node",
-      "@peeky/test"
+      "node"
     ],
     "lib": [
       "ESNext",

packages/histoire/package.json

@@ -39,8 +39,8 @@
   "scripts": {
     "build": "rimraf dist && tsc -d",
     "watch": "tsc -d -w --sourceMap",
-    "test:open": "peeky open",
-    "test": "peeky run"
+    "test": "vitest run",
+    "test:dev": "vitest"
   },
   "dependencies": {
     "@akryum/tinypool": "^0.3.1",
@@ -79,15 +79,14 @@
     "vite": "^2.9.0 || ^3.0.0 || ^4.0.0"
   },
   "devDependencies": {
-    "@peeky/server": "^0.14.0",
-    "@peeky/test": "^0.14.1",
     "@types/fs-extra": "^9.0.13",
     "@types/markdown-it": "^12.2.3",
     "@types/micromatch": "^4.0.2",
     "@types/node": "^17.0.45",
     "esbuild": "^0.18.20",
     "rollup": "^3.28.0",
     "typescript": "^4.9.5",
-    "vite": "^4.4.9"
+    "vite": "^4.4.9",
+    "vitest": "^0.34.1"
   }
 }

packages/histoire/src/node/tree.spec.ts

@@ -1,4 +1,4 @@
-import { describe, test, expect } from '@peeky/test'
+import { describe, test, expect } from 'vitest'
 import { makeTree } from './tree'
 import { getDefaultConfig } from './config'
 import type { StoryFile } from './types'

packages/histoire/tsconfig.json

@@ -12,8 +12,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "types": [
-      "node",
-      "@peeky/test"
+      "node"
     ],
     "lib": [
       "ESNext",