feat(vue): port the five recommendation widgets

packages/vue-instantsearch/src/__tests__/common-widgets.test.js

@@ -29,6 +29,11 @@ import {
   AisPoweredBy,
   AisMenuSelect,
   AisDynamicWidgets,
+  AisRelatedProducts,
+  AisTrendingItems,
+  AisTrendingFacets,
+  AisLookingSimilar,
+  AisFrequentlyBoughtTogether,
 } from '../instantsearch';
 import { renderCompat } from '../util/vue-compat';
 
@@ -509,22 +514,105 @@ const testSetups = {
 
     await nextTick();
   },
-  createRelatedProductsWidgetTests() {
-    throw new Error('RelatedProduct is not supported in Vue InstantSearch');
+  async createRelatedProductsWidgetTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisRelatedProducts, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
   },
-  createFrequentlyBoughtTogetherWidgetTests() {
-    throw new Error(
-      'FrequentlyBoughtTogether is not supported in Vue InstantSearch'
+  async createFrequentlyBoughtTogetherWidgetTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisFrequentlyBoughtTogether, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
     );
+
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
   },
-  createTrendingItemsWidgetTests() {
-    throw new Error('TrendingItems is not supported in Vue InstantSearch');
+  async createTrendingItemsWidgetTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisTrendingItems, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
   },
-  createTrendingFacetsWidgetTests() {
-    throw new Error('TrendingFacets is not supported in Vue InstantSearch');
+  async createTrendingFacetsWidgetTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisTrendingFacets, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
   },
