@activecollab/components 1.0.408 → 1.0.410

package/dist/esm/components/Tables/DataTable.spec.js

@@ -0,0 +1,788 @@
+import * as indexExports from "./index";
+import { SortDirection } from "./index";
+import React from "react";
+import { DataTable } from "./DataTable";
+import { shallow, mount } from "enzyme";
+describe("<DataTable/>", function () {
+  it("should have default export for module", function () {
+    expect(!!indexExports.DataTable).toBe(true);
+  });
+  it("should have displayName", function () {
+    expect(DataTable.displayName).toBe("DataTable");
+  });
+  it("should have className c-data-table", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+      header: [],
+      rows: []
+    }));
+    expect(wrapper.find("StyledDataTable").hasClass("c-data-table")).toBe(true);
+  });
+  it("should render empty cells", function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+      header: [],
+      rows: []
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("should render 2 cells", function () {
+    var header = [{
+      key: "id",
+      label: "ID"
+    }, {
+      key: "name",
+      label: "Name"
+    }];
+    var rows = [{
+      id: "1",
+      name: "John Doe"
+    }, {
+      id: "2",
+      name: "John Smith"
+    }];
+    var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      rows: rows
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("should render empty cell when wrong key is passed", function () {
+    var header = [{
+      key: "test",
+      label: "ID"
+    }, {
+      key: "name",
+      label: "Name"
+    }];
+    var rows = [{
+      id: "1",
+      name: "John Doe"
+    }, {
+      id: "2",
+      name: "John Smith"
+    }];
+    var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      rows: rows
+    }));
+    expect(wrapper.find("Tbody").find("tr").first().find("td").first().text()).toBe("");
+    expect(wrapper.find("Tbody").find("tr").first().find("td").last().text()).toBe("John Doe");
+    expect(wrapper.find("Tbody").find("tr").at(1).find("td").first().text()).toBe("");
+    expect(wrapper.find("Tbody").find("tr").at(1).find("td").last().text()).toBe("John Smith");
+  });
+  it("should not sort dataTable on initial render if defaultSortKey is not passed", function () {
+    var header = [{
+      key: "test",
+      label: "ID"
+    }, {
+      key: "name",
+      label: "Name"
+    }];
+    var rows = [{
+      id: "1",
+      name: "John Doe"
+    }, {
+      id: "2",
+      name: "John Smith"
+    }, {
+      id: "3",
+      name: "Adam Smith"
+    }, {
+      id: "4",
+      name: "Samuel Priest"
+    }];
+    var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      rows: rows
+    }));
+    var body = wrapper.find("Tbody");
+    var firstRow = body.find("tr").first();
+    var secondRow = body.find("tr").at(1);
+    var thirdRow = body.find("tr").at(2);
+    var fourthRow = body.find("tr").last();
+    expect(firstRow.find("td").last().text()).toBe("John Doe");
+    expect(secondRow.find("td").last().text()).toBe("John Smith");
+    expect(thirdRow.find("td").last().text()).toBe("Adam Smith");
+    expect(fourthRow.find("td").last().text()).toBe("Samuel Priest");
+  });
+  it("should not sort dataTable on initial render if defaultSortKey is passed but sortDirection is not passed", function () {
+    var header = [{
+      key: "test",
+      label: "ID"
+    }, {
+      key: "name",
+      label: "Name"
+    }];
+    var rows = [{
+      id: "1",
+      name: "John Doe"
+    }, {
+      id: "2",
+      name: "John Smith"
+    }, {
+      id: "3",
+      name: "Adam Smith"
+    }, {
+      id: "4",
+      name: "Samuel Priest"
+    }];
+    var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      rows: rows,
+      sortBy: "name"
+    }));
+    var body = wrapper.find("Tbody");
+    var firstRow = body.find("tr").first();
+    var secondRow = body.find("tr").at(1);
+    var thirdRow = body.find("tr").at(2);
+    var fourthRow = body.find("tr").last();
+    expect(firstRow.find("td").last().text()).toBe("John Doe");
+    expect(secondRow.find("td").last().text()).toBe("John Smith");
+    expect(thirdRow.find("td").last().text()).toBe("Adam Smith");
+    expect(fourthRow.find("td").last().text()).toBe("Samuel Priest");
+  });
+  it("should sort dataTable on initial render if both defaultSortKey and sortDirection (ASC) are passed", function () {
+    var header = [{
+      key: "test",
+      label: "ID"
+    }, {
+      key: "name",
+      label: "Name"
+    }];
+    var rows = [{
+      id: "1",
+      name: "John Doe"
+    }, {
+      id: "2",
+      name: "John Smith"
+    }, {
+      id: "3",
+      name: "Adam Smith"
+    }, {
+      id: "4",
+      name: "Samuel Priest"
+    }];
+    var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      rows: rows,
+      sortBy: "name",
+      sortDirection: SortDirection.Asc
+    }));
+    var body = wrapper.find("Tbody");
+    var firstRow = body.find("tr").first();
+    var secondRow = body.find("tr").at(1);
+    var thirdRow = body.find("tr").at(2);
+    var fourthRow = body.find("tr").last();
+    expect(firstRow.find("td").last().text()).toBe("Adam Smith");
+    expect(secondRow.find("td").last().text()).toBe("John Doe");
+    expect(thirdRow.find("td").last().text()).toBe("John Smith");
+    expect(fourthRow.find("td").last().text()).toBe("Samuel Priest");
+  });
+  it("should sort dataTable on initial render if both defaultSortKey and sortDirection (DESC) are passed", function () {
+    var header = [{
+      key: "test",
+      label: "ID"
+    }, {
+      key: "name",
+      label: "Name"
+    }];
+    var rows = [{
+      id: "1",
+      name: "John Doe"
+    }, {
+      id: "2",
+      name: "John Smith"
+    }, {
+      id: "3",
+      name: "Adam Smith"
+    }, {
+      id: "4",
+      name: "Samuel Priest"
+    }];
+    var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      rows: rows,
+      sortBy: "name",
+      sortDirection: SortDirection.Desc
+    }));
+    var body = wrapper.find("Tbody");
+    var firstRow = body.find("tr").first();
+    var secondRow = body.find("tr").at(1);
+    var thirdRow = body.find("tr").at(2);
+    var fourthRow = body.find("tr").last();
+    expect(firstRow.find("td").last().text()).toBe("Samuel Priest");
+    expect(secondRow.find("td").last().text()).toBe("John Smith");
+    expect(thirdRow.find("td").last().text()).toBe("John Doe");
+    expect(fourthRow.find("td").last().text()).toBe("Adam Smith");
+  });
+  it("click on the header sorts the data", function () {
+    var header = [{
+      key: "test",
+      label: "ID"
+    }, {
+      key: "name",
+      label: "Name",
+      sortable: true
+    }];
+    var rows = [{
+      id: "1",
+      name: "John Doe"
+    }, {
+      id: "2",
+      name: "John Smith"
+    }, {
+      id: "3",
+      name: "Adam Smith"
+    }, {
+      id: "4",
+      name: "Samuel Priest"
+    }];
+    var wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      rows: rows
+    }));
+    var nameHeader = wrapper.find("th").last().find("div").first();
+    nameHeader.simulate("click");
+    var body = wrapper.find("Tbody");
+    var firstRow = body.find("tr").first();
+    var secondRow = body.find("tr").at(1);
+    var thirdRow = body.find("tr").at(2);
+    var fourthRow = body.find("tr").last();
+    expect(firstRow.find("td").last().text()).toBe("Adam Smith");
+    expect(secondRow.find("td").last().text()).toBe("John Doe");
+    expect(thirdRow.find("td").last().text()).toBe("John Smith");
+    expect(fourthRow.find("td").last().text()).toBe("Samuel Priest");
+    nameHeader.simulate("click");
+    expect(firstRow.find("td").last().text()).toBe("Samuel Priest");
+    expect(secondRow.find("td").last().text()).toBe("John Smith");
+    expect(thirdRow.find("td").last().text()).toBe("John Doe");
+    expect(fourthRow.find("td").last().text()).toBe("Adam Smith");
+    nameHeader.simulate("click");
+    expect(firstRow.find("td").last().text()).toBe("Adam Smith");
+    expect(secondRow.find("td").last().text()).toBe("John Doe");
+    expect(thirdRow.find("td").last().text()).toBe("John Smith");
+    expect(fourthRow.find("td").last().text()).toBe("Samuel Priest");
+    wrapper.unmount();
+  });
+  it("click on the header sorts the numerical data", function () {
+    var header = [{
+      key: "id",
+      label: "ID"
+    }, {
+      key: "name",
+      label: "Name",
+      sortable: true
+    }, {
+      key: "hours",
+      label: "Hours",
+      sortable: true
+    }];
+    var rows = [{
+      id: "1",
+      name: "John Doe",
+      hours: 20
+    }, {
+      id: "2",
+      name: "John Smith",
+      hours: 35
+    }, {
+      id: "3",
+      name: "Adam Smith",
+      hours: 27
+    }, {
+      id: "4",
+      name: "Samuel Priest",
+      hours: 10
+    }, {
+      id: "5",
+      name: "Marcus Severus",
+      hours: 22.5
+    }, {
+      id: "6",
+      name: "Immanuel Kant",
+      hours: 5.21
+    }, {
+      id: "7",
+      name: "Hegel",
+      hours: 5.19
+    }];
+    var wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      rows: rows
+    }));
+    var hoursHeader = wrapper.find("th").last().find("div").first();
+    hoursHeader.simulate("click");
+    var body = wrapper.find("Tbody");
+    expect(body.find("tr").at(0).find("td").last().text()).toBe("5.19");
+    expect(body.find("tr").at(1).find("td").last().text()).toBe("5.21");
+    expect(body.find("tr").at(2).find("td").last().text()).toBe("10");
+    expect(body.find("tr").at(3).find("td").last().text()).toBe("20");
+    expect(body.find("tr").at(4).find("td").last().text()).toBe("22.5");
+    expect(body.find("tr").at(5).find("td").last().text()).toBe("27");
+    expect(body.find("tr").at(6).find("td").last().text()).toBe("35");
+    hoursHeader.simulate("click");
+    expect(body.find("tr").at(0).find("td").last().text()).toBe("35");
+    expect(body.find("tr").at(1).find("td").last().text()).toBe("27");
+    expect(body.find("tr").at(2).find("td").last().text()).toBe("22.5");
+    expect(body.find("tr").at(3).find("td").last().text()).toBe("20");
+    expect(body.find("tr").at(4).find("td").last().text()).toBe("10");
+    expect(body.find("tr").at(5).find("td").last().text()).toBe("5.21");
+    expect(body.find("tr").at(6).find("td").last().text()).toBe("5.19");
+    hoursHeader.simulate("click");
+    expect(body.find("tr").at(0).find("td").last().text()).toBe("5.19");
+    expect(body.find("tr").at(1).find("td").last().text()).toBe("5.21");
+    expect(body.find("tr").at(2).find("td").last().text()).toBe("10");
+    expect(body.find("tr").at(3).find("td").last().text()).toBe("20");
+    expect(body.find("tr").at(4).find("td").last().text()).toBe("22.5");
+    expect(body.find("tr").at(5).find("td").last().text()).toBe("27");
+    expect(body.find("tr").at(6).find("td").last().text()).toBe("35");
+    wrapper.unmount();
+  });
+  it("click on sortable table header calls the provided sort callback", function () {
+    var sortCallback = jest.fn();
+    var header = [{
+      key: "id",
+      label: "ID"
+    }, {
+      key: "name",
+      label: "Name",
+      sortable: true
+    }];
+    var rows = [{
+      id: "1",
+      name: "John"
+    }, {
+      id: "2",
+      name: "John"
+    }, {
+      id: "3",
+      name: "Adam"
+    }, {
+      id: "4",
+      name: "Samuel"
+    }];
+    var wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      rows: rows,
+      onSortCallback: sortCallback
+    }));
+    expect(sortCallback).not.toBeCalled();
+    var nameHeader = wrapper.find("th").last().find("div").first();
+    nameHeader.simulate("click");
+    expect(sortCallback).toBeCalled();
+  });
+  it("click on active header cycles between ASC and DESC, click on the non-active header always sorts with ASC", function () {
+    var header = [{
+      key: "id",
+      label: "ID"
+    }, {
+      key: "name",
+      label: "Name",
+      sortable: true
+    }, {
+      key: "hours",
+      label: "Hours",
+      sortable: true
+    }];
+    var rows = [{
+      id: "1",
+      name: "John Doe",
+      hours: 20
+    }, {
+      id: "2",
+      name: "John Smith",
+      hours: 35
+    }, {
+      id: "3",
+      name: "Adam Smith",
+      hours: 27
+    }, {
+      id: "4",
+      name: "Samuel Priest",
+      hours: 10
+    }, {
+      id: "5",
+      name: "Marcus Severus",
+      hours: 22.5
+    }, {
+      id: "6",
+      name: "Immanuel Kant",
+      hours: 5.21
+    }, {
+      id: "7",
+      name: "Hegel",
+      hours: 5.19
+    }];
+    var wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      rows: rows
+    }));
+    var hoursHeader = wrapper.find("th").last().find("div").first();
+    hoursHeader.simulate("click");
+    var body = wrapper.find("Tbody");
+    expect(body.find("tr").at(0).find("td").last().text()).toBe("5.19");
+    expect(body.find("tr").at(1).find("td").last().text()).toBe("5.21");
+    expect(body.find("tr").at(2).find("td").last().text()).toBe("10");
+    expect(body.find("tr").at(3).find("td").last().text()).toBe("20");
+    expect(body.find("tr").at(4).find("td").last().text()).toBe("22.5");
+    expect(body.find("tr").at(5).find("td").last().text()).toBe("27");
+    expect(body.find("tr").at(6).find("td").last().text()).toBe("35");
+    var nameHeader = wrapper.find("th").at(1).find("div").first();
+    nameHeader.simulate("click");
+    expect(body.find("tr").at(0).find("td").at(1).text()).toBe("Adam Smith");
+    expect(body.find("tr").at(1).find("td").at(1).text()).toBe("Hegel");
+    expect(body.find("tr").at(2).find("td").at(1).text()).toBe("Immanuel Kant");
+    expect(body.find("tr").at(3).find("td").at(1).text()).toBe("John Doe");
+    expect(body.find("tr").at(4).find("td").at(1).text()).toBe("John Smith");
+    expect(body.find("tr").at(5).find("td").at(1).text()).toBe("Marcus Severus");
+    expect(body.find("tr").at(6).find("td").at(1).text()).toBe("Samuel Priest");
+    nameHeader.simulate("click");
+    expect(body.find("tr").at(0).find("td").at(1).text()).toBe("Samuel Priest");
+    expect(body.find("tr").at(1).find("td").at(1).text()).toBe("Marcus Severus");
+    expect(body.find("tr").at(2).find("td").at(1).text()).toBe("John Smith");
+    expect(body.find("tr").at(3).find("td").at(1).text()).toBe("John Doe");
+    expect(body.find("tr").at(4).find("td").at(1).text()).toBe("Immanuel Kant");
+    expect(body.find("tr").at(5).find("td").at(1).text()).toBe("Hegel");
+    expect(body.find("tr").at(6).find("td").at(1).text()).toBe("Adam Smith");
+    hoursHeader.simulate("click");
+    expect(body.find("tr").at(0).find("td").last().text()).toBe("5.19");
+    expect(body.find("tr").at(1).find("td").last().text()).toBe("5.21");
+    expect(body.find("tr").at(2).find("td").last().text()).toBe("10");
+    expect(body.find("tr").at(3).find("td").last().text()).toBe("20");
+    expect(body.find("tr").at(4).find("td").last().text()).toBe("22.5");
+    expect(body.find("tr").at(5).find("td").last().text()).toBe("27");
+    expect(body.find("tr").at(6).find("td").last().text()).toBe("35");
+    wrapper.unmount();
+  });
+  it("should call render callback", function () {
+    var renderCallback = jest.fn(function (row) {
+      var _row$firstName = row.firstName,
+        firstName = _row$firstName === void 0 ? "Unknown" : _row$firstName,
+        _row$lastName = row.lastName,
+        lastName = _row$lastName === void 0 ? "Unknown" : _row$lastName,
+        _row$id = row.id,
+        id = _row$id === void 0 ? 0 : _row$id;
+      return id + " " + firstName + " " + lastName;
+    });
+    var header = [{
+      key: "ID",
+      label: "ID"
+    }, {
+      key: "firstName",
+      label: "Name",
+      renderCallback: renderCallback
+    }];
+    var rows = [{
+      id: "1",
+      firstName: "John",
+      lastName: "Doe"
+    }, {
+      id: "2",
+      firstName: "John",
+      lastName: "Smith"
+    }, {
+      id: "3",
+      firstName: "Adam",
+      lastName: "Smith"
+    }, {
+      id: "4",
+      firstName: "Samuel",
+      lastName: "Priest"
+    }];
+    var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      rows: rows
+    }));
+    var body = wrapper.find("Tbody");
+    expect(body.find("tr").at(0).find("td").last().text()).toBe("1 John Doe");
+    expect(body.find("tr").at(1).find("td").last().text()).toBe("2 John Smith");
+    expect(body.find("tr").at(2).find("td").last().text()).toBe("3 Adam Smith");
+    expect(body.find("tr").at(3).find("td").last().text()).toBe("4 Samuel Priest");
+    expect(renderCallback).toBeCalledTimes(4);
+  });
+  it("if there are no results it should render No data or call provided callback", function () {
+    var noResultsCallback = jest.fn();
+    var header = [{
+      key: "id",
+      label: "ID"
+    }, {
+      key: "firstName",
+      label: "Name"
+    }];
+    var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      rows: []
+    }));
+    expect(wrapper.find("tr").find("td").last().text()).toBe("There is no data.");
+    expect(noResultsCallback).not.toHaveBeenCalled();
+    shallow( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      rows: [],
+      noResultsCallback: noResultsCallback
+    }));
+    expect(noResultsCallback).toHaveBeenCalled();
+  });
+  describe("sorting grouped DataTable", function () {
+    var header;
+    var rows;
+    beforeEach(function () {
+      header = [{
+        key: "company",
+        label: "Company",
+        sortable: true
+      }, {
+        key: "firstName",
+        label: "Name",
+        renderCallback: function renderCallback(row) {
+          return row.firstName + " " + row.lastName;
+        },
+        sortable: true
+      }];
+      rows = [{
+        company: "Neon LTD",
+        firstName: "John",
+        lastName: "Doe",
+        sector: "one"
+      }, {
+        company: "Asus",
+        firstName: "John",
+        lastName: "Smith",
+        sector: "one"
+      }, {
+        company: "Dell",
+        firstName: "Adam",
+        lastName: "Smith",
+        sector: "one"
+      }, {
+        company: "HP",
+        firstName: "Samuel",
+        lastName: "Priest",
+        sector: null
+      }, {
+        company: "Dell",
+        firstName: "Joana",
+        lastName: "Doe",
+        sector: null
+      }, {
+        company: "HP",
+        firstName: "Serena",
+        lastName: "Smith",
+        sector: null
+      }, {
+        company: "Apple",
+        firstName: "Michael",
+        lastName: "Jackson",
+        sector: "two"
+      }, {
+        company: null,
+        firstName: "Samuel",
+        lastName: "Doe",
+        sector: "two"
+      }];
+    });
+    it("should render in groups", function () {
+      var wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
+        header: header,
+        rows: rows,
+        groupBy: "company",
+        sortBy: "company",
+        sortDirection: SortDirection.Asc,
+        emptyValue: {
+          company: "empty"
+        }
+      }));
+      var nameHeader = wrapper.find("th").first().find("div").first();
+      nameHeader.simulate("click");
+      nameHeader.simulate("click");
+      var group1 = wrapper.find("tbody.c-table__group").at(0);
+      var group2 = wrapper.find("tbody.c-table__group").at(1);
+      var group3 = wrapper.find("tbody.c-table__group").at(2);
+      var group4 = wrapper.find("tbody.c-table__group").at(3);
+      var group5 = wrapper.find("tbody.c-table__group").at(4);
+      var group6 = wrapper.find("tbody.c-table__group").at(5);
+      expect(group1.find(".c-table__cell").at(0).text()).toBe("Apple");
+      expect(group2.find(".c-table__cell").at(0).text()).toBe("Asus");
+      expect(group3.find(".c-table__cell").at(0).text()).toBe("Dell");
+      expect(group3.find(".c-table__cell").at(2).text()).toBe("Dell");
+      expect(group4.find(".c-table__cell").at(0).text()).toBe("HP");
+      expect(group4.find(".c-table__cell").at(2).text()).toBe("HP");
+      expect(group5.find(".c-table__cell").at(0).text()).toBe("Neon LTD");
+      expect(group6.find(".c-table__cell").at(0).text()).toBe("empty");
+      wrapper.unmount();
+    });
+    it("should render in groups with different sort", function () {
+      var wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
+        header: header,
+        rows: rows,
+        groupBy: "company",
+        sortBy: "firstName",
+        sortDirection: SortDirection.Asc
+      }));
+      var nameHeader = wrapper.find("th").last().find("div").first();
+      nameHeader.simulate("click");
+      nameHeader.simulate("click");
+      var group1 = wrapper.find("tbody.c-table__group").at(0);
+      var group2 = wrapper.find("tbody.c-table__group").at(1);
+      var group3 = wrapper.find("tbody.c-table__group").at(2);
+      var group4 = wrapper.find("tbody.c-table__group").at(3);
+      var group5 = wrapper.find("tbody.c-table__group").at(4);
+      var group6 = wrapper.find("tbody.c-table__group").at(5);
+      expect(group1.find("tr").first().text()).toBe("DellAdam Smith");
+      expect(group1.find("tr").last().text()).toBe("DellJoana Doe");
+      expect(group2.find("tr").first().text()).toBe("Neon LTDJohn Doe");
+      expect(group3.find("tr").first().text()).toBe("AsusJohn Smith");
+      expect(group4.find("tr").first().text()).toBe("AppleMichael Jackson");
+      expect(group5.find("tr").first().text()).toBe("HPSamuel Priest");
+      expect(group5.find("tr").last().text()).toBe("HPSerena Smith");
+      expect(group6.find("tr").last().text()).toBe("Samuel Doe");
+      wrapper.unmount();
+    });
+    it("should handle on mouse over and out", function () {
+      var wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
+        header: header,
+        rows: rows,
+        sortBy: "firstName",
+        sortDirection: SortDirection.Asc
+      }));
+      var firstCell = wrapper.find(".c-table__cell").first();
+      expect(firstCell.exists()).toBeTruthy();
+      firstCell.simulate("mouseover");
+      expect(firstCell.hasClass("c-table__cell--hovered"));
+      firstCell.simulate("mouseleave");
+      expect(firstCell.hasClass("c-table__cell--hovered")).toBeFalsy();
+    });
+    it("should render groups with no sort", function () {
+      var wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
+        header: header,
+        rows: rows,
+        groupBy: "company",
+        emptyValue: {
+          company: "Microsoft"
+        }
+      }));
+      var group1 = wrapper.find("tbody.c-table__group").at(0);
+      var group2 = wrapper.find("tbody.c-table__group").at(1);
+      var group3 = wrapper.find("tbody.c-table__group").at(2);
+      var group4 = wrapper.find("tbody.c-table__group").at(3);
+      var group5 = wrapper.find("tbody.c-table__group").at(4);
+      var group6 = wrapper.find("tbody.c-table__group").at(5);
+      expect(group1.find("tr").at(0).find("td").first().text()).toBe("Neon LTD");
+      expect(group2.find("tr").at(0).find("td").first().text()).toBe("Asus");
+      expect(group3.find("tr").at(0).find("td").first().text()).toBe("Dell");
+      expect(group3.find("tr").at(1).find("td").first().text()).toBe("Dell");
+      expect(group4.find("tr").at(0).find("td").first().text()).toBe("HP");
+      expect(group4.find("tr").at(1).find("td").first().text()).toBe("HP");
+      expect(group5.find("tr").at(0).find("td").first().text()).toBe("Apple");
+      expect(group6.find("tr").at(0).find("td").first().text()).toBe("Microsoft");
+      wrapper.unmount();
+    });
+    it("should render groups with asc sort and empty", function () {
+      var wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
+        header: header,
+        rows: rows,
+        groupBy: "sector",
+        emptyValue: {
+          sector: "empty"
+        },
+        sortBy: "sector",
+        sortDirection: SortDirection.Asc
+      }));
+      var group1 = wrapper.find("tbody.c-table__group").at(0);
+      var group2 = wrapper.find("tbody.c-table__group").at(1);
+      var group3 = wrapper.find("tbody.c-table__group").at(2);
+      expect(group1.find("tr").at(0).find("td").first().text()).toBe("Neon LTD");
+      expect(group2.find("tr").at(0).find("td").first().text()).toBe("Apple");
+      expect(group3.find("tr").at(0).find("td").first().text()).toBe("HP");
+      expect(group3.find("tr").at(1).find("td").first().text()).toBe("Dell");
+      wrapper.unmount();
+    });
+    it("should render groups with desc sort and empty", function () {
+      var wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
+        header: header,
+        rows: rows,
+        groupBy: "sector",
+        emptyValue: {
+          sector: "empty"
+        },
+        sortBy: "sector",
+        sortDirection: SortDirection.Desc
+      }));
+      var group1 = wrapper.find("tbody.c-table__group").at(0);
+      var group2 = wrapper.find("tbody.c-table__group").at(1);
+      var group3 = wrapper.find("tbody.c-table__group").at(2);
+      expect(group1.find("tr").at(0).find("td").first().text()).toBe("HP");
+      expect(group2.find("tr").at(0).find("td").first().text()).toBe("Apple");
+      expect(group3.find("tr").at(0).find("td").first().text()).toBe("Neon LTD");
+      expect(group3.find("tr").at(1).find("td").first().text()).toBe("Asus");
+      wrapper.unmount();
+    });
+    it("should expand grouped", function () {
+      var groupHead = function groupHead(r, k) {
+        return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+          colSpan: 2
+        }, k, " ", r.length));
+      };
+      var wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
+        header: header,
+        rows: rows,
+        groupBy: "company",
+        groupHead: groupHead,
+        isCollapsible: true
+      }));
+      var head1 = wrapper.find("tbody.c-table__grouped__head").at(0);
+      var head2 = wrapper.find("tbody.c-table__grouped__head").at(1);
+      var head3 = wrapper.find("tbody.c-table__grouped__head").at(2);
+      var head4 = wrapper.find("tbody.c-table__grouped__head").at(3);
+      var head5 = wrapper.find("tbody.c-table__grouped__head").at(4);
+      var head6 = wrapper.find("tbody.c-table__grouped__head").at(5);
+      expect(head1.text()).toBe("Neon LTD 1");
+      expect(head2.text()).toBe("Asus 1");
+      expect(head3.text()).toBe("Dell 2");
+      expect(head4.text()).toBe("HP 2");
+      expect(head5.text()).toBe("Apple 1");
+      expect(head6.text()).toBe(" 1");
+      expect(wrapper.find(".c-table__grouped__head--expanded").exists()).toBe(false);
+      var toggleIcon1 = wrapper.find(".c-table--toggle-collapsed").at(0);
+      expect(toggleIcon1.exists()).toBe(true);
+      toggleIcon1.simulate("click");
+      expect(wrapper.find(".c-table__grouped__head--expanded").exists()).toBe(true);
+      wrapper.unmount();
+    });
+    it("should expand all collapsed", function () {
+      var groupHead = function groupHead(r, k) {
+        return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+          colSpan: 2
+        }, k, " ", r.length));
+      };
+      var wrapper = mount( /*#__PURE__*/React.createElement(DataTable, {
+        header: header,
+        rows: rows,
+        groupBy: "company",
+        groupHead: groupHead,
+        isCollapsible: true
+      }));
+      expect(wrapper.find(".c-table__grouped__head--expanded").exists()).toBe(false);
+      wrapper.find("[data-test=\"toggle-collapse\"]").simulate("click");
+      expect(wrapper.find(".c-table__grouped__head--expanded").exists()).toBe(true);
+      wrapper.find("[data-test=\"toggle-collapse\"]").simulate("click");
+      expect(wrapper.find(".c-table__grouped__head--expanded").exists()).toBe(false);
+      wrapper.unmount();
+    });
+  });
+  it("should handle loading state", function () {
+    var header = [{
+      key: "test",
+      label: "ID"
+    }, {
+      key: "name",
+      label: "Name"
+    }];
+    var wrapper = shallow( /*#__PURE__*/React.createElement(DataTable, {
+      header: header,
+      sortBy: "name",
+      loading: true,
+      loadingRows: 5
+    }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+//# sourceMappingURL=DataTable.spec.js.map