feat(dynamicWidgets): add default attributesToRender & transformItems

package.json

@@ -55,7 +55,7 @@
   "dependencies": {
     "@types/googlemaps": "^3.39.6",
     "@types/hogan.js": "^3.0.0",
-    "algoliasearch-helper": "^3.4.4",
+    "algoliasearch-helper": "^3.4.5",
     "classnames": "^2.2.5",
     "events": "^1.1.0",
     "hogan.js": "^3.0.2",
@@ -64,7 +64,7 @@
     "qs": "^6.5.1"
   },
   "devDependencies": {
-    "@algolia/client-search": "4.8.6",
+    "@algolia/client-search": "4.9.2",
     "@babel/cli": "7.8.4",
     "@babel/core": "7.9.6",
     "@babel/plugin-proposal-class-properties": "7.8.3",
@@ -94,7 +94,7 @@
     "@wdio/selenium-standalone-service": "5.16.5",
     "@wdio/spec-reporter": "5.16.5",
     "@wdio/static-server-service": "5.16.5",
-    "algoliasearch": "4.8.6",
+    "algoliasearch": "4.9.2",
     "algoliasearch-v3": "npm:algoliasearch@3.35.1",
     "babel-eslint": "10.0.3",
     "babel-jest": "26.6.3",

src/connectors/dynamic-widgets/__tests__/connectDynamicWidgets-test.ts

@@ -8,8 +8,12 @@ import {
 } from '../../../../test/mock/createWidget';
 import { wait } from '../../../../test/utils/wait';
 import { SearchParameters, SearchResults } from 'algoliasearch-helper';
-import { createMultiSearchResponse } from '../../../../test/mock/createAPIResponse';
+import {
+  createMultiSearchResponse,
+  createSingleSearchResponse,
+} from '../../../../test/mock/createAPIResponse';
 import connectHierarchicalMenu from '../../hierarchical-menu/connectHierarchicalMenu';
+import { DynamicWidgetsConnectorParams } from '../connectDynamicWidgets';
 
 expect.addSnapshotSerializer(widgetSnapshotSerializer);
 
@@ -39,17 +43,12 @@ describe('connectDynamicWidgets', () => {
       `);
     });
 
-    it('correct usage', () => {
+    it('minimal usage', () => {
       expect(() =>
-        // @ts-expect-error
         EXPERIMENTAL_connectDynamicWidgets(() => {})({
           widgets: [],
         })
-      ).toThrowErrorMatchingInlineSnapshot(`
-        "the \`transformItems\` option is required to be a function.
-
-        See documentation: https://www.algolia.com/doc/api-reference/widgets/dynamic-widgets/js/#connector"
-      `);
+      ).not.toThrow();
     });
 
     it('transformItems', () => {
@@ -552,6 +551,37 @@ describe('connectDynamicWidgets', () => {
       });
     });
 
+    it('returns widgetParams and attributesToRender (with results)', () => {
+      const widgetParams = {
+        widgets: [
+          connectMenu(() => {})({ attribute: 'test1' }),
+          connectHierarchicalMenu(() => {})({ attributes: ['test2', 'test3'] }),
+        ],
+      };
+      const dynamicWidgets = EXPERIMENTAL_connectDynamicWidgets(() => {})(
+        widgetParams
+      );
+
+      expect(
+        dynamicWidgets.getWidgetRenderState(
+          createRenderOptions({
+            results: new SearchResults(new SearchParameters(), [
+              createSingleSearchResponse({
+                renderingContent: {
+                  facetOrdering: {
+                    facet: { order: ['test1', 'test2'] },
+                  },
+                },
+              }),
+            ]),
+          })
+        )
+      ).toEqual({
+        attributesToRender: ['test1', 'test2'],
+        widgetParams,
+      });
+    });
+
     it('returns widgetParams and the result of transformItems render', () => {
       const widgetParams = {
         transformItems() {
@@ -573,6 +603,42 @@ describe('connectDynamicWidgets', () => {
         widgetParams,
       });
     });
+
+    it('returns widgetParams and the result of transformItems render (using result)', () => {
+      const widgetParams: DynamicWidgetsConnectorParams = {
+        transformItems(items) {
+          return items.sort((a, b) => b.localeCompare(a));
+        },
+        widgets: [
+          connectMenu(() => {})({ attribute: 'test1' }),
+          connectHierarchicalMenu(() => {})({ attributes: ['test2', 'test3'] }),
+        ],
+      };
+      const dynamicWidgets = EXPERIMENTAL_connectDynamicWidgets(() => {})(
+        widgetParams
+      );
+
+      expect(
+        dynamicWidgets.getWidgetRenderState(
+          createRenderOptions(
+            createRenderOptions({
+              results: new SearchResults(new SearchParameters(), [
+                createSingleSearchResponse({
+                  renderingContent: {
+                    facetOrdering: {
+                      facet: { order: ['test1', 'test2'] },
+                    },
+                  },
+                }),
+              ]),
+            })
+          )
+        )
+      ).toEqual({
+        attributesToRender: ['test2', 'test1'],
+        widgetParams,
+      });
+    });
   });
 
   describe('getRenderState', () => {

src/connectors/dynamic-widgets/connectDynamicWidgets.ts

@@ -18,7 +18,7 @@ export type DynamicWidgetsRenderState = {
 
 export type DynamicWidgetsConnectorParams = {
   widgets: Widget[];
-  transformItems(
+  transformItems?(
     items: string[],
     metadata: { results: SearchResults }
   ): string[];
@@ -44,7 +44,7 @@ const connectDynamicWidgets: DynamicWidgetsConnector = function connectDynamicWi
   checkRendering(renderFn, withUsage());
 
   return widgetParams => {
-    const { widgets, transformItems } = widgetParams;
+    const { widgets, transformItems = items => items } = widgetParams;
 
     if (
       !widgets ||
@@ -56,13 +56,6 @@ const connectDynamicWidgets: DynamicWidgetsConnector = function connectDynamicWi
       );
     }
 
-    // @TODO once the attributes are computed from the results, make this optional
-    if (typeof transformItems !== 'function') {
-      throw new Error(
-        withUsage('the `transformItems` option is required to be a function.')
-      );
-    }
-
     if (
       !widgets ||
       !Array.isArray(widgets) ||
@@ -157,11 +150,13 @@ const connectDynamicWidgets: DynamicWidgetsConnector = function connectDynamicWi
           return { attributesToRender: [], widgetParams };
         }
 
-        // @TODO: retrieve the facet order out of the results:
-        // results.renderContext.facetOrder.map(facet => facet.attribute)
-        const attributesToRender = transformItems([], { results });
+        const attributesToRender =
+          results.renderingContent?.facetOrdering?.facet?.order ?? [];
 
-        return { attributesToRender, widgetParams };
+        return {
+          attributesToRender: transformItems(attributesToRender, { results }),
+          widgetParams,
+        };
       },
     };
   };

src/widgets/dynamic-widgets/__tests__/dynamic-widgets-test.ts

@@ -51,21 +51,16 @@ describe('dynamicWidgets()', () => {
       `);
     });
 
