-
Notifications
You must be signed in to change notification settings - Fork 497
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(RatingMenu/RefinementList): handle clicks in svg (#5993)
* fix(RatingMenu): handle clicks in svg Handle the clicks in the RefinementList component (used by RatingMenu) when the clicked element isn't a `HTMLElement`. The fixed behaviour is fairly finicky to reproduce, you need to click exactly on the "star image", if you click between them or on the text, no issue existed before this PR either. The removed check was introduced in #4702, when translating the component to TypeScript. This implements a barebones CTS for RatingMenu, including being fully skipped for React InstantSearch, as the widget doesn't exist. * lint
- Loading branch information
Showing
7 changed files
with
187 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import { | ||
| createSearchClient, | ||
| createMultiSearchResponse, | ||
| createSingleSearchResponse, | ||
| } from '@instantsearch/mocks'; | ||
| import { wait } from '@instantsearch/testutils'; | ||
| import userEvent from '@testing-library/user-event'; | ||
|
|
||
| import type { RatingMenuWidgetSetup } from '.'; | ||
| import type { TestOptions } from '../../common'; | ||
|
|
||
| export function createBehaviourTests( | ||
| setup: RatingMenuWidgetSetup, | ||
| { act }: Required<TestOptions> | ||
| ) { | ||
| describe('behaviour', () => { | ||
| test('handle refinement on click', async () => { | ||
| const delay = 100; | ||
| const margin = 10; | ||
| const attribute = 'brand'; | ||
| const options = { | ||
| instantSearchOptions: { | ||
| indexName: 'indexName', | ||
| searchClient: createSearchClient({ | ||
| search: jest.fn(async (requests) => { | ||
| await wait(delay); | ||
| return createMultiSearchResponse( | ||
| ...requests.map(() => | ||
| createSingleSearchResponse({ | ||
| facets: { | ||
| [attribute]: { | ||
| 0: 3422, | ||
| 1: 156, | ||
| 2: 194, | ||
| 3: 1622, | ||
| 4: 13925, | ||
| 5: 2150, | ||
| }, | ||
| }, | ||
| facets_stats: { | ||
| [attribute]: { | ||
| min: 1, | ||
| max: 5, | ||
| avg: 2, | ||
| sum: 71860, | ||
| }, | ||
| }, | ||
| }) | ||
| ) | ||
| ); | ||
| }), | ||
| }), | ||
| }, | ||
| widgetParams: { attribute }, | ||
| }; | ||
|
|
||
| await setup(options); | ||
|
|
||
| // Wait for initial results to populate widgets with data | ||
| await act(async () => { | ||
| await wait(margin + delay); | ||
| await wait(0); | ||
| }); | ||
|
|
||
| // Initial state, before interaction | ||
| { | ||
| const items = document.querySelectorAll('.ais-RatingMenu-item'); | ||
| expect(items).toHaveLength(4); | ||
|
|
||
| const selectedItems = document.querySelectorAll( | ||
| '.ais-RatingMenu-item--selected' | ||
| ); | ||
| expect(selectedItems).toHaveLength(0); | ||
| } | ||
|
|
||
| // Refine on click of link | ||
| { | ||
| const firstItem = document.querySelector<HTMLLIElement>( | ||
| '.ais-RatingMenu-link' | ||
| )!; | ||
|
|
||
| await act(async () => { | ||
| userEvent.click(firstItem); | ||
| await wait(0); | ||
| }); | ||
|
|
||
| const selectedItems = document.querySelectorAll( | ||
| '.ais-RatingMenu-item--selected' | ||
| ); | ||
| expect(selectedItems).toHaveLength(1); | ||
| expect( | ||
| selectedItems[0].querySelector('.ais-RatingMenu-link') | ||
| ).toHaveAccessibleName(/4 & Up/i); | ||
| } | ||
|
|
||
| // Refine on click of icon | ||
| { | ||
| const firstItem = document.querySelector<HTMLLIElement>( | ||
| '.ais-RatingMenu-starIcon' | ||
| )!; | ||
|
|
||
| await act(async () => { | ||
| userEvent.click(firstItem); | ||
| await wait(0); | ||
| }); | ||
|
|
||
| const selectedItems = document.querySelectorAll( | ||
| '.ais-RatingMenu-item--selected' | ||
| ); | ||
| expect(selectedItems).toHaveLength(0); | ||
| } | ||
| }); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { fakeAct, skippableDescribe } from '../../common'; | ||
|
|
||
| import { createBehaviourTests } from './behaviour'; | ||
|
|
||
| import type { TestOptions, TestSetup } from '../../common'; | ||
| import type { RatingMenuWidget } from 'instantsearch.js/es/widgets/rating-menu/rating-menu'; | ||
|
|
||
| type WidgetParams = Parameters<RatingMenuWidget>[0]; | ||
| export type RatingMenuWidgetSetup = TestSetup<{ | ||
| widgetParams: Omit<WidgetParams, 'container'>; | ||
| }>; | ||
|
|
||
| export function createRatingMenuWidgetTests( | ||
| setup: RatingMenuWidgetSetup, | ||
| { act = fakeAct, skippedTests = {} }: TestOptions = {} | ||
| ) { | ||
| beforeEach(() => { | ||
| document.body.innerHTML = ''; | ||
| }); | ||
|
|
||
| skippableDescribe('RatingMenu widget common tests', skippedTests, () => { | ||
| createBehaviourTests(setup, { act, skippedTests }); | ||
| }); | ||
| } |