[CI-4339] Fix Sort Component Rendering to Inputs with the Same Id

spec/components/Sort/Sort.test.jsx

@@ -101,4 +101,23 @@ describe('Testing Component: Sort', () => {
     expect(mockChildren).toHaveBeenCalled();
     expect(getByText('Custom Sort')).toBeInTheDocument();
   });
+
+  it('Should render sort options with unique ids for both desktop and mobile', async () => {
+    const { getAllByLabelText } = render(
+      <CioPlp apiKey={DEMO_API_KEY}>
+        <Sort sortOptions={searchData.response.sortOptions} />
+      </CioPlp>,
+    );
+
+    await waitFor(() => {
+      responseSortOptions.forEach((option) => {
+        const spanEls = getAllByLabelText(option.displayName);
+        expect(spanEls.length).toBe(2);
+
+        const inputEls = spanEls.map((el) => el.closest('label').querySelector('input'));
+        const uniqueInputIds = new Set(inputEls.map((el) => el.id));
+        expect(uniqueInputIds.size).toBe(2);
+      });
+    });
+  });
 });

spec/hooks/useSort/useSort.test.js

@@ -23,6 +23,7 @@ describe('Testing Hook: useSort', () => {
     Object.defineProperty(window, 'location', {
       value: originalWindowLocation,
     });
+    window.location.href = `https://example.com`;
     jest.restoreAllMocks(); // This will reset all mocks after each test
   });
 
@@ -100,7 +101,7 @@ describe('Testing Hook: useSort', () => {
     });
   });
 
-  it.only('Should reflect the selected sort_option on page reload/component rerender', async () => {
+  it('Should reflect the selected sort_option on page reload/component rerender', async () => {
     function TestUseSort() {
       // sortOptions will be an empty array when the page is first loading
       const [sortOptions, setSortOptions] = useState([]);

src/components/Sort/Sort.tsx

@@ -25,33 +25,39 @@ export default function Sort({
     setIsOpen(!isOpen);
   };
 
-  const handleOptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    changeSelectedSort(JSON.parse(event.target.value));
-  };
-
   const isChecked = useCallback(
     (option: PlpSortOption) =>
       selectedSort?.sortBy === option.sortBy && selectedSort?.sortOrder === option.sortOrder,
     [selectedSort],
   );
 
-  const getOptionId = (option: PlpSortOption) => `${option.sortBy}-${option.sortOrder}`;
+  const getOptionId = (option: PlpSortOption, idSuffix: string = '') =>
+    `${option.sortBy}-${option.sortOrder}${idSuffix}`;
 
-  const defaultMarkup = sortOptions.map((option) => (
-    <label
-      htmlFor={getOptionId(option)}
-      key={`${getOptionId(option)}${isChecked(option) ? '-checked' : ''}`}>
-      <input
-        id={getOptionId(option)}
-        type='radio'
-        name={getOptionId(option)}
-        value={JSON.stringify(option)}
-        checked={isChecked(option)}
-        onChange={handleOptionChange}
-      />
-      <span>{option.displayName}</span>
-    </label>
-  ));
+  const genDefaultMarkup = useCallback(
+    (idSuffix: string = '') => {
+      const handleOptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        changeSelectedSort(JSON.parse(event.target.value));
+      };
+
+      return sortOptions.map((option) => (
+        <label
+          htmlFor={getOptionId(option, idSuffix)}
+          key={`${getOptionId(option, idSuffix)}${isChecked(option) ? '-checked' : ''}`}>
+          <input
+            id={getOptionId(option, idSuffix)}
+            type='radio'
+            name={getOptionId(option, idSuffix)}
+            value={JSON.stringify(option)}
+            checked={isChecked(option)}
+            onChange={handleOptionChange}
+          />
+          <span>{option.displayName}</span>
+        </label>
+      ));
+    },
+    [changeSelectedSort, isChecked, sortOptions],
+  );
 
   return (
     <>
@@ -75,10 +81,10 @@ export default function Sort({
             <i className={`arrow ${isOpen ? 'arrow-up' : 'arrow-down'}`} />
           </button>
           <MobileModal side='right' isOpen={isOpen} setIsOpen={setIsOpen}>
-            {defaultMarkup}
+            {genDefaultMarkup('-mobile')}
           </MobileModal>
           {isOpen && (
-            <div className='collapsible-content cio-large-screen-only'>{defaultMarkup}</div>
+            <div className='collapsible-content cio-large-screen-only'>{genDefaultMarkup()}</div>
           )}
         </div>
       )}