feat(template): add test to vue3 template

packages/cli/package.json

@@ -40,6 +40,6 @@
     "@types/fs-extra": "11.0.1",
     "@types/prompts": "2.4.2",
     "temp-dir": "3.0.0",
-    "vitest": "0.34.1"
+    "vitest": "1.0.1"
   }
 }

packages/cli/templates/react/package.json

@@ -24,13 +24,13 @@
     "@typescript-eslint/eslint-plugin": "6.1.0",
     "@typescript-eslint/parser": "6.1.0",
     "@vitejs/plugin-react": "^4.1.0",
-    "@vitest/ui": "0.34.6",
+    "@vitest/ui": "1.0.1",
     "eslint": "latest",
     "eslint-plugin-react": "7.30.0",
     "jsdom": "22.1.0",
     "typescript": "5.1.6",
     "vite": "4.5.0",
     "vite-plugin-css-injected-by-js": "3.1.0",
-    "vitest": "0.34.6"
+    "vitest": "1.0.1"
   }
 }

packages/cli/templates/vue3/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "test": "vitest",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
     "deploy": "npm run build && npx @storyblok/field-plugin-cli@latest deploy"
@@ -14,10 +15,16 @@
     "vue": "^3.2.47"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "6.1.5",
+    "@testing-library/user-event": "14.5.1",
+    "@testing-library/vue": "8.0.1",
     "@vitejs/plugin-vue": "^4.1.0",
+    "@vitest/ui": "1.0.1",
+    "jsdom": "23.0.1",
     "typescript": "5.1.6",
     "vite": "^4.2.2",
     "vite-plugin-css-injected-by-js": "3.1.0",
+    "vitest": "1.0.1",
     "vue-tsc": "1.8.6"
   }
 }

packages/cli/templates/vue3/src/components/FieldPluginExample/Counter.vue

@@ -12,7 +12,10 @@ const onClick = () => {
 <template>
   <div>
     <h2>Field Value</h2>
-    <div class="counter-value">
+    <div
+      class="counter-value"
+      data-testid="count"
+    >
       {{ props.count }}
     </div>
     <button

packages/cli/templates/vue3/src/components/FieldPluginExample/index.spec.ts

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, test, expect } from 'vitest'
+import { setupFieldPlugin } from '@storyblok/field-plugin/test'
+import { nextTick } from 'vue'
+import FieldPlugin from './index.vue'
+
+describe('FieldPluginExample', async () => {
+  test('should render the component', async () => {
+    const { cleanUp } = setupFieldPlugin()
+    render(FieldPlugin)
+    await nextTick()
+    const headline = screen.getByText('Field Value')
+    expect(headline).toBeInTheDocument()
+    cleanUp()
+  })
+
+  test('should increase the counter', async () => {
+    const { cleanUp } = setupFieldPlugin()
+    const user = userEvent.setup()
+    render(FieldPlugin)
+    await nextTick()
+    expect(screen.getByTestId('count').textContent).toEqual('0')
+    await user.click(screen.getByText('Increment'))
+    expect(screen.getByTestId('count').textContent).toEqual('1')
+    await user.click(screen.getByText('Increment'))
+    expect(screen.getByTestId('count').textContent).toEqual('2')
+    cleanUp()
+  })
+})

packages/cli/templates/vue3/src/components/FieldPluginExample/index.vue

@@ -48,4 +48,5 @@ const plugin = useFieldPlugin({
       <AssetSelector :selectAsset="plugin.actions.selectAsset" />
     </div>
   </div>
+  <div v-else>hey: {{ plugin }}</div>
 </template>

packages/cli/templates/vue3/src/setupTests.ts

@@ -0,0 +1,8 @@
+import { afterEach } from 'vitest'
+import { cleanup } from '@testing-library/vue'
+import '@testing-library/jest-dom/vitest'
+
+// runs a cleanup after each test case (e.g. clearing jsdom)
+afterEach(() => {
+  cleanup()
+})

packages/cli/templates/vue3/vite.config.ts

@@ -1,10 +1,16 @@
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 import { plugins } from '@storyblok/field-plugin/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/setupTests.ts'],
+  },
   plugins: [vue(), cssInjectedByJsPlugin(), ...plugins],
   build: {
     rollupOptions: {

packages/field-plugin/helpers/test/package.json

@@ -8,6 +8,6 @@
   },
   "dependencies": {
     "@storyblok/field-plugin": "workspace:*",
-    "vitest": "0.34.6"
+    "vitest": "1.0.1"
   }
 }