Skip to content

Commit f848f24

Browse files
TheSonOfThompTheSonOfThomp
committed
footer tests
1 parent 0d85320 commit f848f24

File tree

2 files changed

+227
-7
lines changed

2 files changed

+227
-7
lines changed

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

Lines changed: 223 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
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 '../Wizard';
6+
import { useWizardStepContext } from '../WizardStep';
57

68
import { WizardFooter } from '.';
79

@@ -18,18 +20,233 @@ describe('packages/wizard-footer', () => {
1820

1921
expect(container.firstChild).toBeNull();
2022
});
23+
2124
test('renders in WizardContext', () => {
2225
const { getByTestId } = render(
2326
<Wizard>
24-
<WizardFooter
25-
data-testid="footer"
26-
primaryButtonProps={{ children: 'Next' }}
27-
>
28-
Content
29-
</WizardFooter>
27+
<Wizard.Step>
28+
<WizardFooter
29+
data-testid="footer"
30+
primaryButtonProps={{ children: 'Next' }}
31+
>
32+
Content
33+
</WizardFooter>
34+
</Wizard.Step>
3035
</Wizard>,
3136
);
3237

3338
expect(getByTestId('footer')).toBeInTheDocument();
3439
});
40+
41+
describe('primary button behavior', () => {
42+
test('primary button is enabled by default', () => {
43+
const { getByRole } = render(
44+
<Wizard>
45+
<Wizard.Step>
46+
<Wizard.Footer primaryButtonProps={{ children: 'Continue' }} />
47+
</Wizard.Step>
48+
</Wizard>,
49+
);
50+
51+
const primaryButton = getByRole('button', { name: 'Continue' });
52+
expect(primaryButton).toBeEnabled();
53+
});
54+
55+
test('primary button advances to next step when clicked', async () => {
56+
const onStepChange = jest.fn();
57+
58+
const { getByRole, getByTestId } = render(
59+
<Wizard onStepChange={onStepChange}>
60+
<Wizard.Step>
61+
<div data-testid="step-1">Step 1</div>
62+
<Wizard.Footer primaryButtonProps={{ children: 'Next' }} />
63+
</Wizard.Step>
64+
<Wizard.Step>
65+
<div data-testid="step-2">Step 2</div>
66+
<Wizard.Footer primaryButtonProps={{ children: 'Finish' }} />
67+
</Wizard.Step>
68+
</Wizard>,
69+
);
70+
71+
expect(getByTestId('step-1')).toBeInTheDocument();
72+
73+
const nextButton = getByRole('button', { name: 'Next' });
74+
await userEvent.click(nextButton);
75+
76+
expect(onStepChange).toHaveBeenCalledWith(1);
77+
expect(getByTestId('step-2')).toBeInTheDocument();
78+
});
79+
});
80+
81+
describe('requiresAcknowledgement', () => {
82+
test('primary button is disabled when step requires acknowledgement and is not acknowledged', () => {
83+
const { getByRole } = render(
84+
<Wizard>
85+
<Wizard.Step requiresAcknowledgement>
86+
<div>Step content</div>
87+
<Wizard.Footer primaryButtonProps={{ children: 'Continue' }} />
88+
</Wizard.Step>
89+
</Wizard>,
90+
);
91+
92+
const primaryButton = getByRole('button', { name: 'Continue' });
93+
expect(primaryButton).toHaveAttribute('aria-disabled', 'true');
94+
});
95+
96+
test('primary button is enabled when step requires acknowledgement and is acknowledged', async () => {
97+
const TestComponent = () => {
98+
const { setAcknowledged } = useWizardStepContext();
99+
return (
100+
<>
101+
<div>Step content</div>
102+
<button onClick={() => setAcknowledged(true)}>Acknowledge</button>
103+
<Wizard.Footer primaryButtonProps={{ children: 'Continue' }} />
104+
</>
105+
);
106+
};
107+
108+
const { getByRole } = render(
109+
<Wizard>
110+
<Wizard.Step requiresAcknowledgement>
111+
<TestComponent />
112+
</Wizard.Step>
113+
</Wizard>,
114+
);
115+
116+
const primaryButton = getByRole('button', { name: 'Continue' });
117+
expect(primaryButton).toHaveAttribute('aria-disabled', 'true');
118+
119+
await userEvent.click(getByRole('button', { name: 'Acknowledge' }));
120+
121+
expect(primaryButton).toHaveAttribute('aria-disabled', 'false');
122+
});
123+
124+
test('primary button is enabled when step does not require acknowledgement', () => {
125+
const { getByRole } = render(
126+
<Wizard>
127+
<Wizard.Step>
128+
<div>Step content</div>
129+
<Wizard.Footer primaryButtonProps={{ children: 'Continue' }} />
130+
</Wizard.Step>
131+
</Wizard>,
132+
);
133+
134+
const primaryButton = getByRole('button', { name: 'Continue' });
135+
expect(primaryButton).toHaveAttribute('aria-disabled', 'false');
136+
});
137+
138+
test('primary button can advance step after acknowledgement', async () => {
139+
const TestComponent = () => {
140+
const { setAcknowledged } = useWizardStepContext();
141+
return (
142+
<>
143+
<div>Step content</div>
144+
<button onClick={() => setAcknowledged(true)}>Acknowledge</button>
145+
<Wizard.Footer primaryButtonProps={{ children: 'Continue' }} />
146+
</>
147+
);
148+
};
149+
150+
const { getByRole, getByTestId } = render(
151+
<Wizard>
152+
<Wizard.Step requiresAcknowledgement>
153+
<div data-testid="step-1">Step 1</div>
154+
<TestComponent />
155+
</Wizard.Step>
156+
<Wizard.Step>
157+
<div data-testid="step-2">Step 2</div>
158+
</Wizard.Step>
159+
</Wizard>,
160+
);
161+
162+
expect(getByTestId('step-1')).toBeInTheDocument();
163+
164+
const primaryButton = getByRole('button', { name: 'Continue' });
165+
expect(primaryButton).toHaveAttribute('aria-disabled', 'true');
166+
167+
// Acknowledge the step
168+
await userEvent.click(getByRole('button', { name: 'Acknowledge' }));
169+
expect(primaryButton).toHaveAttribute('aria-disabled', 'false');
170+
171+
// Advance to next step
172+
await userEvent.click(primaryButton);
173+
expect(getByTestId('step-2')).toBeInTheDocument();
174+
});
175+
});
176+
177+
describe('back button', () => {
178+
test('back button is not rendered on first step', () => {
179+
const { queryByRole } = render(
180+
<Wizard>
181+
<Wizard.Step>
182+
<Wizard.Footer
183+
primaryButtonProps={{ children: 'Next' }}
184+
backButtonProps={{ children: 'Back' }}
185+
/>
186+
</Wizard.Step>
187+
</Wizard>,
188+
);
189+
190+
expect(queryByRole('button', { name: 'Back' })).not.toBeInTheDocument();
191+
});
192+
193+
test('back button is rendered on subsequent steps', async () => {
194+
const { getByRole } = render(
195+
<Wizard>
196+
<Wizard.Step>
197+
<div data-testid="step-1">Step 1</div>
198+
<Wizard.Footer
199+
primaryButtonProps={{ children: 'Next' }}
200+
backButtonProps={{ children: 'Back' }}
201+
/>
202+
</Wizard.Step>
203+
<Wizard.Step>
204+
<div data-testid="step-2">Step 2</div>
205+
<Wizard.Footer
206+
primaryButtonProps={{ children: 'Finish' }}
207+
backButtonProps={{ children: 'Back' }}
208+
/>
209+
</Wizard.Step>
210+
</Wizard>,
211+
);
212+
213+
// Move to step 2
214+
await userEvent.click(getByRole('button', { name: 'Next' }));
215+
216+
// Back button should now be visible
217+
expect(getByRole('button', { name: 'Back' })).toBeInTheDocument();
218+
});
219+
220+
test('back button navigates to previous step', async () => {
221+
const onStepChange = jest.fn();
222+
223+
const { getByRole, getByTestId } = render(
224+
<Wizard onStepChange={onStepChange}>
225+
<Wizard.Step>
226+
<div data-testid="step-1">Step 1</div>
227+
<Wizard.Footer
228+
primaryButtonProps={{ children: 'Next' }}
229+
backButtonProps={{ children: 'Back' }}
230+
/>
231+
</Wizard.Step>
232+
<Wizard.Step>
233+
<div data-testid="step-2">Step 2</div>
234+
<Wizard.Footer
235+
primaryButtonProps={{ children: 'Finish' }}
236+
backButtonProps={{ children: 'Back' }}
237+
/>
238+
</Wizard.Step>
239+
</Wizard>,
240+
);
241+
242+
// Move to step 2
243+
await userEvent.click(getByRole('button', { name: 'Next' }));
244+
expect(getByTestId('step-2')).toBeInTheDocument();
245+
246+
// Go back to step 1
247+
await userEvent.click(getByRole('button', { name: 'Back' }));
248+
expect(onStepChange).toHaveBeenCalledWith(0);
249+
expect(getByTestId('step-1')).toBeInTheDocument();
250+
});
251+
});
35252
});

‎packages/wizard/src/WizardFooter/WizardFooter.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@ export const WizardFooter = CompoundSubComponent(
2020
}: WizardFooterProps) => {
2121
const { isWizardContext, activeStep, updateStep } = useWizardContext();
2222
const { isAcknowledged, requiresAcknowledgement } = useWizardStepContext();
23-
const isPrimaryButtonDisabled = requiresAcknowledgement && !isAcknowledged;
23+
const isPrimaryButtonDisabled =
24+
(requiresAcknowledgement && !isAcknowledged) ||
25+
primaryButtonProps.disabled ||
26+
false;
2427

2528
const handleBackButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
2629
updateStep(activeStep - 1);

0 commit comments

Comments
 (0)