feat(Table): create component

kodiak-packages · Jul 25, 2020 · c710bd5 · c710bd5
1 parent 19de404
commit c710bd5
Show file tree

Hide file tree

Showing 4 changed files with 217 additions and 3 deletions.
diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Table from './Table';
+
+interface Course {
+  name: string;
+  length: string;
+  status: 'done' | 'in progress' | 'not started';
+}
+
+describe('Table', () => {
+  const courses: Course[] = [
+    { name: 'Course 1', length: '2h', status: 'done' },
+    { name: 'Course 2', length: '4h', status: 'in progress' },
+    { name: 'Course 3', length: '1h', status: 'in progress' },
+    { name: 'Course 4', length: '3h 43m', status: 'not started' },
+    { name: 'Course 5', length: '1h', status: 'in progress' },
+    { name: 'Course 6', length: '2h 15m', status: 'not started' },
+    { name: 'Course 7', length: '3h', status: 'done' },
+  ];
+
+  test('default snapshot', () => {
+    const component = (
+      <Table>
+        <Table.Header>
+          <Table.HeaderCell>Course</Table.HeaderCell>
+          <Table.HeaderCell>Length</Table.HeaderCell>
+          <Table.HeaderCell>Status</Table.HeaderCell>
+        </Table.Header>
+        <Table.Body>
+          {courses.map((course) => {
+            return (
+              <Table.Row>
+                <Table.Cell>{course.name}</Table.Cell>
+                <Table.Cell>{course.length}</Table.Cell>
+                <Table.Cell>{course.status}</Table.Cell>
+              </Table.Row>
+            );
+          })}
+        </Table.Body>
+      </Table>
+    );
+    const { asFragment } = render(component);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Table/TableBody/TableBody.module.css b/src/components/Table/TableBody/TableBody.module.css
diff --git a/src/components/Table/TableHeader/TableHeader.module.css b/src/components/Table/TableHeader/TableHeader.module.css
diff --git a/src/components/Table/__snapshots__/Table.test.tsx.snap b/src/components/Table/__snapshots__/Table.test.tsx.snap
@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Table default snapshot 1`] = `
+<DocumentFragment>
+  <table
+    class="ventura table"
+  >
+    <thead
+      class="header"
+    >
+      <tr
+        class="headerRow"
+      >
+        <th
+          class="cellAlignLeft headerCell"
+        >
+          Course
+        </th>
+        <th
+          class="cellAlignLeft headerCell"
+        >
+          Length
+        </th>
+        <th
+          class="cellAlignLeft headerCell"
+        >
+          Status
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="body"
+    >
+      <tr
+        class="row"
+      >
+        <td
+          class="cellAlignLeft cell row"
+        >
+          Course 1
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          2h
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          done
+        </td>
+      </tr>
+      <tr
+        class="row"
+      >
+        <td
+          class="cellAlignLeft cell row"
+        >
+          Course 2
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          4h
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          in progress
+        </td>
+      </tr>
+      <tr
+        class="row"
+      >
+        <td
+          class="cellAlignLeft cell row"
+        >
+          Course 3
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          1h
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          in progress
+        </td>
+      </tr>
+      <tr
+        class="row"
+      >
+        <td
+          class="cellAlignLeft cell row"
+        >
+          Course 4
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          3h 43m
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          not started
+        </td>
+      </tr>
+      <tr
+        class="row"
+      >
+        <td
+          class="cellAlignLeft cell row"
+        >
+          Course 5
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          1h
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          in progress
+        </td>
+      </tr>
+      <tr
+        class="row"
+      >
+        <td
+          class="cellAlignLeft cell row"
+        >
+          Course 6
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          2h 15m
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          not started
+        </td>
+      </tr>
+      <tr
+        class="row"
+      >
+        <td
+          class="cellAlignLeft cell row"
+        >
+          Course 7
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          3h
+        </td>
+        <td
+          class="cellAlignLeft cell row"
+        >
+          done
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</DocumentFragment>
+`;