Skip to content

Commit

Permalink
feat(hierarchical-menu): implement show more feature (algolia#3151)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bobylito @francoischalifour
bobylito authored and francoischalifour committed Oct 2, 2018
1 parent cdea3ab commit f54fccd
Show file tree
Hide file tree
Showing 8 changed files with 451 additions and 64 deletions.
38 changes: 38 additions & 0 deletions dev/app/builtin/stories/hierarchical-menu.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,44 @@ export default () => {
);
})
)
.add(
'with show more',
wrapWithHits(container => {
window.search.addWidget(
instantsearch.widgets.hierarchicalMenu({
container,
attributes: [
'hierarchicalCategories.lvl0',
'hierarchicalCategories.lvl1',
'hierarchicalCategories.lvl2',
'hierarchicalCategories.lvl3',
],
showMore: true,
limit: 3,
showMoreLimit: 10,
})
);
})
)
.add(
'with show more (exhaustive display)',
wrapWithHits(container => {
window.search.addWidget(
instantsearch.widgets.hierarchicalMenu({
container,
attributes: [
'hierarchicalCategories.lvl0',
'hierarchicalCategories.lvl1',
'hierarchicalCategories.lvl2',
'hierarchicalCategories.lvl3',
],
showMore: true,
limit: 200,
showMoreLimit: 1000,
})
);
})
)
.add(
'with transformed items',
wrapWithHits(container => {
Expand Down
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 @@ -41,6 +41,7 @@ export class RawRefinementList extends Component {
{...this.props}
depth={this.props.depth + 1}
facetValues={facetValue.data}
showMore={false}
/>
);
}
Expand Down
306 changes: 258 additions & 48 deletions src/connectors/hierarchical-menu/__tests__/connectHierarchicalMenu-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,59 +5,156 @@ const SearchParameters = jsHelper.SearchParameters;
import connectHierarchicalMenu from '../connectHierarchicalMenu.js';

describe('connectHierarchicalMenu', () => {
it('It should compute getConfiguration() correctly', () => {
const rendering = jest.fn();
const makeWidget = connectHierarchicalMenu(rendering);
describe('getConfiguration', () => {
it('It should compute getConfiguration() correctly', () => {
const rendering = jest.fn();
const makeWidget = connectHierarchicalMenu(rendering);

const widget = makeWidget({ attributes: ['category', 'sub_category'] });
const widget = makeWidget({ attributes: ['category', 'sub_category'] });

// when there is no hierarchicalFacets into current configuration
{
const config = widget.getConfiguration({});
expect(config).toEqual({
hierarchicalFacets: [
{
attributes: ['category', 'sub_category'],
name: 'category',
rootPath: null,
separator: ' > ',
showParentLevel: true,
},
],
maxValuesPerFacet: 10,
});
}

// when there is no hierarchicalFacets into current configuration
{
const config = widget.getConfiguration({});
expect(config).toEqual({
hierarchicalFacets: [
{
attributes: ['category', 'sub_category'],
name: 'category',
rootPath: null,
separator: ' > ',
showParentLevel: true,
},
],
maxValuesPerFacet: 10,
});
}
// when there is an identical hierarchicalFacets into current configuration
{
const spy = jest.spyOn(global.console, 'warn');
const config = widget.getConfiguration({
hierarchicalFacets: [{ name: 'category' }],
});
expect(config).toEqual({});
expect(spy).toHaveBeenCalled();
spy.mockReset();
spy.mockRestore();
}

// when there is already a different hierarchicalFacets into current configuration
{
const config = widget.getConfiguration({
hierarchicalFacets: [{ name: 'foo' }],
});
expect(config).toEqual({
hierarchicalFacets: [
{
attributes: ['category', 'sub_category'],
name: 'category',
rootPath: null,
separator: ' > ',
showParentLevel: true,
},
],
maxValuesPerFacet: 10,
});
}
});

// when there is an identical hierarchicalFacets into current configuration
{
const spy = jest.spyOn(global.console, 'warn');
const config = widget.getConfiguration({
hierarchicalFacets: [{ name: 'category' }],
});
expect(config).toEqual({});
expect(spy).toHaveBeenCalled();
spy.mockReset();
spy.mockRestore();
}

// when there is already a different hierarchicalFacets into current configuration
{
const config = widget.getConfiguration({
hierarchicalFacets: [{ name: 'foo' }],
it('sets the correct limit with showMore', () => {
const rendering = jest.fn();
const makeWidget = connectHierarchicalMenu(rendering);

const widget = makeWidget({
attributes: ['category', 'sub_category'],
showMore: true,
limit: 3,
showMoreLimit: 100,
});
expect(config).toEqual({
hierarchicalFacets: [
{
attributes: ['category', 'sub_category'],
name: 'category',
rootPath: null,
separator: ' > ',
showParentLevel: true,
},
],
maxValuesPerFacet: 10,

// when there is no other limit set
{
const config = widget.getConfiguration({});
expect(config).toEqual({
hierarchicalFacets: [
{
attributes: ['category', 'sub_category'],
name: 'category',
rootPath: null,
separator: ' > ',
showParentLevel: true,
},
],
maxValuesPerFacet: 100,
});
}

// when there is a bigger already limit set
{
const config = widget.getConfiguration({
maxValuesPerFacet: 101,
});
expect(config).toEqual({
hierarchicalFacets: [
{
attributes: ['category', 'sub_category'],
name: 'category',
rootPath: null,
separator: ' > ',
showParentLevel: true,
},
],
maxValuesPerFacet: 101,
});
}
});

it('sets the correct custom limit', () => {
const rendering = jest.fn();
const makeWidget = connectHierarchicalMenu(rendering);

const widget = makeWidget({
attributes: ['category', 'sub_category'],
showMore: true,
limit: 3,
});
}

// when there is no other limit set
{
const config = widget.getConfiguration({});
expect(config).toEqual({
hierarchicalFacets: [
{
attributes: ['category', 'sub_category'],
name: 'category',
rootPath: null,
separator: ' > ',
showParentLevel: true,
},
],
maxValuesPerFacet: 3,
});
}

// when there is a bigger already limit set
{
const config = widget.getConfiguration({
maxValuesPerFacet: 101,
});
expect(config).toEqual({
hierarchicalFacets: [
{
attributes: ['category', 'sub_category'],
name: 'category',
rootPath: null,
separator: ' > ',
showParentLevel: true,
},
],
maxValuesPerFacet: 101,
});
}
});
});

it('Renders during init and render', () => {
Expand Down Expand Up @@ -438,4 +535,117 @@ describe('connectHierarchicalMenu', () => {
});
});
});

describe('show more', () => {
it('can toggle the limits', () => {
const rendering = jest.fn();
const makeWidget = connectHierarchicalMenu(rendering);
const widget = makeWidget({
attributes: ['category'],
limit: 2,
showMoreLimit: 5,
});

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

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

widget.render({
results: new SearchResults(helper.state, [
{
hits: [],
facets: {
category: {
a: 880,
b: 880,
c: 880,
d: 880,
},
},
},
{
facets: {
category: {
a: 880,
b: 880,
c: 880,
d: 880,
},
},
},
]),
state: helper.state,
helper,
createURL: () => '#',
});

const { toggleShowMore } = rendering.mock.calls[1][0];

expect(rendering).toHaveBeenLastCalledWith(
expect.objectContaining({
items: [
{
label: 'a',
value: 'a',
count: 880,
isRefined: false,
data: null,
},
{
label: 'b',
value: 'b',
count: 880,
isRefined: false,
data: null,
},
],
}),
expect.anything()
);

toggleShowMore();

expect(rendering).toHaveBeenLastCalledWith(
expect.objectContaining({
items: [
{
label: 'a',
value: 'a',
count: 880,
isRefined: false,
data: null,
},
{
label: 'b',
value: 'b',
count: 880,
isRefined: false,
data: null,
},
{
label: 'c',
value: 'c',
count: 880,
isRefined: false,
data: null,
},
{
label: 'd',
value: 'd',
count: 880,
isRefined: false,
data: null,
},
],
}),
expect.anything()
);
});
});
});
Loading

0 comments on commit f54fccd

Please sign in to comment.