@kineticdata/react 6.0.1 → 6.0.3

package/lib/components/table/tests/Table.test.js

@@ -0,0 +1,767 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _reactTestRenderer = require("react-test-renderer");
+var _index = require("../../../index");
+var _store = require("../../../store");
+var _immutable = require("immutable");
+var _fixtures = require("../../../../tests/fixtures");
+var _defaults = require("../defaults");
+var _Table = require("../Table");
+var _components = require("./components");
+var _excluded = ["dataSource", "filters", "filterDataSources", "columns", "tableOptions", "tableKey", "TableView"];
+var buildProps = function buildProps(props) {
+  props.columnComponents = (0, _Table.extractColumnComponents)(props.columns);
+  return props;
+};
+
+// Things passed in from generateTables
+// tableOptions, columns, dataSource, sortable
+
+var TABLE_KEY = 'mock-table-key';
+var mountTable = function mountTable(_ref) {
+  var dataSource = _ref.dataSource,
+    filters = _ref.filters,
+    filterDataSources = _ref.filterDataSources,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    _ref$tableOptions = _ref.tableOptions,
+    tableOptions = _ref$tableOptions === void 0 ? {} : _ref$tableOptions,
+    _ref$tableKey = _ref.tableKey,
+    tableKey = _ref$tableKey === void 0 ? TABLE_KEY : _ref$tableKey,
+    _ref$TableView = _ref.TableView,
+    TableView = _ref$TableView === void 0 ? _components.TableViewMock : _ref$TableView,
+    tableProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  // Generate a new Table type using the options.
+  var Table = (0, _Table.generateTable)({
+    dataSource: dataSource,
+    columns: columns,
+    filters: filters,
+    filterDataSources: filterDataSources,
+    tableOptions: Object.keys(tableOptions)
+  });
+  return (0, _reactTestRenderer.act)(function () {
+    return new Promise(function (resolve) {
+      var result = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, {
+        components: _components.mockTableConfig
+      }, /*#__PURE__*/_react["default"].createElement(Table, Object.assign({
+        tableKey: tableKey,
+        uncontrolled: true
+      }, tableProps, tableOptions), function (props) {
+        return /*#__PURE__*/_react["default"].createElement(TableView, props);
+      })));
+      var ready = function ready() {
+        return !(_store.store.getState().getIn(['tables', tableKey, 'loading'], true) || _store.store.getState().getIn(['tables', tableKey, 'initializing'], true));
+      };
+      if (ready()) {
+        resolve(result);
+      } else {
+        var unsub = _store.store.subscribe(function () {
+          if (ready()) {
+            resolve(result);
+            // Remove the store listener since we're done.
+            unsub();
+          }
+        });
+      }
+    });
+  });
+};
+
+// Helper function to find an element within the rendered component
+var getByTestId = function getByTestId(json, id) {
+  var _json$props;
+  var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  if ((json === null || json === void 0 ? void 0 : (_json$props = json.props) === null || _json$props === void 0 ? void 0 : _json$props['data-testid']) === id) {
+    return json;
+  }
+  if (Array.isArray(json === null || json === void 0 ? void 0 : json.children)) {
+    return json.children.map(function (child) {
+      return getByTestId(child, id, depth + 1);
+    }).find(Boolean);
+  }
+  if (depth === 0) {
+    throw new Error("Cannot find element with test id: '".concat(id, "'"));
+  }
+  return undefined;
+};
+
+/*
+
+* Repeat for: server-side, server-side w/client sort and paginate, client-side
+* test sorting by column
+* test sorting changing direction
+* test default sort parameters
+
+* test pure-client-side (data prop passed)
+
+ * test overriding default components for whole table
+ * test altering columns
+ ** changing component
+ ** What else *can* be changed???
+ * test adding columns
+ * test valueTransform
+ * test columnSet
+ * test pageSize
+ * test sortable
+ * test omit header
+ * test include footer
+
+
+ */
+
+describe('<Table />', function () {
+  describe('render', function () {
+    var data, columns, wrapper, dataSourceFn;
+    beforeEach(function () {
+      data = {
+        mockData: [{
+          name: 'test',
+          status: 'active'
+        }]
+      };
+      columns = [{
+        value: 'name',
+        title: 'Name',
+        sortable: true,
+        filter: 'startsWith',
+        type: 'text'
+      }, {
+        value: 'status',
+        title: 'Status',
+        sortable: true,
+        filter: 'equals',
+        type: 'text',
+        options: function options() {
+          return [{
+            label: 'Active',
+            value: 'active'
+          }, {
+            label: 'Inactive',
+            value: 'inactive'
+          }];
+        }
+      }];
+      dataSourceFn = jest.fn(function () {
+        return Promise.resolve(data);
+      });
+    });
+    afterEach(function () {
+      if (wrapper) {
+        wrapper.unmount();
+      }
+    });
+    test('kitchen sink', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
+      var addColumns;
+      return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            addColumns = [{
+              value: '_action',
+              title: 'Actions'
+            }];
+            _context.next = 3;
+            return mountTable({
+              columns: columns,
+              addColumns: addColumns,
+              dataSource: function dataSource(_tableOptions) {
+                return {
+                  fn: dataSourceFn,
+                  params: function params(_paramData) {
+                    return [];
+                  },
+                  transform: function transform(result) {
+                    return {
+                      data: result.mockData
+                    };
+                  }
+                };
+              }
+            });
+          case 3:
+            wrapper = _context.sent;
+            expect(getByTestId(wrapper.toJSON(), 'TableViewMock')).toMatchSnapshot();
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })));
+    describe('filters', function () {
+      test('legacy filters', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2() {
+        var filterLayout;
+        return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return mountTable({
+                dataSource: function dataSource(_tableOptions) {
+                  return {
+                    fn: dataSourceFn,
+                    params: function params(_paramData) {
+                      return [];
+                    },
+                    transform: function transform(result) {
+                      return {
+                        data: result.mockData
+                      };
+                    }
+                  };
+                }
+              });
+            case 2:
+              wrapper = _context2.sent;
+              filterLayout = getByTestId(wrapper.toJSON(), 'FilterLayoutMock');
+              expect(filterLayout).toBeDefined();
+              expect(filterLayout).toMatchSnapshot();
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      })));
+      test('filter form', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee3() {
+        var filterForm;
+        return (0, _regeneratorRuntime2["default"])().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return mountTable({
+                filters: function filters() {
+                  return function () {
+                    return [{
+                      name: 'name',
+                      label: 'Name',
+                      type: 'text'
+                    }, {
+                      name: 'status',
+                      label: 'Status',
+                      type: 'text'
+                    }];
+                  };
+                },
+                dataSource: function dataSource(_tableOptions) {
+                  return {
+                    fn: dataSourceFn,
+                    params: function params(_paramData) {
+                      return [];
+                    },
+                    transform: function transform(result) {
+                      return {
+                        data: result.mockData
+                      };
+                    }
+                  };
+                }
+              });
+            case 2:
+              wrapper = _context3.sent;
+              filterForm = getByTestId(wrapper.toJSON(), 'FormLayoutMock');
+              expect(filterForm).toBeDefined();
+              expect(filterForm).toMatchSnapshot();
+            case 6:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      })));
+    });
+    describe('dataSource', function () {
+      test('dataSource resolves', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee4() {
+        return (0, _regeneratorRuntime2["default"])().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.next = 2;
+              return mountTable({
+                dataSource: function dataSource(_tableOptions) {
+                  return {
+                    fn: dataSourceFn,
+                    params: function params(_paramData) {
+                      return [];
+                    },
+                    transform: function transform(result) {
+                      return {
+                        data: result.mockData
+                      };
+                    }
+                  };
+                }
+              });
+            case 2:
+              wrapper = _context4.sent;
+              expect(getByTestId(wrapper.toJSON(), 'TableViewMock')).toMatchSnapshot();
+              expect(dataSourceFn.mock.calls).toMatchSnapshot();
+            case 5:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      })));
+    });
+  });
+  describe('build methods', function () {
+    var props;
+    var data = [];
+    var columns = (0, _immutable.List)([]);
+    var columnSet = (0, _immutable.List)([]);
+    var wrapper;
+    beforeEach(function () {
+      data = (0, _fixtures.users)(2);
+      columns = (0, _immutable.List)([(0, _immutable.Map)({
+        value: 'username',
+        title: 'Username'
+      })]);
+      columnSet = (0, _immutable.List)(['username']);
+      props = {
+        // Spread in the default components since the method tests will not be getting
+        // any components from the context since we're bypassing the top level `Table`
+        // component for testing.
+        components: (0, _objectSpread2["default"])({}, _defaults.DefaultTableConfig.toJS()),
+        data: data,
+        columns: columns,
+        columnSet: columnSet,
+        rows: (0, _immutable.List)(data).map(function (r) {
+          return (0, _immutable.Map)(r);
+        })
+      };
+    });
+    afterEach(function () {
+      if (wrapper) {
+        wrapper.unmount();
+      }
+    });
+    describe('#buildTable', function () {
+      test('it renders normally', function () {
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTable)(buildProps(props))));
+        expect(wrapper.toJSON().type).toEqual('table');
+        expect(wrapper.toJSON().props.className).not.toEqual('custom-table');
+      });
+      test('it renders a custom table', function () {
+        var TableLayout = function TableLayout() {
+          return /*#__PURE__*/_react["default"].createElement("table", {
+            className: "custom-table"
+          });
+        };
+        props.components.TableLayout = TableLayout;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTable)(buildProps(props))));
+        expect(wrapper.toJSON().type).toEqual('table');
+        expect(wrapper.toJSON().props.className).toEqual('custom-table');
+      });
+    });
+    describe('#buildTableHeader', function () {
+      test('it renders normally', function () {
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableHeader)(buildProps(props))));
+        expect(wrapper.toJSON().type).toEqual('thead');
+        expect(wrapper.toJSON().props.className).not.toEqual('custom-thead');
+      });
+      test('it does not render when omitHeader is set', function () {
+        props.omitHeader = true;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableHeader)(buildProps(props))));
+        expect(wrapper.toJSON()).toBeNull();
+      });
+      test('it renders a custom thead', function () {
+        var Header = function Header() {
+          return /*#__PURE__*/_react["default"].createElement("thead", {
+            className: "custom-thead"
+          });
+        };
+        props.components.Header = Header;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableHeader)(buildProps(props))));
+        expect(wrapper.toJSON().type).toEqual('thead');
+        expect(wrapper.toJSON().props.className).toEqual('custom-thead');
+      });
+    });
+    describe('#buildTableHeaderRow', function () {
+      test('it renders normally', function () {
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableHeaderRow)(buildProps(props))));
+        expect(wrapper.toJSON().type).toEqual('tr');
+        expect(wrapper.toJSON().props.className).not.toEqual('custom-tr');
+      });
+      test('it renders a custom thead', function () {
+        var HeaderRow = function HeaderRow() {
+          return /*#__PURE__*/_react["default"].createElement("tr", {
+            className: "custom-tr"
+          });
+        };
+        props.components.HeaderRow = HeaderRow;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableHeaderRow)(buildProps(props))));
+        expect(wrapper.toJSON().type).toEqual('tr');
+        expect(wrapper.toJSON().props.className).toEqual('custom-tr');
+      });
+    });
+    describe('#buildTableHeaderCell', function () {
+      test('it renders normally', function () {
+        var column = columns.first();
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableHeaderCell)(buildProps(props))(column, 0)));
+        expect(wrapper.toJSON().type).toEqual('th');
+        expect(wrapper.toJSON().props.className).not.toEqual('custom-th');
+      });
+      test('it renders a custom th', function () {
+        var column = columns.first();
+        var HeaderCell = function HeaderCell() {
+          return /*#__PURE__*/_react["default"].createElement("th", {
+            className: "custom-th"
+          });
+        };
+        props.components.HeaderCell = HeaderCell;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableHeaderCell)(buildProps(props))(column, 0)));
+        expect(wrapper.toJSON().type).toEqual('th');
+        expect(wrapper.toJSON().props.className).toEqual('custom-th');
+      });
+      test('it renders a custom th for a specific column', function () {
+        var HeaderCell = function HeaderCell() {
+          return /*#__PURE__*/_react["default"].createElement("th", {
+            className: "custom-cell-th"
+          });
+        };
+        props.columns = props.columns.push((0, _immutable.Map)({
+          value: 'displayName',
+          title: 'DisplayName',
+          components: {
+            HeaderCell: HeaderCell
+          }
+        }));
+        props.columnSet = props.columnSet.push('displayName');
+        var column = props.columns.last();
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableHeaderCell)(buildProps(props))(column, 0)));
+        expect(wrapper.toJSON().type).toEqual('th');
+        expect(wrapper.toJSON().props.className).toEqual('custom-cell-th');
+      });
+    });
+    describe('#buildTableBody', function () {
+      test('it renders normally', function () {
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableBody)(buildProps(props))));
+        expect(wrapper.toJSON().type).toEqual('tbody');
+        expect(wrapper.toJSON().props.className).not.toEqual('custom-tbody');
+      });
+      test('it renders a custom tbody', function () {
+        var Header = function Header() {
+          return /*#__PURE__*/_react["default"].createElement("tbody", {
+            className: "custom-tbody"
+          });
+        };
+        props.components.Header = Header;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableHeader)(buildProps(props))));
+        expect(wrapper.toJSON().type).toEqual('tbody');
+        expect(wrapper.toJSON().props.className).toEqual('custom-tbody');
+      });
+    });
+    describe('#buildTableBodyRows', function () {
+      test('it renders rows normally', function () {
+        var _getByTestId, _getByTestId2, _getByTestId2$childre, _getByTestId2$childre2, _getByTestId3, _getByTestId3$childre, _getByTestId3$childre2, _getByTestId3$childre3;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, /*#__PURE__*/_react["default"].createElement("table", null, /*#__PURE__*/_react["default"].createElement("tbody", {
+          "data-testid": "TableBodyMock"
+        }, (0, _Table.buildTableBodyRows)(buildProps(props))))));
+        expect((_getByTestId = getByTestId(wrapper.toJSON(), 'TableBodyMock')) === null || _getByTestId === void 0 ? void 0 : _getByTestId.children).toHaveLength(props.rows.size);
+        expect((_getByTestId2 = getByTestId(wrapper.toJSON(), 'TableBodyMock')) === null || _getByTestId2 === void 0 ? void 0 : (_getByTestId2$childre = _getByTestId2.children) === null || _getByTestId2$childre === void 0 ? void 0 : (_getByTestId2$childre2 = _getByTestId2$childre[0]) === null || _getByTestId2$childre2 === void 0 ? void 0 : _getByTestId2$childre2.type).toEqual('tr');
+        expect((_getByTestId3 = getByTestId(wrapper.toJSON(), 'TableBodyMock')) === null || _getByTestId3 === void 0 ? void 0 : (_getByTestId3$childre = _getByTestId3.children) === null || _getByTestId3$childre === void 0 ? void 0 : (_getByTestId3$childre2 = _getByTestId3$childre[0]) === null || _getByTestId3$childre2 === void 0 ? void 0 : (_getByTestId3$childre3 = _getByTestId3$childre2.props) === null || _getByTestId3$childre3 === void 0 ? void 0 : _getByTestId3$childre3.className).not.toEqual('custom-tr');
+      });
+      test('it renders custom rows', function () {
+        var _getByTestId4, _getByTestId5, _getByTestId5$childre, _getByTestId5$childre2, _getByTestId6, _getByTestId6$childre, _getByTestId6$childre2, _getByTestId6$childre3;
+        var BodyRow = function BodyRow() {
+          return /*#__PURE__*/_react["default"].createElement("tr", {
+            className: "custom-tr"
+          });
+        };
+        props.components.BodyRow = BodyRow;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, /*#__PURE__*/_react["default"].createElement("table", null, /*#__PURE__*/_react["default"].createElement("tbody", {
+          "data-testid": "TableBodyMock"
+        }, (0, _Table.buildTableBodyRows)(buildProps(props))))));
+        expect((_getByTestId4 = getByTestId(wrapper.toJSON(), 'TableBodyMock')) === null || _getByTestId4 === void 0 ? void 0 : _getByTestId4.children).toHaveLength(props.rows.size);
+        expect((_getByTestId5 = getByTestId(wrapper.toJSON(), 'TableBodyMock')) === null || _getByTestId5 === void 0 ? void 0 : (_getByTestId5$childre = _getByTestId5.children) === null || _getByTestId5$childre === void 0 ? void 0 : (_getByTestId5$childre2 = _getByTestId5$childre[0]) === null || _getByTestId5$childre2 === void 0 ? void 0 : _getByTestId5$childre2.type).toEqual('tr');
+        expect((_getByTestId6 = getByTestId(wrapper.toJSON(), 'TableBodyMock')) === null || _getByTestId6 === void 0 ? void 0 : (_getByTestId6$childre = _getByTestId6.children) === null || _getByTestId6$childre === void 0 ? void 0 : (_getByTestId6$childre2 = _getByTestId6$childre[0]) === null || _getByTestId6$childre2 === void 0 ? void 0 : (_getByTestId6$childre3 = _getByTestId6$childre2.props) === null || _getByTestId6$childre3 === void 0 ? void 0 : _getByTestId6$childre3.className).toEqual('custom-tr');
+      });
+      test('it renders default empty row', function () {
+        var _getByTestId7, _getByTestId8, _getByTestId8$childre, _getByTestId8$childre2, _getByTestId9, _getByTestId9$childre, _getByTestId9$childre2, _getByTestId9$childre3;
+        props.rows = (0, _immutable.List)([]);
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, /*#__PURE__*/_react["default"].createElement("table", null, /*#__PURE__*/_react["default"].createElement("tbody", {
+          "data-testid": "TableBodyMock"
+        }, (0, _Table.buildTableBodyRows)(buildProps(props))))));
+        expect((_getByTestId7 = getByTestId(wrapper.toJSON(), 'TableBodyMock')) === null || _getByTestId7 === void 0 ? void 0 : _getByTestId7.children).toHaveLength(1);
+        expect((_getByTestId8 = getByTestId(wrapper.toJSON(), 'TableBodyMock')) === null || _getByTestId8 === void 0 ? void 0 : (_getByTestId8$childre = _getByTestId8.children) === null || _getByTestId8$childre === void 0 ? void 0 : (_getByTestId8$childre2 = _getByTestId8$childre[0]) === null || _getByTestId8$childre2 === void 0 ? void 0 : _getByTestId8$childre2.type).toEqual('tr');
+        expect((_getByTestId9 = getByTestId(wrapper.toJSON(), 'TableBodyMock')) === null || _getByTestId9 === void 0 ? void 0 : (_getByTestId9$childre = _getByTestId9.children) === null || _getByTestId9$childre === void 0 ? void 0 : (_getByTestId9$childre2 = _getByTestId9$childre[0]) === null || _getByTestId9$childre2 === void 0 ? void 0 : (_getByTestId9$childre3 = _getByTestId9$childre2.props) === null || _getByTestId9$childre3 === void 0 ? void 0 : _getByTestId9$childre3.className).not.toEqual('custom-empty-tr');
+      });
+      test('it renders custom empty row', function () {
+        var _getByTestId10, _getByTestId11, _getByTestId11$childr, _getByTestId11$childr2, _getByTestId12, _getByTestId12$childr, _getByTestId12$childr2, _getByTestId12$childr3;
+        var EmptyBodyRow = function EmptyBodyRow() {
+          return /*#__PURE__*/_react["default"].createElement("tr", {
+            className: "custom-empty-tr"
+          });
+        };
+        props.rows = (0, _immutable.List)([]);
+        props.components.EmptyBodyRow = EmptyBodyRow;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, /*#__PURE__*/_react["default"].createElement("table", null, /*#__PURE__*/_react["default"].createElement("tbody", {
+          "data-testid": "TableBodyMock"
+        }, (0, _Table.buildTableBodyRows)(buildProps(props))))));
+        expect((_getByTestId10 = getByTestId(wrapper.toJSON(), 'TableBodyMock')) === null || _getByTestId10 === void 0 ? void 0 : _getByTestId10.children).toHaveLength(1);
+        expect((_getByTestId11 = getByTestId(wrapper.toJSON(), 'TableBodyMock')) === null || _getByTestId11 === void 0 ? void 0 : (_getByTestId11$childr = _getByTestId11.children) === null || _getByTestId11$childr === void 0 ? void 0 : (_getByTestId11$childr2 = _getByTestId11$childr[0]) === null || _getByTestId11$childr2 === void 0 ? void 0 : _getByTestId11$childr2.type).toEqual('tr');
+        expect((_getByTestId12 = getByTestId(wrapper.toJSON(), 'TableBodyMock')) === null || _getByTestId12 === void 0 ? void 0 : (_getByTestId12$childr = _getByTestId12.children) === null || _getByTestId12$childr === void 0 ? void 0 : (_getByTestId12$childr2 = _getByTestId12$childr[0]) === null || _getByTestId12$childr2 === void 0 ? void 0 : (_getByTestId12$childr3 = _getByTestId12$childr2.props) === null || _getByTestId12$childr3 === void 0 ? void 0 : _getByTestId12$childr3.className).toEqual('custom-empty-tr');
+      });
+    });
+    describe('#buildTableBodyCells', function () {
+      test('it renders cells normally', function () {
+        var _getByTestId13, _getByTestId14, _getByTestId14$childr, _getByTestId14$childr2, _getByTestId15, _getByTestId15$childr, _getByTestId15$childr2, _getByTestId15$childr3;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, /*#__PURE__*/_react["default"].createElement("table", null, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", {
+          "data-testid": "TableBodyRowMock"
+        }, (0, _Table.buildTableBodyCells)(buildProps(props), props.rows.first(), 0))))));
+        expect((_getByTestId13 = getByTestId(wrapper.toJSON(), 'TableBodyRowMock')) === null || _getByTestId13 === void 0 ? void 0 : _getByTestId13.children).toHaveLength(props.columnSet.size);
+        expect((_getByTestId14 = getByTestId(wrapper.toJSON(), 'TableBodyRowMock')) === null || _getByTestId14 === void 0 ? void 0 : (_getByTestId14$childr = _getByTestId14.children) === null || _getByTestId14$childr === void 0 ? void 0 : (_getByTestId14$childr2 = _getByTestId14$childr[0]) === null || _getByTestId14$childr2 === void 0 ? void 0 : _getByTestId14$childr2.type).toEqual('td');
+        expect((_getByTestId15 = getByTestId(wrapper.toJSON(), 'TableBodyRowMock')) === null || _getByTestId15 === void 0 ? void 0 : (_getByTestId15$childr = _getByTestId15.children) === null || _getByTestId15$childr === void 0 ? void 0 : (_getByTestId15$childr2 = _getByTestId15$childr[0]) === null || _getByTestId15$childr2 === void 0 ? void 0 : (_getByTestId15$childr3 = _getByTestId15$childr2.props) === null || _getByTestId15$childr3 === void 0 ? void 0 : _getByTestId15$childr3.className).not.toEqual('custom-td');
+      });
+      test('it renders custom cells', function () {
+        var _getByTestId16, _getByTestId17, _getByTestId17$childr, _getByTestId17$childr2, _getByTestId18, _getByTestId18$childr, _getByTestId18$childr2, _getByTestId18$childr3;
+        var BodyCell = function BodyCell() {
+          return /*#__PURE__*/_react["default"].createElement("td", {
+            className: "custom-td"
+          });
+        };
+        props.components.BodyCell = BodyCell;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, /*#__PURE__*/_react["default"].createElement("table", null, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", {
+          "data-testid": "TableBodyRowMock"
+        }, (0, _Table.buildTableBodyCells)(buildProps(props), props.rows.first(), 0))))));
+        expect((_getByTestId16 = getByTestId(wrapper.toJSON(), 'TableBodyRowMock')) === null || _getByTestId16 === void 0 ? void 0 : _getByTestId16.children).toHaveLength(props.columnSet.size);
+        expect((_getByTestId17 = getByTestId(wrapper.toJSON(), 'TableBodyRowMock')) === null || _getByTestId17 === void 0 ? void 0 : (_getByTestId17$childr = _getByTestId17.children) === null || _getByTestId17$childr === void 0 ? void 0 : (_getByTestId17$childr2 = _getByTestId17$childr[0]) === null || _getByTestId17$childr2 === void 0 ? void 0 : _getByTestId17$childr2.type).toEqual('td');
+        expect((_getByTestId18 = getByTestId(wrapper.toJSON(), 'TableBodyRowMock')) === null || _getByTestId18 === void 0 ? void 0 : (_getByTestId18$childr = _getByTestId18.children) === null || _getByTestId18$childr === void 0 ? void 0 : (_getByTestId18$childr2 = _getByTestId18$childr[0]) === null || _getByTestId18$childr2 === void 0 ? void 0 : (_getByTestId18$childr3 = _getByTestId18$childr2.props) === null || _getByTestId18$childr3 === void 0 ? void 0 : _getByTestId18$childr3.className).toEqual('custom-td');
+      });
+      test('it renders custom column cells', function () {
+        var _getByTestId19, _getByTestId20, _getByTestId20$childr, _getByTestId20$childr2, _getByTestId21, _getByTestId21$childr, _getByTestId21$childr2, _getByTestId21$childr3, _getByTestId22, _getByTestId22$childr, _getByTestId22$childr2, _getByTestId22$childr3;
+        var BodyCell = function BodyCell() {
+          return /*#__PURE__*/_react["default"].createElement("td", {
+            className: "custom-td"
+          });
+        };
+        props.columns = props.columns.push((0, _immutable.Map)({
+          value: 'displayName',
+          title: 'DisplayName',
+          components: {
+            BodyCell: BodyCell
+          }
+        }));
+        props.columnSet = props.columnSet.push('displayName');
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, /*#__PURE__*/_react["default"].createElement("table", null, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", {
+          "data-testid": "TableBodyRowMock"
+        }, (0, _Table.buildTableBodyCells)(buildProps(props), props.rows.first(), 0))))));
+        expect((_getByTestId19 = getByTestId(wrapper.toJSON(), 'TableBodyRowMock')) === null || _getByTestId19 === void 0 ? void 0 : _getByTestId19.children).toHaveLength(props.columnSet.size);
+        expect((_getByTestId20 = getByTestId(wrapper.toJSON(), 'TableBodyRowMock')) === null || _getByTestId20 === void 0 ? void 0 : (_getByTestId20$childr = _getByTestId20.children) === null || _getByTestId20$childr === void 0 ? void 0 : (_getByTestId20$childr2 = _getByTestId20$childr[0]) === null || _getByTestId20$childr2 === void 0 ? void 0 : _getByTestId20$childr2.type).toEqual('td');
+        expect((_getByTestId21 = getByTestId(wrapper.toJSON(), 'TableBodyRowMock')) === null || _getByTestId21 === void 0 ? void 0 : (_getByTestId21$childr = _getByTestId21.children) === null || _getByTestId21$childr === void 0 ? void 0 : (_getByTestId21$childr2 = _getByTestId21$childr[0]) === null || _getByTestId21$childr2 === void 0 ? void 0 : (_getByTestId21$childr3 = _getByTestId21$childr2.props) === null || _getByTestId21$childr3 === void 0 ? void 0 : _getByTestId21$childr3.className).not.toEqual('custom-td');
+        expect((_getByTestId22 = getByTestId(wrapper.toJSON(), 'TableBodyRowMock')) === null || _getByTestId22 === void 0 ? void 0 : (_getByTestId22$childr = _getByTestId22.children) === null || _getByTestId22$childr === void 0 ? void 0 : (_getByTestId22$childr2 = _getByTestId22$childr[props.columnSet.size - 1]) === null || _getByTestId22$childr2 === void 0 ? void 0 : (_getByTestId22$childr3 = _getByTestId22$childr2.props) === null || _getByTestId22$childr3 === void 0 ? void 0 : _getByTestId22$childr3.className).toEqual('custom-td');
+      });
+    });
+    describe('#buildTableFooter', function () {
+      test('it does not render normally', function () {
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableFooter)(buildProps(props))));
+        expect(wrapper.toJSON()).toBeNull();
+      });
+      test('it renders with includeFooter', function () {
+        props.includeFooter = true;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableFooter)(buildProps(props))));
+        expect(wrapper.toJSON().type).toEqual('tfoot');
+        expect(wrapper.toJSON().props.className).not.toEqual('custom-tfoot');
+      });
+      test('it renders a custom tfoot', function () {
+        var Footer = function Footer() {
+          return /*#__PURE__*/_react["default"].createElement("tfoot", {
+            className: "custom-tfoot"
+          });
+        };
+        props.includeFooter = true;
+        props.components.Footer = Footer;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableFooter)(buildProps(props))));
+        expect(wrapper.toJSON().type).toEqual('tfoot');
+        expect(wrapper.toJSON().props.className).toEqual('custom-tfoot');
+      });
+    });
+    describe('#buildTableFooterRow', function () {
+      test('it renders normally', function () {
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableFooterRow)(buildProps(props))));
+        expect(wrapper.toJSON().type).toEqual('tr');
+        expect(wrapper.toJSON().props.className).not.toEqual('custom-tr');
+      });
+      test('it renders a custom tr', function () {
+        var FooterRow = function FooterRow() {
+          return /*#__PURE__*/_react["default"].createElement("tr", {
+            className: "custom-tr"
+          });
+        };
+        props.components.FooterRow = FooterRow;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, (0, _Table.buildTableFooterRow)(buildProps(props))));
+        expect(wrapper.toJSON().type).toEqual('tr');
+        expect(wrapper.toJSON().props.className).toEqual('custom-tr');
+      });
+    });
+    describe('#buildTableFooterCells', function () {
+      test('it renders normally', function () {
+        var _getByTestId23, _getByTestId24, _getByTestId24$childr, _getByTestId24$childr2, _getByTestId25, _getByTestId25$childr, _getByTestId25$childr2, _getByTestId25$childr3;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, /*#__PURE__*/_react["default"].createElement("tfoot", null, /*#__PURE__*/_react["default"].createElement("tr", {
+          "data-testid": "FooterRowMock"
+        }, (0, _Table.buildTableFooterCells)(buildProps(props))))));
+        expect((_getByTestId23 = getByTestId(wrapper.toJSON(), 'FooterRowMock')) === null || _getByTestId23 === void 0 ? void 0 : _getByTestId23.children).toHaveLength(props.columnSet.size);
+        expect((_getByTestId24 = getByTestId(wrapper.toJSON(), 'FooterRowMock')) === null || _getByTestId24 === void 0 ? void 0 : (_getByTestId24$childr = _getByTestId24.children) === null || _getByTestId24$childr === void 0 ? void 0 : (_getByTestId24$childr2 = _getByTestId24$childr[0]) === null || _getByTestId24$childr2 === void 0 ? void 0 : _getByTestId24$childr2.type).toEqual('td');
+        expect((_getByTestId25 = getByTestId(wrapper.toJSON(), 'FooterRowMock')) === null || _getByTestId25 === void 0 ? void 0 : (_getByTestId25$childr = _getByTestId25.children) === null || _getByTestId25$childr === void 0 ? void 0 : (_getByTestId25$childr2 = _getByTestId25$childr[0]) === null || _getByTestId25$childr2 === void 0 ? void 0 : (_getByTestId25$childr3 = _getByTestId25$childr2.props) === null || _getByTestId25$childr3 === void 0 ? void 0 : _getByTestId25$childr3.className).not.toEqual('custom-td');
+      });
+      test('it renders a custom td', function () {
+        var _getByTestId26, _getByTestId27, _getByTestId27$childr, _getByTestId27$childr2, _getByTestId28, _getByTestId28$childr, _getByTestId28$childr2, _getByTestId28$childr3;
+        var FooterCell = function FooterCell() {
+          return /*#__PURE__*/_react["default"].createElement("td", {
+            className: "custom-td"
+          });
+        };
+        props.components.FooterCell = FooterCell;
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, /*#__PURE__*/_react["default"].createElement("tfoot", null, /*#__PURE__*/_react["default"].createElement("tr", {
+          "data-testid": "FooterRowMock"
+        }, (0, _Table.buildTableFooterCells)(buildProps(props))))));
+        expect((_getByTestId26 = getByTestId(wrapper.toJSON(), 'FooterRowMock')) === null || _getByTestId26 === void 0 ? void 0 : _getByTestId26.children).toHaveLength(props.columnSet.size);
+        expect((_getByTestId27 = getByTestId(wrapper.toJSON(), 'FooterRowMock')) === null || _getByTestId27 === void 0 ? void 0 : (_getByTestId27$childr = _getByTestId27.children) === null || _getByTestId27$childr === void 0 ? void 0 : (_getByTestId27$childr2 = _getByTestId27$childr[0]) === null || _getByTestId27$childr2 === void 0 ? void 0 : _getByTestId27$childr2.type).toEqual('td');
+        expect((_getByTestId28 = getByTestId(wrapper.toJSON(), 'FooterRowMock')) === null || _getByTestId28 === void 0 ? void 0 : (_getByTestId28$childr = _getByTestId28.children) === null || _getByTestId28$childr === void 0 ? void 0 : (_getByTestId28$childr2 = _getByTestId28$childr[0]) === null || _getByTestId28$childr2 === void 0 ? void 0 : (_getByTestId28$childr3 = _getByTestId28$childr2.props) === null || _getByTestId28$childr3 === void 0 ? void 0 : _getByTestId28$childr3.className).toEqual('custom-td');
+      });
+      test('it renders a custom td for a specific column', function () {
+        var _getByTestId29, _getByTestId30, _getByTestId30$childr, _getByTestId30$childr2, _getByTestId31, _getByTestId31$childr, _getByTestId31$childr2, _getByTestId31$childr3, _getByTestId32, _getByTestId32$childr, _getByTestId32$childr2, _getByTestId32$childr3;
+        var FooterCell = function FooterCell() {
+          return /*#__PURE__*/_react["default"].createElement("td", {
+            className: "custom-td"
+          });
+        };
+        props.columns = props.columns.push((0, _immutable.Map)({
+          value: 'displayName',
+          title: 'DisplayName',
+          components: {
+            FooterCell: FooterCell
+          }
+        }));
+        props.columnSet = props.columnSet.push('displayName');
+        wrapper = (0, _reactTestRenderer.create)( /*#__PURE__*/_react["default"].createElement(_index.KineticLib, null, /*#__PURE__*/_react["default"].createElement("tfoot", null, /*#__PURE__*/_react["default"].createElement("tr", {
+          "data-testid": "FooterRowMock"
+        }, (0, _Table.buildTableFooterCells)(buildProps(props))))));
+        expect((_getByTestId29 = getByTestId(wrapper.toJSON(), 'FooterRowMock')) === null || _getByTestId29 === void 0 ? void 0 : _getByTestId29.children).toHaveLength(props.columnSet.size);
+        expect((_getByTestId30 = getByTestId(wrapper.toJSON(), 'FooterRowMock')) === null || _getByTestId30 === void 0 ? void 0 : (_getByTestId30$childr = _getByTestId30.children) === null || _getByTestId30$childr === void 0 ? void 0 : (_getByTestId30$childr2 = _getByTestId30$childr[0]) === null || _getByTestId30$childr2 === void 0 ? void 0 : _getByTestId30$childr2.type).toEqual('td');
+        expect((_getByTestId31 = getByTestId(wrapper.toJSON(), 'FooterRowMock')) === null || _getByTestId31 === void 0 ? void 0 : (_getByTestId31$childr = _getByTestId31.children) === null || _getByTestId31$childr === void 0 ? void 0 : (_getByTestId31$childr2 = _getByTestId31$childr[0]) === null || _getByTestId31$childr2 === void 0 ? void 0 : (_getByTestId31$childr3 = _getByTestId31$childr2.props) === null || _getByTestId31$childr3 === void 0 ? void 0 : _getByTestId31$childr3.className).not.toEqual('custom-td');
+        expect((_getByTestId32 = getByTestId(wrapper.toJSON(), 'FooterRowMock')) === null || _getByTestId32 === void 0 ? void 0 : (_getByTestId32$childr = _getByTestId32.children) === null || _getByTestId32$childr === void 0 ? void 0 : (_getByTestId32$childr2 = _getByTestId32$childr[props.columnSet.size - 1]) === null || _getByTestId32$childr2 === void 0 ? void 0 : (_getByTestId32$childr3 = _getByTestId32$childr2.props) === null || _getByTestId32$childr3 === void 0 ? void 0 : _getByTestId32$childr3.className).toEqual('custom-td');
+      });
+    });
+  });
+  describe('data manipulators', function () {
+    describe('#generateColumns', function () {
+      var columns;
+      var addColumns;
+      var alterColumns;
+      beforeEach(function () {
+        columns = [{
+          value: 'a',
+          title: 'A'
+        }];
+        addColumns = [{
+          value: 'b',
+          title: 'B'
+        }];
+        alterColumns = {};
+      });
+      test('combines the column config and additional columns', function () {
+        var total = columns.length + addColumns.length;
+        expect((0, _Table.generateColumns)(columns, addColumns, alterColumns).size).toBe(total);
+      });
+      test('alters columns with config', function () {
+        alterColumns.a = {
+          sortable: true
+        };
+        var columnConfig = (0, _Table.generateColumns)(columns, addColumns, alterColumns);
+        var column = columnConfig.find(function (c) {
+          return c.get('value') === columns[0].value;
+        });
+        expect(column.get('sortable')).toBeTruthy();
+      });
+      test('alters columns does not change value key', function () {
+        alterColumns.a = {
+          value: 'c'
+        };
+        var columnConfig = (0, _Table.generateColumns)(columns, addColumns, alterColumns);
+        var column = columnConfig.find(function (c) {
+          return c.get('value') === 'a';
+        });
+        expect(column).not.toBeUndefined();
+      });
+    });
+    describe('#sortColumns', function () {
+      test('sort columns returns expected sort order', function () {
+        var columns = (0, _immutable.List)([(0, _immutable.Map)({
+          value: 'a',
+          title: 'A'
+        }), (0, _immutable.Map)({
+          value: 'b',
+          title: 'B'
+        }), (0, _immutable.Map)({
+          value: 'c',
+          title: 'C'
+        })]);
+        var columnSet = (0, _immutable.List)(['b', 'a']);
+        expect((0, _Table.sortColumns)(columns, columnSet).toJS().map(function (c) {
+          return c.value;
+        }).join('')).toBe('bca');
+      });
+    });
+    describe('#getToggleableColumns', function () {
+      test('toggleable columns list is correct', function () {
+        var columns = (0, _immutable.List)([(0, _immutable.Map)({
+          value: 'a',
+          title: 'A',
+          toggleable: true
+        }), (0, _immutable.Map)({
+          value: 'b',
+          title: 'B'
+        }), (0, _immutable.Map)({
+          value: 'c',
+          title: 'C'
+        }), (0, _immutable.Map)({
+          value: 'd'
+        })]);
+        var columnSet = (0, _immutable.List)(['a', 'b', 'd']);
+        expect((0, _Table.getToggleableColumns)(columns, columnSet, 'table-key').toJS().map(function (c) {
+          return c.value;
+        }).join('')).toBe('ab');
+      });
+    });
+    xdescribe('#extractColumnComponents', function () {
+      var columns, addColumns, alterColumns;
+      beforeEach(function () {
+        columns = [{
+          value: 'first'
+        }, {
+          value: 'second',
+          components: {
+            BodyCell: 'two'
+          }
+        }, {
+          value: 'third'
+        }];
+        addColumns = [{
+          value: 'fourth'
+        }, {
+          value: 'fifth',
+          components: {
+            BodyCell: 'five'
+          }
+        }];
+        alterColumns = {
+          third: {
+            components: {
+              BodyCell: 'three'
+            }
+          }
+        };
+      });
+      xtest('returns a map of components with overrides', function () {
+        var result = (0, _Table.extractColumnComponents)({
+          columns: columns,
+          addColumns: addColumns,
+          alterColumns: alterColumns
+        });
+        console.log(columns);
+        expect(result.toJS()).toBe([]);
+      });
+    });
+  });
+});