[CI-3134] Filters Components

package.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"
   }
 }

spec/Filters.server.test.jsx

@@ -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');
+  });
+});