Add new Table Component

Add new Table V2
The Table V1 component will be deleted on next MAJOR update

Author: Kubit

src/components/dataTable/__tests__/components/dataTableHead.test.tsx

@@ -0,0 +1,98 @@
+import { screen } from '@testing-library/react';
+import React from 'react';
+
+import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
+
+import { DataTableHead } from '../../components';
+
+const mockProps = {};
+
+describe('DataTableHead', () => {
+  it('Should render a tableHead with thead tag', () => {
+    renderProvider(<DataTableHead {...mockProps} tableHeadConfig={{ dataTestId: 'thead-id' }} />);
+
+    const tableHead = screen.getByTestId('thead-id');
+    expect(tableHead).toBeInTheDocument();
+    expect(tableHead.tagName).toBe('THEAD');
+  });
+
+  it('When using row groups, should render a tableHead with div tag', () => {
+    renderProvider(
+      <DataTableHead {...mockProps} usingRowGroups tableHeadConfig={{ dataTestId: 'thead-id' }} />
+    );
+
+    const tableHead = screen.getByTestId('thead-id');
+
+    expect(tableHead).toBeInTheDocument();
+    expect(tableHead.tagName).toBe('DIV');
+  });
+
+  it('For each column in the columns prop, should render a TableCell with the columns headerContent', () => {
+    const columns = [
+      { field: 'field1', headerContent: 'Header 1' },
+      { field: 'field2', headerContent: 'Header 2' },
+    ];
+
+    renderProvider(<DataTableHead {...mockProps} columns={columns} />);
+
+    const header1 = screen.getByText('Header 1');
+    const header2 = screen.getByText('Header 2');
+
+    expect(header1).toBeInTheDocument();
+    expect(header2).toBeInTheDocument();
+  });
+
+  it('When usingRowGroups, the size of the cell will be set by the grid template, table cell tag will be set to DIV', () => {
+    const columns = [
+      { field: 'field1', headerContent: 'Header 1', with: '100px' },
+      { field: 'field2', headerContent: 'Header 2', with: '100px' },
+    ];
+
+    renderProvider(<DataTableHead {...mockProps} usingRowGroups columns={columns} />);
+
+    const header1 = screen.getByText('Header 1');
+    const header2 = screen.getByText('Header 2');
+
+    expect(header1).toBeInTheDocument();
+    expect(header2).toBeInTheDocument();
+
+    expect(header1.tagName).toBe('DIV');
+    expect(header2.tagName).toBe('DIV');
+  });
+
+  it('Each column can have a complex format, in this case, the column can be fully configured using the TableCell props', () => {
+    const columns = [
+      {
+        field: 'field1',
+        headerContent: {
+          complex: { content: 'Header 1', variant: 'DEFAULT', dataTestId: 'tableCellHeader1' },
+        },
+      },
+    ];
+
+    renderProvider(<DataTableHead {...mockProps} columns={columns} />);
+
+    const header1 = screen.getByTestId('tableCellHeader1');
+
+    expect(header1).toBeInTheDocument();
+    expect(header1.tagName).toBe('TH');
+  });
+
+  it('When using usingRowGroups, by default the complex columns will be set as div', () => {
+    const columns = [
+      {
+        field: 'field1',
+        headerContent: {
+          complex: { content: 'Header 1', variant: 'DEFAULT', dataTestId: 'tableCellHeader1' },
+        },
+      },
+    ];
+
+    renderProvider(<DataTableHead {...mockProps} usingRowGroups columns={columns} />);
+
+    const header1 = screen.getByTestId('tableCellHeader1');
+
+    expect(header1).toBeInTheDocument();
+    expect(header1.tagName).toBe('DIV');
+  });
+});

src/components/dataTable/__tests__/components/dataTableRows.test.tsx

