docs: fix stories and tests failing in Chromatic with new Storybook 8

snowball-tech · Mar 12, 2024 · 2a9d05c · 2a9d05c
1 parent c783adf
commit 2a9d05c
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 15 deletions.
diff --git a/packages/fractal/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/fractal/src/components/Autocomplete/Autocomplete.stories.tsx
@@ -7,7 +7,13 @@ import SearchIcon from '@iconscout/react-unicons/dist/icons/uil-search-alt'
 import { action } from '@storybook/addon-actions'
 import { useArgs } from '@storybook/preview-api'
 import type { Meta, StoryObj } from '@storybook/react'
-import { userEvent, waitForElementToBeRemoved, within } from '@storybook/test'
+import {
+ fn,
+ userEvent,
+ waitFor,
+ waitForElementToBeRemoved,
+ within,
+} from '@storybook/test'
 import isChromatic from 'chromatic/isChromatic'
 // eslint-disable-next-line lodash-fp/use-fp
 import debounce from 'lodash/debounce'
@@ -32,6 +38,8 @@ import Autocomplete from './Autocomplete'
 import AutocompleteEmpty from './AutocompleteEmpty'
 import AutocompleteLoading from './AutocompleteLoading'
 
+const EMPTY_SEARCH = 'pzgvf'
+
 type AutocompleteProps = ComponentProps<typeof Autocomplete>
 
 function asItem(list: Array<string>, withDisabled = false): ReactNode {
@@ -107,7 +115,10 @@ const debouncedLoad = debounce((newValue: string, setArgs, onSelect) => {
  const { results: characters } = (await charactersResponse?.json()) ?? {}
  const { results: planets } = (await planetsResponse?.json()) ?? {}
 
- if (isEmpty(characters) && isEmpty(planets)) {
+ if (
+ (isEmpty(characters) && isEmpty(planets)) ||
+ newValue === EMPTY_SEARCH
+ ) {
  setArgs({
  children: (
  <AutocompleteEmpty>
@@ -345,9 +356,15 @@ type Story = StoryObj<typeof meta>
 export const Playground: Story = {
  args: { value: '' },
 }
-
 export const InteractiveSearching: Story = {
- args: { value: '' },
+ args: {
+ onChange: fn(),
+ onClick: fn(),
+ onClose: fn(),
+ onInputChange: fn(),
+ onOpen: fn(),
+ value: '',
+ },
  play: async ({ canvasElement }) => {
  const canvas = within(canvasElement)
  const body = within(canvasElement.ownerDocument.body)
@@ -360,12 +377,21 @@ export const InteractiveSearching: Story = {
  delay: 100,
  })
 
- await body.getByText(/loading star wars/i)
+ await waitFor(() => body.getByText(/loading star wars/i), {
+ timeout: 10000,
+ })
  },
 }
 
 export const InteractiveSearch: Story = {
- args: { value: '' },
+ args: {
+ onChange: fn(),
+ onClick: fn(),
+ onClose: fn(),
+ onInputChange: fn(),
+ onOpen: fn(),
+ value: '',
+ },
  play: async ({ canvasElement }) => {
  const canvas = within(canvasElement)
  const body = within(canvasElement.ownerDocument.body)
@@ -378,6 +404,10 @@ export const InteractiveSearch: Story = {
  delay: 100,
  })
 
+ await waitFor(() => body.getByText(/loading star wars/i), {
+ timeout: 10000,
+ })
+
  const loader = await body.getByText(/loading star wars/i)
  await waitForElementToBeRemoved(loader, { timeout: 30000 })
 
@@ -403,7 +433,14 @@ export const InteractiveSearch: Story = {
 }
 
 export const InteractiveSearchAndSelect: Story = {
- args: { value: '' },
+ args: {
+ onChange: fn(),
+ onClick: fn(),
+ onClose: fn(),
+ onInputChange: fn(),
+ onOpen: fn(),
+ value: '',
+ },
  play: async ({ canvasElement }) => {
  const canvas = within(canvasElement)
  const body = within(canvasElement.ownerDocument.body)
@@ -416,6 +453,10 @@ export const InteractiveSearchAndSelect: Story = {
  delay: 100,
  })
 
+ await waitFor(() => body.getByText(/loading star wars/i), {
+ timeout: 10000,
+ })
+
  const loader = await body.getByText(/loading star wars/i)
  await waitForElementToBeRemoved(loader, { timeout: 30000 })
 
@@ -431,7 +472,14 @@ export const InteractiveSearchAndSelect: Story = {
 }
 
 export const InteractiveEmptySearch: Story = {
- args: { value: '' },
+ args: {
+ onChange: fn(),
+ onClick: fn(),
+ onClose: fn(),
+ onInputChange: fn(),
+ onOpen: fn(),
+ value: '',
+ },
  play: async ({ canvasElement }) => {
  const canvas = within(canvasElement)
  const body = within(canvasElement.ownerDocument.body)
@@ -440,7 +488,11 @@ export const InteractiveEmptySearch: Story = {
  await userEvent.click(input)
 
  await sleep(500)
- await userEvent.type(input, 'pzgvf')
+ await userEvent.type(input, EMPTY_SEARCH)
+
+ await waitFor(() => body.getByText(/loading star wars/i), {
+ timeout: 10000,
+ })
 
  const loader = await body.getByText(/loading star wars/i)
  await waitForElementToBeRemoved(loader, { timeout: 30000 })

diff --git a/packages/fractal/src/components/Select/Select.stories.tsx b/packages/fractal/src/components/Select/Select.stories.tsx
@@ -1,6 +1,6 @@
 import { useArgs } from '@storybook/preview-api'
 import type { Meta, StoryObj } from '@storybook/react'
-import { userEvent, within } from '@storybook/test'
+import { fn, userEvent, within } from '@storybook/test'
 import isChromatic from 'chromatic/isChromatic'
 import kebabCase from 'lodash/fp/kebabCase'
 import type { ComponentProps, ReactNode } from 'react'
@@ -158,8 +158,12 @@ export const InteractiveOpen: Story = {
  await userEvent.hover(body.getByLabelText(/c3po/i))
  },
 }
-
 export const InteractiveSelected: Story = {
+ args: {
+ onClose: fn(),
+ onOpen: fn(),
+ onSelect: fn(),
+ },
  play: async ({ canvasElement }) => {
  const canvas = within(canvasElement)
  const body = within(canvasElement.ownerDocument.body)

diff --git a/packages/fractal/src/components/Switch/Switch.stories.tsx b/packages/fractal/src/components/Switch/Switch.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { userEvent, within } from '@storybook/test'
+import { fn, userEvent, within } from '@storybook/test'
 import type { ComponentProps, ReactNode } from 'react'
 
 import { sleep } from '@/utils'
@@ -50,10 +50,13 @@ type Story = StoryObj<typeof meta>
 export const Playground: Story = {}
 
 export const Interactive: Story = {
+ args: {
+ onToggle: fn(),
+ },
  play: async ({ canvasElement }) => {
  const canvas = within(canvasElement)
 
- const switchButton = canvas.getByLabelText(/chewie/i)
+ const switchButton = canvas.getByLabelText(/single label/i)
 
  await userEvent.hover(switchButton)
  await sleep(500)

diff --git a/packages/fractal/src/components/Textarea/Textarea.stories.tsx b/packages/fractal/src/components/Textarea/Textarea.stories.tsx
@@ -6,7 +6,7 @@ import SearchIcon from '@iconscout/react-unicons/dist/icons/uil-search-alt'
 import { action } from '@storybook/addon-actions'
 import { useArgs } from '@storybook/preview-api'
 import type { Meta, StoryObj } from '@storybook/react'
-import { userEvent, within } from '@storybook/test'
+import { fn, userEvent, within } from '@storybook/test'
 import type { ChangeEvent, ComponentProps, ReactNode } from 'react'
 
 import { sleep } from '@/utils'
@@ -95,12 +95,13 @@ type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {
  args: {
+ onHeightChange: fn(),
  value: '',
  },
 }
-
 export const Interactive: Story = {
  args: {
+ onHeightChange: fn(),
  value: '',
  },
  play: async ({ canvasElement }) => {