Carlos Florêncio
77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
|
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
import { TooltipProvider } from "@kandev/ui/tooltip";
|
|
import { ListToolbar } from "./list-toolbar";
|
|
|
|
afterEach(() => cleanup());
|
|
|
|
const ALL_REPOS_LABEL = "All repos";
|
|
const REPO_SEARCH_PLACEHOLDER = "Filter repositories...";
|
|
const REPO_DROPDOWN_TEST_ID = "github-repo-filter-dropdown";
|
|
const KANDEV_REPO = "kdlbs/kandev";
|
|
|
|
function renderToolbar({ repoFilter = "" }: { repoFilter?: string } = {}) {
|
|
const onRepoFilterChange = vi.fn();
|
|
render(
|
|
<TooltipProvider>
|
|
<ListToolbar
|
|
title="Review requested"
|
|
count={2}
|
|
loading={false}
|
|
lastFetchedAt={null}
|
|
customQuery="is:open"
|
|
committedQuery="is:open"
|
|
onCustomQueryChange={vi.fn()}
|
|
onCommitCustomQuery={vi.fn()}
|
|
repoFilter={repoFilter}
|
|
onRepoFilterChange={onRepoFilterChange}
|
|
repoOptions={["acme/api", KANDEV_REPO]}
|
|
onRefresh={vi.fn()}
|
|
/>
|
|
</TooltipProvider>,
|
|
);
|
|
return { onRepoFilterChange };
|
|
}
|
|
|
|
describe("ListToolbar", () => {
|
|
it("opens the repository filter with a search input", async () => {
|
|
renderToolbar();
|
|
|
|
fireEvent.click(screen.getByText(ALL_REPOS_LABEL));
|
|
|
|
expect(await screen.findByPlaceholderText(REPO_SEARCH_PLACEHOLDER)).toBeTruthy();
|
|
expect(screen.getByTestId(REPO_DROPDOWN_TEST_ID)).toBeTruthy();
|
|
expect(screen.getByText(KANDEV_REPO)).toBeTruthy();
|
|
});
|
|
|
|
it("filters and selects a repository", async () => {
|
|
const { onRepoFilterChange } = renderToolbar();
|
|
|
|
fireEvent.click(screen.getByText(ALL_REPOS_LABEL));
|
|
fireEvent.change(await screen.findByPlaceholderText(REPO_SEARCH_PLACEHOLDER), {
|
|
target: { value: "kdlbs" },
|
|
});
|
|
fireEvent.click(await screen.findByRole("option", { name: KANDEV_REPO }));
|
|
|
|
expect(onRepoFilterChange).toHaveBeenCalledWith(KANDEV_REPO);
|
|
});
|
|
|
|
it("clears the repository filter from the All repos option", async () => {
|
|
const { onRepoFilterChange } = renderToolbar({ repoFilter: KANDEV_REPO });
|
|
|
|
fireEvent.click(screen.getByText(KANDEV_REPO));
|
|
fireEvent.click(await screen.findByRole("option", { name: ALL_REPOS_LABEL }));
|
|
|
|
expect(onRepoFilterChange).toHaveBeenCalledWith("");
|
|
});
|
|
|
|
it("preserves the repository filter when the selected repository is reselected", async () => {
|
|
const { onRepoFilterChange } = renderToolbar({ repoFilter: KANDEV_REPO });
|
|
|
|
fireEvent.click(screen.getByText(KANDEV_REPO));
|
|
fireEvent.click(await screen.findByRole("option", { name: KANDEV_REPO }));
|
|
|
|
expect(onRepoFilterChange).not.toHaveBeenCalled();
|
|
});
|
|
});
|