diff --git a/packages/components/src/Accordion/Accordion.test.stories.tsx b/packages/components/src/Accordion/Accordion.test.stories.tsx index aa26e12a..0448d930 100644 --- a/packages/components/src/Accordion/Accordion.test.stories.tsx +++ b/packages/components/src/Accordion/Accordion.test.stories.tsx @@ -11,11 +11,6 @@ const meta: Meta = { layout: 'padded', }, tags: ['!dev'], - argTypes: { - initiallyExpanded: { - control: 'boolean', - }, - }, args: { onHandleExpand: fn() }, }; diff --git a/packages/components/src/Button/Button.test.stories.tsx b/packages/components/src/Button/Button.test.stories.tsx index a7c53c40..e77d31de 100644 --- a/packages/components/src/Button/Button.test.stories.tsx +++ b/packages/components/src/Button/Button.test.stories.tsx @@ -9,29 +9,20 @@ const meta: Meta = { layout: 'centered', }, tags: ['!dev'], - argTypes: { - size: { - control: 'select', - }, - type: { - control: 'select', - }, - className: { - control: 'text', - }, + args: { + type: 'primary', + children: 'Button label', + onClick: fn(), }, - args: { onClick: fn() }, }; export default meta; type Story = StoryObj; -export const TestActive: Story = { - name: 'Primary', +export const TestEnabled: Story = { + name: 'Enabled', args: { - type: 'primary', - children: 'Button label', disabled: false, }, play: async ({ canvasElement, step, args }) => { @@ -53,8 +44,6 @@ export const TestActive: Story = { export const TestDisabled: Story = { name: 'Disabled', args: { - type: 'primary', - children: 'Button label', disabled: true, }, play: async ({ canvasElement, step }) => { diff --git a/packages/components/src/Expander/Expander.test.stories.tsx b/packages/components/src/Expander/Expander.test.stories.tsx index 49988a7d..7815ef06 100644 --- a/packages/components/src/Expander/Expander.test.stories.tsx +++ b/packages/components/src/Expander/Expander.test.stories.tsx @@ -9,18 +9,11 @@ const meta: Meta = { layout: 'centered', }, tags: ['!dev'], - argTypes: { - hasIcon: { - control: 'boolean', - }, - isExpanded: { - control: 'boolean', - }, - type: { - control: 'select', - }, + args: { + collapseLabel: 'Show more', + expandLabel: 'Show less', + onClick: fn(), }, - args: { onClick: fn() }, }; export default meta; @@ -30,8 +23,6 @@ type Story = StoryObj; export const ExpanderIsNotExpanded: Story = { args: { isExpanded: false, - collapseLabel: 'Show more', - expandLabel: 'Show less', }, play: async ({ canvasElement, step, args }) => { const canvas = within(canvasElement); @@ -56,8 +47,6 @@ export const ExpanderIsNotExpanded: Story = { export const ExpanderIsExpanded: Story = { args: { isExpanded: true, - collapseLabel: 'Show more', - expandLabel: 'Show less', }, play: async ({ canvasElement, step, args }) => { const canvas = within(canvasElement); diff --git a/packages/components/src/IconButton/IconButton.test.stories.tsx b/packages/components/src/IconButton/IconButton.test.stories.tsx index 741028b3..583cd434 100644 --- a/packages/components/src/IconButton/IconButton.test.stories.tsx +++ b/packages/components/src/IconButton/IconButton.test.stories.tsx @@ -9,26 +9,20 @@ const meta: Meta = { layout: 'centered', }, tags: ['!dev'], - argTypes: { - size: { - control: 'select', - }, - type: { - control: 'select', - }, + args: { + type: 'primary', + icon: 'edit', + onClick: fn(), }, - args: { onClick: fn() }, }; export default meta; type Story = StoryObj; -export const TestActive: Story = { - name: 'Primary', +export const TestEnabled: Story = { + name: 'Enabled', args: { - type: 'primary', - icon: 'edit', disabled: false, }, play: async ({ canvasElement, step, args }) => { @@ -50,8 +44,6 @@ export const TestActive: Story = { export const TestDisabled: Story = { name: 'Disabled', args: { - type: 'primary', - icon: 'edit', disabled: true, }, play: async ({ canvasElement, step }) => { diff --git a/packages/components/src/inputs/InputText/InputText.test.stories.tsx b/packages/components/src/inputs/InputText/InputText.test.stories.tsx index f2ad74ab..31a09891 100644 --- a/packages/components/src/inputs/InputText/InputText.test.stories.tsx +++ b/packages/components/src/inputs/InputText/InputText.test.stories.tsx @@ -9,18 +9,8 @@ const meta: Meta = { layout: 'centered', }, tags: ['!dev'], - argTypes: { - size: { - control: 'select', - }, - type: { - control: 'select', - }, - className: { - control: 'text', - }, - }, args: { + name: 'default-input', onBlur: fn(), onChange: fn(), onFocus: fn(), @@ -32,26 +22,29 @@ export default meta; type Story = StoryObj; -export const TestActive: Story = { - name: 'Events', - args: { - name: 'default-input', - }, +export const Default: Story = { + name: 'Default', play: async ({ canvasElement, step, args }) => { const canvas = within(canvasElement); const input = canvas.getByRole('textbox'); await step('InputText handles focus event', async () => { await expect(args.onFocus).not.toHaveBeenCalled(); + await userEvent.click(input); + await expect(args.onFocus).toHaveBeenCalledOnce(); + await userEvent.click(input); + await expect(args.onFocus).toHaveBeenCalledOnce(); }); await step('InputText handles blur event', async () => { await expect(args.onBlur).not.toHaveBeenCalled(); + await userEvent.click(canvasElement); + await expect(args.onBlur).toHaveBeenCalledOnce(); }); @@ -61,6 +54,7 @@ export const TestActive: Story = { const numberOfExpectedFocusCalls = 2; await userEvent.type(input, insertText); + await expect(args.onFocus).toHaveBeenCalledTimes(numberOfExpectedFocusCalls); await expect(args.onChange).toHaveBeenCalledTimes(insertTextLength); await expect(args.onInput).toHaveBeenCalledTimes(insertTextLength); diff --git a/packages/components/src/ui/ClearBtn/ClearBtn.stories.tsx b/packages/components/src/ui/ClearBtn/ClearBtn.stories.tsx index 49893a54..343e8207 100644 --- a/packages/components/src/ui/ClearBtn/ClearBtn.stories.tsx +++ b/packages/components/src/ui/ClearBtn/ClearBtn.stories.tsx @@ -1,10 +1,10 @@ import type { Meta, StoryObj } from '@storybook/react'; import { action } from 'storybook/actions'; -import Expander from './ClearBtn'; +import ClearBtn from './ClearBtn'; -const meta: Meta = { - component: Expander, +const meta: Meta = { + component: ClearBtn, parameters: { layout: 'centered', }, @@ -15,7 +15,7 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { name: 'Default', diff --git a/packages/components/src/ui/ClearBtn/ClearBtn.test.stories.tsx b/packages/components/src/ui/ClearBtn/ClearBtn.test.stories.tsx index d307ca71..9c3db794 100644 --- a/packages/components/src/ui/ClearBtn/ClearBtn.test.stories.tsx +++ b/packages/components/src/ui/ClearBtn/ClearBtn.test.stories.tsx @@ -1,24 +1,23 @@ import type { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, within } from 'storybook/test'; -import Expander from './ClearBtn'; +import ClearBtn from './ClearBtn'; -const meta: Meta = { - component: Expander, +const meta: Meta = { + component: ClearBtn, parameters: { layout: 'centered', }, tags: ['!dev'], - argTypes: {}, args: { onClick: fn() }, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; -export const TestActive: Story = { - name: 'Primary', +export const TestEnabled: Story = { + name: 'Enabled', args: { disabled: false, },