Skip to canvas
Storybook
Search for components
/
Button
Docs
Filled
Skip to canvas
Filled With Prefix
Filled With Suffix
Filled With Combined
Outline
Outline With Prefix
Outline With Suffix
Outline With Combined
Text
Text With Prefix
Text With Suffix
Text With Combined
Tonal
Tonal With Prefix
Tonal With Combined
Icon
Disabled Button
Chart
Checkbox
Dialog
DropdownButton
InfoCard
ListItem
List
Modal
Progress Indicator
Radio
Slider
Tabs
Tag
TextField
Toggle
TokenField
Tooltip
Typography
Recently opened
Button
Back to components
ESC
Clear history
light
Skip to sidebar
Controls
4
Actions
1
Interactions
19
Addons
Name
Control
variant
Choose option...
filled
outline
text
tonal
children
Label
disabled
False
True
onClick
-
isIcon
Set boolean
Pass
Scroll to end
index.stories.tsx
Checking the button structure
expect
(
"BUTTON"
,
"It is expected that the button is an html BUTTON…"
)
.
toBe
(
"BUTTON"
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"it is expected that the button is rendered"
)
.
toBeInTheDocument
(
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the button has an internal…"
)
.
toHaveStyle
(
"padding-left: 24px"
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the button has an internal…"
)
.
toHaveStyle
(
"padding-right: 24px"
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the button has a border…"
)
.
toHaveStyle
(
"border-radius: 8px"
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the button has a cursor…"
)
.
toHaveStyle
(
"cursor: pointer"
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the button is flex"
)
.
toHaveStyle
(
"display: flex"
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the button has justify…"
)
.
toHaveStyle
(
"justify-content: space-between"
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the button will not have a…"
)
.
toHaveStyle
(
"box-shadow: none"
)
expect
(
1
,
"It is expected that the button has only one…"
)
.
toBe
(
1
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the button has a background…"
)
.
toHaveStyle
(
"background-color: #0053db"
)
expect
(
"Label"
,
"It is expected that the button has the text Label…"
)
.
toBe
(
"Label"
)
Checking the font styles
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the text on the button will…"
)
.
toHaveStyle
(
"color: #fff"
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the text on the button will…"
)
.
toHaveStyle
(
"font-size: 14px"
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the text on the button will…"
)
.
toHaveStyle
(
"font-family: Proto"
)
Checking the click event
userEvent
.
click
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
)
waitFor
(
anonymous
)
expect
(
onClick
(
)
,
"It is expected that the function has been called…"
)
.
toHaveBeenCalled
(
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the button will have a…"
)
.
toHaveStyle
(
"box-shadow: 0 0 0 4px #0053db29"
)