Tailwind project with typescript, react testing library and component-controls
created:1/14/2022
updated:1/14/2022
loc
34
comments
3%
passed
78
coverage
83%

Button

avatar of atanasster

Success

Test data

select
#
variant
size
fullWidth
1
success
medium
2
medium
3
danger
medium
4
success
medium
5
success
medium
5 data rows

Controls

Name
Description
Default
Controls
variant
primarysuccesswarndanger
primary
size
smallmedium
medium
fullWidth
boolean
-

Tests results

Status
Full name
Title
Time(ms)
button.spec.tsx(8 tests)
passed
<Button />
should render the correct button text
42
passed
Button props
props { variant: "primary" }
17
passed
Button props
props { variant: "success" }
5
passed
Button props
props { variant: "warn" }
3
passed
Button props
props { variant: "danger" }
6
passed
Button props
props { size: "small" }
3
passed
Button props
props { size: "medium" }
4
passed
Button props
props { fullWidth: true }
3
button.test.ts(70 tests)
total 78 tests

Tests coverage

Kind
Total
Covered
Skipped
%
button.tsx
lines
11
11
0
100%
functions
1
1
0
100%
statements
15
15
0
100%
branches
6
5
0
83.33%

A11y tests

 
impact
id
description
serious
color-contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds...

summary
target
Fix any of the following: Element has insufficient color contrast of 2.42 (foreground color: #ffffff, background color: #48bb78, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
.rah-static--height-auto.rah-static[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb

Viewport

320px
375px
768px
1024px