feat(vadcDataDictionaryTable): Added working test for Header component

src/Analysis/DataDictionary/ColumnHeaders/ColumnHeaders.test.tsx

@@ -0,0 +1,38 @@
+ Here is an example of a Jest unit test using TypeScript for the given `ColumnHeaders` component:
+
+```typescript
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import ColumnHeaders from './ColumnHeaders';
+import Header from './Header'; // Assuming you've exported the Header component for testing
+
+interface ISortConfig {
+  sortKey: string;
+  sortDirection: 'asc' | 'desc';
+}
+
+describe('ColumnHeaders', () => {
+  it('renders ColumnHeaders with initial sorting state', () => {
+    const handleSort = jest.fn();
+    const sortConfig: ISortConfig = {};
+
+    const { getByTestId } = render(<ColumnHeaders handleSort={handleSort} sortConfig={sortConfig} />);
+
+    expect(getByTestid('column-headers')).toBeInTheDocument();
+  });
+
+  it('calls handleSort when a column is clicked', () => {
+    const handleSort = jest.fn();
+    const sortConfig: ISortConfig = {};
+
+    const { getByRole } = render(<ColumnHeaders handleSort={handleSort} sortConfig={sortConfig} />);
+
+    fireEvent.click(getByRole('columnheader', { name: 'Vocabulary ID' }));
+
+    expect(handleSort).toHaveBeenCalledWith({ key: 'vocabularyID', direction: 'asc' }); // or 'desc' depending on the initial sorting state
+  });
+});
+```
+
+Make sure you have `@testing-library/react` and its extensions installed for this test to work correctly. Also, ensure that you have exported the `Header` component in a separate file if it is not already included in the test file. This test covers two aspects of the `ColumnHeaders` component: rendering the initial state and handling column clicks to sort data. Adjust as needed for your specific use case.

src/Analysis/DataDictionary/ColumnHeaders/Header.test.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { ISortConfig, IHeaderProps } from './Interfaces/Interfaces'; // adjust the import path if necessary
+import Header from './Header'; // adjust the import path if necessary
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { cleanup } from '@testing-library/react';
+
+describe('Header component', () => {
+  afterEach(cleanup);
+  const defaultProps: IHeaderProps = {
+    handleSort: jest.fn(),
+    headerJSX: <div data-testid='header'>Test Header Text</div>, // adjust the JSX for your headerJSX
+    headerKey: 'key1',
+    sortConfig: { key: 'key1', sortKey: '', direction: '' }, // adjust the ISortConfig interface for your use case
+    sortable: true,
+  };
+
+  it('renders the Header component correctly when sortable is true and there is no sort config', () => {
+    render(
+      <table>
+        <thead>
+          <tr>
+            <Header {...defaultProps} />
+          </tr>
+        </thead>
+      </table>
+    );
+    expect(screen.getAllByText('Test Header Text').length).toBeGreaterThan(0);
+  });
+
+  it(`renders the Header component correctly when sortable is true and
+  there is a sort config with ascending direction`, () => {
+    const sortConfig: ISortConfig = {
+      key: 'key1',
+      sortKey: 'key1',
+      direction: 'ascending',
+    }; // adjust for your use case
+    const { getByTestId } = render(
+      <table>
+        <thead>
+          <tr>
+            <Header {...defaultProps} sortConfig={sortConfig} />
+          </tr>
+        </thead>
+      </table>
+    );
+    expect(screen.getAllByText('Test Header Text').length).toBeGreaterThan(0);
+    const caretUpArrows = screen.getAllByRole('presentation', {
+      name: /caret-up/i,
+    });
+
+    let activeCaretUp = false;
+    caretUpArrows.forEach((caretUpArrow) => {
+      if (caretUpArrow['className'].includes('active')) activeCaretUp = true;
+    });
+    expect(activeCaretUp).toBe(true);
+  });
+
+  it(`renders the Header component correctly when sortable is true and
+  there is a sort config with descending direction`, () => {
+    const sortConfig: ISortConfig = {
+      key: 'key1',
+      sortKey: 'key1',
+      direction: 'descending',
+    }; // adjust for your use case
+    const { getByTestId } = render(
+      <table>
+        <thead>
+          <tr>
+            <Header {...defaultProps} sortConfig={sortConfig} />
+          </tr>
+        </thead>
+      </table>
+    );
+    expect(screen.getAllByText('Test Header Text').length).toBeGreaterThan(0);
+    const caretDownArrows = screen.getAllByRole('presentation', {
+      name: /caret-down/i,
+    });
+
+    let activeCaretDown = false;
+    caretDownArrows.forEach((caretDownArrow) => {
+      if (caretDownArrow['className'].includes('active'))
+        activeCaretDown = true;
+    });
+    expect(activeCaretDown).toBe(true);
+  });
+
+  it('calls handleSort function when header is clicked', () => {
+    const handleSort = jest.fn();
+    render(
+      <table>
+        <thead>
+          <tr>
+            <Header {...defaultProps} handleSort={handleSort} />
+          </tr>
+        </thead>
+      </table>
+    );
+    fireEvent.click(screen.getAllByText('Test Header Text')[0]);
+    expect(handleSort).toHaveBeenCalledTimes(1);
+    expect(handleSort).toHaveBeenCalledWith('key1'); // adjust for your use case
+  });
+});

src/Analysis/DataDictionary/ColumnHeaders/Header.tsx

@@ -33,7 +33,11 @@ const Header = ({
     );
   }
   return (
-    <th key={headerKey} onClick={() => handleSort(headerKey)}>
+    <th
+      data-testid='header'
+      key={headerKey}
+      onClick={() => handleSort(headerKey)}
+    >
       <div className='table-column-sorters'>
         <span className='ant-table-column-title'>{headerJSX}</span>
         <span className='table-column-sorter-inner'>

src/Analysis/DataDictionary/EntriesHeader/EntriesHeader.test.tsx

@@ -15,10 +15,10 @@ describe('EntriesHeader', () => {
     render(
       <table>
         <EntriesHeader {...defaultProps} />
-      </table>
+      </table>,
     );
     expect(screen.getByTestId('entries-header').textContent).toBe(
-      'Showing 1 to 5 of 10 entries'
+      'Showing 1 to 5 of 10 entries',
     );
   });
 });

src/Analysis/DataDictionary/Icons/CaretUp.tsx

@@ -1,25 +1,13 @@
 import React from 'react';
 
 const CaretUp = (): JSX.Element => (
-  /*   <svg
-    viewBox='0 0 1024 1024'
-    focusable='false'
-    data-icon='caret-up'
-    width='1em'
-    height='1em'
-    fill='currentColor'
-    aria-hidden='true'
-  >
-    <path d='M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z' />
-  </svg> */
   <svg
     xmlns='http://www.w3.org/2000/svg'
     width='8'
     height='4'
     viewBox='0 0 8 4'
   >
     <path
-      id='caret-up'
       d='M8.255,16.891H1.333a.47.47,0,0,1-.38-.81L4.414,13.03a.59.59,0,0,1,.761,0l3.461,3.051A.47.47,0,0,1,8.255,16.891Z'
       transform='translate(-0.794 -12.891)'
       fill='#9b9b9b'