Skip to content

Commit e0707ff

Browse files
TheSonOfThompTheSonOfThomp
committed
adds test utils
1 parent f354e77 commit e0707ff

File tree

3 files changed

+488
-4
lines changed

3 files changed

+488
-4
lines changed

‎packages/wizard/src/testing/getTestUtils.spec.tsx‎

Lines changed: 344 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,350 @@
11
import React from 'react';
22
import { render } from '@testing-library/react';
33

4-
import { Wizard } from '.';
4+
import { Wizard } from '../Wizard';
5+
6+
import { getTestUtils } from './getTestUtils';
57

68
describe('packages/wizard/getTestUtils', () => {
7-
test('condition', () => {});
9+
describe('Current Step utils', () => {
10+
test('getCurrentStep returns the currently active step element', () => {
11+
render(
12+
<Wizard>
13+
<Wizard.Step>
14+
<div data-testid="step-1">Step 1 content</div>
15+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
16+
</Wizard.Step>
17+
<Wizard.Step>
18+
<div data-testid="step-2">Step 2 content</div>
19+
<Wizard.Footer primaryButtonProps={{ children: 'Finish' }} />
20+
</Wizard.Step>
21+
</Wizard>,
22+
);
23+
24+
const { getCurrentStep } = getTestUtils();
25+
const step = getCurrentStep();
26+
expect(step).toBeInTheDocument();
27+
expect(step).toHaveAttribute('data-lgid', 'lg-wizard-step');
28+
// Verify it's the first step
29+
expect(step).toContainElement(
30+
document.querySelector('[data-testid="step-1"]'),
31+
);
32+
expect(step).toHaveTextContent('Step 1 content');
33+
// Verify second step is not rendered
34+
expect(document.querySelector('[data-testid="step-2"]')).toBeNull();
35+
});
36+
37+
test('getCurrentStep returns different step when activeStep changes', () => {
38+
const { rerender } = render(
39+
<Wizard activeStep={0}>
40+
<Wizard.Step>
41+
<div data-testid="step-1">Step 1</div>
42+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
43+
</Wizard.Step>
44+
<Wizard.Step>
45+
<div data-testid="step-2">Step 2</div>
46+
<Wizard.Footer primaryButtonProps={{ children: 'Finish' }} />
47+
</Wizard.Step>
48+
</Wizard>,
49+
);
50+
51+
const { getCurrentStep } = getTestUtils();
52+
const step1 = getCurrentStep();
53+
expect(step1).toHaveTextContent('Step 1');
54+
55+
rerender(
56+
<Wizard activeStep={1}>
57+
<Wizard.Step>
58+
<div data-testid="step-1">Step 1</div>
59+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
60+
</Wizard.Step>
61+
<Wizard.Step>
62+
<div data-testid="step-2">Step 2</div>
63+
<Wizard.Footer primaryButtonProps={{ children: 'Finish' }} />
64+
</Wizard.Step>
65+
</Wizard>,
66+
);
67+
68+
const step2 = getCurrentStep();
69+
expect(step2).toHaveTextContent('Step 2');
70+
expect(step2).not.toBe(step1);
71+
});
72+
73+
test('queryCurrentStep returns null when no step is present', () => {
74+
render(<div>No wizard here</div>);
75+
76+
const { queryCurrentStep } = getTestUtils();
77+
const step = queryCurrentStep();
78+
expect(step).not.toBeInTheDocument();
79+
});
80+
81+
test('findCurrentStep finds the current step element', async () => {
82+
render(
83+
<Wizard>
84+
<Wizard.Step>
85+
<div data-testid="step-content">Step 1</div>
86+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
87+
</Wizard.Step>
88+
</Wizard>,
89+
);
90+
91+
const { findCurrentStep } = getTestUtils();
92+
const step = await findCurrentStep();
93+
expect(step).toBeInTheDocument();
94+
expect(step).toContainElement(
95+
document.querySelector('[data-testid="step-content"]'),
96+
);
97+
});
98+
});
99+
100+
describe('Footer utils', () => {
101+
test('getFooter returns the correct footer element', () => {
102+
render(
103+
<Wizard>
104+
<Wizard.Step>
105+
<div>Step 1</div>
106+
<Wizard.Footer
107+
primaryButtonProps={{ children: 'Next Step' }}
108+
cancelButtonProps={{ children: 'Cancel Action' }}
109+
/>
110+
</Wizard.Step>
111+
</Wizard>,
112+
);
113+
114+
const { getFooter } = getTestUtils();
115+
const footer = getFooter();
116+
expect(footer).toBeInTheDocument();
117+
expect(footer.tagName).toBe('FOOTER');
118+
expect(footer).toHaveAttribute('data-testid', 'lg-wizard-footer');
119+
// Verify it contains the buttons
120+
expect(footer).toHaveTextContent('Next Step');
121+
expect(footer).toHaveTextContent('Cancel Action');
122+
});
123+
124+
test('queryFooter returns null when footer is not present', () => {
125+
render(<div>No wizard here</div>);
126+
127+
const { queryFooter } = getTestUtils();
128+
const footer = queryFooter();
129+
expect(footer).not.toBeInTheDocument();
130+
});
131+
132+
test('findFooter finds the footer element', async () => {
133+
render(
134+
<Wizard>
135+
<Wizard.Step>
136+
<div>Step 1</div>
137+
<Wizard.Footer primaryButtonProps={{ children: 'Submit' }} />
138+
</Wizard.Step>
139+
</Wizard>,
140+
);
141+
142+
const { findFooter } = getTestUtils();
143+
const footer = await findFooter();
144+
expect(footer).toBeInTheDocument();
145+
expect(footer).toHaveTextContent('Submit');
146+
});
147+
});
148+
149+
describe('Button utils', () => {
150+
test('getPrimaryButton returns the correct primary button element', () => {
151+
render(
152+
<Wizard>
153+
<Wizard.Step>
154+
<div>Step 1</div>
155+
<Wizard.Footer primaryButtonProps={{ children: 'Next Step' }} />
156+
</Wizard.Step>
157+
</Wizard>,
158+
);
159+
160+
const { getPrimaryButton } = getTestUtils();
161+
const primaryButton = getPrimaryButton();
162+
expect(primaryButton).toBeInTheDocument();
163+
expect(primaryButton.tagName).toBe('BUTTON');
164+
expect(primaryButton).toHaveAttribute(
165+
'data-testid',
166+
'lg-wizard-footer-primary_button',
167+
);
168+
expect(primaryButton).toHaveTextContent('Next Step');
169+
});
170+
171+
test('queryPrimaryButton returns null when button is not present', () => {
172+
render(<div>No wizard here</div>);
173+
174+
const { queryPrimaryButton } = getTestUtils();
175+
const button = queryPrimaryButton();
176+
expect(button).not.toBeInTheDocument();
177+
});
178+
179+
test('findPrimaryButton finds the primary button element', async () => {
180+
render(
181+
<Wizard>
182+
<Wizard.Step>
183+
<div>Step 1</div>
184+
<Wizard.Footer primaryButtonProps={{ children: 'Continue' }} />
185+
</Wizard.Step>
186+
</Wizard>,
187+
);
188+
189+
const { findPrimaryButton } = getTestUtils();
190+
const button = await findPrimaryButton();
191+
expect(button).toBeInTheDocument();
192+
expect(button).toHaveTextContent('Continue');
193+
});
194+
195+
test('getBackButton returns the correct back button element', () => {
196+
render(
197+
<Wizard activeStep={1}>
198+
<Wizard.Step>
199+
<div>Step 1</div>
200+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
201+
</Wizard.Step>
202+
<Wizard.Step>
203+
<div>Step 2</div>
204+
<Wizard.Footer
205+
backButtonProps={{ children: 'Go Back' }}
206+
primaryButtonProps={{ children: 'Finish' }}
207+
/>
208+
</Wizard.Step>
209+
</Wizard>,
210+
);
211+
212+
const { getBackButton } = getTestUtils();
213+
const backButton = getBackButton();
214+
expect(backButton).toBeInTheDocument();
215+
expect(backButton.tagName).toBe('BUTTON');
216+
expect(backButton).toHaveAttribute(
217+
'data-testid',
218+
'lg-wizard-footer-back_button',
219+
);
220+
expect(backButton).toHaveTextContent('Go Back');
221+
});
222+
223+
test('queryBackButton returns null when back button is not present', () => {
224+
render(
225+
<Wizard>
226+
<Wizard.Step>
227+
<div>Step 1</div>
228+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
229+
</Wizard.Step>
230+
</Wizard>,
231+
);
232+
233+
const { queryBackButton } = getTestUtils();
234+
const button = queryBackButton();
235+
expect(button).not.toBeInTheDocument();
236+
});
237+
238+
test('findBackButton finds the back button element', async () => {
239+
render(
240+
<Wizard activeStep={1}>
241+
<Wizard.Step>
242+
<div>Step 1</div>
243+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
244+
</Wizard.Step>
245+
<Wizard.Step>
246+
<div>Step 2</div>
247+
<Wizard.Footer
248+
backButtonProps={{ children: 'Previous' }}
249+
primaryButtonProps={{ children: 'Next' }}
250+
/>
251+
</Wizard.Step>
252+
</Wizard>,
253+
);
254+
255+
const { findBackButton } = getTestUtils();
256+
const button = await findBackButton();
257+
expect(button).toBeInTheDocument();
258+
expect(button).toHaveTextContent('Previous');
259+
});
260+
261+
test('getCancelButton returns the correct cancel button element', () => {
262+
render(
263+
<Wizard>
264+
<Wizard.Step>
265+
<div>Step 1</div>
266+
<Wizard.Footer
267+
cancelButtonProps={{ children: 'Cancel Process' }}
268+
primaryButtonProps={{ children: 'Next' }}
269+
/>
270+
</Wizard.Step>
271+
</Wizard>,
272+
);
273+
274+
const { getCancelButton } = getTestUtils();
275+
const cancelButton = getCancelButton();
276+
expect(cancelButton).toBeInTheDocument();
277+
expect(cancelButton.tagName).toBe('BUTTON');
278+
expect(cancelButton).toHaveAttribute(
279+
'data-testid',
280+
'lg-wizard-footer-cancel_button',
281+
);
282+
expect(cancelButton).toHaveTextContent('Cancel Process');
283+
});
284+
285+
test('queryCancelButton returns null when cancel button is not present', () => {
286+
render(
287+
<Wizard>
288+
<Wizard.Step>
289+
<div>Step 1</div>
290+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
291+
</Wizard.Step>
292+
</Wizard>,
293+
);
294+
295+
const { queryCancelButton } = getTestUtils();
296+
const button = queryCancelButton();
297+
expect(button).not.toBeInTheDocument();
298+
});
299+
300+
test('findCancelButton finds the cancel button element', async () => {
301+
render(
302+
<Wizard>
303+
<Wizard.Step>
304+
<div>Step 1</div>
305+
<Wizard.Footer
306+
cancelButtonProps={{ children: 'Abort' }}
307+
primaryButtonProps={{ children: 'Next' }}
308+
/>
309+
</Wizard.Step>
310+
</Wizard>,
311+
);
312+
313+
const { findCancelButton } = getTestUtils();
314+
const button = await findCancelButton();
315+
expect(button).toBeInTheDocument();
316+
expect(button).toHaveTextContent('Abort');
317+
});
318+
});
319+
320+
describe('with custom lgId', () => {
321+
test('uses custom lgId when provided', () => {
322+
render(
323+
<Wizard data-lgid="custom-wizard">
324+
<Wizard.Step>
325+
<div data-testid="custom-content">Step 1</div>
326+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
327+
</Wizard.Step>
328+
</Wizard>,
329+
);
330+
331+
const { getCurrentStep, getFooter, getPrimaryButton } =
332+
getTestUtils('custom-wizard');
333+
334+
const step = getCurrentStep();
335+
expect(step).toBeInTheDocument();
336+
expect(step).toHaveAttribute('data-lgid', 'custom-wizard-step');
337+
338+
const footer = getFooter();
339+
expect(footer).toBeInTheDocument();
340+
expect(footer).toHaveAttribute('data-testid', 'custom-wizard-footer');
341+
342+
const button = getPrimaryButton();
343+
expect(button).toBeInTheDocument();
344+
expect(button).toHaveAttribute(
345+
'data-testid',
346+
'custom-wizard-footer-primary_button',
347+
);
348+
});
349+
});
8350
});

0 commit comments

Comments
 (0)