Skip to content

Commit

Permalink
refactoring: move show more count tests to common suite (#5638)
Browse files Browse the repository at this point in the history 
* refactoring: move show more count tests to common suite

* map flavor specific props during setup
  • Loading branch information
@dhayab
dhayab committed Jan 26, 2024
1 parent 2a562d2 commit 825f8be
Show file tree
Hide file tree
Showing 11 changed files with 364 additions and 409 deletions.
138 changes: 0 additions & 138 deletions packages/instantsearch.js/src/widgets/menu/__tests__/menu.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -397,144 +397,6 @@ describe('menu', () => {
`);
});

test('renders with templates show more count', async () => {
const container = document.createElement('div');
const searchClient = createMockedSearchClient();

const search = instantsearch({
indexName: 'indexName',
searchClient,
initialUiState: {
indexName: {
menu: {
brand: 'Apple',
},
},
},
});

search.addWidgets([
menu({
container,
attribute: 'brand',
limit: 3,
showMore: true,
showMoreLimit: 6,
templates: {
showMoreText({ isShowingMore, showMoreCount }) {
return isShowingMore
? `Show top 3 items`
: `Show ${showMoreCount} more`;
},
},
}),
]);

// @MAJOR Once Hogan.js and string-based templates are removed,
// `search.start()` can be moved to the test body and the following
// assertion can go away.
expect(async () => {
search.start();

await wait(0);
}).not.toWarnDev();

await wait(0);

expect(container).toMatchInlineSnapshot(`
<div>
<div
class="ais-Menu"
>
<ul
class="ais-Menu-list"
>
<li
class="ais-Menu-item ais-Menu-item--selected"
>
<div>
<a
class="ais-Menu-link"
href="#"
>
<span
class="ais-Menu-label"
>
Apple
</span>
<span
class="ais-Menu-count"
>
442
</span>
</a>
</div>
</li>
<li
class="ais-Menu-item"
>
<div>
<a
class="ais-Menu-link"
href="#"
>
<span
class="ais-Menu-label"
>
Canon
</span>
<span
class="ais-Menu-count"
>
287
</span>
</a>
</div>
</li>
<li
class="ais-Menu-item"
>
<div>
<a
class="ais-Menu-link"
href="#"
>
<span
class="ais-Menu-label"
>
Dell
</span>
<span
class="ais-Menu-count"
>
174
</span>
</a>
</div>
</li>
</ul>
<button
class="ais-Menu-showMore"
>
Show 3 more
</button>
</div>
</div>
`);

const toggleButton = within(container).getByRole('button');

fireEvent.click(toggleButton);

expect(toggleButton).toMatchInlineSnapshot(`
<button
class="ais-Menu-showMore"
>
Show top 3 items
</button>
`);
});

function createMockedSearchClient() {
return createSearchClient({
search: jest.fn((requests) => {
Expand Down
235 changes: 0 additions & 235 deletions packages/instantsearch.js/src/widgets/refinement-list/__tests__/refinement-list.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -851,224 +851,6 @@ describe('refinementList', () => {
`);
});

test('renders with templates show more count', async () => {
const container = document.createElement('div');
const searchClient = createMockedSearchClient();

const search = instantsearch({
indexName: 'indexName',
searchClient,
initialUiState: {
indexName: {
refinementList: {
brand: ['Apple'],
},
},
},
});

search.addWidgets([
refinementList({
container,
attribute: 'brand',
showMore: true,
searchable: true,
limit: 2,
showMoreLimit: 6,
templates: {
showMoreText({ isShowingMore, showMoreCount }) {
return isShowingMore
? `Show top 2 items`
: `Show ${showMoreCount} more`;
},
},
}),
]);

search.start();

await wait(0);

expect(container).toMatchInlineSnapshot(`
<div>
<div
class="ais-RefinementList"
>
<div
class="ais-RefinementList-searchBox"
>
<div
class="ais-SearchBox"
>
<form
action=""
class="ais-SearchBox-form"
novalidate=""
role="search"
>
<input
autocapitalize="off"
autocomplete="off"
autocorrect="off"
class="ais-SearchBox-input"
maxlength="512"
placeholder="Search..."
spellcheck="false"
type="search"
/>
<button
class="ais-SearchBox-submit"
title="Submit the search query."
type="submit"
>
<svg
aria-hidden="true"
class="ais-SearchBox-submitIcon"
height="10"
viewBox="0 0 40 40"
width="10"
>
<path
d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
/>
</svg>
</button>
<button
class="ais-SearchBox-reset"
hidden=""
title="Clear the search query."
type="reset"
>
<svg
aria-hidden="true"
class="ais-SearchBox-resetIcon"
height="10"
viewBox="0 0 20 20"
width="10"
>
<path
d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
/>
</svg>
</button>
<span
class="ais-SearchBox-loadingIndicator"
hidden=""
>
<svg
aria-hidden="true"
class="ais-SearchBox-loadingIcon"
height="16"
stroke="#444"
viewBox="0 0 38 38"
width="16"
>
<g
fill="none"
fillRule="evenodd"
>
<g
strokeWidth="2"
transform="translate(1 1)"
>
<circle
cx="18"
cy="18"
r="18"
strokeOpacity=".5"
/>
<path
d="M36 18c0-9.94-8.06-18-18-18"
>
<animatetransform
attributeName="transform"
dur="1s"
from="0 18 18"
repeatCount="indefinite"
to="360 18 18"
type="rotate"
/>
</path>
</g>
</g>
</svg>
</span>
</form>
</div>
</div>
<ul
class="ais-RefinementList-list"
>
<li
class="ais-RefinementList-item ais-RefinementList-item--selected"
>
<div>
<label
class="ais-RefinementList-label"
>
<input
checked=""
class="ais-RefinementList-checkbox"
type="checkbox"
value="Apple"
/>
<span
class="ais-RefinementList-labelText"
>
Apple
</span>
<span
class="ais-RefinementList-count"
>
746
</span>
</label>
</div>
</li>
<li
class="ais-RefinementList-item"
>
<div>
<label
class="ais-RefinementList-label"
>
<input
class="ais-RefinementList-checkbox"
type="checkbox"
value="Samsung"
/>
<span
class="ais-RefinementList-labelText"
>
Samsung
</span>
<span
class="ais-RefinementList-count"
>
633
</span>
</label>
</div>
</li>
</ul>
<button
class="ais-RefinementList-showMore"
>
Show 4 more
</button>
</div>
</div>
`);

const showMoreButton = container.querySelector(
'.ais-RefinementList-showMore'
)!;

fireEvent.click(showMoreButton);

expect(showMoreButton).toHaveTextContent('Show top 2 items');
});

function createMockedSearchClient() {
return createSearchClient({
search: jest.fn((requests) => {
Expand All @@ -1081,23 +863,6 @@ describe('refinementList', () => {
Apple: 746,
Samsung: 633,
Metra: 591,
HP: 530,
'Insignia™': 442,
GE: 394,
Sony: 350,
Incipio: 320,
KitchenAid: 318,
Whirlpool: 298,
LG: 291,
Canon: 287,
Frigidaire: 275,
Speck: 216,
OtterBox: 214,
Epson: 204,
'Dynex™': 184,
Dell: 174,
'Hamilton Beach': 173,
Platinum: 155,
},
},
})
Expand Down

0 comments on commit 825f8be

Please sign in to comment.