import React from "react";
import Adapter from "enzyme-adapter-react-16";
import { mount, configure } from "enzyme";

import Table from "./Table";
import Column from "./Column";

const dataFixture = [{ name: "foo" }, { name: "bar" }];

describe("Table", function() {
  configure({ adapter: new Adapter() });

  describe("Selection", () => {
    test("Checking the Select All checkbox of a table should select all it's rows", function() {
      const component = mount(
        <Table selectableRows data={dataFixture}>
          <Column title="Name" text={row => row.name} />
        </Table>
      );
      const selectAllButton = component.find("th input");
      selectAllButton.simulate("change", { target: { checked: true } });
      const newState = component.state();
      expect(newState.selectedRows.length).toBe(dataFixture.length);
    });

    test("Unchecking the Select All checkbox of a table should select all it's rows", function() {
      const component = mount(
        <Table selectableRows data={dataFixture}>
          <Column title="Name" text={row => row.name} />
        </Table>
      );
      component.setState({ selectedRows: [0, 1] });
      expect(component.state().selectedRows.length).toBe(dataFixture.length);

      const selectAllButton = component.find("th input");
      selectAllButton.simulate("change", { target: { checked: false } });
      expect(component.state().selectedRows.length).toBe(0);
    });

    test("Selecting a row should change the selectedRows state", function() {
      const component = mount(
        <Table selectableRows data={dataFixture}>
          <Column title="Name" text={row => row.name} />
        </Table>
      );
      const firstRowCheckbox = component.find("td input").first();
      expect(component.state().selectedRows.length).toBe(0);

      firstRowCheckbox.simulate("change", { target: { checked: true } });
      expect(component.state().selectedRows.length).toBe(1);
    });

    test("Deselecting a row should change the selectedRows state", function() {
      const component = mount(
        <Table selectableRows data={dataFixture}>
          <Column title="Name" text={row => row.name} />
        </Table>
      );
      component.setState({ selectedRows: ["0,"] });
      const firstRowCheckbox = component.find("td input").first();
      expect(component.state().selectedRows.length).toBe(1);

      firstRowCheckbox.simulate("change", { target: { checked: false } });
      expect(component.state().selectedRows.length).toBe(0);
    });

    test("Table with selection header bar should clear all selected row if the passed clearFunction is called", function() {
      const selectionHeaderRenderer = (data, clearFunction) => (
        <button id="testButton" onClick={clearFunction} />
      );
      const component = mount(
        <Table
          data={dataFixture}
          selectableRows
          selectionHeader={selectionHeaderRenderer}
        >
          <Column clickable title="Name" text={row => row.name} />
        </Table>
      );
      const firstRowCheckbox = component.find("td input").first();
      firstRowCheckbox.simulate("change", { target: { checked: true } });

      const testButton = component.find("#testButton");
      expect(component.state().selectedRows.length).toBe(1);

      testButton.simulate("click");
      expect(component.state().selectedRows.length).toBe(0);
    });
  });

  describe("Expandable Row Groups", () => {
    test("Click on the expand button should expand/collapse a group", () => {
      const component = mount(
        <Table
          data={[{ name: "Foo", items: [{ name: "Fooson" }] }, { name: "Bar" }]}
          rowGroupKey="items"
          collapsed
        >
          <Column title="Name" text={row => row.name} />
        </Table>
      );
      const firstExpandButton = component.find("td Button").first();

      firstExpandButton.props().onClick({});
      expect(component.state().expandedRows.length).toBe(1);

      firstExpandButton.props().onClick({});
      expect(component.state().expandedRows.length).toBe(0);
    });
  });

  describe("Headers", () => {
    test("Clicking on a column title on a table without onTitleClick should return null", function() {
      const component = mount(
        <Table data={dataFixture}>
          <Column clickable title="Name" text={row => row.name} />
        </Table>
      );
      const firstTitleLink = component.find("th Link").first();

      const preventDefaultMock = jest.fn();
      const clickReturn = firstTitleLink
        .props()
        .onClick({ preventDefault: preventDefaultMock });

      firstTitleLink.simulate("click", { preventDefault: preventDefaultMock });

      expect(preventDefaultMock).toBeCalled();
      expect(clickReturn).toBe(null);
    });

    test("Clicking on a column title on a clickable column should call onTitleClick", function() {
      const preventDefaultMock = jest.fn();
      const onTitleClickMock = jest.fn();
      const component = mount(
        <Table data={dataFixture} onTitleClick={onTitleClickMock}>
          <Column clickable title="Name" text={row => row.name} />
        </Table>
      );
      const firstTitleLink = component.find("th Link").first();

      firstTitleLink.props().onClick({ preventDefault: preventDefaultMock });

      expect(preventDefaultMock).toBeCalled();
      expect(onTitleClickMock).toBeCalled();
    });
  });
});

@@ -3396,32 +3396,801 @@
 toBe(0);%0A    %7D);
+%0A%0A    test(%22Table with selection header bar should send selected data for rows added after mount%22, () =%3E %7B%0A      const selectionHeaderRenderer = jest.fn();%0A      const component = mount(%0A        %3CTable%0A          data=%7BdataFixture%7D%0A          selectableRows%0A          selectionHeader=%7BselectionHeaderRenderer%7D%0A        %3E%0A          %3CColumn clickable title=%22Name%22 text=%7Brow =%3E row.name%7D /%3E%0A        %3C/Table%3E%0A      );%0A%0A      const newRow = %7B name: %22New Row%22 %7D;%0A      const newData = dataFixture.concat(newRow);%0A      component.setProps(%7B data: newData %7D);%0A%0A      const lastRowCheckbox = component.find(%22td input%22).last();%0A      lastRowCheckbox.simulate(%22change%22, %7B target: %7B checked: true %7D %7D);%0A      expect(selectionHeaderRenderer.mock.calls%5B0%5D%5B0%5D).toEqual(%5BnewRow%5D);%0A    %7D);
 %0A  %7D);%0A%0A  descri

test if updated data props continues sending correct selected rows to selection header