vue-instantsearch 4.10.5 → 4.10.6

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.10.5",
+  "version": "4.10.6",
   "files": [
     "vue2",
     "vue3",
@@ -35,7 +35,7 @@
     "test:exports:vue3": "node ./test/module/vue3/is-es-module.mjs && node ./test/module/vue3/is-cjs-module.cjs"
   },
   "dependencies": {
-    "instantsearch.js": "4.56.5",
+    "instantsearch.js": "4.56.6",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -60,7 +60,7 @@
     "@vue/test-utils": "1.3.0",
     "@vue/test-utils2": "npm:@vue/test-utils@2.0.0-rc.11",
     "algoliasearch": "4.14.3",
-    "algoliasearch-helper": "3.13.2",
+    "algoliasearch-helper": "3.13.4",
     "instantsearch.css": "8.0.0",
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
@@ -87,5 +87,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "99119060ec345379181f0446ea4ca8d7cf331354"
+  "gitHead": "eedac3a158042dac41cc818439e585ed1b482250"
 }

package/src/__tests__/common-connectors.test.js

@@ -0,0 +1,359 @@
+/**
+ * @jest-environment jsdom
+ */
+import * as testSuites from '@instantsearch/tests/connectors';
+
+import { nextTick, mountApp } from '../../test/utils';
+import { renderCompat } from '../util/vue-compat';
+import {
+  AisInstantSearch,
+  AisMenu,
+  AisRefinementList,
+  createWidgetMixin,
+} from '../instantsearch';
+import {
+  connectBreadcrumb,
+  connectCurrentRefinements,
+  connectHierarchicalMenu,
+  connectHitsPerPage,
+  connectMenu,
+  connectNumericMenu,
+  connectPagination,
+  connectRatingMenu,
+  connectRefinementList,
+  connectToggleRefinement,
+} from 'instantsearch.js/es/connectors';
+import { runTestSuites } from '@instantsearch/tests/common';
+jest.unmock('instantsearch.js/es');
+
+const testSetups = {
+  async createRefinementListConnectorTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    const CustomRefinementList = createCustomWidget({
+      connector: connectRefinementList,
+      name: 'RefinementList',
+      requiredProps: ['attribute'],
+      urlValue: 'value',
+      refineValue: 'Apple',
+    });
+
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(CustomRefinementList, { props: widgetParams }),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  async createHierarchicalMenuConnectorTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    const CustomHierarchicalMenu = createCustomWidget({
+      connector: connectHierarchicalMenu,
+      name: 'HierarchicalMenu',
+      requiredProps: ['attributes'],
+      urlValue: 'value',
+      refineValue: 'Apple',
+    });
+
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(CustomHierarchicalMenu, { props: widgetParams }),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  async createBreadcrumbConnectorTests({ instantSearchOptions, widgetParams }) {
+    const CustomBreadcrumb = createCustomWidget({
+      connector: connectBreadcrumb,
+      name: 'Breadcrumb',
+      requiredProps: ['attributes'],
+      urlValue: 'Apple > iPhone',
+      refineValue: 'Apple',
+    });
+
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(CustomBreadcrumb, { props: widgetParams }),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  async createMenuConnectorTests({ instantSearchOptions, widgetParams }) {
+    const CustomMenu = createCustomWidget({
+      connector: connectMenu,
+      name: 'Menu',
+      requiredProps: ['attribute'],
+      urlValue: 'value',
+      refineValue: 'Apple',
+    });
+
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(CustomMenu, { props: widgetParams }),
+            h(AisMenu, { props: widgetParams }),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  async createPaginationConnectorTests({ instantSearchOptions, widgetParams }) {
+    const CustomPagination = createCustomWidget({
+      connector: connectPagination,
+      name: 'Pagination',
+      urlValue: 10,
+      refineValue: (state) => (state.currentRefinement === 0 ? 1 : 0),
+    });
+
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(CustomPagination, { props: widgetParams }),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  async createCurrentRefinementsConnectorTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    const CustomCurrentRefinements = createCustomWidget({
+      connector: connectCurrentRefinements,
+      name: 'CurrentRefinements',
+      urlValue: {
+        attribute: 'brand',
+        type: 'disjunctive',
+        value: 'Apple',
+        label: 'Apple',
+      },
+      refineValue: {
+        attribute: 'brand',
+        type: 'disjunctive',
+        value: 'Samsung',
+        label: 'Samsung',
+      },
+    });
+
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(CustomCurrentRefinements, { props: widgetParams }),
+            h(AisRefinementList, { props: { attribute: 'brand' } }),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  async createHitsPerPageConnectorTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    const CustomHitsPerPage = createCustomWidget({
+      connector: connectHitsPerPage,
+      name: 'HitsPerPage',
+      requiredProps: ['items'],
+      urlValue: 12,
+      refineValue: (state) => (state.value === 10 ? 5 : 10),
+    });
+
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(CustomHitsPerPage, { props: widgetParams }),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  async createNumericMenuConnectorTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    const CustomNumericMenu = createCustomWidget({
+      connector: connectNumericMenu,
+      name: 'NumericMenu',
+      requiredProps: ['attribute', 'items'],
+      urlValue: encodeURI('{ "start": 500 }'),
+    });
+
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(CustomNumericMenu, { props: widgetParams }),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  async createRatingMenuConnectorTests({ instantSearchOptions, widgetParams }) {
+    const CustomRatingMenu = createCustomWidget({
+      connector: connectRatingMenu,
+      name: 'RatingMenu',
+      requiredProps: ['attribute'],
+      urlValue: encodeURI('5'),
+    });
+
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(CustomRatingMenu, { props: widgetParams }),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  async createToggleRefinementConnectorTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    const CustomToggleRefinement = createCustomWidget({
+      name: 'ToggleRefinement',
+      connector: connectToggleRefinement,
+      requiredProps: ['attribute', 'label'],
+      refineValue: (state) => state.value,
+    });
+
+    // Label is required in Vue
+    const props = {
+      ...widgetParams,
+      label: 'Free Shipping',
+    };
+
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(CustomToggleRefinement, { props }),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+};
+
+function createCustomWidget({
+  connector,
+  name,
+  urlValue,
+  refineValue,
+  requiredProps = [],
+}) {
+  return {
+    name: `Custom${name}`,
+    mixins: [createWidgetMixin({ connector })],
+    props: Object.fromEntries(
+      requiredProps.map((prop) => [prop, { required: true }])
+    ),
+    computed: {
+      widgetParams() {
+        return Object.fromEntries(
+          requiredProps.map((prop) => [prop, this[prop]])
+        );
+      },
+    },
+    render: renderCompat(function (h) {
+      return this.state
+        ? h('div', {}, [
+            h(
+              'a',
+              {
+                attrs: {
+                  'data-testid': `${name}-link`,
+                  href: this.state.createURL(urlValue),
+                },
+              },
+              'LINK'
+            ),
+            h(
+              'button',
+              {
+                attrs: {
+                  'data-testid': `${name}-refine`,
+                },
+                on: {
+                  click: () => {
+                    this.state.refine(
+                      typeof refineValue === 'function'
+                        ? refineValue(this.state)
+                        : refineValue
+                    );
+                  },
+                },
+              },
+              'REFINE'
+            ),
+          ])
+        : null;
+    }),
+  };
+}
+
+const testOptions = {
+  createHierarchicalMenuConnectorTests: undefined,
+  createBreadcrumbConnectorTests: undefined,
+  createRefinementListConnectorTests: undefined,
+  createMenuConnectorTests: undefined,
+  createPaginationConnectorTests: undefined,
+  createCurrentRefinementsConnectorTests: undefined,
+  createHitsPerPageConnectorTests: undefined,
+  createNumericMenuConnectorTests: undefined,
+  createRatingMenuConnectorTests: undefined,
+  createToggleRefinementConnectorTests: undefined,
+};
+
+describe('Common connector tests (Vue InstantSearch)', () => {
+  runTestSuites({
+    testSuites,
+    testSetups,
+    testOptions,
+  });
+});

package/src/__tests__/common-shared.test.js

@@ -0,0 +1,93 @@
+/**
+ * @jest-environment jsdom
+ */
+import * as testSuites from '@instantsearch/tests/shared';
+
+import { nextTick, mountApp } from '../../test/utils';
+import { renderCompat } from '../util/vue-compat';
+import {
+  AisHits,
+  AisInstantSearch,
+  AisMenu,
+  AisPagination,
+  createWidgetMixin,
+} from '../instantsearch';
+import { connectMenu, connectPagination } from 'instantsearch.js/es/connectors';
+import { runTestSuites } from '@instantsearch/tests/common';
+jest.unmock('instantsearch.js/es');
+
+const testSetups = {
+  async createSharedTests({ instantSearchOptions, widgetParams }) {
+    const CustomMenu = createCustomWidget({
+      connector: connectMenu,
+      name: 'Menu',
+      requiredProps: ['attribute'],
+      urlValue: 'value',
+    });
+    const CustomPagination = createCustomWidget({
+      connector: connectPagination,
+      name: 'Pagination',
+      urlValue: 10,
+    });
+
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(CustomMenu, { props: widgetParams.menu }),
+            h(AisMenu, { props: widgetParams.menu }),
+            h(AisHits, { props: widgetParams.hits }),
+            h(CustomPagination, { props: widgetParams.pagination }),
+            h(AisPagination, { props: widgetParams.pagination }),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+};
+
+function createCustomWidget({ connector, name, urlValue, requiredProps = [] }) {
+  return {
+    name: `Custom${name}`,
+    mixins: [createWidgetMixin({ connector })],
+    props: Object.fromEntries(
+      requiredProps.map((prop) => [prop, { required: true }])
+    ),
+    computed: {
+      widgetParams() {
+        return Object.fromEntries(
+          requiredProps.map((prop) => [prop, this[prop]])
+        );
+      },
+    },
+    render: renderCompat(function (h) {
+      return this.state
+        ? h(
+            'a',
+            {
+              attrs: {
+                'data-testid': `${name}-link`,
+                href: this.state.createURL(urlValue),
+              },
+            },
+            'LINK'
+          )
+        : null;
+    }),
+  };
+}
+
+const testOptions = {
+  createSharedTests: undefined,
+};
+
+describe('Common shared tests (Vue InstantSearch)', () => {
+  runTestSuites({
+    testSuites,
+    testSetups,
+    testOptions,
+  });
+});