+
+ `);
+
+ search.addWidgets(result);
+ search.start();
+ await wait(100);
+
+ expect(elements.get('foo')?.innerHTML).toMatchInlineSnapshot(`
+
+
+ `);
+ });
+ });
+
+ describe('panel widgets', () => {
+ it('maps header parameter to panel header', async () => {
+ const searchClient = createSearchClient({
+ search: () =>
+ Promise.resolve(
+ createMultiSearchResponse({
+ hits: [
+ {
+ objectID: 'foo',
+ name: 'foo',
+ image: 'bar',
+ _highlightResult: {
+ name: {
+ value: 'fo__ais-highlight__o__/ais-highlight__',
+ matchLevel: 'full' as const,
+ matchedWords: [],
+ },
+ },
+ } as any,
+ ],
+ })
+ ),
+ });
+ const search = instantsearch({ searchClient });
+ const elements = new Map
+
+ -
+
-
+ ++
+ cols: + + + fo + + + o + + +
++
+
+
+ `);
+
+ search.addWidgets(result);
+ search.start();
+ await wait(100);
+
+ expect(elements.get('foo')?.innerHTML).toMatchInlineSnapshot(`
+
+
+ `);
+ });
+ });
+
+ describe('configure', () => {
+ it('applies configure widget', async () => {
+ const searchClient = createSearchClient({
+ search: jest.fn(() =>
+ Promise.resolve(
+ createMultiSearchResponse({
+ hits: [
+ {
+ objectID: 'foo',
+ name: 'foo',
+ image: 'bar',
+ _highlightResult: {
+ name: {
+ value: 'fo__ais-highlight__o__/ais-highlight__',
+ matchLevel: 'full' as const,
+ matchedWords: [],
+ },
+ },
+ } as any,
+ ],
+ })
+ )
+ ),
+ });
+ const search = instantsearch({ searchClient });
+ const elements = new Map
+
+
+
+ header text
+
+
+
+
+
+
+
+
+
+
+ `);
+
+ search.addWidgets(result);
+ search.start();
+ await wait(100);
+
+ expect(elements.get('foo')?.innerHTML).toMatchInlineSnapshot(`
+
+
+ `);
+ });
+ });
+});
diff --git a/packages/algolia-experiences/src/__tests__/setup-instantsearch.test.ts b/packages/algolia-experiences/src/__tests__/setup-instantsearch.test.ts
new file mode 100644
index 0000000000..2c6c93e23a
--- /dev/null
+++ b/packages/algolia-experiences/src/__tests__/setup-instantsearch.test.ts
@@ -0,0 +1,115 @@
+/**
+ * @jest-environment jsdom
+ */
+import { castToJestMock, wait } from '@instantsearch/testutils';
+
+import { fetchConfiguration } from '../get-configuration';
+import { setupInstantSearch } from '../setup-instantsearch';
+
+jest.mock('../get-configuration', () => {
+ const actual = jest.requireActual('../get-configuration');
+ return {
+ ...actual,
+ fetchConfiguration: jest.fn(() => Promise.resolve([])),
+ };
+});
+
+describe('setup of InstantSearch', () => {
+ const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+ beforeEach(() => {
+ errorSpy.mockReset();
+ document.head.innerHTML = '';
+ document.body.innerHTML = '';
+ });
+
+ test('error logged if no meta tag found', () => {
+ document.head.innerHTML = '';
+
+ setupInstantSearch();
+
+ expect(errorSpy).toHaveBeenCalledWith(
+ '[Algolia Experiences] No meta tag found'
+ );
+ });
+
+ test('no error logged if no elements found', () => {
+ document.head.innerHTML = `
+
+ `;
+
+ setupInstantSearch();
+
+ expect(errorSpy).not.toHaveBeenCalled();
+ });
+
+ test('search is exposed on the window', () => {
+ document.head.innerHTML = `
+
+ `;
+
+ setupInstantSearch();
+
+ expect(window.__search).toBeDefined();
+ });
+
+ test('styles are injected', () => {
+ document.head.innerHTML = `
+
+ `;
+
+ setupInstantSearch();
+
+ expect(
+ document.head.querySelectorAll('[data-source=instantsearch]')
+ ).toHaveLength(1);
+ });
+
+ test('configuration is fetched and rendered', async () => {
+ castToJestMock(fetchConfiguration).mockImplementationOnce(() =>
+ Promise.resolve([
+ {
+ id: 'fake-configuration',
+ name: 'Fake Configuration',
+ indexName: 'fake-index-name',
+ blocks: [
+ {
+ type: 'grid',
+ children: [],
+ },
+ ],
+ createdAt: '2021-01-01',
+ updatedAt: '2021-01-01',
+ },
+ ])
+ );
+
+ document.head.innerHTML = `
+
+ `;
+ document.body.innerHTML = `
+
+ `;
+
+ setupInstantSearch();
+
+ expect(
+ document.querySelector('[data-experience-id="fake-configuration"]')!
+ .children
+ ).toHaveLength(0);
+
+ await wait(0);
+
+ expect(
+ document.querySelector('[data-experience-id="fake-configuration"]')!
+ .children
+ ).not.toHaveLength(0);
+
+ expect(
+ document.querySelector('[data-experience-id="fake-configuration"]')!
+ .innerHTML
+ ).toMatchInlineSnapshot(`
+
+
+ -
+
- + + « + + +
- + + ‹ + + +
- + + 1 + + +
- + + › + + +
- + + » + + +
+
+ `);
+ });
+});
diff --git a/packages/algolia-experiences/src/get-configuration.ts b/packages/algolia-experiences/src/get-configuration.ts
new file mode 100644
index 0000000000..77c1bd84a2
--- /dev/null
+++ b/packages/algolia-experiences/src/get-configuration.ts
@@ -0,0 +1,120 @@
+import type { Settings } from './get-information';
+import type { Block, Configuration } from './types';
+
+export function fetchConfiguration(
+ ids: string[],
+ settings: Settings
+): Promise no item template given;
+ }
+
+ function renderChild(ch: TemplateChild) {
+ const Tag = tagNames.get(ch.type) as keyof JSX.IntrinsicElements;
+ if (!Tag) {
+ return