Skip to content

Commit 3827633

Browse files
smhigleyHotell
smhigley
authored and
Hotell
committed
feat: add combobox and dropdown vr tests (microsoft#26487)
1 parent ce77fa4 commit 3827633

File tree

2 files changed

+350
-0
lines changed

2 files changed

+350
-0
lines changed

‎apps/vr-tests-react-components/src/stories/Combobox.stories.tsx

+179
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
import * as React from 'react';
2+
import { Steps, StoryWright } from 'storywright';
3+
import { storiesOf } from '@storybook/react';
4+
import { Combobox, Option, OptionGroup } from '@fluentui/react-combobox';
5+
import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
6+
7+
storiesOf('Combobox Converged', module)
8+
.addDecorator(TestWrapperDecoratorFixedWidth)
9+
.addDecorator(story => (
10+
<StoryWright
11+
steps={new Steps()
12+
.snapshot('default', { cropTo: '.testWrapper' })
13+
.hover('input')
14+
.snapshot('hover', { cropTo: '.testWrapper' })
15+
.focus('input')
16+
.wait(250) // let focus border animation finish
17+
.snapshot('focused', { cropTo: '.testWrapper' })
18+
.end()}
19+
>
20+
{story()}
21+
</StoryWright>
22+
))
23+
.addStory('Appearance: outline (default)', () => (
24+
<Combobox>
25+
<Option>text</Option>
26+
</Combobox>
27+
))
28+
.addStory('Appearance: underline', () => (
29+
<Combobox appearance="underline">
30+
<Option>text</Option>
31+
</Combobox>
32+
))
33+
.addStory('Appearance: filled-darker', () => (
34+
<div style={{ background: '#00335c', padding: '10px' }}>
35+
<Combobox appearance="filled-darker">
36+
<Option>text</Option>
37+
</Combobox>
38+
</div>
39+
))
40+
.addStory('Appearance: filled-lighter', () => (
41+
<div style={{ background: '#00335c', padding: '10px' }}>
42+
<Combobox appearance="filled-lighter">
43+
<Option>text</Option>
44+
</Combobox>
45+
</div>
46+
))
47+
.addStory('Disabled', () => (
48+
<Combobox disabled>
49+
<Option>text</Option>
50+
</Combobox>
51+
))
52+
.addStory('Disabled with value', () => (
53+
<Combobox disabled selectedOptions={['text']}>
54+
<Option>text</Option>
55+
</Combobox>
56+
))
57+
.addStory('Invalid: outline', () => (
58+
<Combobox aria-invalid>
59+
<Option>text</Option>
60+
</Combobox>
61+
))
62+
.addStory('Invalid: underline', () => (
63+
<Combobox aria-invalid appearance="underline">
64+
<Option>text</Option>
65+
</Combobox>
66+
))
67+
.addStory('Invalid: filled-darker', () => (
68+
<div style={{ background: '#00335c', padding: '10px' }}>
69+
<Combobox aria-invalid appearance="filled-darker">
70+
<Option>text</Option>
71+
</Combobox>
72+
</div>
73+
))
74+
.addStory('Invalid: filled-lighter', () => (
75+
<div style={{ background: '#00335c', padding: '10px' }}>
76+
<Combobox aria-invalid appearance="filled-lighter">
77+
<Option>text</Option>
78+
</Combobox>
79+
</div>
80+
))
81+
.addStory('With placeholder', () => (
82+
<Combobox placeholder="Color">
83+
<Option>text</Option>
84+
</Combobox>
85+
))
86+
.addStory('With value', () => (
87+
<Combobox value="Text text">
88+
<Option>text</Option>
89+
</Combobox>
90+
))
91+
.addStory('With multiselect value', () => (
92+
<Combobox multiselect selectedOptions={['Green', 'Red']}>
93+
<Option>Red</Option>
94+
<Option>Green</Option>
95+
<Option>Blue</Option>
96+
</Combobox>
97+
))
98+
.addStory('Size: small', () => (
99+
<Combobox size="small">
100+
<Option>text</Option>
101+
</Combobox>
102+
))
103+
.addStory('Size: large', () => (
104+
<Combobox size="large">
105+
<Option>text</Option>
106+
</Combobox>
107+
));
108+
109+
// Option interaction stories
110+
storiesOf('Combobox Converged', module)
111+
.addDecorator(TestWrapperDecoratorFixedWidth)
112+
.addDecorator(story => (
113+
<StoryWright
114+
steps={new Steps()
115+
.snapshot('default', { cropTo: '.testWrapper' })
116+
.hover('[role=option]')
117+
.snapshot('hover', { cropTo: '.testWrapper' })
118+
.keys('input', 'ArrowDown')
119+
.snapshot('active option', { cropTo: '.testWrapper' })
120+
.end()}
121+
>
122+
{story()}
123+
</StoryWright>
124+
))
125+
.addStory('Open', () => (
126+
<div style={{ paddingBottom: '120px' }}>
127+
<Combobox open>
128+
<Option>Red</Option>
129+
<Option>Green</Option>
130+
<Option>Blue</Option>
131+
</Combobox>
132+
</div>
133+
))
134+
.addStory('Open with inlinePopup', () => (
135+
<div style={{ paddingBottom: '120px' }}>
136+
<Combobox open inlinePopup>
137+
<Option>Red</Option>
138+
<Option>Green</Option>
139+
<Option>Blue</Option>
140+
</Combobox>
141+
</div>
142+
))
143+
.addStory('Option with long content', () => (
144+
<div style={{ paddingBottom: '240px' }}>
145+
<Combobox open>
146+
<Option>
147+
Blue indigo periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt blue indigo
148+
periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt
149+
</Option>
150+
<Option>Red</Option>
151+
<Option>Green</Option>
152+
</Combobox>
153+
</div>
154+
))
155+
.addStory('Disabled option', () => (
156+
<div style={{ paddingBottom: '120px' }}>
157+
<Combobox open>
158+
<Option disabled>Red</Option>
159+
<Option>Green</Option>
160+
<Option>Blue</Option>
161+
</Combobox>
162+
</div>
163+
))
164+
.addStory('Open with grouped options', () => (
165+
<div style={{ paddingBottom: '300px' }}>
166+
<Combobox open>
167+
<OptionGroup label="Colors">
168+
<Option>Red</Option>
169+
<Option>Green</Option>
170+
<Option>Blue</Option>
171+
</OptionGroup>
172+
<OptionGroup label="Shapes">
173+
<Option>Circle</Option>
174+
<Option>Square</Option>
175+
<Option>Oval</Option>
176+
</OptionGroup>
177+
</Combobox>
178+
</div>
179+
));

‎apps/vr-tests-react-components/src/stories/Dropdown.stories.tsx

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import * as React from 'react';
2+
import { Steps, StoryWright } from 'storywright';
3+
import { storiesOf } from '@storybook/react';
4+
import { Dropdown, Option, OptionGroup } from '@fluentui/react-combobox';
5+
import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
6+
7+
storiesOf('Dropdown Converged', module)
8+
.addDecorator(TestWrapperDecoratorFixedWidth)
9+
.addDecorator(story => (
10+
<StoryWright
11+
steps={new Steps()
12+
.snapshot('default', { cropTo: '.testWrapper' })
13+
.hover('input')
14+
.snapshot('hover', { cropTo: '.testWrapper' })
15+
.focus('input')
16+
.wait(250) // let focus border animation finish
17+
.snapshot('focused', { cropTo: '.testWrapper' })
18+
.end()}
19+
>
20+
{story()}
21+
</StoryWright>
22+
))
23+
.addStory('Appearance: outline (default)', () => (
24+
<Dropdown>
25+
<Option>text</Option>
26+
</Dropdown>
27+
))
28+
.addStory('Appearance: underline', () => (
29+
<Dropdown appearance="underline">
30+
<Option>text</Option>
31+
</Dropdown>
32+
))
33+
.addStory('Appearance: filled-darker', () => (
34+
<div style={{ background: '#00335c', padding: '10px' }}>
35+
<Dropdown appearance="filled-darker">
36+
<Option>text</Option>
37+
</Dropdown>
38+
</div>
39+
))
40+
.addStory('Appearance: filled-lighter', () => (
41+
<div style={{ background: '#00335c', padding: '10px' }}>
42+
<Dropdown appearance="filled-lighter">
43+
<Option>text</Option>
44+
</Dropdown>
45+
</div>
46+
))
47+
.addStory('Disabled', () => (
48+
<Dropdown disabled>
49+
<Option>text</Option>
50+
</Dropdown>
51+
))
52+
.addStory('Disabled with value', () => (
53+
<Dropdown disabled selectedOptions={['text']}>
54+
<Option>text</Option>
55+
</Dropdown>
56+
))
57+
.addStory('Invalid: outline', () => (
58+
<Dropdown aria-invalid>
59+
<Option>text</Option>
60+
</Dropdown>
61+
))
62+
.addStory('Invalid: underline', () => (
63+
<Dropdown aria-invalid appearance="underline">
64+
<Option>text</Option>
65+
</Dropdown>
66+
))
67+
.addStory('Invalid: filled-darker', () => (
68+
<div style={{ background: '#00335c', padding: '10px' }}>
69+
<Dropdown aria-invalid appearance="filled-darker">
70+
<Option>text</Option>
71+
</Dropdown>
72+
</div>
73+
))
74+
.addStory('Invalid: filled-lighter', () => (
75+
<div style={{ background: '#00335c', padding: '10px' }}>
76+
<Dropdown aria-invalid appearance="filled-lighter">
77+
<Option>text</Option>
78+
</Dropdown>
79+
</div>
80+
))
81+
.addStory('With placeholder', () => (
82+
<Dropdown placeholder="Select a Color">
83+
<Option>Red</Option>
84+
<Option>Green</Option>
85+
<Option>Blue</Option>
86+
</Dropdown>
87+
))
88+
.addStory('With value', () => (
89+
<Dropdown value="Text text">
90+
<Option>text</Option>
91+
</Dropdown>
92+
))
93+
.addStory('With multiselect value', () => (
94+
<Dropdown multiselect selectedOptions={['Green', 'Red']}>
95+
<Option>Red</Option>
96+
<Option>Green</Option>
97+
<Option>Blue</Option>
98+
</Dropdown>
99+
))
100+
.addStory('Size: small', () => (
101+
<Dropdown size="small">
102+
<Option>text</Option>
103+
</Dropdown>
104+
))
105+
.addStory('Size: large', () => (
106+
<Dropdown size="large">
107+
<Option>text</Option>
108+
</Dropdown>
109+
));
110+
111+
// Option interaction stories
112+
storiesOf('Dropdown Converged', module)
113+
.addDecorator(TestWrapperDecoratorFixedWidth)
114+
.addDecorator(story => (
115+
<StoryWright
116+
steps={new Steps()
117+
.snapshot('default', { cropTo: '.testWrapper' })
118+
.hover('[role=option]')
119+
.snapshot('hover', { cropTo: '.testWrapper' })
120+
.keys('input', 'ArrowDown')
121+
.snapshot('active option', { cropTo: '.testWrapper' })
122+
.end()}
123+
>
124+
{story()}
125+
</StoryWright>
126+
))
127+
.addStory('Open', () => (
128+
<Dropdown open>
129+
<Option>Red</Option>
130+
<Option>Green</Option>
131+
<Option>Blue</Option>
132+
</Dropdown>
133+
))
134+
.addStory('Open with inlinePopup', () => (
135+
<Dropdown open inlinePopup>
136+
<Option>Red</Option>
137+
<Option>Green</Option>
138+
<Option>Blue</Option>
139+
</Dropdown>
140+
))
141+
.addStory('Option with long content', () => (
142+
<Dropdown open>
143+
<Option>
144+
Blue indigo periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt blue indigo
145+
periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt
146+
</Option>
147+
<Option>Red</Option>
148+
<Option>Green</Option>
149+
</Dropdown>
150+
))
151+
.addStory('Disabled option', () => (
152+
<Dropdown open>
153+
<Option disabled>Red</Option>
154+
<Option>Green</Option>
155+
<Option>Blue</Option>
156+
</Dropdown>
157+
))
158+
.addStory('Open with grouped options', () => (
159+
<Dropdown open>
160+
<OptionGroup label="Colors">
161+
<Option>Red</Option>
162+
<Option>Green</Option>
163+
<Option>Blue</Option>
164+
</OptionGroup>
165+
<OptionGroup label="Shapes">
166+
<Option>Circle</Option>
167+
<Option>Square</Option>
168+
<Option>Oval</Option>
169+
</OptionGroup>
170+
</Dropdown>
171+
));

0 commit comments

Comments
 (0)