Merge pull request #1236 from dnum-mi/1235-tech-use-vitest-addon

chore: 📝 utilise le addon vitest pour storybook

Author: laruiss

.github/workflows/run-tests.yml

@@ -34,6 +34,8 @@ jobs:
         run: pnpm lint --quiet
       - name: Check exports
         run: pnpm check-exports-ci
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium
       - name: Test
         run: pnpm test
       # - name: Build Storybook

.storybook/main.ts

@@ -1,5 +1,7 @@
 import type { StorybookConfig } from '@storybook/vue3-vite'
 
+import vue from '@vitejs/plugin-vue'
+
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
@@ -8,6 +10,7 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
     '@chromatic-com/storybook',
     '@storybook/addon-docs',
+    '@storybook/addon-vitest',
   ],
   framework: {
     name: '@storybook/vue3-vite',
@@ -17,5 +20,15 @@ const config: StorybookConfig = {
   },
   docs: {},
   staticDirs: ['../public'],
+  async viteFinal (config) {
+    // Remplacer le plugin Vue pour désactiver decodeEntities en mode non-navigateur
+    const vuePluginIndex = config.plugins?.findIndex(
+      (p: any) => p?.name === 'vite:vue',
+    )
+    if (vuePluginIndex !== undefined && vuePluginIndex >= 0) {
+      config.plugins![vuePluginIndex] = vue({})
+    }
+    return config
+  },
 }
 export default config

.storybook/preview.ts

@@ -9,14 +9,12 @@ import VIcon from '../src/components/VIcon/VIcon.vue'
 
 import VueDsfrTheme from './vue-dsfr-theme.js'
 import '../src/assets/variables-fdr.css'
+import '../src/main.css'
 import '@gouvfr/dsfr/dist/core/core.main.min.css'
 import '@gouvfr/dsfr/dist/scheme/scheme.min.css'
 import '@gouvfr/dsfr/dist/component/component.main.min.css'
 import '@gouvfr/dsfr/dist/utility/utility.main.min.css'
 import '@gouvfr/dsfr/dist/utility/icons/icons.main.min.css'
-
-import '../src/main.css'
-
 import './theme.css'
 // import '@gouvfr/dsfr/dist/core/core.min.css'
 
@@ -25,15 +23,18 @@ const preview: Preview = {
     backgrounds: {
       disabled: true,
     },
+
     docs: {
       theme: { ...themes.normal, ...VueDsfrTheme },
     },
+
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+
     viewport: {
       options: {
         DSFR_XS: {
@@ -73,17 +74,20 @@ const preview: Preview = {
         },
       },
     },
+
     options: {
       storySort: {
         method: 'alphabetical',
-        order: [
-          'Docs',
-          'Fondamentaux',
-          'Composables',
-          'Composants',
-        ],
+        order: ['Docs', 'Fondamentaux', 'Composables', 'Composants'],
       },
     },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+    },
   },
 
   tags: ['autodocs'],
@@ -108,7 +112,9 @@ const preview: Preview = {
   },
   decorators: [
     (story, context) => {
-      const selectedTheme = context.globals.theme.includes('clair') ? 'light' : 'dark'
+      const selectedTheme = context.globals.theme.includes('clair')
+        ? 'light'
+        : 'dark'
       document.documentElement.setAttribute('data-fr-theme', selectedTheme)
       return story()
     },
@@ -125,7 +131,7 @@ const RouterLink = defineComponent({
   `,
 })
 
-setup(app => {
+setup((app) => {
   app.component('RouterLink', RouterLink)
   app.component('VIcon', VIcon)
   app.component('FocusTrap', FocusTrap)

.storybook/vitest.setup.ts

@@ -0,0 +1,8 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview'
+import { setProjectAnnotations } from '@storybook/vue3-vite'
+
+import * as projectAnnotations from './preview'
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations])

docs/guide/migrations.md

@@ -98,8 +98,9 @@ Si vous importiez vous-même `OhVueIcon` de `oh-vue-icons` dans certains composa
 
 ```vue
 <script lang="ts" setup>
-import { VIcon } from '@gouvminint/vue-dsfr' // [!code ++]
 import { OhVueIcon as VIcon } from 'oh-vue-icons' // [!code --]
+
+import { VIcon } from '@gouvminint/vue-dsfr' // [!code ++]
 </script>
 ```
 

eslint.config.js

@@ -97,4 +97,10 @@ export default antfu({
       'antfu/no-top-level-await': 'off',
     },
   },
+  {
+    files: ['**/*.md', '**/*.md/**'],
+    rules: {
+      'import-x/order': 'off',
+    },
+  },
 ])

package.json

@@ -66,6 +66,7 @@
     "test": "run-s test:unit",
     "test:watch": "vitest",
     "test:unit": "vitest run",
+    "test:storybook": "vitest --project=storybook",
     "format": "eslint . --fix",
     "lint": "eslint .",
     "lint:staged": "eslint ",
@@ -108,6 +109,7 @@
     "@storybook/addon-docs": "^10.1.0",
     "@storybook/addon-links": "^10.1.0",
     "@storybook/addon-themes": "^10.1.0",
+    "@storybook/addon-vitest": "^10.1.4",
     "@storybook/test-runner": "^0.24.2",
     "@storybook/vue3-vite": "^10.1.0",
     "@testing-library/dom": "^10.4.1",
@@ -118,6 +120,8 @@
     "@types/node": "^22.19.1",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitejs/plugin-vue-jsx": "^4.2.0",
+    "@vitest/browser-playwright": "^4.0.14",
+    "@vitest/coverage-v8": "^4.0.14",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
     "@vueuse/core": "^12.8.2",
@@ -142,6 +146,7 @@
     "lint-staged": "^15.5.2",
     "npm-run-all": "^4.1.5",
     "p-debounce": "^5.1.0",
+    "playwright": "^1.57.0",
     "pnpm": "^10.24.0",
     "publint": "^0.3.15",
     "regenerator-runtime": "^0.14.1",
@@ -151,11 +156,11 @@
     "storybook": "^10.1.0",
     "typescript": "~5.9.3",
     "unplugin-lightningcss": "^0.3.3",
-    "vite": "^6.4.1",
+    "vite": "npm:[email protected]",
     "vite-node": "^3.2.4",
     "vite-plugin-full-reload": "^1.2.0",
     "vitepress": "^1.6.4",
-    "vitest": "^4.0.14",
+    "vitest": "^4.0.15",
     "vue-demi": "^0.14.10",
     "vue-tsc": "^2.2.12"
   },