Skip to content
This repository was archived by the owner on Dec 30, 2022. It is now read-only.

Commit d211276

Browse files
dhayabsarahdayan
dhayab
and
sarahdayan
authored
chore(hooks-web) normalize test structure for components and widgets (#3470)
Co-authored-by: Sarah Dayan <[email protected]>
1 parent c18ddd2 commit d211276

33 files changed

+1195
-4686
lines changed

‎packages/react-instantsearch-hooks-web/src/ui/__tests__/Breadcrumb.test.tsx‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ describe('Breadcrumb', () => {
3131
};
3232
}
3333

34-
test('renders with items', () => {
34+
test('renders with props', () => {
3535
const props = createProps();
3636
const { container } = render(<Breadcrumb {...props} />);
3737

@@ -181,18 +181,7 @@ describe('Breadcrumb', () => {
181181
expect(props.onNavigate).toHaveBeenCalledTimes(1);
182182
});
183183

184-
test('forwards a custom class name to the root element', () => {
185-
const props = createProps();
186-
const { container } = render(
187-
<Breadcrumb className="MyBreadcrumb" {...props} />
188-
);
189-
190-
expect(container.querySelector('.ais-Breadcrumb')).toHaveClass(
191-
'MyBreadcrumb'
192-
);
193-
});
194-
195-
test('allows custom class names', () => {
184+
test('accepts custom class names', () => {
196185
const props = createProps({
197186
className: 'MyCustomBreadcrumb',
198187
classNames: {

‎packages/react-instantsearch-hooks-web/src/ui/__tests__/ClearRefinements.test.tsx‎

Lines changed: 38 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,30 @@ describe('ClearRefinements', () => {
3737
`);
3838
});
3939

40-
test('passes an `onClick` callback to the button', () => {
40+
test('renders with translations', () => {
41+
const props = createProps({
42+
translations: {
43+
resetLabel: 'Reset filters',
44+
},
45+
});
46+
const { container } = render(<ClearRefinements {...props} />);
47+
48+
expect(container).toMatchInlineSnapshot(`
49+
<div>
50+
<div
51+
class="ais-ClearRefinements"
52+
>
53+
<button
54+
class="ais-ClearRefinements-button"
55+
>
56+
Reset filters
57+
</button>
58+
</div>
59+
</div>
60+
`);
61+
});
62+
63+
test('calls an `onClick` callback when clicking the button', () => {
4164
const props = createProps({});
4265
const onClick = jest.fn();
4366
const { container } = render(
@@ -64,20 +87,6 @@ describe('ClearRefinements', () => {
6487

6588
expect(button).toBeDisabled();
6689
expect(button).toHaveClass('ais-ClearRefinements-button--disabled');
67-
expect(container).toMatchInlineSnapshot(`
68-
<div>
69-
<div
70-
class="ais-ClearRefinements"
71-
>
72-
<button
73-
class="ais-ClearRefinements-button ais-ClearRefinements-button--disabled"
74-
disabled=""
75-
>
76-
Clear refinements
77-
</button>
78-
</div>
79-
</div>
80-
`);
8190

8291
userEvent.click(
8392
container.querySelector(
@@ -88,22 +97,26 @@ describe('ClearRefinements', () => {
8897
expect(onClick).toHaveBeenCalledTimes(0);
8998
});
9099

91-
test('forwards a custom class name to the root element', () => {
92-
const props = createProps({});
93-
const { container } = render(
94-
<ClearRefinements {...props} className="MyClearsRefinements" />
95-
);
100+
test('accepts custom class names', () => {
101+
const props = createProps({
102+
disabled: true,
103+
className: 'MyCustomClearRefinements',
104+
classNames: {
105+
root: 'ROOT',
106+
button: 'BUTTON',
107+
disabledButton: 'DISABLEDBUTTON',
108+
},
109+
});
110+
const { container } = render(<ClearRefinements {...props} />);
96111

97-
expect(container.querySelector('.ais-ClearRefinements')).toHaveClass(
98-
'MyClearsRefinements'
99-
);
100112
expect(container).toMatchInlineSnapshot(`
101113
<div>
102114
<div
103-
class="ais-ClearRefinements MyClearsRefinements"
115+
class="ais-ClearRefinements ROOT MyCustomClearRefinements"
104116
>
105117
<button
106-
class="ais-ClearRefinements-button"
118+
class="ais-ClearRefinements-button BUTTON ais-ClearRefinements-button--disabled DISABLEDBUTTON"
119+
disabled=""
107120
>
108121
Clear refinements
109122
</button>
@@ -122,49 +135,5 @@ describe('ClearRefinements', () => {
122135
'title',
123136
'Some custom title'
124137
);
125-
expect(container).toMatchInlineSnapshot(`
126-
<div>
127-
<div
128-
class="ais-ClearRefinements"
129-
title="Some custom title"
130-
>
131-
<button
132-
class="ais-ClearRefinements-button"
133-
>
134-
Clear refinements
135-
</button>
136-
</div>
137-
</div>
138-
`);
139-
});
140-
141-
test('allows custom class names', () => {
142-
const props = createProps({});
143-
const { container } = render(
144-
<ClearRefinements
145-
{...props}
146-
disabled
147-
classNames={{
148-
root: 'ROOT',
149-
button: 'BUTTON',
150-
disabledButton: 'DISABLEDBUTTON',
151-
}}
152-
/>
153-
);
154-
155-
expect(container).toMatchInlineSnapshot(`
156-
<div>
157-
<div
158-
class="ais-ClearRefinements ROOT"
159-
>
160-
<button
161-
class="ais-ClearRefinements-button BUTTON ais-ClearRefinements-button--disabled DISABLEDBUTTON"
162-
disabled=""
163-
>
164-
Clear refinements
165-
</button>
166-
</div>
167-
</div>
168-
`);
169138
});
170139
});

‎packages/react-instantsearch-hooks-web/src/ui/__tests__/CurrentRefinements.test.tsx‎

Lines changed: 32 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import React from 'react';
44

55
import { CurrentRefinements } from '../CurrentRefinements';
66

7+
import type { CurrentRefinementsProps } from '../CurrentRefinements';
8+
79
describe('CurrentRefinements', () => {
810
test('renders with default props', () => {
911
const { container } = render(<CurrentRefinements />);
@@ -127,72 +129,29 @@ describe('CurrentRefinements', () => {
127129
expect(onRemove).toHaveBeenCalledTimes(2);
128130
});
129131

130-
test('forwards a custom class name to the root element', () => {
131-
const { container } = render(
132-
<CurrentRefinements className="MyCurrentRefinements" />
133-
);
134-
135-
expect(document.querySelector('.ais-CurrentRefinements')).toHaveClass(
136-
'MyCurrentRefinements'
137-
);
138-
expect(container).toMatchInlineSnapshot(`
139-
<div>
140-
<div
141-
class="ais-CurrentRefinements ais-CurrentRefinements--noRefinement MyCurrentRefinements"
142-
>
143-
<ul
144-
class="ais-CurrentRefinements-list ais-CurrentRefinements-list--noRefinement"
145-
/>
146-
</div>
147-
</div>
148-
`);
149-
});
150-
151-
test('forwards `div` props to the root element', () => {
152-
const { container } = render(
153-
<CurrentRefinements title="Some custom title" />
154-
);
132+
test('accepts custom class names', () => {
133+
const props: Partial<CurrentRefinementsProps> = {
134+
className: 'MyCustomCurrentRefinements',
135+
classNames: {
136+
root: 'ROOT',
137+
noRefinementRoot: 'NOREFINEMENTROOT',
138+
list: 'LIST',
139+
noRefinementList: 'NOREFINEMENTLIST',
140+
item: 'ITEM',
141+
label: 'LABEL',
142+
category: 'CATEGORY',
143+
categoryLabel: 'CATEGORYLABEL',
144+
delete: 'DELETE',
145+
},
146+
};
155147

156-
expect(document.querySelector('.ais-CurrentRefinements')).toHaveAttribute(
157-
'title',
158-
'Some custom title'
159-
);
160-
expect(container).toMatchInlineSnapshot(`
161-
<div>
162-
<div
163-
class="ais-CurrentRefinements ais-CurrentRefinements--noRefinement"
164-
title="Some custom title"
165-
>
166-
<ul
167-
class="ais-CurrentRefinements-list ais-CurrentRefinements-list--noRefinement"
168-
/>
169-
</div>
170-
</div>
171-
`);
172-
});
173-
174-
test('allows custom class names', () => {
175148
{
176-
const { container } = render(
177-
<CurrentRefinements
178-
classNames={{
179-
root: 'ROOT',
180-
noRefinementRoot: 'NOREFINEMENTROOT',
181-
list: 'LIST',
182-
noRefinementList: 'NOREFINEMENTLIST',
183-
item: 'ITEM',
184-
label: 'LABEL',
185-
category: 'CATEGORY',
186-
categoryLabel: 'CATEGORYLABEL',
187-
delete: 'DELETE',
188-
}}
189-
/>
190-
);
149+
const { container } = render(<CurrentRefinements {...props} />);
191150

192151
expect(container).toMatchInlineSnapshot(`
193152
<div>
194153
<div
195-
class="ais-CurrentRefinements ROOT ais-CurrentRefinements--noRefinement NOREFINEMENTROOT"
154+
class="ais-CurrentRefinements ROOT ais-CurrentRefinements--noRefinement NOREFINEMENTROOT MyCustomCurrentRefinements"
196155
>
197156
<ul
198157
class="ais-CurrentRefinements-list LIST ais-CurrentRefinements-list--noRefinement NOREFINEMENTLIST"
@@ -218,24 +177,14 @@ describe('CurrentRefinements', () => {
218177
],
219178
},
220179
]}
221-
classNames={{
222-
root: 'ROOT',
223-
noRefinementRoot: 'NOREFINEMENTROOT',
224-
list: 'LIST',
225-
noRefinementList: 'NOREFINEMENTLIST',
226-
item: 'ITEM',
227-
label: 'LABEL',
228-
category: 'CATEGORY',
229-
categoryLabel: 'CATEGORYLABEL',
230-
delete: 'DELETE',
231-
}}
180+
{...props}
232181
/>
233182
);
234183

235184
expect(container).toMatchInlineSnapshot(`
236185
<div>
237186
<div
238-
class="ais-CurrentRefinements ROOT ais-CurrentRefinements--noRefinement NOREFINEMENTROOT"
187+
class="ais-CurrentRefinements ROOT ais-CurrentRefinements--noRefinement NOREFINEMENTROOT MyCustomCurrentRefinements"
239188
>
240189
<ul
241190
class="ais-CurrentRefinements-list LIST ais-CurrentRefinements-list--noRefinement NOREFINEMENTLIST"
@@ -271,4 +220,15 @@ describe('CurrentRefinements', () => {
271220
`);
272221
}
273222
});
223+
224+
test('forwards `div` props to the root element', () => {
225+
const { container } = render(
226+
<CurrentRefinements title="Some custom title" />
227+
);
228+
229+
expect(container.querySelector('.ais-CurrentRefinements')).toHaveAttribute(
230+
'title',
231+
'Some custom title'
232+
);
233+
});
274234
});

‎packages/react-instantsearch-hooks-web/src/ui/__tests__/HierarchicalMenu.test.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ describe('HierarchicalMenu', () => {
5252
};
5353
}
5454

55-
test('renders with items', () => {
55+
test('renders with props', () => {
5656
const props = createProps();
5757
const { container } = render(<HierarchicalMenu {...props} />);
5858
expect(container).toMatchInlineSnapshot(`
@@ -149,7 +149,7 @@ describe('HierarchicalMenu', () => {
149149
`);
150150
});
151151

152-
test('triggers an `onNavigate` callback when clicking a checkbox', () => {
152+
test('calls an `onNavigate` callback when clicking a checkbox', () => {
153153
const props = createProps();
154154
const { container } = render(<HierarchicalMenu {...props} />);
155155

@@ -281,19 +281,11 @@ describe('HierarchicalMenu', () => {
281281
});
282282
});
283283

284-
test('forwards a custom class name to the root element', () => {
285-
const props = createProps({ className: 'MyHierarchicalMenu' });
286-
const { container } = render(<HierarchicalMenu {...props} />);
287-
288-
expect(container.querySelector('.ais-HierarchicalMenu')).toHaveClass(
289-
'ais-HierarchicalMenu MyHierarchicalMenu'
290-
);
291-
});
292-
293-
test('allows custom class names', () => {
284+
test('accepts custom class names', () => {
294285
const props = createProps({
295286
showMore: true,
296287
canToggleShowMore: false,
288+
className: 'MyCustomHierarchicalMenu',
297289
classNames: {
298290
root: 'ROOT',
299291
noRefinementRoot: 'NOREFINEMENTROOT',
@@ -314,7 +306,7 @@ describe('HierarchicalMenu', () => {
314306
expect(container).toMatchInlineSnapshot(`
315307
<div>
316308
<div
317-
class="ais-HierarchicalMenu ROOT"
309+
class="ais-HierarchicalMenu ROOT MyCustomHierarchicalMenu"
318310
>
319311
<ul
320312
class="ais-HierarchicalMenu-list LIST"

0 commit comments

Comments
 (0)