Skip to content

Commit d6b147e

Browse files
aresnik11aresnik11
committed
add passing tests
1 parent 8c65ca0 commit d6b147e

File tree

3 files changed

+573
-119
lines changed

3 files changed

+573
-119
lines changed

‎packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedNestedCheckboxes/__tests__/ConnectedNestedCheckboxes.test.tsx‎

Lines changed: 49 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { setupRtl } from '@codecademy/gamut-tests';
22
import { fireEvent } from '@testing-library/dom';
33
import { act } from '@testing-library/react';
4+
import userEvent from '@testing-library/user-event';
45

56
import { ConnectedForm, ConnectedFormGroup, SubmitButton } from '../../..';
67
import { NestedConnectedCheckboxOption } from '../../types';
@@ -43,7 +44,13 @@ const TestForm: React.FC<{
4344
defaultValues?: { skills?: string[] };
4445
validationRules?: any;
4546
disabled?: boolean;
46-
}> = ({ defaultValues = {}, validationRules, disabled }) => (
47+
options?: NestedConnectedCheckboxOption[];
48+
}> = ({
49+
defaultValues = {},
50+
validationRules,
51+
disabled,
52+
options = mockOptions,
53+
}) => (
4754
<ConnectedForm
4855
defaultValues={defaultValues}
4956
validationRules={validationRules}
@@ -53,7 +60,7 @@ const TestForm: React.FC<{
5360
disabled={disabled}
5461
field={{
5562
component: ConnectedNestedCheckboxes,
56-
options: mockOptions,
63+
options,
5764
onUpdate: mockOnUpdate,
5865
}}
5966
label="nested checkboxes field"
@@ -100,10 +107,10 @@ describe('ConnectedNestedCheckboxes', () => {
100107
const expressCheckbox = view.getByLabelText('Express.js').closest('li');
101108

102109
// Check margin-left styles for indentation
103-
expect(frontendCheckbox).toHaveStyle({ marginLeft: '0px' }); // level 0
104-
expect(reactCheckbox).toHaveStyle({ marginLeft: '24px' }); // level 1
105-
expect(nodeCheckbox).toHaveStyle({ marginLeft: '24px' }); // level 1
106-
expect(expressCheckbox).toHaveStyle({ marginLeft: '48px' }); // level 2
110+
expect(frontendCheckbox).toHaveStyle({ marginLeft: '0' }); // level 0
111+
expect(reactCheckbox).toHaveStyle({ marginLeft: '1.5rem' }); // level 1
112+
expect(nodeCheckbox).toHaveStyle({ marginLeft: '1.5rem' }); // level 1
113+
expect(expressCheckbox).toHaveStyle({ marginLeft: '3rem' }); // level 2
107114
});
108115

109116
it('should render with unique IDs for each checkbox', () => {
@@ -137,7 +144,7 @@ describe('ConnectedNestedCheckboxes', () => {
137144

138145
it('should render parent as indeterminate when some children are selected', () => {
139146
const { view } = renderView({
140-
defaultValues: { skills: ['react', 'vue'] }, // only some frontend
147+
defaultValues: { skills: ['react', 'vue'] },
141148
});
142149

143150
const frontendCheckbox = view.getByLabelText(
@@ -159,7 +166,7 @@ describe('ConnectedNestedCheckboxes', () => {
159166

160167
it('should render deeply nested parent states correctly', () => {
161168
const { view } = renderView({
162-
defaultValues: { skills: ['express', 'fastify'] }, // all node children
169+
defaultValues: { skills: ['express', 'fastify'] },
163170
});
164171

165172
const nodeCheckbox = view.getByLabelText('Node.js');
@@ -187,6 +194,16 @@ describe('ConnectedNestedCheckboxes', () => {
187194
// Deeply nested children should also be checked
188195
expect(view.getByLabelText('Express.js')).toBeChecked();
189196
expect(view.getByLabelText('Fastify')).toBeChecked();
197+
198+
// onUpdate should have been called with all expanded values during initialization
199+
expect(mockOnUpdate).toHaveBeenCalledWith([
200+
'backend',
201+
'node',
202+
'express',
203+
'fastify',
204+
'python',
205+
'ruby',
206+
]);
190207
});
191208

192209
it('should allow unchecking children that were auto-checked by default parent selection', async () => {
@@ -373,13 +390,15 @@ describe('ConnectedNestedCheckboxes', () => {
373390
});
374391

375392
it('should not respond to clicks when disabled', async () => {
376-
const { view } = renderView({ disabled: true });
393+
const { view } = renderView({
394+
disabled: true,
395+
});
377396

378397
const reactCheckbox = view.getByLabelText('React');
398+
expect(reactCheckbox).toBeDisabled();
399+
expect(reactCheckbox).not.toBeChecked();
379400

380-
await act(async () => {
381-
fireEvent.click(reactCheckbox);
382-
});
401+
await userEvent.click(reactCheckbox);
383402

384403
expect(reactCheckbox).not.toBeChecked();
385404
expect(mockOnUpdate).not.toHaveBeenCalled();
@@ -432,13 +451,7 @@ describe('ConnectedNestedCheckboxes', () => {
432451

433452
describe('edge cases', () => {
434453
it('should handle empty options array', () => {
435-
const TestFormEmpty = () => (
436-
<ConnectedForm defaultValues={{}} onSubmit={jest.fn()}>
437-
<ConnectedNestedCheckboxes name="skills" options={[]} />
438-
</ConnectedForm>
439-
);
440-
441-
const { view } = setupRtl(TestFormEmpty, {})({});
454+
const { view } = renderView({ options: [] });
442455

443456
// Should render empty list
444457
const list = view.container.querySelector('ul');
@@ -447,39 +460,27 @@ describe('ConnectedNestedCheckboxes', () => {
447460
});
448461

449462
it('should handle options without nested children', () => {
450-
const flatOptions: NestedConnectedCheckboxOption[] = [
451-
{ value: 'option1', label: 'Option 1' },
452-
{ value: 'option2', label: 'Option 2' },
453-
];
454-
455-
const TestFormFlat = () => (
456-
<ConnectedForm defaultValues={{}} onSubmit={jest.fn()}>
457-
<ConnectedNestedCheckboxes name="skills" options={flatOptions} />
458-
</ConnectedForm>
459-
);
460-
461-
const { view } = setupRtl(TestFormFlat, {})({});
463+
const { view } = renderView({
464+
options: [
465+
{ value: 'option1', label: 'Option 1' },
466+
{ value: 'option2', label: 'Option 2' },
467+
],
468+
});
462469

463470
expect(view.getByLabelText('Option 1')).toBeInTheDocument();
464471
expect(view.getByLabelText('Option 2')).toBeInTheDocument();
465472
});
466473

467474
it('should handle numeric values correctly', () => {
468-
const numericOptions: NestedConnectedCheckboxOption[] = [
469-
{
470-
value: 1,
471-
label: 'Parent Option',
472-
options: [{ value: 2, label: 'Child Option' }],
473-
} as any, // Type assertion for testing numeric values
474-
];
475-
476-
const TestFormNumeric = () => (
477-
<ConnectedForm defaultValues={{}} onSubmit={jest.fn()}>
478-
<ConnectedNestedCheckboxes name="skills" options={numericOptions} />
479-
</ConnectedForm>
480-
);
481-
482-
const { view } = setupRtl(TestFormNumeric, {})({});
475+
const { view } = renderView({
476+
options: [
477+
{
478+
value: 1,
479+
label: 'Parent Option',
480+
options: [{ value: 2, label: 'Child Option' }],
481+
} as any, // Type assertion for testing numeric values
482+
],
483+
});
483484

484485
expect(view.getByLabelText('Parent Option')).toHaveAttribute(
485486
'id',
@@ -518,8 +519,8 @@ describe('ConnectedNestedCheckboxes', () => {
518519
const list = view.container.querySelector('ul');
519520
const listItems = view.container.querySelectorAll('li');
520521

521-
expect(list).toHaveAttribute('role', 'list');
522-
expect(listItems).toHaveLength(8); // Total flattened options
522+
expect(list).toBeInTheDocument();
523+
expect(listItems).toHaveLength(11); // Total flattened options
523524

524525
listItems.forEach((item) => {
525526
expect(item).toHaveStyle({ listStyle: 'none' });

‎packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedNestedCheckboxes/__tests__/utils.test.tsx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -51,35 +51,27 @@ describe('ConnectedNestedCheckboxes utils', () => {
5151
const result = flattenOptions(options);
5252

5353
expect(result).toHaveLength(4);
54-
55-
// Parent 1
5654
expect(result[0]).toMatchObject({
5755
value: 'parent1',
5856
label: 'Parent 1',
5957
level: 0,
6058
parentValue: undefined,
6159
options: ['child1', 'child2'],
6260
});
63-
64-
// Child 1
6561
expect(result[1]).toMatchObject({
6662
value: 'child1',
6763
label: 'Child 1',
6864
level: 1,
6965
parentValue: 'parent1',
7066
options: [],
7167
});
72-
73-
// Child 2
7468
expect(result[2]).toMatchObject({
7569
value: 'child2',
7670
label: 'Child 2',
7771
level: 1,
7872
parentValue: 'parent1',
7973
options: [],
8074
});
81-
82-
// Parent 2
8375
expect(result[3]).toMatchObject({
8476
value: 'parent2',
8577
label: 'Parent 2',
@@ -177,7 +169,7 @@ describe('ConnectedNestedCheckboxes utils', () => {
177169

178170
it('should get all direct and indirect descendants', () => {
179171
const result = getAllDescendants('parent', flatOptions);
180-
expect(result).toEqual(['child1', 'child2', 'grandchild1']);
172+
expect(result).toEqual(['child1', 'grandchild1', 'child2']);
181173
});
182174

183175
it('should get only direct descendants when no grandchildren exist', () => {
@@ -290,10 +282,10 @@ describe('ConnectedNestedCheckboxes utils', () => {
290282
const states = calculateStates(selectedValues, flatOptions);
291283

292284
const child1State = states.get('child1');
293-
expect(child1State).toEqual({ checked: true }); // all descendants (grandchild1) are selected
285+
expect(child1State).toEqual({ checked: true });
294286

295287
const parent1State = states.get('parent1');
296-
expect(parent1State).toEqual({ checked: false, indeterminate: true }); // only some descendants selected
288+
expect(parent1State).toEqual({ checked: false, indeterminate: true });
297289
});
298290

299291
it('should handle empty selected values', () => {
@@ -650,7 +642,7 @@ describe('ConnectedNestedCheckboxes utils', () => {
650642
};
651643

652644
const result = renderCheckbox(
653-
optionWithElementLabel,
645+
optionWithElementLabel as any, // ts should prevent this from ever happening but we have a default just in case
654646
state,
655647
'test-id',
656648
false,

0 commit comments

Comments
 (0)