Misc improvements to tests (#67)

Fix snapshot discrepancy n.b. Also adjust Jest config as per jestjs/jest#6766 (comment) Remove whitespace Minor fixes
stevesims · Aug 11, 2018 · d67461c · d67461c
1 parent bccb1ae
commit d67461c
Show file tree

Hide file tree

Showing 41 changed files with 1,809 additions and 674 deletions.
diff --git a/components/array-object-table/src/__snapshots__/test.js.snap b/components/array-object-table/src/__snapshots__/test.js.snap
@@ -0,0 +1,214 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ArrayObjectTable matches snapshot 1`] = `
+.emotion-14 {
+  margin-bottom: 15px;
+}
+
+@media only screen and (min-width:641px) {
+  .emotion-14 {
+    margin-bottom: 15px;
+  }
+}
+
+.emotion-12 {
+  display: table;
+  font-family: "nta",Arial,sans-serif;
+  width: 100%;
+  table-layout: fixed;
+  margin-bottom: 15px;
+}
+
+@media only screen and (min-width:641px) {
+  .emotion-12 {
+    margin-bottom: 15px;
+  }
+}
+
+.emotion-0 {
+  border-bottom: 1px solid #bfc1c3;
+  display: table-cell;
+  font-size: 14px;
+  padding: 15px 4px;
+  vertical-align: top;
+  font-weight: bold;
+  text-align: left;
+}
+
+.emotion-0:first-child {
+  padding: 15px 4px 15px 0;
+}
+
+.emotion-0:last-child {
+  padding: 15px 0 15px 4px;
+}
+
+.emotion-6 {
+  border-bottom: 1px solid #bfc1c3;
+  display: table-cell;
+  font-size: 14px;
+  padding: 15px 4px;
+  vertical-align: top;
+}
+
+.emotion-6:first-child {
+  padding: 15px 4px 15px 0;
+}
+
+.emotion-6:last-child {
+  padding: 15px 0 15px 4px;
+}
+
+<ArrayObjectTable
+  array={
+    Array [
+      Object {},
+      Object {
+        "one": "test",
+        "two": "test",
+      },
+    ]
+  }
+  fields={
+    Array [
+      Object {
+        "heading": "One",
+        "key": "one",
+      },
+      Object {
+        "heading": "Two",
+        "key": "two",
+        "transform": [Function],
+      },
+      Object {
+        "heading": "Three",
+        "key": "three",
+      },
+    ]
+  }
+  hideWithNoValues={false}
+  skipEmptyRows={true}
+  title={null}
+>
+  <Styled(Table)
+    flexibleColumns={false}
+    nameByRow={false}
+    names={Array []}
+    rowIncludesHeading={false}
+    rows={
+      Array [
+        Array [
+          "test",
+          "two",
+          "-",
+        ],
+      ]
+    }
+    titles={
+      Array [
+        "One",
+        "Two",
+        "Three",
+      ]
+    }
+  >
+    <Table
+      className="emotion-14"
+      flexibleColumns={false}
+      nameByRow={false}
+      names={Array []}
+      rowIncludesHeading={false}
+      rows={
+        Array [
+          Array [
+            "test",
+            "two",
+            "-",
+          ],
+        ]
+      }
+      titles={
+        Array [
+          "One",
+          "Two",
+          "Three",
+        ]
+      }
+    >
+      <TableContainer
+        className="emotion-14"
+        flexibleColumns={false}
+      >
+        <table
+          className="emotion-12 emotion-13"
+        >
+          <thead>
+            <tr>
+              <TableHeading
+                key="0"
+              >
+                <th
+                  className="emotion-0 emotion-1"
+                >
+                  One
+                </th>
+              </TableHeading>
+              <TableHeading
+                key="1"
+              >
+                <th
+                  className="emotion-0 emotion-1"
+                >
+                  Two
+                </th>
+              </TableHeading>
+              <TableHeading
+                key="2"
+              >
+                <th
+                  className="emotion-0 emotion-1"
+                >
+                  Three
+                </th>
+              </TableHeading>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              key="0"
+            >
+              <TableData
+                key="0"
+              >
+                <td
+                  className="emotion-6 emotion-7"
+                >
+                  test
+                </td>
+              </TableData>
+              <TableData
+                key="1"
+              >
+                <td
+                  className="emotion-6 emotion-7"
+                >
+                  two
+                </td>
+              </TableData>
+              <TableData
+                key="2"
+              >
+                <td
+                  className="emotion-6 emotion-7"
+                >
+                  -
+                </td>
+              </TableData>
+            </tr>
+          </tbody>
+        </table>
+      </TableContainer>
+    </Table>
+  </Styled(Table)>
+</ArrayObjectTable>
+`;
diff --git a/components/array-object-table/src/index.js b/components/array-object-table/src/index.js
@@ -73,16 +73,14 @@ ArrayObjectTable.propTypes = {
     key: PropTypes.string.isRequired,
     heading: PropTypes.string.isRequired,
     transform: PropTypes.func,
-  })),
-  array: PropTypes.arrayOf(PropTypes.object),
+  })).isRequired,
+  array: PropTypes.arrayOf(PropTypes.object).isRequired,
   hideWithNoValues: PropTypes.bool,
   skipEmptyRows: PropTypes.bool,
   title: PropTypes.node,
 };
 
 ArrayObjectTable.defaultProps = {
-  fields: [],
-  array: [],
   hideWithNoValues: false,
   skipEmptyRows: false,
   title: null,

diff --git a/components/array-object-table/src/test.js b/components/array-object-table/src/test.js
@@ -1,75 +1,66 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 
-import Component from '.';
+import ArrayObjectTable from '.';
 
-describe('ArrayObjectTable', () => {
-  let fields = [
-    { key: 'one', heading: 'One' },
-    { key: 'two', heading: 'Two', transform: () => 'two' },
-    { key: 'three', heading: 'Three' },
-  ];
-  let array = [
-    {}, // empty record to be automatically omitted
-    { one: 'test', two: 'test' },
-  ];
-  const title = 'Heading';
-  let wrapper;
+const fields = [
+  { key: 'one', heading: 'One' },
+  { key: 'two', heading: 'Two', transform: () => 'two' },
+  { key: 'three', heading: 'Three' },
+];
 
-  it('renders with defaults', () => {
-    wrapper = mount(<Component />);
-    expect(wrapper.exists()).toBe(true);
-  });
+const array = [
+  {},
+  { one: 'test', two: 'test' },
+];
 
-  it('renders with basic props', () => {
-    wrapper = mount(<Component fields={fields} array={array} />);
-
-    expect(wrapper.exists()).toBe(true);
-  });
+const getRows = wrapper => wrapper.find('Table').prop('rows');
 
-  it('renders a table of data based on props passed', () => {
-    const table = wrapper.find('Table');
-    const rows = table.prop('rows');
-    const titles = table.prop('titles');
-
-    expect(rows).toEqual([['-', 'two', '-'], ['test', 'two', '-']]);
-    expect(titles).toEqual(['One', 'Two', 'Three']);
+describe('ArrayObjectTable', () => {
+  it('renders with required props', () => {
+    const wrapper = shallow(<ArrayObjectTable fields={fields} array={array} />);
+    expect(wrapper.exists()).toBe(true);
   });
 
-  it('skips empty rows when skipEmptyRows prop is passed', () => {
-    wrapper.setProps({ skipEmptyRows: true });
-    const table = wrapper.find('Table');
-    const rows = table.prop('rows');
+  describe('renders table data', () => {
+    it('renders expected table heading cells ', () => {
+      const wrapper = mount(<ArrayObjectTable fields={fields} array={array} />);
+      const titles = wrapper.find('Table').prop('titles');
+      expect(titles).toEqual(['One', 'Two', 'Three']);
+    });
 
-    expect(rows).toEqual([['test', 'two', '-']]);
+    it('renders expected table data cells', () => {
+      const wrapper = mount(<ArrayObjectTable fields={fields} array={array} />);
+      expect(getRows(wrapper)).toEqual([['-', 'two', '-'], ['test', 'two', '-']]);
+    });
   });
 
-  it('optionally renders a heading for a table', () => {
-    wrapper.setProps({ title });
+  describe('responds as expected to additional props', () => {
+    it('renders a table heading if provided', () => {
+      const wrapper = shallow(<ArrayObjectTable fields={fields} array={array} title="Heading"/>);
+      expect(wrapper.contains('Heading')).toBe(true);
+    });
 
-    expect(wrapper.contains('Heading')).toBe(true);
-  });
+    it('skips empty rows if skipEmptyRows is true', () => {
+      const wrapper = mount(<ArrayObjectTable fields={fields} array={array} skipEmptyRows/>);
+      expect(getRows(wrapper)).toEqual([['test', 'two', '-']]);
+    });
+
+    it('renders nothing if no rows are returned and hideWithNoValues is true', () => {
+      const emptyArray = [{}, {}, {}];
+      const wrapper = shallow(<ArrayObjectTable fields={fields} array={emptyArray} skipEmptyRows hideWithNoValues />);
+      expect(wrapper.html()).toBe(null);
+    });
 
-  it('renders one tbody row when no rows are returned if hideWithNoValues is not true', () => {
-    fields = [
-      { key: 'one', heading: 'One' },
-      { key: 'two', heading: 'Two' },
-    ];
-    array = [
-      {},
-      {},
-    ];
-    wrapper = mount(<Component fields={fields} array={array} skipEmptyRows/>);
-    const table = wrapper.find('Table');
-    const rows = table.prop('rows');
-    expect(rows).toEqual([['-', '-']]);
-    expect(wrapper.find('tbody tr').length).toBe(1);
+    it('renders one tbody row if no rows are returned and hideWithNoValues is not true', () => {
+      const emptyArray = [{}, {}, {}];
+      const wrapper = mount(<ArrayObjectTable fields={fields} array={emptyArray} skipEmptyRows />);
+      expect(wrapper.find('tbody tr').length).toBe(1);
+    });
   });
 
-  it('renders nothing when no rows are returned and hideWithNoValues is true', () => {
-    wrapper = mount(<Component fields={fields} array={array} skipEmptyRows hideWithNoValues/>);
-
-    expect(wrapper.html()).toBe(null);
+  it('matches snapshot', () => {
+    const wrapper = mount(<ArrayObjectTable fields={fields} array={array} skipEmptyRows />);
+    expect(wrapper).toMatchSnapshot();
   });
 });
-