-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
726 additions
and
383 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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() | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'], | ||
| }, | ||
| }) | ||
| ) | ||
| }, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'], | ||
| }, | ||
| }, | ||
| ]); |
Oops, something went wrong.