Configure all tests

.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react';
+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
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

package.json

@@ -57,25 +57,25 @@
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
-    "@chromatic-com/storybook": "1.6.2--canary.df0b83c.0",
-    "@ladle/react": "^4.0.3",
-    "@storybook/addon-a11y": "^8.3.0-alpha.9",
+    "@chromatic-com/storybook": "^2.0.2",
+    "@ladle/react": "^4.1.2",
+    "@storybook/addon-a11y": "^8.3.0",
     "@storybook/addon-coverage": "^1.0.4",
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.3.0-alpha.9",
-    "@storybook/addon-interactions": "^8.3.0-alpha.9",
-    "@storybook/addon-themes": "^8.3.0-alpha.9",
-    "@storybook/blocks": "^8.3.0-alpha.9",
-    "@storybook/experimental-addon-vitest": "^8.3.0-alpha.9",
-    "@storybook/experimental-vitest-plugin": "^0.0.4",
-    "@storybook/manager-api": "^8.3.0-alpha.9",
-    "@storybook/react": "^8.3.0-alpha.9",
-    "@storybook/react-vite": "^8.3.0-alpha.9",
-    "@storybook/test": "^8.3.0-alpha.9",
-    "@storybook/test-runner": "^0.19.0",
-    "@storybook/theming": "^8.3.0-alpha.9",
+    "@storybook/addon-essentials": "^8.3.0",
+    "@storybook/addon-interactions": "^8.3.0",
+    "@storybook/addon-themes": "^8.3.0",
+    "@storybook/blocks": "^8.3.0",
+    "@storybook/experimental-addon-test": "^8.3.0",
+    "@storybook/manager-api": "^8.3.0",
+    "@storybook/react": "^8.3.0",
+    "@storybook/react-vite": "^8.3.0",
+    "@storybook/test": "^8.3.0",
+    "@storybook/test-runner": "^0.19.1",
+    "@storybook/theming": "^8.3.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.12.7",
     "@types/react": "^18.3.1",
@@ -88,13 +88,13 @@
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/browser": "^2.0.5",
-    "@vitest/coverage-istanbul": "^2.0.5",
+    "@vitest/browser": "^2.1.2",
+    "@vitest/coverage-v8": "^2.1.2",
     "babel-loader": "8.1.0",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-open-source": "^1.3.3",
     "c8": "^7.12.0",
-    "chromatic": "^11.3.0",
+    "chromatic": "^11.12.5",
     "concurrently": "^8.2.2",
     "eslint": "^8.27.0",
     "eslint-config-airbnb-typescript": "^18.0.0",
@@ -116,11 +116,11 @@
     "prettier": "^3.2.5",
     "react-is": "^18.3.1",
     "react-test-renderer": "^18.3.1",
-    "storybook": "^8.3.0-alpha.9",
+    "storybook": "^8.3.0",
     "vite": "^4.0.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^2.0.5",
+    "vitest": "^2.1.2",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.3.3",
     "wait-on": "^7.2.0"

ps-setup.ts

@@ -0,0 +1,17 @@
+if(!globalThis.__vitest_browser__) {
+  await import('vitest-canvas-mock')
+  const { getComputedStyle } = window
+  window.getComputedStyle = (elt) => getComputedStyle(elt)
+  window.scrollTo = () => {}
+}
+
+import { beforeAll, expect } from 'vitest'
+import { setProjectAnnotations } from '@storybook/react'
+import { render as testingLibraryRender } from '@testing-library/react'
+import storybookAnnotations from './.storybook/preview'
+import '@testing-library/jest-dom/vitest'
+import * as matchers from 'vitest-axe/matchers'
+expect.extend(matchers);
+
+const annotations = setProjectAnnotations([storybookAnnotations, {testingLibraryRender}])
+beforeAll(annotations.beforeAll)

public/mockServiceWorker.js

@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.4'
+const PACKAGE_VERSION = '2.4.9'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

src/components/RestaurantCard/RestaurantCard.test.tsx

@@ -1,4 +1,4 @@
-import { vi, expect } from 'vitest'
+import { vi, expect, describe, test } from 'vitest'
 import { screen } from '@testing-library/react'
 import { composeStories } from '@storybook/react'
 import { axe } from 'vitest-axe'

src/hooks/useBodyScrollLock.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { renderHook } from '@testing-library/react-hooks'
+import { useLockBodyScroll } from './useBodyScrollLock'
+
+describe('useLockBodyScroll hook', () => {
+  afterEach(() => {
+    document.body.style.overflow = ''
+    document.body.style.height = ''
+  })
+
+  it('should not lock the body scroll when shouldLock is false', () => {
+    renderHook(() => useLockBodyScroll(false))
+
+    expect(document.body.style.overflow).toBe('auto')
+    expect(document.body.style.height).toBe('')
+  })
+
+  it('should lock the body scroll when shouldLock is true', () => {
+    renderHook(() => useLockBodyScroll(true))
+
+    expect(document.body.style.overflow).toBe('hidden')
+    if (/Mobi/i.test(window.navigator.userAgent)) {
+      expect(document.body.style.height).toBe('100vh')
+    } else {
+      expect(document.body.style.height).toBe('')
+    }
+  })
+
+  it('should unlock the body scroll when the component unmounts', () => {
+    const { unmount } = renderHook(() => useLockBodyScroll(true))
+
+    unmount()
+
+    expect(document.body.style.overflow).toBe('auto')
+    expect(document.body.style.height).toBe('')
+  })
+
+  it('should update the body scroll lock state when shouldLock changes', () => {
+    const { rerender } = renderHook(({ shouldLock }) => useLockBodyScroll(shouldLock), {
+      initialProps: { shouldLock: false },
+    })
+
+    rerender({ shouldLock: true })
+    expect(document.body.style.overflow).toBe('hidden')
+
+    rerender({ shouldLock: false })
+    expect(document.body.style.overflow).toBe('auto')
+  })
+})

