adding in browser tests

Author: flacoman91

.storybook/main.js

@@ -9,6 +9,7 @@ export default {
     '@storybook/addon-a11y',
     '@chromatic-com/storybook',
     '@storybook/addon-docs',
+    '@storybook/addon-vitest',
   ],
 
   docs: {
@@ -24,6 +25,12 @@ export default {
 
   async viteFinal(config, { configType }) {
     config.base = process.env.BASE_PATH || config.base;
+    if (process.env.STORYBOOK_CONFIG_DIR) {
+      config.test = {
+        ...(config.test ?? {}),
+        name: `storybook:${process.env.STORYBOOK_CONFIG_DIR}`,
+      };
+    }
 
     // Skip type declaration generation for non-dist builds
     config.plugins = config.plugins.filter(

.storybook/preview.js

@@ -35,16 +35,26 @@ export const preview = {
         ],
       },
     },
+
     actions: {},
+
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
+
     docs: {
       theme: themeCFPB,
     },
+
+    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'],

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-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]);