Skip to content

Commit 51228b9

Browse files
TheSonOfThompTheSonOfThomp
committed
creates delete wizard tests
1 parent 9f3b30d commit 51228b9

File tree

4 files changed

+252
-4
lines changed

4 files changed

+252
-4
lines changed

‎templates/delete-wizard/src/DeleteWizard/DeleteWizard.spec.tsx‎

Lines changed: 245 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,252 @@
11
import React from 'react';
22
import { render } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
4+
5+
import { getTestUtils } from '../testing';
36

47
import { DeleteWizard } from '.';
58

69
describe('packages/delete-wizard', () => {
7-
test('condition', () => {});
10+
describe('rendering', () => {
11+
test('renders step 1 by default', () => {
12+
const { getByTestId, queryByTestId } = render(
13+
<DeleteWizard>
14+
<DeleteWizard.Step>
15+
<div data-testid="step-1-content">Step 1 content</div>
16+
</DeleteWizard.Step>
17+
<DeleteWizard.Step>
18+
<div data-testid="step-2-content">Step 2 content</div>
19+
</DeleteWizard.Step>
20+
</DeleteWizard>,
21+
);
22+
23+
expect(getByTestId('step-1-content')).toBeInTheDocument();
24+
expect(queryByTestId('step-2-content')).not.toBeInTheDocument();
25+
});
26+
27+
test('renders a Header component as child', () => {
28+
render(
29+
<DeleteWizard>
30+
<DeleteWizard.Header pageTitle="Delete Cluster" />
31+
<DeleteWizard.Step>
32+
<div data-testid="step-1-content">Step 1 content</div>
33+
</DeleteWizard.Step>
34+
</DeleteWizard>,
35+
);
36+
37+
const { getHeader } = getTestUtils();
38+
const header = getHeader();
39+
40+
expect(header).toBeInTheDocument();
41+
expect(header).toHaveTextContent('Delete Cluster');
42+
});
43+
44+
test('renders Header above steps regardless of whether it is passed as the last react child', () => {
45+
const { container } = render(
46+
<DeleteWizard>
47+
<DeleteWizard.Step>
48+
<div data-testid="step-1-content">Step 1 content</div>
49+
</DeleteWizard.Step>
50+
<DeleteWizard.Header pageTitle="Delete Cluster" />
51+
</DeleteWizard>,
52+
);
53+
54+
const { getHeader, getActiveStep } = getTestUtils();
55+
const header = getHeader();
56+
const activeStep = getActiveStep();
57+
58+
// Get the parent (DeleteWizard root) to check order
59+
const deleteWizardRoot = container.firstChild as HTMLElement;
60+
const children = Array.from(deleteWizardRoot.children);
61+
62+
// Header should come before the active step in the DOM
63+
const headerIndex = children.indexOf(header);
64+
const stepIndex = children.findIndex(child => child.contains(activeStep));
65+
66+
expect(headerIndex).toBeLessThan(stepIndex);
67+
});
68+
69+
test('does not render any non-step or non-header children', () => {
70+
const { queryByTestId } = render(
71+
<DeleteWizard>
72+
<DeleteWizard.Header pageTitle="Delete Cluster" />
73+
<div data-testid="invalid-element-1">This should not render</div>
74+
<DeleteWizard.Step>
75+
<div data-testid="step-1-content">Step 1 content</div>
76+
</DeleteWizard.Step>
77+
<span data-testid="invalid-element-2">Also should not render</span>
78+
</DeleteWizard>,
79+
);
80+
81+
// Non-DeleteWizard elements should not be rendered
82+
expect(queryByTestId('invalid-element-1')).not.toBeInTheDocument();
83+
expect(queryByTestId('invalid-element-2')).not.toBeInTheDocument();
84+
// But valid children should be rendered
85+
expect(queryByTestId('step-1-content')).toBeInTheDocument();
86+
});
87+
88+
test('renders the step via activeStep prop', () => {
89+
const { queryByTestId, getByTestId } = render(
90+
<DeleteWizard activeStep={1}>
91+
<DeleteWizard.Header pageTitle="Delete Cluster" />
92+
<DeleteWizard.Step>
93+
<div data-testid="step-1-content">Step 1 content</div>
94+
</DeleteWizard.Step>
95+
<DeleteWizard.Step>
96+
<div data-testid="step-2-content">Step 2 content</div>
97+
</DeleteWizard.Step>
98+
</DeleteWizard>,
99+
);
100+
101+
// Should render the second step when activeStep is 1
102+
expect(queryByTestId('step-1-content')).not.toBeInTheDocument();
103+
expect(getByTestId('step-2-content')).toBeInTheDocument();
104+
});
105+
});
106+
107+
describe('interaction', () => {
108+
test('renders step 2 when primary button is clicked', () => {
109+
const { getByTestId, queryByTestId } = render(
110+
<DeleteWizard>
111+
<DeleteWizard.Header pageTitle="Delete Cluster" />
112+
<DeleteWizard.Step>
113+
<div data-testid="step-1-content">Step 1 content</div>
114+
<DeleteWizard.Footer primaryButtonText="Next" />
115+
</DeleteWizard.Step>
116+
<DeleteWizard.Step>
117+
<div data-testid="step-2-content">Step 2 content</div>
118+
<DeleteWizard.Footer primaryButtonText="Delete" />
119+
</DeleteWizard.Step>
120+
</DeleteWizard>,
121+
);
122+
123+
// Start at step 1
124+
expect(getByTestId('step-1-content')).toBeInTheDocument();
125+
expect(queryByTestId('step-2-content')).not.toBeInTheDocument();
126+
127+
// Click next to go to step 2
128+
const { getPrimaryButton } = getTestUtils();
129+
userEvent.click(getPrimaryButton());
130+
131+
expect(queryByTestId('step-1-content')).not.toBeInTheDocument();
132+
expect(getByTestId('step-2-content')).toBeInTheDocument();
133+
});
134+
135+
test('calls onStepChange when the primary button is clicked', () => {
136+
const onStepChange = jest.fn();
137+
138+
render(
139+
<DeleteWizard activeStep={0} onStepChange={onStepChange}>
140+
<DeleteWizard.Header pageTitle="Delete Cluster" />
141+
<DeleteWizard.Step>
142+
<div data-testid="step-1-content">Step 1 content</div>
143+
<DeleteWizard.Footer primaryButtonText="Next" />
144+
</DeleteWizard.Step>
145+
<DeleteWizard.Step>
146+
<div data-testid="step-2-content">Step 2 content</div>
147+
<DeleteWizard.Footer primaryButtonText="Delete" />
148+
</DeleteWizard.Step>
149+
</DeleteWizard>,
150+
);
151+
152+
const { getPrimaryButton } = getTestUtils();
153+
userEvent.click(getPrimaryButton());
154+
155+
expect(onStepChange).toHaveBeenCalledWith(1);
156+
});
157+
158+
test('calls onStepChange when the back button is clicked', () => {
159+
const onStepChange = jest.fn();
160+
161+
render(
162+
<DeleteWizard activeStep={1} onStepChange={onStepChange}>
163+
<DeleteWizard.Header pageTitle="Delete Cluster" />
164+
<DeleteWizard.Step>
165+
<div data-testid="step-1-content">Step 1 content</div>
166+
<DeleteWizard.Footer primaryButtonText="Next" />
167+
</DeleteWizard.Step>
168+
<DeleteWizard.Step>
169+
<div data-testid="step-2-content">Step 2 content</div>
170+
<DeleteWizard.Footer
171+
backButtonText="Back"
172+
primaryButtonText="Delete"
173+
/>
174+
</DeleteWizard.Step>
175+
</DeleteWizard>,
176+
);
177+
178+
const { getBackButton } = getTestUtils();
179+
userEvent.click(getBackButton());
180+
181+
expect(onStepChange).toHaveBeenCalledWith(0);
182+
});
183+
184+
test('calls onCancel when the cancel button is clicked', () => {
185+
const onCancel = jest.fn();
186+
187+
render(
188+
<DeleteWizard onCancel={onCancel}>
189+
<DeleteWizard.Header pageTitle="Delete Cluster" />
190+
<DeleteWizard.Step>
191+
<div data-testid="step-1-content">Step 1 content</div>
192+
<DeleteWizard.Footer
193+
primaryButtonText="Next"
194+
cancelButtonText="Cancel"
195+
/>
196+
</DeleteWizard.Step>
197+
</DeleteWizard>,
198+
);
199+
200+
const { getCancelButton } = getTestUtils();
201+
userEvent.click(getCancelButton());
202+
203+
expect(onCancel).toHaveBeenCalled();
204+
});
205+
206+
test('calls onDelete when the primary button is clicked on final step', () => {
207+
const onDelete = jest.fn();
208+
209+
render(
210+
<DeleteWizard activeStep={1} onDelete={onDelete}>
211+
<DeleteWizard.Header pageTitle="Delete Cluster" />
212+
<DeleteWizard.Step>
213+
<div data-testid="step-1-content">Step 1 content</div>
214+
<DeleteWizard.Footer primaryButtonText="Next" />
215+
</DeleteWizard.Step>
216+
<DeleteWizard.Step>
217+
<div data-testid="step-2-content">Step 2 content</div>
218+
<DeleteWizard.Footer primaryButtonText="Delete" />
219+
</DeleteWizard.Step>
220+
</DeleteWizard>,
221+
);
222+
223+
const { getPrimaryButton } = getTestUtils();
224+
userEvent.click(getPrimaryButton());
225+
226+
expect(onDelete).toHaveBeenCalled();
227+
});
228+
229+
test('does not call onDelete when primary button is clicked on non-final step', () => {
230+
const onDelete = jest.fn();
231+
232+
render(
233+
<DeleteWizard activeStep={0} onDelete={onDelete}>
234+
<DeleteWizard.Header pageTitle="Delete Cluster" />
235+
<DeleteWizard.Step>
236+
<div data-testid="step-1-content">Step 1 content</div>
237+
<DeleteWizard.Footer primaryButtonText="Next" />
238+
</DeleteWizard.Step>
239+
<DeleteWizard.Step>
240+
<div data-testid="step-2-content">Step 2 content</div>
241+
<DeleteWizard.Footer primaryButtonText="Delete" />
242+
</DeleteWizard.Step>
243+
</DeleteWizard>,
244+
);
245+
246+
const { getPrimaryButton } = getTestUtils();
247+
userEvent.click(getPrimaryButton());
248+
249+
expect(onDelete).not.toHaveBeenCalled();
250+
});
251+
});
8252
});

