bugfix: Slider range not rendering correctly if facet.status.min === 0 (#178)

Author: Mudaafi

spec/components/Filters/Filters.test.jsx

@@ -211,6 +211,55 @@ describe('Testing Component: Filters', () => {
         expect(maxInputSlider.value).toBe(mockPriceFacet.status.max.toString());
       });
     });
+
+    it.only('Edge Case: If facet.status.min = 0, should render ranged filters that have already been applied correctly', async () => {
+      const mockPriceFacet = {
+        displayName: 'Price',
+        name: 'price',
+        type: 'range',
+        data: {},
+        hidden: false,
+        min: 0,
+        max: 100,
+        status: {
+          min: 0,
+          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('75.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.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

@@ -124,7 +124,7 @@ export default function FilterRangeSlider(props: FilterRangeSliderProps) {
 
   // Update internal state
   useEffect(() => {
-    if (facet.status.min && !isModified) {
+    if (facet.status.min !== undefined && !isModified) {
       // Initial state
       setMinValue(facet.status.min);
       setMaxValue(facet.status.max);