Skip to canvas
Storybook
Search for components
/
Button
Docs
Filled
Filled With Prefix
Filled With Suffix
Filled With Combined
Outline
Outline With Prefix
Skip to canvas
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
5
Actions
1
Interactions
21
Addons
Name
Control
variant
Choose option...
filled
outline
text
tonal
children
Label
PrefixIcon
RAW
PrefixIcon :
{
$$typeof :
Symbol(react.element)
type :
()=>{}
key :
null
ref :
null
props :
{...} 0 keys
_owner :
null
}
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: 16px"
)
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
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the button has a border 1px…"
)
.
toHaveStyle
(
"border: 1px solid #000"
)
expect
(
2
,
"It is expected that the button has only two…"
)
.
toBe
(
2
)
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: #000"
)
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"
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the button has a border 1px…"
)
.
toHaveStyle
(
"border: 1px solid #0053db"
)
expect
(
within
(
<
div
#storybook-root
>
)
.
getByRole
(
"button"
)
,
"It is expected that the text on the button will…"
)
.
toHaveStyle
(
"color: #0053db"
)