only provide custom element

algolia · Sep 18, 2024 · c88b163 · c88b163
1 parent c304fa3
commit c88b163
Show file tree

Hide file tree

Showing 9 changed files with 190 additions and 113 deletions.
diff --git a/examples/js/algolia-experiences/index.html b/examples/js/algolia-experiences/index.html
@@ -67,7 +67,9 @@
   <body>
     <main>
       <h2>Buy historical books now!</h2>
-      <div data-experience-id="category:historical"></div>
+      <algolia-experience
+        experience-id="category:historical"
+      ></algolia-experience>
     </main>
   </body>
 </html>
diff --git a/examples/js/algolia-experiences/local.html b/examples/js/algolia-experiences/local.html
@@ -67,7 +67,9 @@
   <body>
     <main>
       <h2>Buy historical books now!</h2>
-      <div data-experience-id="category:historical"></div>
+      <algolia-experience
+        experience-id="category:historical"
+      ></algolia-experience>
     </main>
   </body>
 </html>
diff --git a/...s/algolia-experiences/custom-element.html → examples/js/algolia-experiences/toggle.html b/...s/algolia-experiences/custom-element.html → examples/js/algolia-experiences/toggle.html
diff --git a/packages/algolia-experiences/src/__tests__/get-configuration.test.ts b/packages/algolia-experiences/src/__tests__/get-configuration.test.ts
@@ -0,0 +1,31 @@
+import { fetchConfiguration } from '../get-configuration';
+
+describe('fetchConfiguration', () => {
+  it('should fetch and cache the configuration', async () => {
+    const settings = { appId: 'appId', apiKey: 'apiKey' };
+
+    // @ts-ignore
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            id: '1',
+            name: 'name',
+            indexName: 'indexName',
+            blocks: [],
+            createdAt: 'createdAt',
+            updatedAt: 'updatedAt',
+          }),
+      })
+    );
+
+    await fetchConfiguration('1', settings);
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+
+    await fetchConfiguration('1', settings);
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/algolia-experiences/src/__tests__/render.test.ts b/packages/algolia-experiences/src/__tests__/render.test.ts
@@ -27,28 +27,15 @@ describe('configToIndex', () => {
     error.mockClear();
   });
 
