[CI-4406] Bugfix: Range filters not correctly rendering if a range filter has already been applied (#159)

* bugifx: use the selected ranged filter values on refresh, rebase the track length if facets.min > 0

* add tests

Author: Mudaafi

spec/components/Filters/Filters.test.jsx

@@ -116,6 +116,101 @@ describe('Testing Component: Filters', () => {
       expect(mockChildren).toHaveBeenCalled();
       expect(getByText('Custom Filters')).toBeInTheDocument();
     });
+
+    it('Should render ranged filters correctly', async () => {
+      const mockPriceFacet = {
+        displayName: 'Price',
+        name: 'price',
+        type: 'range',
+        data: {},
+        hidden: false,
+        min: 1,
+        max: 100,
+        status: {},
+      };
+
+      const { getByText, container } = render(
+        <CioPlp apiKey={DEMO_API_KEY}>
+          <Filters facets={[mockPriceFacet]} />
+        </CioPlp>,
+      );
+
+      await waitFor(() => {
+        expect(getByText(mockPriceFacet.displayName).toBeInTheDocument);
+
+        const minInputValue = container.querySelector('.cio-slider-input-min input');
+        const maxInputValue = container.querySelector('.cio-slider-input-max input');
+
+        expect(minInputValue.value).toBe(mockPriceFacet.min.toString());
+        expect(maxInputValue.value).toBe(mockPriceFacet.max.toString());
+
+        const selectableTrack = container.querySelector(
+          '.cio-doubly-ended-slider .cio-slider-track-selected',
+        );
+        const minInputSlider = container.querySelector('.cio-doubly-ended-slider .cio-min-slider');
+        const maxInputSlider = container.querySelector('.cio-doubly-ended-slider .cio-max-slider');
+
+        expect(selectableTrack.style.width).toBe('100.00%');
+        expect(selectableTrack.style.left).toBe('0.00%');
+
+        expect(minInputSlider.min).toBe(mockPriceFacet.min.toString());
+        expect(minInputSlider.max).toBe(mockPriceFacet.max.toString());
+        expect(minInputSlider.value).toBe(mockPriceFacet.min.toString());
+
+        expect(maxInputSlider.min).toBe(mockPriceFacet.min.toString());
+        expect(maxInputSlider.max).toBe(mockPriceFacet.max.toString());
+        expect(maxInputSlider.value).toBe(mockPriceFacet.max.toString());
+      });
+    });
+
+    it('Should render ranged filters that have already been applied correctly', async () => {
+      const mockPriceFacet = {
+        displayName: 'Price',
+        name: 'price',
+        type: 'range',
+        data: {},
+        hidden: false,
+        min: 1,
+        max: 100,
+        status: {
+          min: 30,
+          max: 75,
+        },
+      };
+
+      const { getByText, container } = render(
+        <CioPlp apiKey={DEMO_API_KEY}>
+          <Filters facets={[mockPriceFacet]} />
+        </CioPlp>,
+      );
+
+      await waitFor(() => {
+        expect(getByText(mockPriceFacet.displayName).toBeInTheDocument);
+
+        const minInputValue = container.querySelector('.cio-slider-input-min input');
+        const maxInputValue = container.querySelector('.cio-slider-input-max input');
+
+        expect(minInputValue.value).toBe(mockPriceFacet.status.min.toString());
+        expect(maxInputValue.value).toBe(mockPriceFacet.status.max.toString());
+
+        const selectableTrack = container.querySelector(
+          '.cio-doubly-ended-slider .cio-slider-track-selected',
+        );
+        const minInputSlider = container.querySelector('.cio-doubly-ended-slider .cio-min-slider');
+        const maxInputSlider = container.querySelector('.cio-doubly-ended-slider .cio-max-slider');
+
+        expect(selectableTrack.style.width).toBe('45.45%');
+        expect(selectableTrack.style.left).toBe('29.29%');
+
+        expect(minInputSlider.min).toBe(mockPriceFacet.min.toString());
+        expect(minInputSlider.max).toBe(mockPriceFacet.max.toString());
+        expect(minInputSlider.value).toBe(mockPriceFacet.status.min.toString());
+
+        expect(maxInputSlider.min).toBe(mockPriceFacet.min.toString());
+        expect(maxInputSlider.max).toBe(mockPriceFacet.max.toString());
+        expect(maxInputSlider.value).toBe(mockPriceFacet.status.max.toString());
+      });
+    });
   });
 
   describe(' - Behavior Tests', () => {

src/components/Filters/FilterRangeSlider.tsx

@@ -30,8 +30,8 @@ export default function FilterRangeSlider(props: FilterRangeSliderProps) {
 
   const [minValue, setMinValue] = useState(facet.min);
   const [maxValue, setMaxValue] = useState(facet.max);
-  const [inputMinValue, setInputMinValue] = useState<number | ''>(facet.min);
-  const [inputMaxValue, setInputMaxValue] = useState<number | ''>(facet.max);
+  const [inputMinValue, setInputMinValue] = useState<number | ''>(facet.status?.min || facet.min);
+  const [inputMaxValue, setInputMaxValue] = useState<number | ''>(facet.status?.max || facet.max);
   const [filterRange, setFilterRange] = useState('');
 
   const [isModified, setIsModified] = useState(false);
@@ -101,7 +101,7 @@ export default function FilterRangeSlider(props: FilterRangeSliderProps) {
     const totalWidth = visibleTrack.current!.offsetWidth;
     const clickedX = event.nativeEvent.offsetX;
 
-    const selectedValue = Math.round((clickedX / totalWidth) * facet.max);
+    const selectedValue = Math.round((clickedX / totalWidth) * (facet.max - facet.min)) + facet.min;
     const distMinToClicked = Math.abs(selectedValue - minValue);
     const distMaxToClicked = Math.abs(selectedValue - maxValue);
 
@@ -118,6 +118,8 @@ export default function FilterRangeSlider(props: FilterRangeSliderProps) {
       setInputMaxValue(selectedValue);
       modifyRequestRangeFilter(newRange);
     }
+
+    setIsModified(true);
   };
 
   // Update internal state
@@ -136,8 +138,10 @@ export default function FilterRangeSlider(props: FilterRangeSliderProps) {
 
   // Update selected track styles
   useEffect(() => {
-    const startPercentage = ((100 * minValue) / facet.max).toFixed(2);
-    const widthPercentage = ((100 * (maxValue - minValue)) / facet.max).toFixed(2);
+    const trackLen = facet.max - facet.min;
+    const rebasedStartValue = minValue - facet.min;
+    const startPercentage = ((100 * rebasedStartValue) / trackLen).toFixed(2);
+    const widthPercentage = ((100 * (maxValue - minValue)) / trackLen).toFixed(2);
 
     setSelectedTrackStyles({ left: `${startPercentage}%`, width: `${widthPercentage}%` });
   }, [minValue, maxValue, facet]);