import { render, fireEvent } from "@testing-library/react";
import SortableTable from "./SortableTable";

const columns = [
  {
    field: "title",
    header: "Title",
  },
  {
    field: "score",
    header: "Score",
  },
];

const rows = [
  { title: "Post A", score: 5 },
  { title: "Post B", score: 3 },
  { title: "Post D", score: 9 },
  { title: "Post E", score: 8 },
  { title: "Post C", score: 1 },
];

test("the table headers", () => {
  render(
    <SortableTable rows={rows} columns={columns} defaultSort="score:desc" />
  );

  // You should have at least 2 assertions
  // Verify that the Title table header renders "Title"
  // Verify that the Score table header renders "Score (desc)"
});

test("rendering rows with a numeric field default sort in ascending order", () => {
  render(
    <SortableTable rows={rows} columns={columns} defaultSort="score:asc" />
  );

  // You should have at least 6 assertions
  // Verify that the table rows are rendered in the correct order
  // Verify that the correct table header has the correct sort direction
});

test("rendering rows with a numeric field default sort in descending order", () => {
  render(
    <SortableTable rows={rows} columns={columns} defaultSort="score:desc" />
  );

  // You should have at least 6 assertions
  // Verify that the table rows are rendered in the correct order
  // Verify that the correct table header has the correct sort direction
});

test("rendering rows with a string field default sort in ascending order", () => {
  render(
    <SortableTable rows={rows} columns={columns} defaultSort="title:asc" />
  );

  // You should have at least 6 assertions
  // Verify that the table rows are rendered in the correct order
  // Verify that the correct table header has the correct sort direction
});

test("rendering rows with a string field default sort in descending order", () => {
  render(
    <SortableTable rows={rows} columns={columns} defaultSort="title:desc" />
  );

  // You should have at least 6 assertions
  // Verify that the table rows are rendered in the correct order
  // Verify that the correct table header has the correct sort direction
});

test("clicking on a table header with the sort reverses the sort", () => {
  render(
    <SortableTable rows={rows} columns={columns} defaultSort="title:desc" />
  );

  // You should have at least 12 assertions
});

test("clicking on a table header without the sort applies an ascending sort to that column", () => {
  render(
    <SortableTable rows={rows} columns={columns} defaultSort="title:desc" />
  );

  // You should have at least 12 assertions
});