add webdriverio tests

.storybook/decorators.tsx

@@ -7,7 +7,7 @@ import styled, { css, ThemeProvider } from 'styled-components'
 import { Decorator } from '@storybook/react'
 import { configureStore } from '@reduxjs/toolkit'
 import { Provider as StoreProvider } from 'react-redux'
-import { initialize, mswDecorator } from 'msw-storybook-addon'
+import { initialize } from 'msw-storybook-addon'
 
 import { rootReducer } from '../src/app-state'
 import { breakpoints } from '../src/styles/breakpoints'
@@ -154,4 +154,4 @@ export const withRouter: Decorator = (StoryFn, { parameters: { deeplink } }) =>
 }
 
 // ordered from innermost to outermost, be careful with the order!
-export const globalDecorators = [withRouter, withTheme, withStore, mswDecorator]
+export const globalDecorators = [withRouter, withTheme, withStore]

.storybook/preview.tsx

@@ -6,6 +6,7 @@ import { viewports as breakpoints } from '../src/styles/breakpoints'
 import { DocsContainer, DocsContainerProps } from '@storybook/blocks'
 import { ThemeProvider } from 'styled-components'
 import { lightTheme } from '../src/styles/theme'
+import { mswLoader } from 'msw-storybook-addon'
 
 // Create custom viewports using widths defined in design tokens
 const breakpointViewports = Object.keys(breakpoints).reduce((acc, key) => {
@@ -63,5 +64,6 @@ const preview: Preview = {
     },
   },
   decorators: globalDecorators,
+  loaders: [mswLoader]
 }
 export default preview

package.json

@@ -123,7 +123,8 @@
     "vitest": "^1.5.2",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.3.3",
-    "wait-on": "^7.2.0"
+    "wait-on": "^7.2.0",
+    "webdriverio": "^8.36.1"
   },
   "resolutions": {
     "@types/react": "^17.0.2",

vitest.browser.config.ts

@@ -4,15 +4,17 @@ import { mergeConfig } from 'vite'
 
 import viteConfig from './vite.config'
 
+const USE_WEBDRIVERIO = process.env.USE_WEBDRIVERIO === 'true'
+
 // https://vitejs.dev/config/
 export default mergeConfig(
   viteConfig,
   defineConfig({
     test: {
       browser: {
         enabled: true,
-        name: 'chromium',
-        provider: 'playwright',
+        name: USE_WEBDRIVERIO ? 'chrome' : 'chromium',
+        provider: USE_WEBDRIVERIO ? 'webdriverio' : 'playwright',
       },
       globals: true,
       clearMocks: true,

vitest.node.config.ts

@@ -4,8 +4,6 @@ import { mergeConfig } from 'vite'
 
 import viteConfig from './vite.config'
 
-console.log('opa')
-
 // https://vitejs.dev/config/
 export default mergeConfig(
   viteConfig,

vitest.workspace.config.ts

@@ -1,18 +1,23 @@
 import { defineWorkspace } from 'vitest/config'
 
-const getBrowserConfig = (name: 'chromium' | 'firefox' | 'webkit') => ({
+const USE_WEBDRIVERIO = process.env.USE_WEBDRIVERIO === 'true'
+
+const getBrowserConfig = (name: string) => ({
   extends: './vitest.browser.config.ts',
   test: {
     browser: {
       enabled: true,
       name,
-      provider: 'playwright',
+      provider: USE_WEBDRIVERIO ? 'webdriverio' : 'playwright',
     },
     globals: true,
     clearMocks: true,
     setupFiles: './src/setupTests.browser.ts',
   },
 })
 
-const browsers = ['chromium', 'webkit', 'firefox'] as const
+const browsers = USE_WEBDRIVERIO
+  ? ['chrome', 'firefox', 'safari']
+  : ['chromium', 'firefox', 'webkit']
+
 export default defineWorkspace(browsers.map(getBrowserConfig))