-  createLookingSimilarWidgetTests() {
-    throw new Error('LookingSimilar is not supported in Vue InstantSearch');
+  async createLookingSimilarWidgetTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisLookingSimilar, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await nextTick();
   },
   createPoweredByWidgetTests({ instantSearchOptions, widgetParams }) {
     mountApp(
@@ -619,23 +707,11 @@ const testOptions = {
   },
   createSortByWidgetTests: undefined,
   createStatsWidgetTests: undefined,
-  createRelatedProductsWidgetTests: {
-    skippedTests: {
-      'RelatedProducts widget common tests': true,
-    },
-  },
-  createFrequentlyBoughtTogetherWidgetTests: {
-    skippedTests: { 'FrequentlyBoughtTogether widget common tests': true },
-  },
-  createTrendingItemsWidgetTests: {
-    skippedTests: { 'TrendingItems widget common tests': true },
-  },
-  createTrendingFacetsWidgetTests: {
-    skippedTests: { 'TrendingFacets widget common tests': true },
-  },
-  createLookingSimilarWidgetTests: {
-    skippedTests: { 'LookingSimilar widget common tests': true },
-  },
+  createRelatedProductsWidgetTests: undefined,
+  createFrequentlyBoughtTogetherWidgetTests: undefined,
+  createTrendingItemsWidgetTests: undefined,
+  createTrendingFacetsWidgetTests: undefined,
+  createLookingSimilarWidgetTests: undefined,
   createPoweredByWidgetTests: undefined,
   createDynamicWidgetsWidgetTests: undefined,
   createChatWidgetTests: {

packages/vue-instantsearch/src/__tests__/index.js

@@ -80,6 +80,16 @@ function getAllComponents() {
         props.indexName = 'indexName';
       } else if (name === 'AisFeeds') {
         props.isolated = false;
+      } else if (
+        name === 'AisRelatedProducts' ||
+        name === 'AisFrequentlyBoughtTogether' ||
+        name === 'AisLookingSimilar'
+      ) {
+        props.objectIDs = ['1'];
+      } else if (name === 'AisTrendingFacets') {
+        props.facetName = 'brand';
+      } else if (name === 'AisTrendingItems') {
+        // no required props
       } else {
         props.attribute = 'attr';
       }

packages/vue-instantsearch/src/components/FrequentlyBoughtTogether.js

@@ -0,0 +1,81 @@
+import { createFrequentlyBoughtTogetherComponent } from 'instantsearch-ui-components';
+import { connectFrequentlyBoughtTogether } from 'instantsearch.js/es/connectors/index';
+
+import { createRecommendMixin } from '../mixins/recommend';
+import { createSuitMixin } from '../mixins/suit';
+import { createWidgetMixin } from '../mixins/widget';
+import { Fragment, getScopedSlot, renderCompat } from '../util/vue-compat';
+
+export default {
+  name: 'AisFrequentlyBoughtTogether',
+  mixins: [
+    createWidgetMixin(
+      { connector: connectFrequentlyBoughtTogether },
+      { $$widgetType: 'ais.frequentlyBoughtTogether' }
+    ),
+    createSuitMixin({ name: 'FrequentlyBoughtTogether' }),
+    createRecommendMixin(),
+  ],
+  props: {
+    objectIDs: {
+      type: Array,
+      required: true,
+    },
+    limit: {
+      type: Number,
+      default: undefined,
+    },
+    threshold: {
+      type: Number,
+      default: undefined,
+    },
+    fallbackParameters: {
+      type: Object,
+      default: undefined,
+    },
+    queryParameters: {
+      type: Object,
+      default: undefined,
+    },
+    escapeHTML: {
+      type: Boolean,
+      default: undefined,
+    },
+    transformItems: {
+      type: Function,
+      default: undefined,
+    },
+  },
+  computed: {
+    widgetParams() {
+      return {
+        objectIDs: this.objectIDs,
+        limit: this.limit,
+        threshold: this.threshold,
+        fallbackParameters: this.fallbackParameters,
+        queryParameters: this.queryParameters,
+        escapeHTML: this.escapeHTML,
+        transformItems: this.transformItems,
+      };
+    },
+  },
+  render: renderCompat(function (h) {
+    if (!this.state) {
+      return null;
+    }
+
+    return h(
+      createFrequentlyBoughtTogetherComponent({ createElement: h, Fragment }),
+      {
+        items: this.state.items,
+        status: this.status,
+        sendEvent: this.state.sendEvent,
+        itemComponent: getScopedSlot(this, 'item'),
+        headerComponent: getScopedSlot(this, 'header'),
+        emptyComponent: getScopedSlot(this, 'empty'),
+        layout: getScopedSlot(this, 'layout'),
+        classNames: this.classNames,
+      }
+    );
+  }),
+};

packages/vue-instantsearch/src/components/LookingSimilar.js

@@ -0,0 +1,78 @@
+import { createLookingSimilarComponent } from 'instantsearch-ui-components';
+import { connectLookingSimilar } from 'instantsearch.js/es/connectors/index';
+
+import { createRecommendMixin } from '../mixins/recommend';
+import { createSuitMixin } from '../mixins/suit';
+import { createWidgetMixin } from '../mixins/widget';
+import { Fragment, getScopedSlot, renderCompat } from '../util/vue-compat';
+
+export default {
+  name: 'AisLookingSimilar',
+  mixins: [
+    createWidgetMixin(
+      { connector: connectLookingSimilar },
+      { $$widgetType: 'ais.lookingSimilar' }
+    ),
+    createSuitMixin({ name: 'LookingSimilar' }),
+    createRecommendMixin(),
+  ],
+  props: {
+    objectIDs: {
+      type: Array,
+      required: true,
+    },
+    limit: {
+      type: Number,
+      default: undefined,
+    },
+    threshold: {
+      type: Number,
+      default: undefined,
+    },
+    fallbackParameters: {
+      type: Object,
+      default: undefined,
+    },
+    queryParameters: {
+      type: Object,
+      default: undefined,
+    },
+    escapeHTML: {
+      type: Boolean,
+      default: undefined,
+    },
+    transformItems: {
+      type: Function,
+      default: undefined,
+    },
+  },
+  computed: {
+    widgetParams() {
+      return {
+        objectIDs: this.objectIDs,
+        limit: this.limit,
+        threshold: this.threshold,
+        fallbackParameters: this.fallbackParameters,
+        queryParameters: this.queryParameters,
+        escapeHTML: this.escapeHTML,
+        transformItems: this.transformItems,
+      };
+    },
+  },
+  render: renderCompat(function (h) {
+    if (!this.state) {
+      return null;
+    }
+
+    return h(createLookingSimilarComponent({ createElement: h, Fragment }), {
+      items: this.state.items,
+      status: this.status,
+      sendEvent: this.state.sendEvent,
+      itemComponent: getScopedSlot(this, 'item'),
+      headerComponent: getScopedSlot(this, 'header'),
+      emptyComponent: getScopedSlot(this, 'empty'),
+      layout: getScopedSlot(this, 'layout'),
+      classNames: this.classNames,
+    });
+  }),
+};