[CI-4670]- Add data-cnstrc-result-id data attribute to the results container (#171)

* [CI-4670]- Add data-cnstrc-result-id data attribute to the results container

* updated test

Author: madeel20

spec/components/CioPlpGrid/CioPlpGrid.server.test.jsx

@@ -86,6 +86,7 @@ describe('Testing Component on the server: CioPlpGrid', () => {
     );
 
     expect(html).toContain('data-cnstrc-search');
-    expect(html).toContain('data-cnstrc-num-results="357"');
+    expect(html).toContain(`data-cnstrc-num-results="${mockSearchData.response.totalNumResults}"`);
+    expect(html).toContain(`data-cnstrc-result-id="${mockSearchData.resultId}"`);
   });
 });

spec/components/CioPlpGrid/CioPlpGrid.test.jsx

@@ -251,11 +251,13 @@ describe('Testing Component: CioPlpGrid', () => {
       const totalNumResults = getAttributeFromContainer('data-cnstrc-num-results');
       const filterName = getAttributeFromContainer('data-cnstrc-filter-name');
       const filterValue = getAttributeFromContainer('data-cnstrc-filter-value');
+      const resultId = getAttributeFromContainer('data-cnstrc-result-id');
 
       expect(container.querySelector('[data-cnstrc-browse]')).toBeInTheDocument();
       expect(totalNumResults).toEqual(String(mockBrowseData.response.totalNumResults));
       expect(filterName).toEqual(String(mockBrowseData.request.browse_filter_name));
       expect(filterValue).toEqual(String(mockBrowseData.request.browse_filter_value));
+      expect(resultId).toEqual(String(mockBrowseData.resultId));
     });
   });
 
@@ -308,6 +310,9 @@ describe('Testing Component: CioPlpGrid', () => {
           .querySelector('[data-cnstrc-num-results]')
           .getAttribute('data-cnstrc-num-results'),
       ).toEqual(String(mockSearchData.response.totalNumResults));
+      expect(
+        container.querySelector('[data-cnstrc-result-id]').getAttribute('data-cnstrc-result-id'),
+      ).toEqual(String(mockSearchData.resultId));
     });
   });
 
@@ -331,6 +336,9 @@ describe('Testing Component: CioPlpGrid', () => {
           .querySelector('[data-cnstrc-num-results]')
           .getAttribute('data-cnstrc-num-results'),
       ).toEqual('0');
+      expect(
+        container.querySelector('[data-cnstrc-result-id]').getAttribute('data-cnstrc-result-id'),
+      ).toEqual('test-zero-results');
     });
   });
 });

src/utils/dataAttributeHelpers.ts

@@ -39,6 +39,7 @@ export function getPlpContainerCnstrcDataAttributes(
       dataCnstrc = {
         'data-cnstrc-browse': true,
         'data-cnstrc-num-results': data.response.totalNumResults,
+        'data-cnstrc-result-id': data.resultId,
         'data-cnstrc-filter-name': filterName!,
         'data-cnstrc-filter-value': filterValue!,
       };
@@ -47,6 +48,7 @@ export function getPlpContainerCnstrcDataAttributes(
     case 'search':
       dataCnstrc = {
         'data-cnstrc-search': true,
+        'data-cnstrc-result-id': data.resultId,
         'data-cnstrc-num-results': data.response.totalNumResults,
       };
       break;