Skip to content

Commit fb638d3

Browse files
TheSonOfThompTheSonOfThomp
committed
Update Wizard.spec.tsx
1 parent f848f24 commit fb638d3

File tree

1 file changed

+152
-58
lines changed

1 file changed

+152
-58
lines changed

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

Lines changed: 152 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,19 @@ import React from 'react';
22
import { render } from '@testing-library/react';
33
import userEvent from '@testing-library/user-event';
44

5+
import { useWizardStepContext } from '../WizardStep';
6+
57
import { Wizard } from '.';
68

79
describe('packages/wizard', () => {
810
describe('rendering', () => {
911
test('renders first Wizard.Step', () => {
1012
const { getByTestId, queryByTestId } = render(
1113
<Wizard>
12-
<Wizard.Step title="Step 1" description="First step">
14+
<Wizard.Step>
1315
<div data-testid="step-1-content">Step 1 content</div>
1416
</Wizard.Step>
15-
<Wizard.Step title="Step 2">
17+
<Wizard.Step>
1618
<div data-testid="step-2-content">Step 2 content</div>
1719
</Wizard.Step>
1820
</Wizard>,
@@ -24,14 +26,14 @@ describe('packages/wizard', () => {
2426
test('renders Wizard.Footer', () => {
2527
const { getByTestId } = render(
2628
<Wizard>
27-
<Wizard.Step title="Step 1">
29+
<Wizard.Step>
2830
<div data-testid="step-content">Content</div>
31+
<Wizard.Footer
32+
data-testid="wizard-footer"
33+
primaryButtonProps={{ children: 'Next' }}
34+
cancelButtonProps={{ children: 'Cancel' }}
35+
/>
2936
</Wizard.Step>
30-
<Wizard.Footer
31-
data-testid="wizard-footer"
32-
primaryButtonProps={{ children: 'Next' }}
33-
cancelButtonProps={{ children: 'Cancel' }}
34-
/>
3537
</Wizard>,
3638
);
3739

@@ -52,10 +54,10 @@ describe('packages/wizard', () => {
5254
test('renders correct step when activeStep is provided', () => {
5355
const { queryByTestId, getByTestId } = render(
5456
<Wizard activeStep={1}>
55-
<Wizard.Step title="Step 1">
57+
<Wizard.Step>
5658
<div data-testid="step-1-content">Step 1 content</div>
5759
</Wizard.Step>
58-
<Wizard.Step title="Step 2">
60+
<Wizard.Step>
5961
<div data-testid="step-2-content">Step 2 content</div>
6062
</Wizard.Step>
6163
</Wizard>,
@@ -69,16 +71,20 @@ describe('packages/wizard', () => {
6971
test('does not render back button on first step', () => {
7072
const { queryByRole, getByRole } = render(
7173
<Wizard activeStep={0}>
72-
<Wizard.Step title="Step 1">
74+
<Wizard.Step>
7375
<div data-testid="step-1-content">Content 1</div>
76+
<Wizard.Footer
77+
backButtonProps={{ children: 'Back' }}
78+
primaryButtonProps={{ children: 'Next' }}
79+
/>
7480
</Wizard.Step>
75-
<Wizard.Step title="Step 2">
81+
<Wizard.Step>
7682
<div data-testid="step-2-content">Content 2</div>
83+
<Wizard.Footer
84+
backButtonProps={{ children: 'Back' }}
85+
primaryButtonProps={{ children: 'Next' }}
86+
/>
7787
</Wizard.Step>
78-
<Wizard.Footer
79-
backButtonProps={{ children: 'Back' }}
80-
primaryButtonProps={{ children: 'Next' }}
81-
/>
8288
</Wizard>,
8389
);
8490

@@ -90,16 +96,20 @@ describe('packages/wizard', () => {
9096
test('renders back button on second step', () => {
9197
const { getByRole } = render(
9298
<Wizard activeStep={1}>
93-
<Wizard.Step title="Step 1">
99+
<Wizard.Step>
94100
<div data-testid="step-1-content">Content 1</div>
101+
<Wizard.Footer
102+
backButtonProps={{ children: 'Back' }}
103+
primaryButtonProps={{ children: 'Next' }}
104+
/>
95105
</Wizard.Step>
96-
<Wizard.Step title="Step 2">
106+
<Wizard.Step>
97107
<div data-testid="step-2-content">Content 2</div>
108+
<Wizard.Footer
109+
backButtonProps={{ children: 'Back' }}
110+
primaryButtonProps={{ children: 'Next' }}
111+
/>
98112
</Wizard.Step>
99-
<Wizard.Footer
100-
backButtonProps={{ children: 'Back' }}
101-
primaryButtonProps={{ children: 'Next' }}
102-
/>
103113
</Wizard>,
104114
);
105115

@@ -114,13 +124,14 @@ describe('packages/wizard', () => {
114124

115125
const { getByRole } = render(
116126
<Wizard activeStep={0} onStepChange={onStepChange}>
117-
<Wizard.Step title="Step 1">
127+
<Wizard.Step>
118128
<div data-testid="step-1-content">Content 1</div>
129+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
119130
</Wizard.Step>
120-
<Wizard.Step title="Step 2">
131+
<Wizard.Step>
121132
<div data-testid="step-2-content">Content 2</div>
133+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
122134
</Wizard.Step>
123-
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
124135
</Wizard>,
125136
);
126137

@@ -134,16 +145,20 @@ describe('packages/wizard', () => {
134145

135146
const { getByRole } = render(
136147
<Wizard activeStep={1} onStepChange={onStepChange}>
137-
<Wizard.Step title="Step 1">
148+
<Wizard.Step>
138149
<div data-testid="step-1-content">Content 1</div>
150+
<Wizard.Footer
151+
backButtonProps={{ children: 'Back' }}
152+
primaryButtonProps={{ children: 'Next' }}
153+
/>
139154
</Wizard.Step>
140-
<Wizard.Step title="Step 2">
155+
<Wizard.Step>
141156
<div data-testid="step-2-content">Content 2</div>
157+
<Wizard.Footer
158+
backButtonProps={{ children: 'Back' }}
159+
primaryButtonProps={{ children: 'Next' }}
160+
/>
142161
</Wizard.Step>
143-
<Wizard.Footer
144-
backButtonProps={{ children: 'Back' }}
145-
primaryButtonProps={{ children: 'Next' }}
146-
/>
147162
</Wizard>,
148163
);
149164

@@ -160,17 +175,22 @@ describe('packages/wizard', () => {
160175

161176
const { getByRole } = render(
162177
<Wizard activeStep={1} onStepChange={onStepChange}>
163-
<Wizard.Step title="Step 1">
178+
<Wizard.Step>
164179
<div data-testid="step-1-content">Content 1</div>
180+
<Wizard.Footer
181+
backButtonProps={{ children: 'Back', onClick: onBackClick }}
182+
primaryButtonProps={{ children: 'Next', onClick: onPrimaryClick }}
183+
cancelButtonProps={{ children: 'Cancel', onClick: onCancelClick }}
184+
/>
165185
</Wizard.Step>
166-
<Wizard.Step title="Step 2">
186+
<Wizard.Step>
167187
<div data-testid="step-2-content">Content 2</div>
188+
<Wizard.Footer
189+
backButtonProps={{ children: 'Back', onClick: onBackClick }}
190+
primaryButtonProps={{ children: 'Next', onClick: onPrimaryClick }}
191+
cancelButtonProps={{ children: 'Cancel', onClick: onCancelClick }}
192+
/>
168193
</Wizard.Step>
169-
<Wizard.Footer
170-
backButtonProps={{ children: 'Back', onClick: onBackClick }}
171-
primaryButtonProps={{ children: 'Next', onClick: onPrimaryClick }}
172-
cancelButtonProps={{ children: 'Cancel', onClick: onCancelClick }}
173-
/>
174194
</Wizard>,
175195
);
176196

@@ -188,58 +208,60 @@ describe('packages/wizard', () => {
188208

189209
describe('uncontrolled', () => {
190210
test('does not increment step beyond Steps count', async () => {
191-
const { getByText, queryByText, getByRole } = render(
211+
const { getByTestId, queryByTestId, getByRole } = render(
192212
<Wizard>
193-
<Wizard.Step title="Step 1">
213+
<Wizard.Step>
194214
<div data-testid="step-1-content">Content 1</div>
215+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
195216
</Wizard.Step>
196-
<Wizard.Step title="Step 2">
217+
<Wizard.Step>
197218
<div data-testid="step-2-content">Content 2</div>
219+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
198220
</Wizard.Step>
199-
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
200221
</Wizard>,
201222
);
202223

203224
// Start at step 1
204-
expect(getByText('Step 1')).toBeInTheDocument();
225+
expect(getByTestId('step-1-content')).toBeInTheDocument();
205226

206227
// Click next to go to step 2
207228
await userEvent.click(getByRole('button', { name: 'Next' }));
208-
expect(getByText('Step 2')).toBeInTheDocument();
209-
expect(queryByText('Step 1')).not.toBeInTheDocument();
229+
expect(getByTestId('step-2-content')).toBeInTheDocument();
230+
expect(queryByTestId('step-1-content')).not.toBeInTheDocument();
210231

211232
// Click next again - should stay at step 2 (last step)
212233
await userEvent.click(getByRole('button', { name: 'Next' }));
213-
expect(getByText('Step 2')).toBeInTheDocument();
214-
expect(queryByText('Step 1')).not.toBeInTheDocument();
234+
expect(getByTestId('step-2-content')).toBeInTheDocument();
235+
expect(queryByTestId('step-1-content')).not.toBeInTheDocument();
215236
});
216237
});
217238

218239
describe('controlled', () => {
219240
test('does not change steps internally when controlled', async () => {
220241
const onStepChange = jest.fn();
221242

222-
const { getByText, queryByText, getByRole } = render(
243+
const { getByTestId, queryByTestId, getByRole } = render(
223244
<Wizard activeStep={0} onStepChange={onStepChange}>
224-
<Wizard.Step title="Step 1">
245+
<Wizard.Step>
225246
<div data-testid="step-1-content">Content 1</div>
247+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
226248
</Wizard.Step>
227-
<Wizard.Step title="Step 2">
249+
<Wizard.Step>
228250
<div data-testid="step-2-content">Content 2</div>
251+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
229252
</Wizard.Step>
230-
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
231253
</Wizard>,
232254
);
233255

234256
// Should start at step 1
235-
expect(getByText('Step 1')).toBeInTheDocument();
257+
expect(getByTestId('step-1-content')).toBeInTheDocument();
236258

237259
// Click next
238260
await userEvent.click(getByRole('button', { name: 'Next' }));
239261

240262
// Should still be at step 1 since it's controlled
241-
expect(getByText('Step 1')).toBeInTheDocument();
242-
expect(queryByText('Step 2')).not.toBeInTheDocument();
263+
expect(getByTestId('step-1-content')).toBeInTheDocument();
264+
expect(queryByTestId('step-2-content')).not.toBeInTheDocument();
243265

244266
// But onStepChange should have been called
245267
expect(onStepChange).toHaveBeenCalledWith(1);
@@ -252,10 +274,10 @@ describe('packages/wizard', () => {
252274

253275
render(
254276
<Wizard activeStep={5}>
255-
<Wizard.Step title="Step 1">
277+
<Wizard.Step>
256278
<div data-testid="step-1-content">Content 1</div>
257279
</Wizard.Step>
258-
<Wizard.Step title="Step 2">
280+
<Wizard.Step>
259281
<div data-testid="step-2-content">Content 2</div>
260282
</Wizard.Step>
261283
</Wizard>,
@@ -276,10 +298,10 @@ describe('packages/wizard', () => {
276298

277299
render(
278300
<Wizard activeStep={-1}>
279-
<Wizard.Step title="Step 1">
301+
<Wizard.Step>
280302
<div data-testid="step-1-content">Content 1</div>
281303
</Wizard.Step>
282-
<Wizard.Step title="Step 2">
304+
<Wizard.Step>
283305
<div data-testid="step-2-content">Content 2</div>
284306
</Wizard.Step>
285307
</Wizard>,
@@ -293,5 +315,77 @@ describe('packages/wizard', () => {
293315
consoleWarnSpy.mockRestore();
294316
});
295317
});
318+
319+
describe('requiresAcknowledgement', () => {
320+
test('disables primary button when requiresAcknowledgement is true and not acknowledged', () => {
321+
const { getByRole } = render(
322+
<Wizard>
323+
<Wizard.Step requiresAcknowledgement>
324+
<div data-testid="step-1-content">Content 1</div>
325+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
326+
</Wizard.Step>
327+
</Wizard>,
328+
);
329+
330+
const primaryButton = getByRole('button', { name: 'Next' });
331+
expect(primaryButton).toHaveAttribute('aria-disabled', 'true');
332+
});
333+
334+
test('enables primary button when requiresAcknowledgement is true and acknowledged', async () => {
335+
const AcknowledgeButton = () => {
336+
const { setAcknowledged } = useWizardStepContext();
337+
return (
338+
<button onClick={() => setAcknowledged(true)}>Acknowledge</button>
339+
);
340+
};
341+
342+
const { getByRole } = render(
343+
<Wizard>
344+
<Wizard.Step requiresAcknowledgement>
345+
<div data-testid="step-1-content">Content 1</div>
346+
<AcknowledgeButton />
347+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
348+
</Wizard.Step>
349+
</Wizard>,
350+
);
351+
352+
const primaryButton = getByRole('button', { name: 'Next' });
353+
expect(primaryButton).toHaveAttribute('aria-disabled', 'true');
354+
355+
// Acknowledge the step
356+
const acknowledgeButton = getByRole('button', { name: 'Acknowledge' });
357+
await userEvent.click(acknowledgeButton);
358+
359+
expect(primaryButton).toHaveAttribute('aria-disabled', 'false');
360+
});
361+
362+
test('enables primary button when requiresAcknowledgement is false', () => {
363+
const { getByRole } = render(
364+
<Wizard>
365+
<Wizard.Step requiresAcknowledgement={false}>
366+
<div data-testid="step-1-content">Content 1</div>
367+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
368+
</Wizard.Step>
369+
</Wizard>,
370+
);
371+
372+
const primaryButton = getByRole('button', { name: 'Next' });
373+
expect(primaryButton).toHaveAttribute('aria-disabled', 'false');
374+
});
375+
376+
test('enables primary button when requiresAcknowledgement is not set (default)', () => {
377+
const { getByRole } = render(
378+
<Wizard>
379+
<Wizard.Step>
380+
<div data-testid="step-1-content">Content 1</div>
381+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
382+
</Wizard.Step>
383+
</Wizard>,
384+
);
385+
386+
const primaryButton = getByRole('button', { name: 'Next' });
387+
expect(primaryButton).toHaveAttribute('aria-disabled', 'false');
388+
});
389+
});
296390
});
297391
});

0 commit comments

Comments
 (0)