-  it('errors if element not found', () => {
-    const elements = new Map<string, HTMLElement>();
-    const config = { id: 'foo', indexName: 'bar', name: 'Foo', blocks: [] };
-    const result = configToIndex(config, elements);
-    expect(result).toEqual([]);
-    expect(error).toHaveBeenCalledTimes(1);
-    expect(error).toHaveBeenCalledWith(
-      '[Algolia Experiences] Element with id foo not found'
-    );
-  });
-
   it('returns index with widgets', () => {
-    const elements = new Map<string, HTMLElement>([
-      ['foo', document.createElement('div')],
-    ]);
+    const element = document.createElement('div');
     const config: Configuration = {
       id: 'foo',
       indexName: 'bar',
       name: 'Foo',
       blocks: [{ type: 'ais.hits', parameters: {}, children: [] }],
     };
-    const result = configToIndex(config, elements);
+    const result = configToIndex(config, element);
     expect(result).toHaveLength(1);
     expect(result[0].getIndexName()).toEqual('bar');
     expect(result[0].getIndexId()).toEqual('foo');
@@ -57,9 +44,7 @@ describe('configToIndex', () => {
   });
 
   it('maps to the right widget types', () => {
-    const elements = new Map<string, HTMLElement>([
-      ['foo', document.createElement('div')],
-    ]);
+    const element = document.createElement('div');
     const config: Configuration = {
       id: 'foo',
       indexName: 'bar',
@@ -121,7 +106,7 @@ describe('configToIndex', () => {
         },
       ],
     };
-    const result = configToIndex(config, elements);
+    const result = configToIndex(config, element);
     expect(result).toHaveLength(1);
     expect(result[0].getWidgets()).toHaveLength(config.blocks.length);
     expect(result[0].getWidgets().map((w) => w.$$type)).toEqual([
@@ -167,9 +152,7 @@ describe('configToIndex', () => {
           ),
       });
       const search = instantsearch({ searchClient });
-      const elements = new Map<string, HTMLElement>([
-        ['foo', document.createElement('div')],
-      ]);
+      const element = document.createElement('div');
       const config: Configuration = {
         id: 'foo',
         indexName: 'bar',
@@ -210,11 +193,11 @@ describe('configToIndex', () => {
           },
         ],
       };
-      const result = configToIndex(config, elements);
+      const result = configToIndex(config, element);
       expect(result).toHaveLength(1);
       expect(result[0].getWidgets()).toHaveLength(1);
 
-      expect(elements.get('foo')?.innerHTML).toMatchInlineSnapshot(`
+      expect(element.innerHTML).toMatchInlineSnapshot(`
         <div>
         </div>
       `);
@@ -223,7 +206,7 @@ describe('configToIndex', () => {
       search.start();
       await wait(100);
 
-      expect(elements.get('foo')?.innerHTML).toMatchInlineSnapshot(`
+      expect(element.innerHTML).toMatchInlineSnapshot(`
         <div>
           <div class="ais-Hits">
             <ol class="ais-Hits-list">
@@ -276,9 +259,7 @@ describe('configToIndex', () => {
           ),
       });
       const search = instantsearch({ searchClient });
-      const elements = new Map<string, HTMLElement>([
-        ['foo', document.createElement('div')],
-      ]);
+      const element = document.createElement('div');
 
       const config: Configuration = {
         id: 'foo',
@@ -292,12 +273,12 @@ describe('configToIndex', () => {
         ],
       };
 
-      const result = configToIndex(config, elements);
+      const result = configToIndex(config, element);
 
       expect(result).toHaveLength(1);
       expect(result[0].getWidgets()).toHaveLength(1);
 
-      expect(elements.get('foo')?.innerHTML).toMatchInlineSnapshot(`
+      expect(element.innerHTML).toMatchInlineSnapshot(`
         <div>
         </div>
       `);
@@ -306,7 +287,7 @@ describe('configToIndex', () => {
       search.start();
       await wait(100);
 
-      expect(elements.get('foo')?.innerHTML).toMatchInlineSnapshot(`
+      expect(element.innerHTML).toMatchInlineSnapshot(`
         <div>
           <div class="ais-Panel">
             <div class="ais-Panel-header">
@@ -351,9 +332,7 @@ describe('configToIndex', () => {
         ),
       });
       const search = instantsearch({ searchClient });
-      const elements = new Map<string, HTMLElement>([
-        ['foo', document.createElement('div')],
-      ]);
+      const element = document.createElement('div');
 
       const config: Configuration = {
         id: 'foo',
@@ -367,12 +346,12 @@ describe('configToIndex', () => {
         ],
       };
 
-      const result = configToIndex(config, elements);
+      const result = configToIndex(config, element);
 
       expect(result).toHaveLength(1);
       expect(result[0].getWidgets()).toHaveLength(1);
 
-      expect(elements.get('foo')).toBeEmptyDOMElement();
+      expect(element).toBeEmptyDOMElement();
 
       search.addWidgets(result);
       search.start();
@@ -400,9 +379,7 @@ describe('configToIndex', () => {
           ),
       });
       const search = instantsearch({ searchClient });
-      const elements = new Map<string, HTMLElement>([
-        ['foo', document.createElement('div')],
-      ]);
+      const element = document.createElement('div');
 
       const config: Configuration = {
         id: 'foo',
@@ -416,12 +393,12 @@ describe('configToIndex', () => {
         ],
       };
 
-      const result = configToIndex(config, elements);
+      const result = configToIndex(config, element);
 
       expect(result).toHaveLength(1);
       expect(result[0].getWidgets()).toHaveLength(1);
 
-      expect(elements.get('foo')?.innerHTML).toMatchInlineSnapshot(`
+      expect(element?.innerHTML).toMatchInlineSnapshot(`
         <div>
         </div>
       `);
@@ -430,7 +407,7 @@ describe('configToIndex', () => {
       search.start();
       await wait(100);
 
-      expect(elements.get('foo')?.innerHTML).toMatchInlineSnapshot(`
+      expect(element?.innerHTML).toMatchInlineSnapshot(`
         <div>
           <div class="ais-Pagination ais-Pagination--noRefinement">
             <ul class="ais-Pagination-list">

diff --git a/packages/algolia-experiences/src/__tests__/setup-instantsearch.test.ts b/packages/algolia-experiences/src/__tests__/setup-instantsearch.test.ts
@@ -66,50 +66,124 @@ describe('setup of InstantSearch', () => {
 
   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',
-        },
-      ])
+      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 = `
       <meta name="algolia-configuration" content='{"appId":"latency","apiKey":"6be0576ff61c053d5f9a3225e2a90f76"}'>
     `;
     document.body.innerHTML = `
-      <div data-experience-id="fake-configuration"></div>
+      <algolia-experience experience-id="fake-configuration"></algolia-experience>
     `;
 
     setupInstantSearch();
 
-    expect(
-      document.querySelector('[data-experience-id="fake-configuration"]')!
-        .children
-    ).toHaveLength(0);
+    expect(document.querySelector('algolia-experience')!.children).toHaveLength(
+      0
+    );
 
     await wait(0);
 
     expect(
-      document.querySelector('[data-experience-id="fake-configuration"]')!
-        .children
+      document.querySelector('algolia-experience')!.children
     ).not.toHaveLength(0);
 
-    expect(
-      document.querySelector('[data-experience-id="fake-configuration"]')!
-        .innerHTML
-    ).toMatchInlineSnapshot(`
+    expect(document.querySelector('algolia-experience')!.innerHTML)
+      .toMatchInlineSnapshot(`
       <div class="ais-Grid">
       </div>
     `);
   });
+
+  test('algolia-experience can be added after setup', 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 = `
+      <meta name="algolia-configuration" content='{"appId":"latency","apiKey":"6be0576ff61c053d5f9a3225e2a90f76"}'>
+    `;
+    document.body.innerHTML = '';
+
+    setupInstantSearch();
+
+    await wait(0);
+
+    document.body.innerHTML = `
+      <algolia-experience experience-id="fake-configuration"></algolia-experience>
+    `;
+
+    await wait(0);
+
+    expect(
+      document.querySelector('algolia-experience')!.children
+    ).not.toHaveLength(0);
+  });
+
+  test('algolia-experience reacts to id change', async () => {
+    castToJestMock(fetchConfiguration).mockImplementation(() =>
+      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 = `
+      <meta name="algolia-configuration" content='{"appId":"latency","apiKey":"6be0576ff61c053d5f9a3225e2a90f76"}'>
+    `;
+    document.body.innerHTML = '';
+
+    setupInstantSearch();
+
+    await wait(0);
+
+    document.body.innerHTML = `
+      <algolia-experience experience-id="1"></algolia-experience>
+    `;
+
+    await wait(0);
+
+    expect(fetchConfiguration).toHaveBeenLastCalledWith('1', expect.anything());
+
+    document
+      .querySelector('algolia-experience')!
+      .setAttribute('experience-id', '2');
+
+    await wait(0);
+
+    expect(fetchConfiguration).toHaveBeenLastCalledWith('2', expect.anything());
+  });
 });