Skip to content

Commit 23e46b6

Browse files
bobylitoYannick Croissant
bobylito
authored and
Yannick Croissant
committed
fix(refinementList): fix showMore button to work after search (#3082)
1 parent 5dd0edf commit 23e46b6

File tree

6 files changed

+379
-21
lines changed

6 files changed

+379
-21
lines changed

‎src/components/RefinementList/RefinementList.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ class RefinementList extends Component {
171171
rootTagName="button"
172172
rootProps={{
173173
className: showMoreButtonClassName,
174+
disabled: !this.props.canToggleShowMore,
174175
onClick: this.props.toggleShowMore,
175176
}}
176177
data={{

‎src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,7 @@ exports[`RefinementList rendering with facets and disabled show more 1`] = `
204204
},
205205
}
206206
}
207+
disabled={true}
207208
/>
208209
</div>
209210
`;
@@ -313,6 +314,7 @@ exports[`RefinementList rendering with facets and show more 1`] = `
313314
},
314315
}
315316
}
317+
disabled={false}
316318
/>
317319
</div>
318320
`;

‎src/connectors/refinement-list/__tests__/connectRefinementList-test.js‎

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -711,6 +711,327 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
711711
]);
712712
});
713713

714+
it('show more should toggle between two limits after search', async () => {
715+
const { makeWidget, rendering } = createWidgetFactory();
716+
const limit = 1;
717+
const showMoreLimit = 2;
718+
const widget = makeWidget({
719+
attribute: 'category',
720+
limit,
721+
showMore: true,
722+
showMoreLimit,
723+
});
724+
725+
const helper = jsHelper({}, '', widget.getConfiguration({}));
726+
helper.search = jest.fn();
727+
helper.searchForFacetValues = jest.fn().mockReturnValue(
728+
Promise.resolve({
729+
facetHits: [],
730+
})
731+
);
732+
733+
widget.init({
734+
helper,
735+
state: helper.state,
736+
createURL: () => '#',
737+
});
738+
739+
widget.render({
740+
results: new SearchResults(helper.state, [
741+
{
742+
hits: [],
743+
facets: {
744+
category: {
745+
c1: 880,
746+
c2: 47,
747+
c3: 880,
748+
c4: 47,
749+
},
750+
},
751+
},
752+
{
753+
facets: {
754+
category: {
755+
c1: 880,
756+
c2: 47,
757+
c3: 880,
758+
c4: 47,
759+
},
760+
},
761+
},
762+
]),
763+
state: helper.state,
764+
helper,
765+
createURL: () => '#',
766+
});
767+
768+
const renderingOptions2 = rendering.mock.calls[1][0];
769+
expect(renderingOptions2.items).toHaveLength(1);
770+
771+
// `searchForItems` triggers a new render
772+
renderingOptions2.searchForItems('query triggering no results');
773+
await Promise.resolve();
774+
775+
expect(helper.searchForFacetValues).toHaveBeenCalledWith(
776+
expect.anything(),
777+
expect.anything(),
778+
limit,
779+
expect.anything()
780+
);
781+
782+
expect(rendering).toHaveBeenCalledTimes(3);
783+
const renderingOptions3 = rendering.mock.calls[2][0];
784+
785+
// `searchForItems` triggers a new render
786+
renderingOptions3.searchForItems('');
787+
await Promise.resolve();
788+
789+
expect(rendering).toHaveBeenCalledTimes(4);
790+
const renderingOptions4 = rendering.mock.calls[3][0];
791+
expect(renderingOptions4.toggleShowMore).toBeDefined();
792+
793+
// `toggleShowMore` triggers a new render
794+
renderingOptions4.toggleShowMore();
795+
796+
expect(rendering).toHaveBeenCalledTimes(5);
797+
const renderingOptions5 = rendering.mock.calls[4][0];
798+
expect(renderingOptions5.items).toHaveLength(2);
799+
800+
renderingOptions5.searchForItems('new search');
801+
expect(helper.searchForFacetValues).toHaveBeenCalledWith(
802+
expect.anything(),
803+
expect.anything(),
804+
showMoreLimit,
805+
expect.anything()
806+
);
807+
});
808+
809+
it('Toggle show more should be enabled when refinement list is expanded and number of facet is above limit and below showMoreLimit', () => {
810+
const { makeWidget, rendering } = createWidgetFactory();
811+
const widget = makeWidget({
812+
attribute: 'category',
813+
limit: 1,
814+
showMore: true,
815+
showMoreLimit: 3,
816+
});
817+
818+
const helper = jsHelper({}, '', {
819+
...widget.getConfiguration({}),
820+
maxValuesPerFacet: 10,
821+
});
822+
helper.search = jest.fn();
823+
824+
// 1st rendering: initialization
825+
widget.init({
826+
results: new SearchResults(helper.state, [
827+
{
828+
hits: [],
829+
facets: {
830+
category: {
831+
c1: 880,
832+
c2: 47,
833+
c3: 880,
834+
c4: 47,
835+
},
836+
},
837+
},
838+
{
839+
facets: {
840+
category: {
841+
c1: 880,
842+
c2: 47,
843+
c3: 880,
844+
c4: 47,
845+
},
846+
},
847+
},
848+
]),
849+
helper,
850+
state: helper.state,
851+
createURL: () => '#',
852+
onHistoryChange: () => {},
853+
});
854+
855+
// 2nd rendering: with 4 results (collapsed refinement list with limit < showMoreLimit < facets)
856+
widget.render({
857+
results: new SearchResults(helper.state, [
858+
{
859+
hits: [],
860+
facets: {
861+
category: {
862+
c1: 880,
863+
c2: 47,
864+
c3: 880,
865+
c4: 47,
866+
},
867+
},
868+
},
869+
{
870+
facets: {
871+
category: {
872+
c1: 880,
873+
c2: 47,
874+
c3: 880,
875+
c4: 47,
876+
},
877+
},
878+
},
879+
]),
880+
state: helper.state,
881+
helper,
882+
createURL: () => '#',
883+
});
884+
885+
const secondRenderingOptions = rendering.mock.calls[1][0];
886+
887+
expect(secondRenderingOptions.canToggleShowMore).toEqual(true);
888+
889+
// 3rd rendering: expand refinement list
890+
secondRenderingOptions.toggleShowMore();
891+
892+
// 4th rendering: with 2 results (expanded refinement list with limit < facets < showMoreLimit)
893+
widget.render({
894+
results: new SearchResults(helper.state, [
895+
{
896+
hits: [],
897+
facets: {
898+
category: {
899+
c1: 880,
900+
c2: 47,
901+
},
902+
},
903+
},
904+
{
905+
facets: {
906+
category: {
907+
c1: 880,
908+
c2: 47,
909+
},
910+
},
911+
},
912+
]),
913+
state: helper.state,
914+
helper,
915+
createURL: () => '#',
916+
});
917+
918+
const forthRenderingOptions = rendering.mock.calls[3][0];
919+
920+
expect(forthRenderingOptions.canToggleShowMore).toEqual(true);
921+
});
922+
923+
it('Toggle show more should be disabled when refinement list is expanded and number of facet is below limit', () => {
924+
const { makeWidget, rendering } = createWidgetFactory();
925+
const widget = makeWidget({
926+
attribute: 'category',
927+
limit: 2,
928+
showMore: true,
929+
showMoreLimit: 3,
930+
});
931+
932+
const helper = jsHelper({}, '', {
933+
...widget.getConfiguration({}),
934+
maxValuesPerFacet: 10,
935+
});
936+
helper.search = jest.fn();
937+
938+
// 1st rendering: initialization
939+
widget.init({
940+
results: new SearchResults(helper.state, [
941+
{
942+
hits: [],
943+
facets: {
944+
category: {
945+
c1: 880,
946+
c2: 47,
947+
c3: 880,
948+
c4: 47,
949+
},
950+
},
951+
},
952+
{
953+
facets: {
954+
category: {
955+
c1: 880,
956+
c2: 47,
957+
c3: 880,
958+
c4: 47,
959+
},
960+
},
961+
},
962+
]),
963+
helper,
964+
state: helper.state,
965+
createURL: () => '#',
966+
onHistoryChange: () => {},
967+
});
968+
969+
// 2nd rendering: with 4 results (collapsed refinement list with limit < showMoreLimit < facets)
970+
widget.render({
971+
results: new SearchResults(helper.state, [
972+
{
973+
hits: [],
974+
facets: {
975+
category: {
976+
c1: 880,
977+
c2: 47,
978+
c3: 880,
979+
c4: 47,
980+
},
981+
},
982+
},
983+
{
984+
facets: {
985+
category: {
986+
c1: 880,
987+
c2: 47,
988+
c3: 880,
989+
c4: 47,
990+
},
991+
},
992+
},
993+
]),
994+
state: helper.state,
995+
helper,
996+
createURL: () => '#',
997+
});
998+
999+
const secondRenderingOptions = rendering.mock.calls[1][0];
1000+
1001+
expect(secondRenderingOptions.canToggleShowMore).toEqual(true);
1002+
1003+
// 3rd rendering: expand refinement list
1004+
secondRenderingOptions.toggleShowMore();
1005+
1006+
// 4th rendering: with 1 result (expanded refinement list with facets < limit < showMoreLimit)
1007+
widget.render({
1008+
results: new SearchResults(helper.state, [
1009+
{
1010+
hits: [],
1011+
facets: {
1012+
category: {
1013+
c1: 880,
1014+
},
1015+
},
1016+
},
1017+
{
1018+
facets: {
1019+
category: {
1020+
c1: 880,
1021+
},
1022+
},
1023+
},
1024+
]),
1025+
state: helper.state,
1026+
helper,
1027+
createURL: () => '#',
1028+
});
1029+
1030+
const forthRenderingOptions = rendering.mock.calls[3][0];
1031+
1032+
expect(forthRenderingOptions.canToggleShowMore).toEqual(false);
1033+
});
1034+
7141035
it('hasExhaustiveItems indicates if the items provided are exhaustive - without other widgets making the maxValuesPerFacet bigger', () => {
7151036
const { makeWidget, rendering } = createWidgetFactory();
7161037
const widget = makeWidget({
@@ -914,13 +1235,19 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/refinement-
9141235
facets: {
9151236
category: {
9161237
c1: 880,
1238+
c2: 880,
1239+
c3: 880,
1240+
c4: 880,
9171241
},
9181242
},
9191243
},
9201244
{
9211245
facets: {
9221246
category: {
9231247
c1: 880,
1248+
c2: 880,
1249+
c3: 880,
1250+
c4: 880,
9241251
},
9251252
},
9261253
},

0 commit comments

Comments
 (0)