[CI-3134] Filters Components (#77)

* [CI-3134] Filters Components

* Update mocks

* Checkpoint 2 - Ranged Slider

* Update to styles

* CSS Updates - Options List

* Filter Group Header css

* Add tests

* Fix Merge conflicts and update story

* Add Documentation

* lint

* lint 2

* Only update filter-range after onMouseUp event

* Increased debounced time, bugfix rerender calls

* Fixes based on comments

* Add Classnames

* lint: remove unnecessary else statement

* bugfixes to remove console errors

* Update styles

* Update inputs to only update on blur

* Add more tests

* Add new test

* Show invalid state if slider range inputs are empty

* Fix input resizing on num digits increase

* Change callback fn name, fix trackClick

* CSS updates

* Updates placeholders and naming

Author: Mudaafi

package-lock.json

@@ -111,5 +111,8 @@
     "vite": "^4.5.3",
     "vite-plugin-css-injected-by-js": "^3.1.0",
     "webpack": "^5.75.0"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1"
   }
 }

package.json

@@ -0,0 +1,54 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import '@testing-library/jest-dom';
+import { DEMO_API_KEY } from '../src/constants';
+import CioPlp from '../src/components/CioPlp';
+import Filters from '../src/components/Filters';
+import mockTransformedFacets from './local_examples/sampleFacets.json';
+
+const mockSearchOrBrowseResponse = { facets: mockTransformedFacets };
+
+describe('Testing Component on the server: Filters', () => {
+  beforeEach(() => {
+    // Mock console error to de-clutter the console for expected errors
+    const spy = jest.spyOn(console, 'error');
+    spy.mockImplementation(() => {});
+  });
+
+  afterAll(() => {
+    jest.resetAllMocks(); // This will reset all mocks after each test
+  });
+
+  it('Should throw error if used outside the CioPlp', () => {
+    expect(() => renderToString(<Filters facets={mockTransformedFacets} />)).toThrow();
+  });
+
+  it('Should render filters based on search or browse response', async () => {
+    const html = renderToString(
+      <CioPlp apiKey={DEMO_API_KEY}>
+        <Filters response={mockSearchOrBrowseResponse} />
+      </CioPlp>,
+    );
+
+    mockTransformedFacets.forEach((facetGroup) => {
+      expect(html).toContain(facetGroup.displayName);
+    });
+  });
+
+  it('Should render correctly with render props', () => {
+    const mockChildren = jest.fn().mockReturnValue(<div>Custom Filters</div>);
+
+    const filterProps = {
+      response: mockSearchOrBrowseResponse,
+      children: mockChildren,
+    };
+
+    const html = renderToString(
+      <CioPlp apiKey={DEMO_API_KEY}>
+        <Filters {...filterProps} />
+      </CioPlp>,
+    );
+    expect(mockChildren).toHaveBeenCalled();
+    expect(html).toContain('Custom Filters');
+  });
+});