‎templates/delete-wizard/src/DeleteWizard/DeleteWizardHeader.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,18 @@ import React from 'react';
22

33
import { CanvasHeader, CanvasHeaderProps } from '@leafygreen-ui/canvas-header';
44
import { CompoundSubComponent } from '@leafygreen-ui/compound-component';
5+
import { LgIdProps } from '@leafygreen-ui/lib';
56

67
import { DeleteWizardSubComponentKeys } from './compoundComponentProperties';
8+
import { useDeleteWizardContext } from './DeleteWizardContext';
79

810
/**
911
* A wrapper around the {@link CanvasHeader} component for embedding into a DeleteWizard
1012
*/
1113
export const DeleteWizardHeader = CompoundSubComponent(
12-
(props: CanvasHeaderProps) => {
13-
return <CanvasHeader {...props} />;
14+
(props: CanvasHeaderProps & LgIdProps) => {
15+
const { lgIds } = useDeleteWizardContext();
16+
return <CanvasHeader data-lgid={lgIds.header} {...props} />;
1417
},
1518
{
1619
displayName: 'DeleteWizardHeader',

‎templates/delete-wizard/src/testUtils/ExampleStepContent.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export const ExampleStepContent = ({
4242
<input
4343
type="checkbox"
4444
id="ack"
45+
data-testid="acknowledgement-checkbox"
4546
checked={isAcknowledged}
4647
onChange={e => setAcknowledged(e.target.checked)}
4748
/>

‎templates/delete-wizard/src/testing/getTestUtils.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const getTestUtils = (
1313
const lgIds = getLgIds(lgId);
1414

1515
// Get the Wizard test utils (the DeleteWizard wraps a Wizard component internally)
16-
const wizardUtils = getWizardTestUtils(lgId);
16+
const wizardUtils = getWizardTestUtils(lgIds.wizard);
1717

1818
/**
1919
* @returns the DeleteWizard root element using the `data-lgid` data attribute.

0 commit comments

Comments
 (0)