Skip to content
Merged
Show file tree
Hide file tree
Changes from all 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
2 changes: 1 addition & 1 deletion bundlesize.config.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
{
"path": "./packages/instantsearch.js/dist/instantsearch.production.min.js",
"maxSize": "122.75 kB"
"maxSize": "123 kB"
},
{
"path": "./packages/instantsearch.js/dist/instantsearch.development.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,
'Hit Clicked'
);
}}
onAuxClick={() => {
sendEvent?.(
'click:internal',
item,
'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
Loading