-    test('transformItems is required', () => {
+    test('transformItems is not required', () => {
       expect(() =>
-        // @ts-expect-error
         EXPERIMENTAL_dynamicWidgets({
           container: document.createElement('div'),
           widgets: [],
         })
-      ).toThrowErrorMatchingInlineSnapshot(`
-        "the \`transformItems\` option is required to be a function.
-
-        See documentation: https://www.algolia.com/doc/api-reference/widgets/dynamic-widgets/js/#connector"
-      `);
+      ).not.toThrowError();
     });
 
-    test('correct usage', () => {
+    test('all options', () => {
       expect(() =>
         EXPERIMENTAL_dynamicWidgets({
           container: document.createElement('div'),

tsconfig.v3.json

@@ -11,6 +11,8 @@
     "src/middlewares/__tests__/createInsightsMiddleware.ts",
     "test/mock/createInsightsClient.ts",
     // v3 has a wrong definition for optionalWords (only accepts string[])
-    "src/connectors/voice-search/__tests__/connectVoiceSearch-test.ts"
+    "src/connectors/voice-search/__tests__/connectVoiceSearch-test.ts",
+    // v3 does not have renderingContent (only errors in the test)
+    "src/connectors/dynamic-widgets/__tests__/connectDynamicWidgets-test.ts"
   ]
 }