Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(facets): apply result from facet ordering #4784

Merged
merged 7 commits into from Jul 5, 2021
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Expand Up @@ -54,7 +54,7 @@
"dependencies": {
"@types/googlemaps": "^3.39.6",
"@types/hogan.js": "^3.0.0",
"algoliasearch-helper": "^3.4.5",
"algoliasearch-helper": "^3.5.3",
"classnames": "^2.2.5",
"events": "^1.1.0",
"hogan.js": "^3.0.2",
Expand Down
Expand Up @@ -691,6 +691,175 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
canToggleShowMore: false,
});
});

describe('facetOrdering', () => {
const resultsViaFacetOrdering = [
{
count: 47,
data: null,
exhaustive: true,
isRefined: false,
label: 'Outdoor',
value: 'Outdoor',
},
{
count: 880,
data: [
{
count: 173,
data: null,
exhaustive: true,
isRefined: false,
label: 'Frames & pictures',
value: 'Decoration > Frames & pictures',
},
{
count: 193,
data: null,
exhaustive: true,
isRefined: false,
label: 'Candle holders & candles',
value: 'Decoration > Candle holders & candles',
},
],
exhaustive: true,
isRefined: true,
label: 'Decoration',
value: 'Decoration',
},
];
const resultsViaSortBy = [
{
count: 880,
data: [
{
count: 193,
data: null,
exhaustive: true,
isRefined: false,
label: 'Candle holders & candles',
value: 'Decoration > Candle holders & candles',
},
{
count: 173,
data: null,
exhaustive: true,
isRefined: false,
label: 'Frames & pictures',
value: 'Decoration > Frames & pictures',
},
],
exhaustive: true,
isRefined: true,
label: 'Decoration',
value: 'Decoration',
},
{
count: 47,
data: null,
exhaustive: true,
isRefined: false,
label: 'Outdoor',
value: 'Outdoor',
},
];

test.each`
ordered | facetOrdering | sortBy | expected
Haroenv marked this conversation as resolved.
Show resolved Hide resolved
${true} | ${true} | ${undefined} | ${resultsViaFacetOrdering}
${false} | ${true} | ${undefined} | ${resultsViaSortBy}
${true} | ${true} | ${['name:asc']} | ${resultsViaFacetOrdering}
${false} | ${true} | ${['name:asc']} | ${resultsViaSortBy}
${true} | ${undefined} | ${undefined} | ${resultsViaFacetOrdering}
${false} | ${undefined} | ${undefined} | ${resultsViaSortBy}
${true} | ${undefined} | ${['name:asc']} | ${resultsViaSortBy}
${false} | ${undefined} | ${['name:asc']} | ${resultsViaSortBy}
${true} | ${false} | ${undefined} | ${resultsViaSortBy}
${false} | ${false} | ${undefined} | ${resultsViaSortBy}
${true} | ${false} | ${['name:asc']} | ${resultsViaSortBy}
${false} | ${false} | ${['name:asc']} | ${resultsViaSortBy}
`(
'renderingContent present: $ordered, facetOrdering: $facetOrdering, sortBy: $sortBy',
({ ordered, facetOrdering, sortBy, expected }) => {
const renderFn = jest.fn();
const unmountFn = jest.fn();
const createHierarchicalMenu = connectHierarchicalMenu(
renderFn,
unmountFn
);
const hierarchicalMenu = createHierarchicalMenu({
attributes: ['category', 'subCategory'],
facetOrdering,
sortBy,
});
const helper = algoliasearchHelper(
createSearchClient(),
'indexName',
hierarchicalMenu.getWidgetSearchParameters!(
new SearchParameters(),
{
uiState: {
hierarchicalMenu: {
category: ['Decoration'],
},
},
}
)
);

hierarchicalMenu.init!(createInitOptions({ helper }));

const renderingContent = ordered
? {
facetOrdering: {
values: {
category: {
order: ['Outdoor'],
sortRemainingBy: 'alpha' as const,
},
subCategory: {
order: ['Decoration > Frames & pictures'],
sortRemainingBy: 'count' as const,
},
},
},
}
: undefined;

const results = new SearchResults(helper.state, [
createSingleSearchResponse({
renderingContent,
facets: {
category: {
Decoration: 880,
},
subCategory: {
'Decoration > Candle holders & candles': 193,
'Decoration > Frames & pictures': 173,
},
},
}),
createSingleSearchResponse({
facets: {
category: {
Decoration: 880,
Outdoor: 47,
},
},
}),
]);

const renderState = hierarchicalMenu.getWidgetRenderState(
createRenderOptions({
helper,
results,
})
);

expect(renderState.items).toEqual(expected);
}
);
});
});

describe('getWidgetUiState', () => {
Expand Down
16 changes: 10 additions & 6 deletions src/connectors/hierarchical-menu/connectHierarchicalMenu.ts
Expand Up @@ -23,6 +23,8 @@ const withUsage = createDocumentationMessageGenerator({
connector: true,
});

const DEFAULT_SORT = ['name:asc'];

export type HierarchicalMenuItem = {
/**
* Value of the menu item.
Expand Down Expand Up @@ -81,6 +83,11 @@ export type HierarchicalMenuConnectorParams = {
* You can also use a sort function that behaves like the standard Javascript [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Syntax).
*/
sortBy?: SortBy<HierarchicalMenuItem>;
/**
* Apply the sorting of facet values defined in settings
* Defaults to `true` if sortBy is not given
*/
facetOrdering?: boolean;
Haroenv marked this conversation as resolved.
Show resolved Hide resolved
/**
* Function to transform the items passed to the templates.
*/
Expand Down Expand Up @@ -174,7 +181,8 @@ const connectHierarchicalMenu: HierarchicalMenuConnector = function connectHiera
limit = 10,
showMore = false,
showMoreLimit = 20,
sortBy = ['name:asc'],
sortBy = DEFAULT_SORT,
facetOrdering = sortBy === DEFAULT_SORT,
tkrugg marked this conversation as resolved.
Show resolved Hide resolved
transformItems = (items => items) as TransformItems<HierarchicalMenuItem>,
Haroenv marked this conversation as resolved.
Show resolved Hide resolved
} = widgetParams || {};

Expand Down Expand Up @@ -273,11 +281,6 @@ const connectHierarchicalMenu: HierarchicalMenuConnector = function connectHiera
);
},

/**
* @param {Object} param0 cleanup arguments
* @param {any} param0.state current search parameters
* @returns {any} next search parameters
*/
dispose({ state }) {
unmountFn();

Expand Down Expand Up @@ -336,6 +339,7 @@ const connectHierarchicalMenu: HierarchicalMenuConnector = function connectHiera
if (results) {
const facetValues = results.getFacetValues(hierarchicalFacetName, {
sortBy,
facetOrdering,
});
const facetItems =
facetValues && !Array.isArray(facetValues) && facetValues.data
Expand Down