@@ -0,0 +1,138 @@
+import { screen } from '@testing-library/react';
+import React from 'react';
+
+import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
+import { ROLES } from '@/types';
+
+import { DataTableRows } from '../../components';
+
+const mockProps = {};
+
+describe('DataTableRows', () => {
+  it('Should render a set of rows', () => {
+    const columns = [
+      { field: 'field1', headerContent: 'Header 1' },
+      { field: 'field2', headerConent: 'Header 2' },
+    ];
+
+    const rows = [{ field1: 'value1', field2: 'value2' }];
+
+    renderProvider(<DataTableRows {...mockProps} columns={columns} rows={rows} />);
+
+    const rowsFound = screen.getAllByRole(ROLES.ROW);
+    const cell1 = screen.getByText('value1');
+    const cell2 = screen.getByText('value2');
+
+    expect(rowsFound).toHaveLength(1);
+    expect(cell1).toBeInTheDocument();
+    expect(cell2).toBeInTheDocument();
+  });
+
+  it('Should render a set of rows with active rows', () => {
+    const columns = [
+      { field: 'field1', headerContent: 'Header 1' },
+      { field: 'field2', headerConent: 'Header 2' },
+    ];
+
+    const rows = [{ id: 'row1', field1: 'value1', field2: 'value2' }];
+
+    renderProvider(
+      <DataTableRows {...mockProps} activeRows={['row1']} columns={columns} rows={rows} />
+    );
+
+    const rowsFound = screen.getAllByRole(ROLES.ROW);
+    const cell1 = screen.getByText('value1');
+    const cell2 = screen.getByText('value2');
+
+    expect(rowsFound).toHaveLength(1);
+    expect(cell1).toBeInTheDocument();
+    expect(cell2).toBeInTheDocument();
+  });
+
+  it('Cell value could be a complex object, configuring it as a tableCell props', () => {
+    const columns = [
+      { field: 'field1', headerContent: 'Header 1' },
+      { field: 'field2', headerConent: 'Header 2' },
+    ];
+
+    const rows = [
+      {
+        field1: 'value1',
+        field2: {
+          complex: {
+            content: 'value2',
+          },
+        },
+      },
+    ];
+
+    renderProvider(<DataTableRows {...mockProps} columns={columns} rows={rows} />);
+
+    const rowsFound = screen.getAllByRole(ROLES.ROW);
+    const cell1 = screen.getByText('value1');
+    const cell2 = screen.getByText('value2');
+
+    expect(rowsFound).toHaveLength(1);
+    expect(cell1).toBeInTheDocument();
+    expect(cell2).toBeInTheDocument();
+  });
+
+  it('Cell value could be build from a valueGetter function given by the column', () => {
+    const columns = [
+      {
+        field: 'field1',
+        headerContent: 'Header 1',
+        valueGetter: value => value.toUpperCase(),
+      },
+      { field: 'field2', headerConent: 'Header 2' },
+    ];
+
+    const rows = [{ field1: 'value1', field2: 'value2' }];
+
+    renderProvider(<DataTableRows {...mockProps} columns={columns} rows={rows} />);
+
+    const rowsFound = screen.getAllByRole(ROLES.ROW);
+    const cell1 = screen.getByText('VALUE1');
+    const cell2 = screen.getByText('value2');
+
+    expect(rowsFound).toHaveLength(1);
+    expect(cell1).toBeInTheDocument();
+    expect(cell2).toBeInTheDocument();
+  });
+
+  it('When usingRowGroups is set to true, it only affects to the display of the rows grid', () => {
+    const columns = [
+      { field: 'field1', headerContent: 'Header 1' },
+      { field: 'field2', headerConent: 'Header 2' },
+    ];
+
+    const rows = [
+      {
+        field1: 'value1',
+        field2: {
+          complex: {
+            content: 'value2',
+          },
+        },
+      },
+    ];
+
+    renderProvider(
+      <DataTableRows
+        {...mockProps}
+        usingRowGroups
+        activeRows={['row1']}
+        columns={columns}
+        rows={rows}
+      />
+    );
+
+    const rowsFound = screen.getAllByRole(ROLES.ROW);
+    const cell1 = screen.getByText('value1');
+    const cell2 = screen.getByText('value2');
+
+    expect(rowsFound).toHaveLength(1);
+    expect(cell1).toBeInTheDocument();
+    expect(cell2).toBeInTheDocument();
+  });
+});

src/components/dataTable/__tests__/components/hiddenDataTableHead.test.tsx

@@ -0,0 +1,30 @@
+import { screen } from '@testing-library/react';
+import React from 'react';
+
+import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
+
+import { HiddenDataTableHead } from '../../components';
+
+const mockProps = {};
+
+describe('HiddenDataTableHead', () => {
+  it('Should render a tableHead with its cells', () => {
+    const columns = [
+      { field: 'field1', headerContent: 'Header 1' },
+      {
+        field: 'field2',
+        headerContent: {
+          complex: { content: 'Header 2', variant: 'DEFAULT', dataTestId: 'tableCellHeader1' },
+        },
+      },
+    ];
+
+    renderProvider(<HiddenDataTableHead {...mockProps} columns={columns} />);
+
+    const header1 = screen.getByText('Header 1');
+    const header2 = screen.getByText('Header 2');
+
+    expect(header1).toBeInTheDocument();
+    expect(header2).toBeInTheDocument();
+  });
+});