Skip to content

Commit 6e8a41d

Browse files
wKichwKich
committed
Add storybook interaction tests for material-ui
1 parent c993a84 commit 6e8a41d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+2324
-53
lines changed

‎packages/material-ui/stories/accordion.stories.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
2+
import { Accordion, matching, some } from "../src";
3+
import {
4+
Accordion as Component,
5+
AccordionSummary,
6+
AccordionDetails,
7+
AccordionActions,
8+
Button
9+
} from "@material-ui/core";
10+
import { renderComponent } from "./helpers";
11+
import { cloneElement } from "react";
12+
13+
export default {
14+
title: 'Accordion',
15+
component: renderComponent(Component, {}, ({ props, children }) => (
16+
cloneElement(
17+
children(props),
18+
{},
19+
<AccordionSummary aria-label="accordion">Expand</AccordionSummary>,
20+
<AccordionDetails>
21+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
22+
Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
23+
</AccordionDetails>,
24+
<AccordionActions>
25+
<Button>Ok</Button>
26+
</AccordionActions>
27+
)
28+
))
29+
} as ComponentMeta<typeof Component>
30+
31+
const accordion = Accordion("accordion");
32+
33+
export const Default: ComponentStoryObj<typeof Component> = {
34+
async play() {
35+
await accordion.exists();
36+
await accordion.is({ expanded: false })
37+
await accordion.has({ classList: some(matching(/MuiAccordion-root(-\d+)?/)) })
38+
await Accordion({ disabled: false }).exists()
39+
}
40+
}
41+
42+
export const TestExpandAction: ComponentStoryObj<typeof Component> = {
43+
async play() {
44+
await accordion.expand()
45+
await accordion.is({ expanded: true })
46+
}
47+
}
48+
49+
export const TestCollapseAction: ComponentStoryObj<typeof Component> = {
50+
async play() {
51+
await accordion.expand()
52+
await accordion.collapse()
53+
await accordion.is({ expanded: false })
54+
}
55+
}
56+
57+
export const TestToggleAction: ComponentStoryObj<typeof Component> = {
58+
async play() {
59+
await accordion.toggle()
60+
await accordion.is({ expanded: true })
61+
await accordion.toggle()
62+
await accordion.is({ expanded: false })
63+
}
64+
}
65+
66+
export const Disabled: ComponentStoryObj<typeof Component> = {
67+
args: { disabled: true },
68+
async play() {
69+
await Accordion({ disabled: true }).exists()
70+
}
71+
}

‎packages/material-ui/stories/bottom-navigation.stories.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { cloneElement, useState } from "react";
2+
import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
3+
import { Restore, Favorite, LocationOn } from "@material-ui/icons";
4+
import { BottomNavigation as Component, BottomNavigationAction } from "@material-ui/core";
5+
import { BottomNavigation } from "../src";
6+
import { renderComponent } from "./helpers";
7+
8+
export default {
9+
title: "BottomNavigation",
10+
component: renderComponent(Component, {}, ({ props, children }) => {
11+
let [value, setValue] = useState(0);
12+
13+
return cloneElement(
14+
children(props),
15+
{ value, onChange: (_: unknown, newValue: number) => setValue(newValue) },
16+
...[
17+
<BottomNavigationAction label="Recents" icon={<Restore />} />,
18+
<BottomNavigationAction label="Favorites" icon={<Favorite />} />,
19+
<BottomNavigationAction label="Nearby" icon={<LocationOn />} />,
20+
]
21+
);
22+
}),
23+
} as ComponentMeta<typeof Component>;
24+
25+
const bottomNavigation = BottomNavigation();
26+
27+
export const Default: ComponentStoryObj<typeof Component> = {
28+
async play() {
29+
await bottomNavigation.has({ value: "Recents" });
30+
},
31+
};
32+
33+
export const NavigateAction: ComponentStoryObj<typeof Component> = {
34+
async play() {
35+
await bottomNavigation.navigate("Favorites");
36+
await bottomNavigation.has({ value: "Favorites" });
37+
},
38+
};

