/**
 * TEAM: frontend_infra
 * @flow
 */

// TODO: Fix this eslint issue on next edit. This is an autogenerated comment.
// eslint-disable-next-line flexport/no-legacy-dependencies
import {mount} from "enzyme";

import SimpleTable from "../table/SimpleTable";

const EXAMPLE_TABLE_DATA = [
  {
    count: 50,
    dimensions: "10.0x10.0x10.0",
    weight: 500.01,
    volume: 233.01,
    id: "0",
  },
  {
    count: 50,
    dimensions: "10.0x10.0x10.0",
    weight: 500.01,
    volume: 233.01,
    id: "1",
  },
  {count: 530, dimensions: "10.0x10.0x10.0", weight: 500, volume: 25, id: "2"},
];
const columnDefinitions = [
  {
    id: "0",
    header: "Count",
    getText: row => row.count.toString(),
  },
  {
    id: "1",
    header: "Dimensions (cm)",
    getText: row => row.dimensions,
  },
  {
    id: "2",
    header: "Weight (kg)",
    getText: row => row.weight.toString(),
  },
  {
    id: "3",
    header: "Volume (cm)",
    getText: row => row.volume.toString(),
  },
];
function mountTable() {
  return mount(
    <SimpleTable
      columnDefinitions={columnDefinitions}
      data={EXAMPLE_TABLE_DATA}
      getUniqueRowId={data => data.id}
    />
  );
}

describe("SimpleTable", () => {
  describe("creates a table and tests to see if it displays as expected", () => {
    const simpleTableComponent = mountTable();
    it(" should have just 1 table element", () => {
      const table = simpleTableComponent.find("table");
      expect(table).toHaveLength(1);
    });
    it("should have just 1 tbody tag", () => {
      const tbody = simpleTableComponent.find("tbody");
      expect(tbody).toHaveLength(1);
    });
    it("should have just 1 thead element", () => {
      const thead = simpleTableComponent.find("thead");
      expect(thead).toHaveLength(1);
    });
    it("should have just 1 tbody tag that has the same number of tr tags as data rows", () => {
      const tbody = simpleTableComponent.find("tbody");
      expect(tbody).toHaveLength(1);
      const rows = tbody.find("tr");
      expect(rows).toHaveLength(EXAMPLE_TABLE_DATA.length);
    });
    it("should have the same number of th tags as number of columns", () => {
      const thead = simpleTableComponent.find("thead");
      const headers = thead.find("th");
      expect(headers).toHaveLength(columnDefinitions.length);
    });
    it("should have each th tag's text equal the text of the column header", () => {
      const thead = simpleTableComponent.find("thead");
      const headers = thead.find("th");
      headers.forEach((th, index) => {
        expect(th.text()).toEqual(columnDefinitions[index].header);
      });
    });
    it("should have rows containing the correct content in the right order", () => {
      const tbody = simpleTableComponent.find("tbody");
      const rows = tbody.find("tr");
      rows.forEach((tr, rowIndex) => {
        const cells = tr.find("td");
        expect(cells).toHaveLength(columnDefinitions.length);
        expect(cells.at(0).text()).toEqual(
          EXAMPLE_TABLE_DATA[rowIndex].count.toString()
        );
        expect(cells.at(1).text()).toEqual(
          EXAMPLE_TABLE_DATA[rowIndex].dimensions
        );
        expect(cells.at(2).text()).toEqual(
          EXAMPLE_TABLE_DATA[rowIndex].weight.toString()
        );
        expect(cells.at(3).text()).toEqual(
          EXAMPLE_TABLE_DATA[rowIndex].volume.toString()
        );
      });
    });
  });
});