From f55b89fbd563f6e01f4056fc69bcb0654f59c812 Mon Sep 17 00:00:00 2001
From: Pieterjan Van Saet <pieterjan.vansaet@studiohyperdrive.be>
Date: Mon, 10 Jan 2022 08:12:20 +0100
Subject: [PATCH] feat: tests

---
 packages/table/src/Table.spec.js              | 90 +++++++++++++++++++
 .../table/src/components/Filter/Filter.js     |  4 +
 2 files changed, 94 insertions(+)
 create mode 100644 packages/table/src/Table.spec.js

diff --git a/packages/table/src/Table.spec.js b/packages/table/src/Table.spec.js
new file mode 100644
index 00000000..5651ea11
--- /dev/null
+++ b/packages/table/src/Table.spec.js
@@ -0,0 +1,90 @@
+import Table from "./Table";
+import { mount } from 'enzyme';
+import React from 'react';
+import { TABLE_MOCK_COLUMNS, TABLE_MOCK_ROWS, TABLE_MOCK_NESTED_ROWS, TABLE_MOCK_FILTER } from './mocks/Table.mock.js';
+import * as sinon from 'sinon';
+
+describe('Table Test', () => {
+  let component: Table;
+
+  describe('Setup and Teardown', () => {
+    test('Should create a valid component', () => {
+      const component = mount(
+        <Table />
+      );
+
+      expect(component).toBeDefined();
+    });
+
+    test('Should set an initial state', () => {
+      const component = mount(
+        <Table
+          tableId="1"
+          columns={TABLE_MOCK_COLUMNS()}
+          rows={TABLE_MOCK_ROWS.slice(0, 10)}
+        />
+      );
+
+      expect(component).toBeDefined();
+    });
+  });
+
+  describe('Data', () => {
+    test('Should render data', () => {
+      const component = mount(
+        <Table
+          tableId="1"
+          columns={TABLE_MOCK_COLUMNS()}
+          rows={TABLE_MOCK_ROWS.slice(0, 10)}
+        />
+      );
+
+      expect(component.find('tbody tr').length).toBe(10);
+    });
+  });
+
+  describe('Filters', () => {
+    test('Should render generic filter', () => {
+      const component = mount(
+        <Table
+          tableId="1"
+          columns={TABLE_MOCK_COLUMNS()}
+          rows={TABLE_MOCK_ROWS.slice(0, 10)}
+          filters={TABLE_MOCK_FILTER}
+        />
+      );
+
+      expect(component.find(`input[name="${TABLE_MOCK_FILTER[0].id}"]`).props()).toHaveProperty('id', TABLE_MOCK_FILTER[0].id);
+    });
+
+    test('Should render optional filters', () => {
+      const component = mount(
+        <Table
+          tableId="1"
+          columns={TABLE_MOCK_COLUMNS()}
+          rows={TABLE_MOCK_ROWS.slice(0, 10)}
+          filters={TABLE_MOCK_FILTER}
+        />
+      );
+
+      expect(component.find(`.m-table-filter__optional-filters > *`).length).toBe(4);
+    });
+  });
+
+  describe('Pagination', () => {
+    test('Should render pagination', () => {
+      const component = mount(
+        <Table
+          tableId="1"
+          columns={TABLE_MOCK_COLUMNS()}
+          rows={TABLE_MOCK_ROWS.slice(0, 10)}
+          itemsPerPage={10}
+          totalItems={1723}
+          currentPage={1}
+        />
+      );
+
+      expect(component.find(`.m-pagination`)).toBeDefined()
+    });
+  });
+});
diff --git a/packages/table/src/components/Filter/Filter.js b/packages/table/src/components/Filter/Filter.js
index 5eba6519..b79402b2 100644
--- a/packages/table/src/components/Filter/Filter.js
+++ b/packages/table/src/components/Filter/Filter.js
@@ -24,6 +24,7 @@ const Filter = ({
       case "select":
         return (
           <Select
+            key={filter.id}
             label={filter.label}
             id={filter.id}
             name={filter.id}
@@ -36,6 +37,7 @@ const Filter = ({
       case "datepicker":
         return (
           <Datepicker
+            key={filter.id}
             label={filter.label}
             id={filter.id}
             name={filter.id}
@@ -47,6 +49,7 @@ const Filter = ({
       case "telephone-number":
         return (
           <TelephoneNumber
+            key={filter.id}
             label={filter.label}
             id={filter.id}
             name={filter.id}
@@ -58,6 +61,7 @@ const Filter = ({
       default:
         return (
           <TextField
+            key={filter.id}
             label={filter.label}
             id={filter.id}
             name={filter.id}