Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions bundlesize.config.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@
},
{
"path": "./packages/instantsearch.js/dist/instantsearch.production.min.js",
"maxSize": "122 kB"
"maxSize": "123 kB"
},
{
"path": "./packages/instantsearch.js/dist/instantsearch.development.js",
"maxSize": "253.4 kB"
"maxSize": "260 kB"
Comment thread
Haroenv marked this conversation as resolved.
},
{
"path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { cx } from '../../lib/cx';

import type { ComponentProps, Renderer } from '../../types';
import type { ComponentProps, Renderer, SendEventForHits } from '../../types';

export type AutocompleteIndexProps<
T = { objectID: string; __indexName: string } & Record<string, unknown>
Expand All @@ -22,6 +22,7 @@ export type AutocompleteIndexProps<
onSelect: () => void;
onApply: () => void;
};
sendEvent?: SendEventForHits;
classNames?: Partial<AutocompleteIndexClassNames>;
};

Expand Down Expand Up @@ -56,6 +57,7 @@ export function createAutocompleteIndexComponent({ createElement }: Renderer) {
ItemComponent,
NoResultsComponent,
getItemProps,
sendEvent,
classNames = {},
} = userProps;

Expand Down Expand Up @@ -93,6 +95,20 @@ export function createAutocompleteIndexComponent({ createElement }: Renderer) {
classNames.item,
className
)}
onClick={() => {
sendEvent?.(
'click:internal',
item as Record<string, unknown>,
Comment thread
Haroenv marked this conversation as resolved.
Outdated
'Hit Clicked'
);
}}
Comment thread
Haroenv marked this conversation as resolved.
onAuxClick={() => {
sendEvent?.(
'click:internal',
item as Record<string, unknown>,
Comment thread
Haroenv marked this conversation as resolved.
Outdated
'Hit Clicked'
);
}}
Comment thread
Haroenv marked this conversation as resolved.
>
<ItemComponent
item={item}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -200,12 +200,17 @@ search.addWidgets([
expect(secondRenderOptions.indices).toHaveLength(2);
expect(secondRenderOptions.indices[0].indexId).toEqual('indexId0');
expect(secondRenderOptions.indices[0].indexName).toEqual('indexName0');
expect(secondRenderOptions.indices[0].hits).toEqual(firstIndexHits);
expect(secondRenderOptions.indices[0].hits).toEqual([
{ ...firstIndexHits[0], __position: 1 },
]);
expect(secondRenderOptions.indices[0].results.index).toEqual('indexName0');
expect(secondRenderOptions.indices[0].results.hits).toEqual(firstIndexHits);
expect(secondRenderOptions.indices[1].indexId).toEqual('indexId1');
expect(secondRenderOptions.indices[1].indexName).toEqual('indexName1');
expect(secondRenderOptions.indices[1].hits).toEqual(secondIndexHits);
expect(secondRenderOptions.indices[1].hits).toEqual([
{ ...secondIndexHits[0], __position: 1 },
{ ...secondIndexHits[1], __position: 2 },
]);
expect(secondRenderOptions.indices[1].results.index).toEqual('indexName1');
expect(secondRenderOptions.indices[1].results.hits).toEqual(
secondIndexHits
Expand Down Expand Up @@ -268,6 +273,20 @@ search.addWidgets([
{ __escaped: true }
);

const enrichedEscapedHits = [
{
_highlightResult: {
foobar: {
value: '&lt;script&gt;<mark>foobar</mark>&lt;/script&gt;',
matchLevel: 'full',
matchedWords: ['foobar'],
},
},
objectID: '1',
__position: 1,
},
];

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

widget.render!(
Expand All @@ -290,7 +309,7 @@ search.addWidgets([

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

expect(rendering.indices[0].hits).toEqual(escapedHits);
expect(rendering.indices[0].hits).toEqual(enrichedEscapedHits);
expect(rendering.indices[0].results.hits).toEqual(escapedHits);
});

Expand Down Expand Up @@ -337,7 +356,12 @@ search.addWidgets([

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

expect(rendering.indices[0].hits).toEqual(hits);
expect(rendering.indices[0].hits).toEqual(
hits.map((hit, index) => ({
...hit,
__position: index + 1,
}))
);
expect(rendering.indices[0].results.hits).toEqual(hits);
});

Expand Down Expand Up @@ -728,22 +752,16 @@ search.addWidgets([
{
name: 'Hit 1-1',
objectID: '1-1',
__queryID: 'test-query-id',
__position: 0,
},
];
const secondIndexHits = [
{
name: 'Hit 2-1',
objectID: '2-1',
__queryID: 'test-query-id',
__position: 0,
},
{
name: 'Hit 2-2',
objectID: '2-2',
__queryID: 'test-query-id',
__position: 1,
},
];

Expand All @@ -754,6 +772,7 @@ search.addWidgets([
createSingleSearchResponse({
index: 'indexName0',
hits: firstIndexHits,
queryID: 'test-query-id',
}),
]),
helper: algoliasearchHelper(searchClient, 'indexName0'),
Expand All @@ -764,6 +783,7 @@ search.addWidgets([
createSingleSearchResponse({
index: 'indexName1',
hits: secondIndexHits,
queryID: 'test-query-id',
}),
]),
helper: algoliasearchHelper(searchClient, 'indexName1'),
Expand Down Expand Up @@ -794,7 +814,7 @@ search.addWidgets([
eventModifier: 'internal',
hits: [
{
__position: 0,
__position: 1,
__queryID: 'test-query-id',
name: 'Hit 1-1',
objectID: '1-1',
Expand All @@ -813,13 +833,13 @@ search.addWidgets([
eventModifier: 'internal',
hits: [
{
__position: 0,
__position: 1,
__queryID: 'test-query-id',
name: 'Hit 2-1',
objectID: '2-1',
},
{
__position: 1,
__position: 2,
__queryID: 'test-query-id',
name: 'Hit 2-2',
objectID: '2-2',
Expand Down Expand Up @@ -894,18 +914,17 @@ search.addWidgets([
});

it('sends click event', () => {
const { sendEventToInsights, render, secondIndexHits } =
createRenderedWidget();
const { sendEventToInsights, render } = createRenderedWidget();
expect(sendEventToInsights).toHaveBeenCalledTimes(2); // two view events for each index by render

const { indices } = render.mock.calls[render.mock.calls.length - 1][0];
indices[1].sendEvent('click', secondIndexHits[0], 'Product Added');
indices[1].sendEvent('click', indices[1].hits[0], 'Product Added');
expect(sendEventToInsights).toHaveBeenCalledTimes(3);
expect(sendEventToInsights.mock.calls[2][0]).toEqual({
eventType: 'click',
hits: [
{
__position: 0,
__position: 1,
__queryID: 'test-query-id',
name: 'Hit 2-1',
objectID: '2-1',
Expand All @@ -916,26 +935,25 @@ search.addWidgets([
eventName: 'Product Added',
index: 'indexName1',
objectIDs: ['2-1'],
positions: [0],
positions: [1],
queryID: 'test-query-id',
},
widgetType: 'ais.autocomplete',
});
});

it('sends conversion event', () => {
const { sendEventToInsights, render, firstIndexHits } =
createRenderedWidget();
const { sendEventToInsights, render } = createRenderedWidget();
expect(sendEventToInsights).toHaveBeenCalledTimes(2); // two view events for each index by render

const { indices } = render.mock.calls[render.mock.calls.length - 1][0];
indices[0].sendEvent('conversion', firstIndexHits[0], 'Product Ordered');
indices[0].sendEvent('conversion', indices[0].hits[0], 'Product Ordered');
expect(sendEventToInsights).toHaveBeenCalledTimes(3);
expect(sendEventToInsights.mock.calls[2][0]).toEqual({
eventType: 'conversion',
hits: [
{
__position: 0,
__position: 1,
__queryID: 'test-query-id',
name: 'Hit 1-1',
objectID: '1-1',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import {
addAbsolutePosition,
addQueryID,
escapeHits,
TAG_PLACEHOLDER,
checkRendering,
Expand Down Expand Up @@ -228,10 +230,21 @@ search.addWidgets([
widgetType: this.$$type,
});

const hits = scopedResult.results
? addQueryID(
addAbsolutePosition(
scopedResult.results.hits,
scopedResult.results.page,
scopedResult.results.hitsPerPage
),
scopedResult.results.queryID
)
: [];

return {
indexId: scopedResult.indexId,
indexName: scopedResult.results?.index || '',
hits: scopedResult.results?.hits || [],
hits,
results: scopedResult.results || ({} as unknown as SearchResults),
};
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -795,6 +795,7 @@ function AutocompleteWrapper<TItem extends BaseHit>({
__indexName: indexId,
}))}
getItemProps={getItemProps}
sendEvent={find(indices, (idx) => idx.indexId === indexId)?.sendEvent}
classNames={currentIndexConfig.cssClasses}
/>
);
Expand Down
3 changes: 2 additions & 1 deletion packages/react-instantsearch/src/widgets/Autocomplete.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -841,7 +841,7 @@ function InnerAutocomplete<TItem extends BaseHit = BaseHit>({
);
}

indicesForPanel.forEach(({ indexId, indexName, hits }) => {
indicesForPanel.forEach(({ indexId, indexName, hits, sendEvent }) => {
let elementId = indexName;
if (indexName === showQuerySuggestions?.indexName) {
elementId = 'suggestions';
Expand Down Expand Up @@ -869,6 +869,7 @@ function InnerAutocomplete<TItem extends BaseHit = BaseHit>({
__indexName: indexId,
}))}
getItemProps={getItemProps}
sendEvent={sendEvent}
classNames={currentIndexConfig.classNames}
/>
);
Expand Down
2 changes: 2 additions & 0 deletions tests/common/widgets/autocomplete/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { fakeAct, skippableDescribe } from '../../common';

import { createInsightsTests } from './insights';
import { createOptionsTests } from './options';
import { createTemplatesTests } from './templates';

Expand Down Expand Up @@ -59,6 +60,7 @@ export function createAutocompleteWidgetTests(
skippableDescribe('Autocomplete widget common tests', skippedTests, () => {
createOptionsTests(setup, { act, skippedTests, flavor });
createTemplatesTests(setup, { act, skippedTests, flavor });
createInsightsTests(setup, { act, skippedTests, flavor });
});
}
createAutocompleteWidgetTests.flavored = true;
Loading