From 1f6bc12aed3d173b1e84f108c6fb7a1a0073e2d7 Mon Sep 17 00:00:00 2001
From: Artur Fracala <arturfracala@MacBook-Pro-Artur.local>
Date: Wed, 27 Nov 2024 04:46:03 -0500
Subject: [PATCH] feat(Table): add tests for Table component

---
 .../src/components/Table/Table.spec.tsx       | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 packages/react-components/src/components/Table/Table.spec.tsx

diff --git a/packages/react-components/src/components/Table/Table.spec.tsx b/packages/react-components/src/components/Table/Table.spec.tsx
new file mode 100644
index 000000000..14332c378
--- /dev/null
+++ b/packages/react-components/src/components/Table/Table.spec.tsx
@@ -0,0 +1,59 @@
+import { render, fireEvent, vi } from 'test-utils';
+
+import { Table } from './Table';
+import { Column } from './types';
+
+type Data = {
+  id: number;
+  name: string;
+  age: number;
+  role: string;
+};
+
+const columns: Column<Data>[] = [
+  { key: 'id', header: 'ID', sortable: true },
+  { key: 'name', header: 'Name', sortable: true },
+  { key: 'age', header: 'Age', sortable: true },
+  { key: 'role', header: 'Role', sortable: true },
+];
+
+const data: Data[] = [
+  { id: 1, name: 'John Doe', age: 28, role: 'Developer' },
+  { id: 2, name: 'Jane Smith', age: 34, role: 'Designer' },
+  { id: 3, name: 'Alice Johnson', age: 42, role: 'Manager' },
+];
+
+describe('<Table> component', () => {
+  const getRowId = (row: Data) => row.id;
+
+  it('should render a table with provided data and columns', () => {
+    const { getByRole, getAllByRole } = render(
+      <Table data={data} columns={columns} getRowId={getRowId} />
+    );
+
+    const table = getByRole('table');
+    expect(table).toBeInTheDocument();
+
+    const rows = getAllByRole('row');
+    expect(rows.length).toBe(data.length + 1);
+  });
+
+  it('should allow row selection if selectable prop is enabled', () => {
+    const onSelectionChange = vi.fn();
+    const { getAllByRole } = render(
+      <Table
+        data={data}
+        columns={columns}
+        getRowId={getRowId}
+        selectable={true}
+        onSelectionChange={onSelectionChange}
+      />
+    );
+
+    const checkboxes = getAllByRole('checkbox');
+    expect(checkboxes.length).toBe(data.length + 1);
+
+    fireEvent.click(checkboxes[1]);
+    expect(onSelectionChange).toHaveBeenCalledWith(new Set([1]));
+  });
+});