Files
kandev/apps/web/components/gitlab/my-gitlab/use-gitlab-search.test.ts
T
João Salavisa cf76a27488 feat(web): normalize /gitlab page to match /github layout (#1082)
* feat(web): normalize /gitlab page to match /github layout

Adds a presets sidebar (MR/Issue toggle, Inbox/Created groups, Saved
section), a top toolbar with project filter and custom-query input,
paginated MR/Issue lists, and a save-preset dialog backed by a
localStorage store at kandev:gitlab-presets:v1.

Replaces the bespoke tabbed layout and supersedes
hooks/domains/gitlab/use-user-search with the pagination-aware
useGitLabSearch under components/gitlab/my-gitlab/. Project filtering is
applied client-side since GitLab's global MR/issue endpoints have no
path_with_namespace qualifier. No backend changes — the controller
already accepts filter / custom_query / page / per_page.

* fix(web): address /gitlab review feedback

- Merge duplicate cn/formatRelativeTime imports in list-toolbar.
- Drop the generic T from useGitLabSearch — it always resolved to MR | Issue,
  so the as-unknown-as double-cast was just hiding that. Now returns
  Array<MR | Issue> directly and exposes rawTotal alongside total.
- When projectFilter is active, total reflects the client-side filtered
  count instead of the server's unfiltered total so the toolbar badge and
  pagination don't claim "47 results" while only 3 rows render.
- Save flow uses committedQuery, not the draft customQuery, so a preset
  saved without pressing Enter matches what's actually displayed.
- Wrap mobile sidebar handlers in useCallback to keep props stable.
- Drop the unused refresh callback in useGitLabStatusFetch (no caller).
- Add hook-level tests for useSavedPresets save/remove/sync; use
  resetKnownProjectsStore directly in the known-projects test.

* fix(web): address round-2 /gitlab review feedback

- useSavedPresets save/remove now read from localStorage on every call so a
  concurrent write from another tab can't be silently overwritten by a stale
  in-memory snapshot.
- Tighten persisted shape validation: customQuery, projectFilter, and
  createdAt must all be strings (plus 3 regression tests).
- ResultsPagination clamps page to [1, totalPages] before deriving start/end
  and prev/next state, so a stale out-of-range page doesn't render an
  invalid range like "101–30 of 30" after a refresh that shrinks results.
- PresetsSidebar: ignore keydown bubbling from the nested delete button so
  Enter/Space on delete doesn't also trigger row selection, and add an
  aria-label to the icon-only delete control.
- Revert the hook's filtered-total policy: useGitLabSearch always returns
  the raw server total now (so pagination can still navigate to later
  pages). The page client owns the toolbar's displayedCount, computing
  filtered.length only when a project filter is active.

* fix(web): drop dead gitlab preset re-exports, tighten save dialog deps

- Remove unused IconBug / IconPencil imports and the re-export from
  presets.ts — no consumer imports them from this module.
- save-preset-dialog: inline the trimmed check inside handleSubmit so
  canSubmit no longer needs to be in the deps array. ESLint exhaustive-
  deps forced the previous duplication; inlining removes it cleanly.

* fix(web): null-safe response unwrap in useGitLabSearch

If the API returns null, the cast `(response as {mrs: ...}).mrs` would
crash before the `?? []` fallback could run. Optional-chain the cast so a
null payload yields an empty list, matching the existing total_count guard.

---------

Co-authored-by: Kandev Agent <agent@kandev.dev>
2026-05-26 16:00:55 +01:00

246 lines
7.9 KiB
TypeScript

import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { cleanup, renderHook, waitFor, act } from "@testing-library/react";
import { IconInbox } from "@tabler/icons-react";
import type { Issue, MR, MRSearchPage, IssueSearchPage } from "@/lib/types/gitlab";
import type { PresetOption } from "./presets";
const searchUserMRsMock = vi.fn<[unknown], Promise<MRSearchPage | null>>();
const searchUserIssuesMock = vi.fn<[unknown], Promise<IssueSearchPage | null>>();
vi.mock("@/lib/api/domains/gitlab-api", () => ({
searchUserMRs: (args: unknown) => searchUserMRsMock(args),
searchUserIssues: (args: unknown) => searchUserIssuesMock(args),
}));
import { pickFilter, useGitLabSearch } from "./use-gitlab-search";
afterEach(() => cleanup());
const PRESET_REVIEW = "review_requested";
const PRESET_ASSIGNED = "assigned";
const CUSTOM_QUERY = "labels=bug";
const PRESETS: PresetOption[] = [
{
value: PRESET_REVIEW,
label: "Review requested",
filter: PRESET_REVIEW,
group: "inbox",
icon: IconInbox,
},
{
value: PRESET_ASSIGNED,
label: "Assigned",
filter: "assigned_to_me",
group: "inbox",
icon: IconInbox,
},
];
const EMPTY_PAGE: MRSearchPage = { mrs: [], total_count: 0, page: 1, per_page: 25 };
describe("pickFilter", () => {
it("uses preset filter when custom query is empty", () => {
expect(pickFilter(PRESETS, PRESET_REVIEW, "")).toEqual({
filter: PRESET_REVIEW,
customQuery: "",
});
});
it("routes custom query and drops preset filter", () => {
expect(pickFilter(PRESETS, PRESET_REVIEW, CUSTOM_QUERY)).toEqual({
filter: "",
customQuery: CUSTOM_QUERY,
});
});
it("trims whitespace-only custom query and falls back to preset", () => {
expect(pickFilter(PRESETS, PRESET_ASSIGNED, " ")).toEqual({
filter: "assigned_to_me",
customQuery: "",
});
});
it("falls back to empty filter when preset is unknown", () => {
expect(pickFilter(PRESETS, "missing", "")).toEqual({ filter: "", customQuery: "" });
});
});
function fakeMR(overrides: Partial<MR> = {}): MR {
return {
id: 1,
iid: 1,
project_id: 1,
title: "",
url: "",
web_url: "",
state: "opened",
head_branch: "feat",
head_sha: "",
base_branch: "main",
author_username: "alice",
project_namespace: "acme",
project_path: "acme/api",
body: "",
draft: false,
merge_status: "",
has_conflicts: false,
additions: 0,
deletions: 0,
reviewers: [],
assignees: [],
created_at: "",
updated_at: "",
...overrides,
};
}
function fakeIssue(overrides: Partial<Issue> = {}): Issue {
return {
id: 1,
iid: 1,
project_id: 1,
title: "",
body: "",
url: "",
web_url: "",
state: "opened",
author_username: "alice",
project_namespace: "acme",
project_path: "acme/api",
labels: [],
assignees: [],
created_at: "",
updated_at: "",
...overrides,
};
}
function resetMocks() {
searchUserMRsMock.mockReset();
searchUserIssuesMock.mockReset();
}
describe("useGitLabSearch — fetch wiring", () => {
beforeEach(resetMocks);
it("forwards preset filter to MR API", async () => {
searchUserMRsMock.mockResolvedValue(EMPTY_PAGE);
renderHook(() => useGitLabSearch("mr", PRESETS, PRESET_REVIEW, ""));
await waitFor(() => expect(searchUserMRsMock).toHaveBeenCalled());
const args = searchUserMRsMock.mock.calls[0][0] as Record<string, unknown>;
expect(args.filter).toBe(PRESET_REVIEW);
expect(args.customQuery).toBe("");
expect(args.page).toBe(1);
});
it("forwards custom query and drops preset filter", async () => {
searchUserMRsMock.mockResolvedValue(EMPTY_PAGE);
renderHook(() => useGitLabSearch("mr", PRESETS, PRESET_REVIEW, CUSTOM_QUERY));
await waitFor(() => expect(searchUserMRsMock).toHaveBeenCalled());
const args = searchUserMRsMock.mock.calls[0][0] as Record<string, unknown>;
expect(args.filter).toBe("");
expect(args.customQuery).toBe(CUSTOM_QUERY);
});
it("dispatches to issues endpoint when kind is issue", async () => {
const issue = fakeIssue();
searchUserIssuesMock.mockResolvedValue({
issues: [issue],
total_count: 1,
page: 1,
per_page: 25,
});
const { result } = renderHook(() => useGitLabSearch("issue", PRESETS, PRESET_ASSIGNED, ""));
await waitFor(() => expect(result.current.loading).toBe(false));
expect(result.current.items).toEqual([issue]);
expect(searchUserMRsMock).not.toHaveBeenCalled();
});
});
describe("useGitLabSearch — state", () => {
beforeEach(resetMocks);
it("populates items and total on success", async () => {
const mr = fakeMR();
searchUserMRsMock.mockResolvedValue({ mrs: [mr], total_count: 1, page: 1, per_page: 25 });
const { result } = renderHook(() => useGitLabSearch("mr", PRESETS, PRESET_ASSIGNED, ""));
await waitFor(() => expect(result.current.loading).toBe(false));
expect(result.current.items).toEqual([mr]);
expect(result.current.total).toBe(1);
expect(result.current.error).toBeNull();
});
it("surfaces error message without items", async () => {
searchUserMRsMock.mockRejectedValue(new Error("boom"));
const { result } = renderHook(() => useGitLabSearch("mr", PRESETS, PRESET_ASSIGNED, ""));
await waitFor(() => expect(result.current.loading).toBe(false));
expect(result.current.error).toBe("boom");
expect(result.current.items).toEqual([]);
});
it("filters items by project_path client-side, total stays at server total", async () => {
const a = fakeMR({ project_path: "acme/api" });
const b = fakeMR({ project_path: "acme/web" });
searchUserMRsMock.mockResolvedValue({ mrs: [a, b], total_count: 99, page: 1, per_page: 25 });
const { result } = renderHook(() =>
useGitLabSearch("mr", PRESETS, PRESET_ASSIGNED, "", "acme/web"),
);
await waitFor(() => expect(result.current.loading).toBe(false));
expect(result.current.items.map((m) => m.project_path)).toEqual(["acme/web"]);
expect(result.current.rawItems.length).toBe(2);
// The hook returns the raw server total so pagination can still navigate to
// later pages that may contain more matches. Consumers compute a filtered
// display count from items.length when they want one.
expect(result.current.total).toBe(99);
});
});
describe("useGitLabSearch — pagination & sequencing", () => {
beforeEach(resetMocks);
it("resets page to 1 when preset changes", async () => {
searchUserMRsMock.mockResolvedValue(EMPTY_PAGE);
const { result, rerender } = renderHook(
({ p }: { p: string }) => useGitLabSearch("mr", PRESETS, p, ""),
{ initialProps: { p: PRESET_ASSIGNED } },
);
await waitFor(() => expect(result.current.loading).toBe(false));
act(() => result.current.setPage(3));
await waitFor(() => expect(result.current.page).toBe(3));
rerender({ p: PRESET_REVIEW });
await waitFor(() => expect(result.current.page).toBe(1));
});
it("drops stale responses when filter changes mid-flight", async () => {
let resolveFirst: (v: MRSearchPage) => void = () => {};
searchUserMRsMock.mockReturnValueOnce(
new Promise<MRSearchPage>((res) => {
resolveFirst = res;
}),
);
const second = fakeMR({ title: "second" });
searchUserMRsMock.mockResolvedValueOnce({
mrs: [second],
total_count: 1,
page: 1,
per_page: 25,
});
const { result, rerender } = renderHook(
({ p }: { p: string }) => useGitLabSearch("mr", PRESETS, p, ""),
{ initialProps: { p: PRESET_ASSIGNED } },
);
rerender({ p: PRESET_REVIEW });
await waitFor(() => expect(result.current.items).toEqual([second]));
resolveFirst({
mrs: [fakeMR({ title: "first" }), fakeMR()],
total_count: 2,
page: 1,
per_page: 25,
});
await new Promise((r) => setTimeout(r, 10));
expect(result.current.items).toEqual([second]);
});
});