‎packages/material-ui/stories/button.stories.tsx‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
import { Button, including, not, HTML } from "../src";
2+
import { Button as Component } from "@material-ui/core";
3+
import { renderComponent } from "./helpers";
4+
import { ComponentProps } from "react";
5+
import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
6+
7+
export default {
8+
title: "Button",
9+
component: renderComponent(Component, { children: "My Button" }),
10+
} as ComponentMeta<typeof Component>;
11+
12+
const button = Button(including("My Button".toUpperCase()));
13+
14+
export const Default: ComponentStoryObj<typeof Component> = {
15+
async play() {
16+
await button.exists();
17+
await button.has({ text: "My Button".toUpperCase() });
18+
await button.has({ className: including("MuiButton-root") });
19+
await button.has({ className: including("MuiButton-text") });
20+
await button.has({ className: not(including("MuiButton-textSecondary")) });
21+
await button.has({ className: not(including("MuiButton-outlined")) });
22+
await button.has({ className: not(including("MuiButton-contained")) });
23+
},
24+
};
25+
26+
export const Secondary: ComponentStoryObj<typeof Component> = {
27+
args: { color: "secondary" },
28+
async play() {
29+
await button.has({ className: including("MuiButton-root") });
30+
await button.has({ className: including("MuiButton-text") });
31+
await button.has({ className: not(including("MuiButton-contained")) });
32+
await button.has({ className: not(including("MuiButton-textPrimary")) });
33+
},
34+
};
35+
36+
export const Outlined: ComponentStoryObj<typeof Component> = {
37+
args: { variant: "outlined" },
38+
async play() {
39+
await button.has({ className: including("MuiButton-outlined") });
40+
await button.has({ className: not(including("MuiButton-text")) });
41+
await button.has({ className: not(including("MuiButton-contained")) });
42+
},
43+
};
44+
45+
export const PrimaryOutlined: ComponentStoryObj<typeof Component> = {
46+
args: { variant: "outlined", color: "primary" },
47+
async play() {
48+
await button.has({ className: including("MuiButton-outlined") });
49+
await button.has({ className: including("MuiButton-outlinedPrimary") });
50+
},
51+
};
52+
53+
export const SecondaryOutlined: ComponentStoryObj<typeof Component> = {
54+
args: { variant: "outlined", color: "secondary" },
55+
async play() {
56+
await button.has({ className: including("MuiButton-outlined") });
57+
await button.has({ className: including("MuiButton-outlinedSecondary") });
58+
},
59+
};
60+
61+
export const InheritOutlined: ComponentStoryObj<typeof Component> = {
62+
args: { variant: "outlined", color: "inherit" },
63+
async play() {
64+
await button.has({ className: including("MuiButton-root") });
65+
await button.has({ className: including("MuiButton-outlined") });
66+
await button.has({ className: including("MuiButton-colorInherit") });
67+
await button.has({ className: not(including("MuiButton-text")) });
68+
await button.has({ className: not(including("MuiButton-textSecondary")) });
69+
await button.has({ className: not(including("MuiButton-contained")) });
70+
},
71+
};
72+
73+
export const Contained: ComponentStoryObj<typeof Component> = {
74+
args: { variant: "contained" },
75+
async play() {
76+
await button.has({ className: including("MuiButton-root") });
77+
await button.has({ className: including("MuiButton-contained") });
78+
await button.has({ className: not(including("MuiButton-textPrimary")) });
79+
await button.has({ className: not(including("MuiButton-textSecondary")) });
80+
},
81+
};
82+
83+
export const ContainedPrimary: ComponentStoryObj<typeof Component> = {
84+
args: { variant: "contained", color: "primary" },
85+
async play() {
86+
await button.has({ className: including("MuiButton-root") });
87+
await button.has({ className: including("MuiButton-contained") });
88+
await button.has({ className: including("MuiButton-containedPrimary") });
89+
await button.has({ className: not(including("MuiButton-text")) });
90+
await button.has({ className: not(including("MuiButton-containedSecondary")) });
91+
},
92+
};
93+
94+
export const ContainedSecondary: ComponentStoryObj<typeof Component> = {
95+
args: { variant: "contained", color: "secondary" },
96+
async play() {
97+
await button.has({ className: including("MuiButton-root") });
98+
await button.has({ className: including("MuiButton-contained") });
99+
await button.has({ className: including("MuiButton-containedSecondary") });
100+
await button.has({ className: not(including("MuiButton-text")) });
101+
await button.has({ className: not(including("MuiButton-containedPrimary")) });
102+
},
103+
};
104+
105+
export const SmallText: ComponentStoryObj<typeof Component> = {
106+
args: { size: "small" },
107+
async play() {
108+
await button.has({ className: including("MuiButton-root") });
109+
await button.has({ className: including("MuiButton-text") });
110+
await button.has({ className: including("MuiButton-textSizeSmall") });
111+
await button.has({ className: not(including("MuiButton-textSizeLarge")) });
112+
await button.has({ className: not(including("MuiButton-outlinedSizeSmall")) });
113+
await button.has({ className: not(including("MuiButton-outlinedSizeLarge")) });
114+
await button.has({ className: not(including("MuiButton-containedSizeSmall")) });
115+
await button.has({ className: not(including("MuiButton-containedSizeLarge")) });
116+
},
117+
};
118+
119+
export const LargeText: ComponentStoryObj<typeof Component> = {
120+
args: { size: "large" },
121+
async play() {
122+
await button.has({ className: including("MuiButton-root") });
123+
await button.has({ className: including("MuiButton-text") });
124+
await button.has({ className: including("MuiButton-textSizeLarge") });
125+
await button.has({ className: not(including("MuiButton-textSizeSmall")) });
126+
await button.has({ className: not(including("MuiButton-outlinedSizeSmall")) });
127+
await button.has({ className: not(including("MuiButton-outlinedSizeLarge")) });
128+
await button.has({ className: not(including("MuiButton-containedSizeSmall")) });
129+
await button.has({ className: not(including("MuiButton-containedSizeLarge")) });
130+
},
131+
};
132+
133+
export const SmallOutlined: ComponentStoryObj<typeof Component> = {
134+
args: { variant: "outlined", size: "small" },
135+
async play() {
136+
await button.has({ className: including("MuiButton-root") });
137+
await button.has({ className: including("MuiButton-outlined") });
138+
await button.has({ className: including("MuiButton-outlinedSizeSmall") });
139+
await button.has({ className: not(including("MuiButton-textSizeSmall")) });
140+
await button.has({ className: not(including("MuiButton-outlinedSizeLarge")) });
141+
await button.has({ className: not(including("MuiButton-containedSizeSmall")) });
142+
await button.has({ className: not(including("MuiButton-containedSizeLarge")) });
143+
},
144+
};
145+
146+
export const LargeOutlined: ComponentStoryObj<typeof Component> = {
147+
args: { variant: "outlined", size: "large" },
148+
async play() {
149+
await button.has({ className: including("MuiButton-root") });
150+
await button.has({ className: including("MuiButton-outlined") });
151+
await button.has({ className: including("MuiButton-outlinedSizeLarge") });
152+
await button.has({ className: not(including("MuiButton-textSizeSmall")) });
153+
await button.has({ className: not(including("MuiButton-textSizeLarge")) });
154+
await button.has({ className: not(including("MuiButton-outlinedSizeSmall")) });
155+
await button.has({ className: not(including("MuiButton-containedSizeLarge")) });
156+
await button.has({ className: not(including("MuiButton-containedSizeSmall")) });
157+
},
158+
};
159+
160+
export const SmallContained: ComponentStoryObj<typeof Component> = {
161+
args: { variant: "contained", size: "small" },
162+
async play() {
163+
await button.has({ className: including("MuiButton-root") });
164+
await button.has({ className: including("MuiButton-contained") });
165+
await button.has({ className: including("MuiButton-containedSizeSmall") });
166+
await button.has({ className: not(including("MuiButton-textSizeSmall")) });
167+
await button.has({ className: not(including("MuiButton-textSizeLarge")) });
168+
await button.has({ className: not(including("MuiButton-outlinedSizeSmall")) });
169+
await button.has({ className: not(including("MuiButton-outlinedSizeLarge")) });
170+
await button.has({ className: not(including("MuiButton-containedSizeLarge")) });
171+
},
172+
};
173+
174+
export const LargeContained: ComponentStoryObj<typeof Component> = {
175+
args: { variant: "contained", size: "large" },
176+
async play() {
177+
await button.has({ className: including("MuiButton-root") });
178+
await button.has({ className: including("MuiButton-contained") });
179+
await button.has({ className: including("MuiButton-containedSizeLarge") });
180+
await button.has({ className: not(including("MuiButton-textSizeSmall")) });
181+
await button.has({ className: not(including("MuiButton-textSizeLarge")) });
182+
await button.has({ className: not(including("MuiButton-outlinedSizeSmall")) });
183+
await button.has({ className: not(including("MuiButton-outlinedSizeLarge")) });
184+
await button.has({ className: not(including("MuiButton-containedSizeSmall")) });
185+
},
186+
};
187+
188+
export const StartIcon: ComponentStoryObj<typeof Component> = {
189+
args: { startIcon: <span>icon</span> },
190+
async play() {
191+
await button.has({ className: including("MuiButton-root") });
192+
await button.has({ className: including("MuiButton-text") });
193+
await button.find(HTML({ className: including("MuiButton-startIcon") })).exists();
194+
await button.find(HTML({ className: not(including("MuiButton-endIcon")) })).exists();
195+
},
196+
};
197+
198+
export const EndIcon: ComponentStoryObj<typeof Component> = {
199+
args: { endIcon: <span>icon</span> },
200+
async play() {
201+
await button.has({ className: including("MuiButton-root") });
202+
await button.has({ className: including("MuiButton-text") });
203+
await button.find(HTML({ className: including("MuiButton-endIcon") })).exists();
204+
await button.find(HTML({ className: not(including("MuiButton-startIcon")) })).exists();
205+
},
206+
};
207+
208+
export const Ripple: ComponentStoryObj<typeof Component> = {
209+
args: { TouchRippleProps: { className: "touch-ripple" } },
210+
async play() {
211+
await button.find(HTML({ className: including("touch-ripple") })).exists();
212+
},
213+
};
214+
215+
export const DisableRipple: ComponentStoryObj<typeof Component> = {
216+
args: { disableRipple: true, TouchRippleProps: { className: "touch-ripple" } },
217+
async play() {
218+
await button.find(HTML({ className: including("touch-ripple") })).absent();
219+
},
220+
};
221+
222+
export const DisableElevation: ComponentStoryObj<typeof Component> = {
223+
args: { disableElevation: true },
224+
async play() {
225+
await button.has({ className: including("MuiButton-disableElevation") });
226+
},
227+
};
228+
229+
export const FocusRipple: ComponentStoryObj<typeof Component> = {
230+
args: { TouchRippleProps: { classes: { ripplePulsate: "pulstat-focus-visible" } } },
231+
async play() {
232+
await button.focus();
233+
await button.find(HTML({ className: including("pulstat-focus-visible") })).exists();
234+
},
235+
};
236+
237+
export const DisableFocusRipple: ComponentStoryObj<typeof Component> = {
238+
args: {
239+
disableFocusRipple: true,
240+
TouchRippleProps: { classes: { ripplePulsate: "pulstat-focus-visible" } },
241+
},
242+
async play() {
243+
await button.focus();
244+
await button.find(HTML({ className: including("MuiTouchRipple-rippleVisible") })).absent();
245+
},
246+
};
247+
248+
export const Anchor: ComponentStoryObj<typeof Component> = {
249+
args: { href: "https://google.com" },
250+
async play() {
251+
await button.has({
252+
className: including("MuiButton-root"),
253+
href: including("https://google.com"),
254+
});
255+
},
256+
};
257+
258+
export const ForwardClasses: ComponentStoryObj<typeof Component> = {
259+
args: { disabled: true, classes: { disabled: "disabledClassName" } },
260+
async play() {
261+
await Button({ disabled: true }).has({ className: including("disabledClassName"), disabled: true });
262+
},
263+
};
264+
265+
export const Span: ComponentStoryObj<typeof Component> = {
266+
args: { component: "span" } as ComponentProps<typeof Component>,
267+
async play() {
268+
await button.exists();
269+
await HTML.selector("span")({ className: including("MuiButton-root") }).exists();
270+
},
271+
};

0 commit comments

Comments
 (0)