Skip to content

Commit

Permalink
fix(refinementList): fix showMore button to work after search (#3082)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bobylito
bobylito authored and Yannick Croissant committed Jul 17, 2019
1 parent 5dd0edf commit 23e46b6
Show file tree
Hide file tree
Showing 6 changed files with 379 additions and 21 deletions.
1 change: 1 addition & 0 deletions src/components/RefinementList/RefinementList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@ class RefinementList extends Component {
rootTagName="button"
rootProps={{
className: showMoreButtonClassName,
disabled: !this.props.canToggleShowMore,
onClick: this.props.toggleShowMore,
}}
data={{
Expand Down
2 changes: 2 additions & 0 deletions src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,7 @@ exports[`RefinementList rendering with facets and disabled show more 1`] = `
},
}
}
disabled={true}
/>
</div>
`;
Expand Down Expand Up @@ -313,6 +314,7 @@ exports[`RefinementList rendering with facets and show more 1`] = `
},
}
}
disabled={false}
/>
</div>
`;
Expand Down
327 changes: 327 additions & 0 deletions src/connectors/refinement-list/__tests__/connectRefinementList-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -711,6 +711,327 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
]);
});

it('show more should toggle between two limits after search', async () => {
const { makeWidget, rendering } = createWidgetFactory();
const limit = 1;
const showMoreLimit = 2;
const widget = makeWidget({
attribute: 'category',
limit,
showMore: true,
showMoreLimit,
});

const helper = jsHelper({}, '', widget.getConfiguration({}));
helper.search = jest.fn();
helper.searchForFacetValues = jest.fn().mockReturnValue(
Promise.resolve({
facetHits: [],
})
);

widget.init({
helper,
state: helper.state,
createURL: () => '#',
});

widget.render({
results: new SearchResults(helper.state, [
{
hits: [],
facets: {
category: {
c1: 880,
c2: 47,
c3: 880,
c4: 47,
},
},
},
{
facets: {
category: {
c1: 880,
c2: 47,
c3: 880,
c4: 47,
},
},
},
]),
state: helper.state,
helper,
createURL: () => '#',
});

const renderingOptions2 = rendering.mock.calls[1][0];
expect(renderingOptions2.items).toHaveLength(1);

// `searchForItems` triggers a new render
renderingOptions2.searchForItems('query triggering no results');
await Promise.resolve();

expect(helper.searchForFacetValues).toHaveBeenCalledWith(
expect.anything(),
expect.anything(),
limit,
expect.anything()
);

expect(rendering).toHaveBeenCalledTimes(3);
const renderingOptions3 = rendering.mock.calls[2][0];

// `searchForItems` triggers a new render
renderingOptions3.searchForItems('');
await Promise.resolve();

expect(rendering).toHaveBeenCalledTimes(4);
const renderingOptions4 = rendering.mock.calls[3][0];
expect(renderingOptions4.toggleShowMore).toBeDefined();

// `toggleShowMore` triggers a new render
renderingOptions4.toggleShowMore();

expect(rendering).toHaveBeenCalledTimes(5);
const renderingOptions5 = rendering.mock.calls[4][0];
expect(renderingOptions5.items).toHaveLength(2);

renderingOptions5.searchForItems('new search');
expect(helper.searchForFacetValues).toHaveBeenCalledWith(
expect.anything(),
expect.anything(),
showMoreLimit,
expect.anything()
);
});

