Skip to content

Commit 62414b0

Browse files
TheSonOfThompTheSonOfThomp
committed
Update Wizard.spec.tsx
1 parent 3c6baa7 commit 62414b0

File tree

1 file changed

+243
-1
lines changed

1 file changed

+243
-1
lines changed

‎packages/wizard/src/Wizard/Wizard.spec.tsx‎

Lines changed: 243 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,250 @@
11
import React from 'react';
22
import { render } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
34

45
import { Wizard } from '.';
56

67
describe('packages/wizard', () => {
7-
test('condition', () => {});
8+
describe('rendering', () => {
9+
test('renders first Wizard.Step', () => {
10+
const { getByText, getByTestId, queryByText, queryByTestId } = render(
11+
<Wizard>
12+
<Wizard.Step title="Step 1" description="First step">
13+
<div data-testid="step-1-content">Step 1 content</div>
14+
</Wizard.Step>
15+
<Wizard.Step title="Step 2">
16+
<div data-testid="step-2-content">Step 2 content</div>
17+
</Wizard.Step>
18+
</Wizard>,
19+
);
20+
expect(getByTestId('step-1-content')).toBeInTheDocument();
21+
expect(queryByTestId('step-2-content')).not.toBeInTheDocument();
22+
});
23+
24+
test('renders Wizard.Footer', () => {
25+
const { getByTestId } = render(
26+
<Wizard>
27+
<Wizard.Step title="Step 1">
28+
<div data-testid="step-content">Content</div>
29+
</Wizard.Step>
30+
<Wizard.Footer
31+
data-testid="wizard-footer"
32+
primaryButtonProps={{ children: 'Next' }}
33+
cancelButtonProps={{ children: 'Cancel' }}
34+
/>
35+
</Wizard>,
36+
);
37+
38+
expect(getByTestId('wizard-footer')).toBeInTheDocument();
39+
});
40+
41+
test('does not render any other elements', () => {
42+
const { container, getByText, getByTestId, getByRole, queryByTestId } =
43+
render(
44+
<Wizard>
45+
<div data-testid="invalid-element-1">This should not render</div>
46+
</Wizard>,
47+
);
48+
49+
// Non-wizard elements should not be rendered
50+
expect(queryByTestId('invalid-element-1')).not.toBeInTheDocument();
51+
});
52+
53+
test('renders correct step when activeStep is provided', () => {
54+
const { queryByTestId, getByTestId } = render(
55+
<Wizard activeStep={1}>
56+
<Wizard.Step title="Step 1">
57+
<div data-testid="step-1-content">Step 1 content</div>
58+
</Wizard.Step>
59+
<Wizard.Step title="Step 2">
60+
<div data-testid="step-2-content">Step 2 content</div>
61+
</Wizard.Step>
62+
</Wizard>,
63+
);
64+
65+
// Should render the second step when activeStep is 1
66+
expect(queryByTestId('step-1-content')).not.toBeInTheDocument();
67+
expect(getByTestId('step-2-content')).toBeInTheDocument();
68+
});
69+
70+
test('does not render back button on first step', () => {
71+
const { queryByRole, getByRole } = render(
72+
<Wizard activeStep={0}>
73+
<Wizard.Step title="Step 1">
74+
<div data-testid="step-1-content">Content 1</div>
75+
</Wizard.Step>
76+
<Wizard.Step title="Step 2">
77+
<div data-testid="step-2-content">Content 2</div>
78+
</Wizard.Step>
79+
<Wizard.Footer
80+
backButtonProps={{ children: 'Back' }}
81+
primaryButtonProps={{ children: 'Next' }}
82+
/>
83+
</Wizard>,
84+
);
85+
86+
// Back button should not be rendered on first step
87+
expect(queryByRole('button', { name: 'Back' })).not.toBeInTheDocument();
88+
expect(getByRole('button', { name: 'Next' })).toBeInTheDocument();
89+
});
90+
91+
test('renders back button on second step', () => {
92+
const { getByRole } = render(
93+
<Wizard activeStep={1}>
94+
<Wizard.Step title="Step 1">
95+
<div data-testid="step-1-content">Content 1</div>
96+
</Wizard.Step>
97+
<Wizard.Step title="Step 2">
98+
<div data-testid="step-2-content">Content 2</div>
99+
</Wizard.Step>
100+
<Wizard.Footer
101+
backButtonProps={{ children: 'Back' }}
102+
primaryButtonProps={{ children: 'Next' }}
103+
/>
104+
</Wizard>,
105+
);
106+
107+
expect(getByRole('button', { name: 'Back' })).toBeInTheDocument();
108+
expect(getByRole('button', { name: 'Next' })).toBeInTheDocument();
109+
});
110+
});
111+
112+
describe('interaction', () => {
113+
test('calls `onStepChange` when incrementing step', async () => {
114+
const onStepChange = jest.fn();
115+
116+
const { getByRole } = render(
117+
<Wizard activeStep={0} onStepChange={onStepChange}>
118+
<Wizard.Step title="Step 1">
119+
<div data-testid="step-1-content">Content 1</div>
120+
</Wizard.Step>
121+
<Wizard.Step title="Step 2">
122+
<div data-testid="step-2-content">Content 2</div>
123+
</Wizard.Step>
124+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
125+
</Wizard>,
126+
);
127+
128+
await userEvent.click(getByRole('button', { name: 'Next' }));
129+
130+
expect(onStepChange).toHaveBeenCalledWith(1);
131+
});
132+
133+
test('calls `onStepChange` when decrementing step', async () => {
134+
const onStepChange = jest.fn();
135+
136+
const { getByRole } = render(
137+
<Wizard activeStep={1} onStepChange={onStepChange}>
138+
<Wizard.Step title="Step 1">
139+
<div data-testid="step-1-content">Content 1</div>
140+
</Wizard.Step>
141+
<Wizard.Step title="Step 2">
142+
<div data-testid="step-2-content">Content 2</div>
143+
</Wizard.Step>
144+
<Wizard.Footer
145+
backButtonProps={{ children: 'Back' }}
146+
primaryButtonProps={{ children: 'Next' }}
147+
/>
148+
</Wizard>,
149+
);
150+
151+
await userEvent.click(getByRole('button', { name: 'Back' }));
152+
153+
expect(onStepChange).toHaveBeenCalledWith(0);
154+
});
155+
156+
test('calls custom button onClick handlers', async () => {
157+
const onStepChange = jest.fn();
158+
const onBackClick = jest.fn();
159+
const onPrimaryClick = jest.fn();
160+
const onCancelClick = jest.fn();
161+
162+
const { getByRole } = render(
163+
<Wizard activeStep={1} onStepChange={onStepChange}>
164+
<Wizard.Step title="Step 1">
165+
<div data-testid="step-1-content">Content 1</div>
166+
</Wizard.Step>
167+
<Wizard.Step title="Step 2">
168+
<div data-testid="step-2-content">Content 2</div>
169+
</Wizard.Step>
170+
<Wizard.Footer
171+
backButtonProps={{ children: 'Back', onClick: onBackClick }}
172+
primaryButtonProps={{ children: 'Next', onClick: onPrimaryClick }}
173+
cancelButtonProps={{ children: 'Cancel', onClick: onCancelClick }}
174+
/>
175+
</Wizard>,
176+
);
177+
178+
await userEvent.click(getByRole('button', { name: 'Back' }));
179+
expect(onBackClick).toHaveBeenCalled();
180+
expect(onStepChange).toHaveBeenCalledWith(0);
181+
182+
await userEvent.click(getByRole('button', { name: 'Next' }));
183+
expect(onPrimaryClick).toHaveBeenCalled();
184+
expect(onStepChange).toHaveBeenCalledWith(1);
185+
186+
await userEvent.click(getByRole('button', { name: 'Cancel' }));
187+
expect(onCancelClick).toHaveBeenCalled();
188+
});
189+
190+
describe('uncontrolled', () => {
191+
test('does not increment step beyond Steps count', async () => {
192+
const { getByText, queryByText, getByRole, queryByRole } = render(
193+
<Wizard>
194+
<Wizard.Step title="Step 1">
195+
<div data-testid="step-1-content">Content 1</div>
196+
</Wizard.Step>
197+
<Wizard.Step title="Step 2">
198+
<div data-testid="step-2-content">Content 2</div>
199+
</Wizard.Step>
200+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
201+
</Wizard>,
202+
);
203+
204+
// Start at step 1
205+
expect(getByText('Step 1')).toBeInTheDocument();
206+
207+
// Click next to go to step 2
208+
await userEvent.click(getByRole('button', { name: 'Next' }));
209+
expect(getByText('Step 2')).toBeInTheDocument();
210+
expect(queryByText('Step 1')).not.toBeInTheDocument();
211+
212+
// Click next again - should stay at step 2 (last step)
213+
await userEvent.click(getByRole('button', { name: 'Next' }));
214+
expect(getByText('Step 2')).toBeInTheDocument();
215+
expect(queryByText('Step 1')).not.toBeInTheDocument();
216+
});
217+
});
218+
219+
describe('controlled', () => {
220+
test('does not change steps internally when controlled', async () => {
221+
const onStepChange = jest.fn();
222+
223+
const { getByText, queryByText, getByRole, queryByRole } = render(
224+
<Wizard activeStep={0} onStepChange={onStepChange}>
225+
<Wizard.Step title="Step 1">
226+
<div data-testid="step-1-content">Content 1</div>
227+
</Wizard.Step>
228+
<Wizard.Step title="Step 2">
229+
<div data-testid="step-2-content">Content 2</div>
230+
</Wizard.Step>
231+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
232+
</Wizard>,
233+
);
234+
235+
// Should start at step 1
236+
expect(getByText('Step 1')).toBeInTheDocument();
237+
238+
// Click next
239+
await userEvent.click(getByRole('button', { name: 'Next' }));
240+
241+
// Should still be at step 1 since it's controlled
242+
expect(getByText('Step 1')).toBeInTheDocument();
243+
expect(queryByText('Step 2')).not.toBeInTheDocument();
244+
245+
// But onStepChange should have been called
246+
expect(onStepChange).toHaveBeenCalledWith(1);
247+
});
248+
});
249+
});
8250
});

0 commit comments

Comments
 (0)