src/hooks/useKeyboard.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, vi, expect } from 'vitest'
+import { renderHook, act } from '@testing-library/react-hooks'
+import { useKey } from './useKeyboard'
+
+describe('useKey hook', () => {
+  it('should return false initially', () => {
+    const { result } = renderHook(() => useKey('a'))
+    expect(result.current).toBe(false)
+  })
+
+  it('should call keyDownCb when the specified key is pressed', () => {
+    const keyDownCb = vi.fn()
+    const { result } = renderHook(() => useKey('a', keyDownCb))
+
+    act(() => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' }))
+    })
+
+    expect(result.current).toBe(true)
+    expect(keyDownCb).toHaveBeenCalled()
+  })
+
+  it('should call keyUpCb when the specified key is released', () => {
+    const keyUpCb = vi.fn()
+    const { result } = renderHook(() => useKey('a', undefined, keyUpCb))
+
+    act(() => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' }))
+      window.dispatchEvent(new KeyboardEvent('keyup', { key: 'a' }))
+    })
+
+    expect(result.current).toBe(false)
+    expect(keyUpCb).toHaveBeenCalled()
+  })
+
+  it('should not change state for non-matching key events', () => {
+    const { result } = renderHook(() => useKey('a'))
+
+    act(() => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'b' }))
+      window.dispatchEvent(new KeyboardEvent('keyup', { key: 'b' }))
+    })
+
+    expect(result.current).toBe(false)
+  })
+
+  it('should handle case-insensitive key events', () => {
+    const keyDownCb = vi.fn()
+    const keyUpCb = vi.fn()
+    const { result } = renderHook(() => useKey('a', keyDownCb, keyUpCb))
+
+    act(() => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'A' }))
+    })
+
+    expect(result.current).toBe(true)
+    expect(keyDownCb).toHaveBeenCalled()
+
+    act(() => {
+      window.dispatchEvent(new KeyboardEvent('keyup', { key: 'A' }))
+    })
+
+    expect(result.current).toBe(false)
+    expect(keyUpCb).toHaveBeenCalled()
+  })
+})

src/pages/RestaurantDetailPage/RestaurantDetailPage.test.tsx

@@ -1,3 +1,4 @@
+import { describe, test, expect } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
 import { composeStories } from '@storybook/react'
@@ -34,6 +35,13 @@ describe('RestaurantDetailPage', () => {
   test('Should execute story tests', async () => {
     await WithModalOpen.run()
   })
+
+  test('Should add an item to cart (using render - LEGACY)', async () => {
+    await WithModalOpen.load()
+    const canvas = render(<WithModalOpen />)
+
+    await WithModalOpen.play?.({ canvas, userEvent } as any)
+  })
 })
 
 // If we were to not use @storyboook/testing-react:

vitest.config.ts

@@ -1,41 +1,15 @@
-/// <reference types="vitest" />
-import { defineConfig, coverageConfigDefaults } from 'vitest/config'
-import { mergeConfig } from 'vite'
-import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'
 
+import { mergeConfig, coverageConfigDefaults } from 'vitest/config'
 import viteConfig from './vite.config'
 
-// https://vitejs.dev/config/
-export default mergeConfig(
-  viteConfig,
-  defineConfig({
-    plugins: [
-      storybookTest({
-        storybookScript: 'yarn storybook --ci'
-      }),
-    ],
-    publicDir: './public',
-    test: {
-      environment: 'happy-dom',
-      setupFiles: './storybook.setup.ts',
-      include: ['src/**/*.stories.*'],
-      server: {
-        deps: {
-          inline: ['vitest-canvas-mock'],
-        },
-      },
-      browser: {
-        enabled: true,
-        provider: 'playwright',
-        name: 'chromium',
-        headless: true,
-        screenshotFailures: false,
-      },
-      coverage: {
-        provider: 'istanbul',
-        reporter: ['text', 'html'],
-        exclude: [...coverageConfigDefaults.exclude, 'storybook.setup.ts', 'src/**/*.stories.*', '.storybook'],
-      },
+export default mergeConfig(viteConfig,{
+  test: {
+    environment: 'happy-dom',
+    include: ['**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'html'],
+      exclude: [...coverageConfigDefaults.exclude, 'storybook.setup.ts', 'src/**/*.stories.*', '.storybook'],
     },
-  })
-)
+  },
+})

vitest.workspace.ts

@@ -0,0 +1,37 @@
+import { defineWorkspace } from 'vitest/config';
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+
+
+// More info at: https://storybook.js.org/docs/writing-tests/vitest-plugin
+export default defineWorkspace([
+  'vitest.config.ts',
+  {
+    extends: 'vite.config.ts',
+    plugins: [
+      // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
+      storybookTest(),
+    ],
+    test: {
+      name: 'storybook',
+      browser: {
+        enabled: true,
+        headless: true,
+        name: 'chromium',
+        provider: 'playwright',
+      },
+      // Make sure to adjust this pattern to match your stories files.
+      include: ['**/*.stories.?(m)[jt]s?(x)'],
+      setupFiles: ['./.storybook/vitest.setup.ts'],
+    },
+  },
+  // This is just to test legacy code, ignore this.
+  {
+    extends: 'vite.config.ts',
+    test: {
+      name: 'portable-stories',
+      environment: 'happy-dom',
+      include: ['**/*.test.tsx'],
+      setupFiles: ['./ps-setup.ts'],
+    },
+  },
+]);