WFDASH-WEBAPP/src/components/data-table.test.tsx

import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";

import { DataTable } from "./data-table";

describe("DataTable", () => {
  it("does not re-fire search when only pagination props change", async () => {
    const onSearch = vi.fn();
    const columns = [{ key: "name", label: "Name" }];
    const data = [{ id: "1", name: "Acme" }];

    const { rerender } = render(
      <DataTable
        columns={columns}
        data={data}
        onSearch={onSearch}
        page={1}
        totalPages={3}
      />
    );

    const searchInput = screen.getByPlaceholderText("Search...");
    fireEvent.change(searchInput, { target: { value: "acme" } });

    await waitFor(() => {
      expect(onSearch).toHaveBeenLastCalledWith("acme");
    });
    const callCountAfterTyping = onSearch.mock.calls.length;

    rerender(
      <DataTable
        columns={columns}
        data={data}
        onSearch={onSearch}
        page={2}
        totalPages={3}
      />
    );

    await new Promise((resolve) => setTimeout(resolve, 350));

    expect(onSearch).toHaveBeenCalledTimes(callCountAfterTyping);
  });
});