From 711c7a3bb88f2fabb90ae766a5fe35ba07ebad1d Mon Sep 17 00:00:00 2001
From: Haroen Viaene <hello@haroen.me>
Date: Tue, 14 Jan 2025 10:53:32 +0100
Subject: [PATCH] Revert "chore(vue example): remove price range (#6527)"

This reverts commit 220e79f16afef15dc786c791a9e8e1f9dc1e719a.
---
 examples/vue/e-commerce/src/App.vue           | 42 +++++++++++++++
 .../specs/initial-state-from-route.spec.ts    | 54 ++++++++-----------
 tests/e2e/specs/price-range.spec.ts           |  5 --
 3 files changed, 65 insertions(+), 36 deletions(-)

diff --git a/examples/vue/e-commerce/src/App.vue b/examples/vue/e-commerce/src/App.vue
index 2156ca969d..4434a7b045 100644
--- a/examples/vue/e-commerce/src/App.vue
+++ b/examples/vue/e-commerce/src/App.vue
@@ -115,6 +115,46 @@
                 </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>
 
@@ -450,6 +490,7 @@
 
 <script>
 import { liteClient as algoliasearch } from 'algoliasearch/lite';
+import VueSlider from 'vue-slider-component';
 
 import getRouting from './routing';
 import { formatNumber } from './utils';
@@ -458,6 +499,7 @@ 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
index dfa44357b1..9bec5853aa 100644
--- a/tests/e2e/specs/initial-state-from-route.spec.ts
+++ b/tests/e2e/specs/initial-state-from-route.spec.ts
@@ -39,27 +39,25 @@ export function createInitialStateFromRouteTestSuite(flavor: string) {
         expect(brand).toEqual('KitchenAid');
       });
 
-      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();
+      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();
@@ -129,15 +127,13 @@ export function createInitialStateFromRouteTestSuite(flavor: string) {
         await browser.setSortByValue('Price ascending');
       });
 
-      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('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');
@@ -153,11 +149,6 @@ 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/` &&
@@ -165,7 +156,8 @@ export function createInitialStateFromRouteTestSuite(flavor: string) {
               searchParams.get('page') === '2' &&
               searchParams.get('brands') === 'Whirlpool' &&
               searchParams.get('rating') === '3' &&
-              range &&
+              searchParams.get('price') ===
+                `${priceBounds.lower}:${priceBounds.upper}` &&
               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
index bbf55154d1..0c4dc45ae8 100644
--- a/tests/e2e/specs/price-range.spec.ts
+++ b/tests/e2e/specs/price-range.spec.ts
@@ -1,11 +1,6 @@
 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;