it('Toggle show more should be enabled when refinement list is expanded and number of facet is above limit and below showMoreLimit', () => {
const { makeWidget, rendering } = createWidgetFactory();
const widget = makeWidget({
attribute: 'category',
limit: 1,
showMore: true,
showMoreLimit: 3,
});

const helper = jsHelper({}, '', {
...widget.getConfiguration({}),
maxValuesPerFacet: 10,
});
helper.search = jest.fn();

// 1st rendering: initialization
widget.init({
results: new SearchResults(helper.state, [
{
hits: [],
facets: {
category: {
c1: 880,
c2: 47,
c3: 880,
c4: 47,
},
},
},
{
facets: {
category: {
c1: 880,
c2: 47,
c3: 880,
c4: 47,
},
},
},
]),
helper,
state: helper.state,
createURL: () => '#',
onHistoryChange: () => {},
});

// 2nd rendering: with 4 results (collapsed refinement list with limit < showMoreLimit < facets)
widget.render({
results: new SearchResults(helper.state, [
{
hits: [],
facets: {
category: {
c1: 880,
c2: 47,
c3: 880,
c4: 47,
},
},
},
{
facets: {
category: {
c1: 880,
c2: 47,
c3: 880,
c4: 47,
},
},
},
]),
state: helper.state,
helper,
createURL: () => '#',
});

const secondRenderingOptions = rendering.mock.calls[1][0];

expect(secondRenderingOptions.canToggleShowMore).toEqual(true);

// 3rd rendering: expand refinement list
secondRenderingOptions.toggleShowMore();

// 4th rendering: with 2 results (expanded refinement list with limit < facets < showMoreLimit)
widget.render({
results: new SearchResults(helper.state, [
{
hits: [],
facets: {
category: {
c1: 880,
c2: 47,
},
},
},
{
facets: {
category: {
c1: 880,
c2: 47,
},
},
},
]),
state: helper.state,
helper,
createURL: () => '#',
});

const forthRenderingOptions = rendering.mock.calls[3][0];

expect(forthRenderingOptions.canToggleShowMore).toEqual(true);
});

it('Toggle show more should be disabled when refinement list is expanded and number of facet is below limit', () => {
const { makeWidget, rendering } = createWidgetFactory();
const widget = makeWidget({
attribute: 'category',
limit: 2,
showMore: true,
showMoreLimit: 3,
});

const helper = jsHelper({}, '', {
...widget.getConfiguration({}),
maxValuesPerFacet: 10,
});
helper.search = jest.fn();

// 1st rendering: initialization
widget.init({
results: new SearchResults(helper.state, [
{
hits: [],
facets: {
category: {
c1: 880,
c2: 47,
c3: 880,
c4: 47,
},
},
},
{
facets: {
category: {
c1: 880,
c2: 47,
c3: 880,
c4: 47,
},
},
},
]),
helper,
state: helper.state,
createURL: () => '#',
onHistoryChange: () => {},
});

// 2nd rendering: with 4 results (collapsed refinement list with limit < showMoreLimit < facets)
widget.render({
results: new SearchResults(helper.state, [
{
hits: [],
facets: {
category: {
c1: 880,
c2: 47,
c3: 880,
c4: 47,
},
},
},
{
facets: {
category: {
c1: 880,
c2: 47,
c3: 880,
c4: 47,
},
},
},
]),
state: helper.state,
helper,
createURL: () => '#',
});

const secondRenderingOptions = rendering.mock.calls[1][0];

expect(secondRenderingOptions.canToggleShowMore).toEqual(true);

// 3rd rendering: expand refinement list
secondRenderingOptions.toggleShowMore();

// 4th rendering: with 1 result (expanded refinement list with facets < limit < showMoreLimit)
widget.render({
results: new SearchResults(helper.state, [
{
hits: [],
facets: {
category: {
c1: 880,
},
},
},
{
facets: {
category: {
c1: 880,
},
},
},
]),
state: helper.state,
helper,
createURL: () => '#',
});

const forthRenderingOptions = rendering.mock.calls[3][0];

expect(forthRenderingOptions.canToggleShowMore).toEqual(false);
});

it('hasExhaustiveItems indicates if the items provided are exhaustive - without other widgets making the maxValuesPerFacet bigger', () => {
const { makeWidget, rendering } = createWidgetFactory();
const widget = makeWidget({
Expand Down Expand Up @@ -914,13 +1235,19 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
facets: {
category: {
c1: 880,
c2: 880,
c3: 880,
c4: 880,
},
},
},
{
facets: {
category: {
c1: 880,
c2: 880,
c3: 880,
c4: 880,
},
},
},
Expand Down
Loading

0 comments on commit 23e46b6

Please sign in to comment.