chore(vue example): remove price range (#6527)

The component `vue-slider-component` throws an error with the new Vite build. I can't seem to find an underlying reason, so for now let's disable the component so release isn't blocked.
algolia · Jan 14, 2025 · 220e79f · 220e79f
1 parent cdd35df
commit 220e79f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 65 deletions.
diff --git a/examples/vue/e-commerce/src/App.vue b/examples/vue/e-commerce/src/App.vue
@@ -115,46 +115,6 @@
                 </template>
               </ais-panel>
 
-              <ais-panel>
-                <template #header> Price </template>
-
-                <template #default>
-                  <ais-range-input attribute="price">
-                    <template
-                      #default="{ currentRefinement, range, refine, canRefine }"
-                    >
-                      <vue-slider
-                        :min="range.min"
-                        :max="range.max"
-                        :value="toValue(currentRefinement, range)"
-                        :disabled="!canRefine"
-                        :lazy="true"
-                        :use-keyboard="true"
-                        :enable-cross="false"
-                        tooltip="always"
-                        :duration="0"
-                        @change="refine({ min: $event[0], max: $event[1] })"
-                      >
-                        <template #dot="{ index, value }">
-                          <div
-                            :aria-valuemin="range.min"
-                            :aria-valuemax="range.max"
-                            :aria-valuenow="value"
-                            :data-handle-key="index"
-                            class="vue-slider-dot-handle"
-                            role="slider"
-                            tabindex="0"
-                          />
-                        </template>
-                        <template #tooltip="{ value }">
-                          {{ formatNumber(value) }}
-                        </template>
-                      </vue-slider>
-                    </template>
-                  </ais-range-input>
-                </template>
-              </ais-panel>
-
               <ais-panel>
                 <template #header> Free shipping </template>
 
@@ -490,7 +450,6 @@
 
 <script>
 import { liteClient as algoliasearch } from 'algoliasearch/lite';
-import VueSlider from 'vue-slider-component';
 
 import getRouting from './routing';
 import { formatNumber } from './utils';
@@ -499,7 +458,6 @@ import NoResults from './widgets/NoResults.vue';
 
 export default {
   components: {
-    VueSlider,
     ClearRefinements,
     NoResults,
   },

diff --git a/tests/e2e/specs/initial-state-from-route.spec.ts b/tests/e2e/specs/initial-state-from-route.spec.ts
@@ -39,25 +39,27 @@ export function createInitialStateFromRouteTestSuite(flavor: string) {
         expect(brand).toEqual('KitchenAid');
       });
 
-      it('must have lower price set to $50 and the upper price set to $350 in the price range', async () => {
-        const lowerPrice = await browser.getRangeSliderLowerBoundValue();
-        const upperPrice = await browser.getRangeSliderUpperBoundValue();
+      if (flavor !== 'vue') {
+        it('must have lower price set to $50 and the upper price set to $350 in the price range', async () => {
+          const lowerPrice = await browser.getRangeSliderLowerBoundValue();
+          const upperPrice = await browser.getRangeSliderUpperBoundValue();
 
-        expect(lowerPrice).toEqual(50);
-        expect(upperPrice).toEqual(350);
-      });
+          expect(lowerPrice).toEqual(50);
+          expect(upperPrice).toEqual(350);
+        });
 
-      it('must have free shipping box checked', async () => {
-        const freeShipping = await browser.getToggleRefinementStatus();
+        it('must have free shipping box checked', async () => {
+          const freeShipping = await browser.getToggleRefinementStatus();
 
-        expect(freeShipping).toEqual(true);
-      });
+          expect(freeShipping).toEqual(true);
+        });
 
-      it('must have rating "4 & up" selected in the rating menu', async () => {
-        const rating = await browser.getSelectedRatingMenuItem();
+        it('must have rating "4 & up" selected in the rating menu', async () => {
+          const rating = await browser.getSelectedRatingMenuItem();
 
-        expect(rating).toEqual('4 & up');
-      });
+          expect(rating).toEqual('4 & up');
+        });
+      }
 
       it('must have "Price descending" selected in the sort select', async () => {
         const sortBy = await browser.getSortByValue();
@@ -127,13 +129,15 @@ export function createInitialStateFromRouteTestSuite(flavor: string) {
         await browser.setSortByValue('Price ascending');
       });
 
-      it('sets lower price to $250 and the upper price to $1250 in the price range', async () => {
-        // Depending of the steps calculation there can be a difference between
-        // the wanted value and the actual value of the slider, so we store
-        // the actual value to use it in for subsequent tests
-        priceBounds.lower = await browser.dragRangeSliderLowerBoundTo(250);
-        priceBounds.upper = await browser.dragRangeSliderUpperBoundTo(1250);
-      });
+      if (flavor !== 'vue') {
+        it('sets lower price to $250 and the upper price to $1250 in the price range', async () => {
+          // Depending of the steps calculation there can be a difference between
+          // the wanted value and the actual value of the slider, so we store
+          // the actual value to use it in for subsequent tests
+          priceBounds.lower = await browser.dragRangeSliderLowerBoundTo(250);
+          priceBounds.upper = await browser.dragRangeSliderUpperBoundTo(1250);
+        });
+      }
 
       it('selects "64 hits per page" in the hits per page select', async () => {
         await browser.setHitsPerPage('64 hits per page');
@@ -149,15 +153,19 @@ export function createInitialStateFromRouteTestSuite(flavor: string) {
             const url = await browser.getUrl();
             const { pathname, searchParams } = new URL(url);
 
+            const range =
+              flavor === 'vue' ||
+              searchParams.get('price') ===
+                `${priceBounds.lower}:${priceBounds.upper}`;
+
             return (
               pathname ===
                 `/${root}search/Appliances%2FRanges%2C+Cooktops+%26+Ovens/` &&
               searchParams.get('query') === 'cooktop' &&
               searchParams.get('page') === '2' &&
               searchParams.get('brands') === 'Whirlpool' &&
               searchParams.get('rating') === '3' &&
-              searchParams.get('price') ===
-                `${priceBounds.lower}:${priceBounds.upper}` &&
+              range &&
               searchParams.get('sortBy') === 'instant_search_price_asc' &&
               searchParams.get('hitsPerPage') === '64'
             );

diff --git a/tests/e2e/specs/price-range.spec.ts b/tests/e2e/specs/price-range.spec.ts
@@ -1,6 +1,11 @@
 export function createPriceRangeTestSuite(flavor: string) {
   const root = `examples/${flavor}/e-commerce/`;
 
+  if (flavor === 'vue') {
+    // currently no slider on Vue
+    return;
+  }
+
   describe('search on specific price range', () => {
     let lowerBound: number;
     let upperBound: number;