Skip to content

Commit 31d9c50

Browse files
HaroenvHaroenv
authoredApr 9, 2021
fix(ratingMenu): use url in default template (#4728)
this is the cause of the from time to time failing e2e test, basically sometimes the event.preventDefault didn't apply, which causes the page to refresh to / instead of the right url. The actual url is `url`, and not in `href`, so this means that before now it always was wrong
·
vue-instantsearch@4.20.6algolia-experiences@1.1.0
1 parent a894069 commit 31d9c50

File tree

5 files changed

+132
-14
lines changed

5 files changed

+132
-14
lines changed
 

‎examples/e-commerce/src/widgets/Ratings.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const ratings = ratingsMenu({
1515
templates: {
1616
item: `
1717
{{#count}}
18-
<a class="{{cssClasses.link}}" aria-label="{{value}} & up" href="{{href}}">
18+
<a class="{{cssClasses.link}}" aria-label="{{value}} & up" href="{{url}}">
1919
{{/count}}
2020
{{^count}}
2121
<div class="{{cssClasses.link}}" aria-label="{{value}} & up" disabled>

‎src/widgets/rating-menu/__tests__/__snapshots__/rating-menu-test.ts.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ Object {
7878
],
7979
"templateProps": Object {
8080
"templates": Object {
81-
"item": "{{#count}}<a class=\\"{{cssClasses.link}}\\" aria-label=\\"{{value}} & up\\" href=\\"{{href}}\\">{{/count}}{{^count}}<div class=\\"{{cssClasses.link}}\\" aria-label=\\"{{value}} & up\\" disabled>{{/count}}
81+
"item": "{{#count}}<a class=\\"{{cssClasses.link}}\\" aria-label=\\"{{value}} & up\\" href=\\"{{url}}\\">{{/count}}{{^count}}<div class=\\"{{cssClasses.link}}\\" aria-label=\\"{{value}} & up\\" disabled>{{/count}}
8282
{{#stars}}<svg class=\\"{{cssClasses.starIcon}} {{#.}}{{cssClasses.fullStarIcon}}{{/.}}{{^.}}{{cssClasses.emptyStarIcon}}{{/.}}\\" aria-hidden=\\"true\\" width=\\"24\\" height=\\"24\\">
8383
{{#.}}<use xlink:href=\\"#ais-RatingMenu-starSymbol\\"></use>{{/.}}{{^.}}<use xlink:href=\\"#ais-RatingMenu-starEmptySymbol\\"></use>{{/.}}
8484
</svg>{{/stars}}

‎src/widgets/rating-menu/__tests__/rating-menu-integration-test.ts

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import jsHelper, {
2+
SearchResults,
3+
SearchParameters,
4+
} from 'algoliasearch-helper';
5+
import { createSearchClient } from '../../../../test/mock/createSearchClient';
6+
import {
7+
createInitOptions,
8+
createRenderOptions,
9+
} from '../../../../test/mock/createWidget';
10+
import { createMultiSearchResponse } from '../../../../test/mock/createAPIResponse';
11+
import ratingMenu from '../rating-menu';
12+
13+
function getInitializedWidget() {
14+
const container = document.createElement('div');
15+
const attribute = 'rating';
16+
const widget = ratingMenu({
17+
container,
18+
attribute,
19+
});
20+
21+
const helper = jsHelper(
22+
createSearchClient(),
23+
'',
24+
widget.getWidgetSearchParameters!(new SearchParameters({}), {
25+
uiState: {},
26+
})
27+
);
28+
29+
widget.init!(createInitOptions({ helper }));
30+
31+
return { widget, container, helper, attribute };
32+
}
33+
34+
describe('rendering', () => {
35+
it('has correct URLs', () => {
36+
const { widget, container, helper, attribute } = getInitializedWidget();
37+
38+
widget.render!(
39+
createRenderOptions({
40+
helper,
41+
results: new SearchResults(
42+
helper.state,
43+
createMultiSearchResponse({
44+
facets: {
45+
[attribute]: {
46+
0: 5,
47+
1: 10,
48+
2: 20,
49+
3: 50,
50+
4: 900,
51+
5: 100,
52+
},
53+
},
54+
}).results
55+
),
56+
createURL(searchParams) {
57+
return JSON.stringify(searchParams);
58+
},
59+
})
60+
);
61+
62+
const links = container.querySelectorAll('a');
63+
64+
expect(links).toHaveLength(4);
65+
66+
expect(JSON.parse(links[0].getAttribute('href')!)).toEqual({
67+
facets: [],
68+
disjunctiveFacets: ['rating'],
69+
hierarchicalFacets: [],
70+
facetsRefinements: {},
71+
facetsExcludes: {},
72+
disjunctiveFacetsRefinements: {},
73+
numericRefinements: { rating: { '<=': [5], '>=': [4] } },
74+
tagRefinements: [],
75+
hierarchicalFacetsRefinements: {},
76+
index: '',
77+
});
78+
79+
expect(JSON.parse(links[1].getAttribute('href')!)).toEqual({
80+
facets: [],
81+
disjunctiveFacets: ['rating'],
82+
hierarchicalFacets: [],
83+
facetsRefinements: {},
84+
facetsExcludes: {},
85+
disjunctiveFacetsRefinements: {},
86+
numericRefinements: { rating: { '<=': [5], '>=': [3] } },
87+
tagRefinements: [],
88+
hierarchicalFacetsRefinements: {},
89+
index: '',
90+
});
91+
92+
expect(JSON.parse(links[2].getAttribute('href')!)).toEqual({
93+
facets: [],
94+
disjunctiveFacets: ['rating'],
95+
hierarchicalFacets: [],
96+
facetsRefinements: {},
97+
facetsExcludes: {},
98+
disjunctiveFacetsRefinements: {},
99+
numericRefinements: { rating: { '<=': [5], '>=': [2] } },
100+
tagRefinements: [],
101+
hierarchicalFacetsRefinements: {},
102+
index: '',
103+
});
104+
105+
expect(JSON.parse(links[3].getAttribute('href')!)).toEqual({
106+
facets: [],
107+
disjunctiveFacets: ['rating'],
108+
hierarchicalFacets: [],
109+
facetsRefinements: {},
110+
facetsExcludes: {},
111+
disjunctiveFacetsRefinements: {},
112+
numericRefinements: { rating: { '<=': [5], '>=': [1] } },
113+
tagRefinements: [],
114+
hierarchicalFacetsRefinements: {},
115+
index: '',
116+
});
117+
});
118+
});

‎src/widgets/rating-menu/__tests__/rating-menu-test.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { render } from 'preact';
1+
import { render as preactRender, VNode } from 'preact';
22
import jsHelper, {
33
SearchResults,
44
SearchParameters,
@@ -11,9 +11,9 @@ import {
1111
import { createSingleSearchResponse } from '../../../../test/mock/createAPIResponse';
1212
import { createInstantSearch } from '../../../../test/mock/createInstantSearch';
1313
import ratingMenu from '../rating-menu';
14+
import { castToJestMock } from '../../../../test/utils/castToJestMock';
1415

15-
const mockedRender = render as jest.Mock;
16-
16+
const render = castToJestMock(preactRender);
1717
jest.mock('preact', () => {
1818
const module = jest.requireActual('preact');
1919

@@ -44,7 +44,7 @@ describe('ratingMenu()', () => {
4444
let results: SearchResults;
4545

4646
beforeEach(() => {
47-
mockedRender.mockClear();
47+
render.mockClear();
4848

4949
container = document.createElement('div');
5050
widget = ratingMenu({
@@ -98,11 +98,11 @@ describe('ratingMenu()', () => {
9898
createRenderOptions({ state: helper.state, helper, results, createURL })
9999
);
100100

101-
const [firstRender, secondRender] = mockedRender.mock.calls;
101+
const [firstRender, secondRender] = render.mock.calls;
102102

103-
const { children, ...rootProps } = firstRender[0].props;
103+
const { children, ...rootProps } = (firstRender[0] as VNode<any>).props;
104104

105-
expect(mockedRender).toHaveBeenCalledTimes(2);
105+
expect(render).toHaveBeenCalledTimes(2);
106106
expect(rootProps).toMatchSnapshot();
107107
expect(firstRender[1]).toEqual(container);
108108
expect(secondRender[1]).toEqual(container);
@@ -127,10 +127,10 @@ describe('ratingMenu()', () => {
127127
})
128128
);
129129

130-
const [firstRender] = mockedRender.mock.calls;
130+
const [firstRender] = render.mock.calls;
131131

132-
expect(mockedRender).toHaveBeenCalledTimes(1);
133-
expect(firstRender[0].props.facetValues).toEqual([
132+
expect(render).toHaveBeenCalledTimes(1);
133+
expect((firstRender[0] as VNode<any>).props.facetValues).toEqual([
134134
{
135135
count: 42,
136136
isRefined: true,
@@ -266,7 +266,7 @@ describe('ratingMenu()', () => {
266266
);
267267

268268
expect(
269-
mockedRender.mock.calls[mockedRender.mock.calls.length - 1][0].props
269+
(render.mock.calls[render.mock.calls.length - 1][0] as VNode<any>).props
270270
.facetValues
271271
).toEqual([
272272
{

‎src/widgets/rating-menu/defaultTemplates.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default {
2-
item: `{{#count}}<a class="{{cssClasses.link}}" aria-label="{{value}} & up" href="{{href}}">{{/count}}{{^count}}<div class="{{cssClasses.link}}" aria-label="{{value}} & up" disabled>{{/count}}
2+
item: `{{#count}}<a class="{{cssClasses.link}}" aria-label="{{value}} & up" href="{{url}}">{{/count}}{{^count}}<div class="{{cssClasses.link}}" aria-label="{{value}} & up" disabled>{{/count}}
33
{{#stars}}<svg class="{{cssClasses.starIcon}} {{#.}}{{cssClasses.fullStarIcon}}{{/.}}{{^.}}{{cssClasses.emptyStarIcon}}{{/.}}" aria-hidden="true" width="24" height="24">
44
{{#.}}<use xlink:href="#ais-RatingMenu-starSymbol"></use>{{/.}}{{^.}}<use xlink:href="#ais-RatingMenu-starEmptySymbol"></use>{{/.}}
55
</svg>{{/stars}}

0 commit comments

Comments
 (0)
Please sign in to comment.