strengthen tag filter coverage

The tag filter tests exercise backend matching directly, but they leave the
raw request boundary, route translation, and mutation cache behavior
unprotected. Regressions in those paths can silently ignore public API
filters or leave filtered job lists stale.

Assert repeated query parameter extraction and parser type dispatch. Add a
focused route component harness that verifies tags flow from route search
state into the job query and filter control, back into navigation updates,
and through the cache keys refreshed after cancel, delete, and retry.

Author: bgentry

handler_api_endpoint_test.go

@@ -5,6 +5,7 @@ import (
 	"encoding/json"
 	"log/slog"
 	"net/http"
+	"net/http/httptest"
 	"testing"
 	"time"
 
@@ -761,6 +762,21 @@ func TestAPIHandlerJobListCustomSchema(t *testing.T) {
 	require.Equal(t, job.ID, resp.Data[0].ID)
 }
 
+func TestJobListRequestExtractRaw(t *testing.T) {
+	t.Parallel()
+
+	req := httptest.NewRequestWithContext(
+		t.Context(),
+		http.MethodGet,
+		"/api/jobs?tags=ALPHA&tags=customer%3A123",
+		nil,
+	)
+	params := &jobListRequest{}
+
+	require.NoError(t, params.ExtractRaw(req))
+	require.Equal(t, []string{"ALPHA", "customer:123"}, params.Tags)
+}
+
 func TestAPIHandlerJobRetry(t *testing.T) {
 	t.Parallel()
 

src/components/job-search/parser.test.ts

@@ -21,6 +21,7 @@ describe("parser", () => {
       expect(result[1].match).toBe("queue:");
       expect(result[1].values).toEqual(["priority"]);
       expect(result[2].match).toBe("tags:");
+      expect(result[2].typeId).toBe(JobFilterTypeID.TAGS);
       expect(result[2].values).toEqual(["customer", "urgent"]);
     });
 

src/routes/jobs/index.test.tsx

@@ -1,6 +1,129 @@
+import { Filter, FilterTypeId } from "@components/job-search/JobSearch";
+import { JobsIndexComponent, Route } from "@routes/jobs/index";
 import { jobSearchSchema } from "@routes/jobs/index.schema";
+import { listJobsKey } from "@services/jobs";
 import { JobState } from "@services/types";
-import { describe, expect, it } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, render, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+type JobListHarnessProps = {
+  cancelJobs: (jobIDs: bigint[]) => void;
+  deleteJobs: (jobIDs: bigint[]) => void;
+  initialFilters?: Filter[];
+  onFiltersChange?: (filters: Filter[]) => void;
+  retryJobs: (jobIDs: bigint[]) => void;
+};
+
+type NavigateOptions = {
+  search: (
+    old: Record<string, JobState | string[] | undefined>,
+  ) => Record<string, JobState | string[] | undefined>;
+};
+
+const {
+  mockCancelJobs,
+  mockCountsByState,
+  mockDeleteJobs,
+  mockJobList,
+  mockListJobs,
+  mockNavigate,
+  mockUseRetryJobs,
+} = vi.hoisted(() => ({
+  mockCancelJobs: vi.fn(),
+  mockCountsByState: vi.fn(),
+  mockDeleteJobs: vi.fn(),
+  mockJobList: vi.fn(),
+  mockListJobs: vi.fn(),
+  mockNavigate: vi.fn(),
+  mockUseRetryJobs: vi.fn(),
+}));
+
+vi.mock("@components/JobList", () => ({
+  default: (props: JobListHarnessProps) => {
+    mockJobList(props);
+    return null;
+  },
+}));
+
+vi.mock("@contexts/RefreshSettings.hook", () => ({
+  useRefreshSetting: () => ({ intervalMs: 0 }),
+}));
+
+vi.mock("@hooks/use-retry-jobs", () => ({
+  useRetryJobs: (opts: { onSuccess: () => void }) => {
+    mockUseRetryJobs(opts);
+    return { mutate: (_jobIDs: bigint[]) => opts.onSuccess() };
+  },
+}));
+
+vi.mock("@services/jobs", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@services/jobs")>();
+  return {
+    ...actual,
+    cancelJobs: mockCancelJobs,
+    deleteJobs: mockDeleteJobs,
+    listJobs: mockListJobs,
+  };
+});
+
+vi.mock("@services/states", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@services/states")>();
+  return {
+    ...actual,
+    countsByState: mockCountsByState,
+  };
+});
+
+vi.mock("@services/toast", () => ({
+  toastError: vi.fn(),
+}));
+
+const loaderDeps = {
+  id: undefined,
+  kind: ["email"],
+  limit: 20,
+  priority: [1],
+  queue: ["default"],
+  state: JobState.Running,
+  tags: ["customer:123", "urgent"],
+};
+
+const activeJobsKey = listJobsKey({
+  ids: loaderDeps.id,
+  kinds: loaderDeps.kind,
+  limit: loaderDeps.limit,
+  priorities: loaderDeps.priority,
+  queues: loaderDeps.queue,
+  state: loaderDeps.state,
+  tags: loaderDeps.tags,
+});
+
+const latestJobListProps = (): JobListHarnessProps => {
+  const props = mockJobList.mock.calls.at(-1)?.[0] as
+    JobListHarnessProps | undefined;
+  expect(props).toBeDefined();
+  if (!props) throw new Error("JobList was not rendered");
+  return props;
+};
+
+const renderJobsIndex = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      mutations: { retry: false },
+      queries: { retry: false },
+    },
+  });
+
+  return {
+    queryClient,
+    ...render(
+      <QueryClientProvider client={queryClient}>
+        <JobsIndexComponent />
+      </QueryClientProvider>,
+    ),
+  };
+};
 
 describe("Jobs Route Search Schema", () => {
   it("validates search parameters correctly", () => {
@@ -67,3 +190,102 @@ describe("Jobs Route Search Schema", () => {
     });
   });
 });
+
+describe("JobsIndexComponent", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockCancelJobs.mockResolvedValue(undefined);
+    mockCountsByState.mockResolvedValue({});
+    mockDeleteJobs.mockResolvedValue(undefined);
+    mockListJobs.mockResolvedValue([]);
+    vi.spyOn(Route, "useLoaderDeps").mockReturnValue(loaderDeps);
+    vi.spyOn(Route, "useNavigate").mockReturnValue(mockNavigate);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("round trips tags between route search and job filters", async () => {
+    renderJobsIndex();
+
+    await waitFor(() => expect(mockListJobs).toHaveBeenCalled());
+    expect(mockListJobs.mock.calls.at(-1)?.[0]).toMatchObject({
+      queryKey: activeJobsKey,
+    });
+
+    const props = latestJobListProps();
+    expect(props.initialFilters).toEqual(
+      expect.arrayContaining([
+        {
+          id: "tags-filter",
+          match: "tags:",
+          typeId: FilterTypeId.TAGS,
+          values: loaderDeps.tags,
+        },
+      ]),
+    );
+
+    act(() => {
+      props.onFiltersChange?.([
+        {
+          id: "replacement-tags",
+          match: "tags:",
+          typeId: FilterTypeId.TAGS,
+          values: ["replacement"],
+        },
+      ]);
+    });
+    let navigateOpts = mockNavigate.mock.calls.at(-1)?.[0] as
+      NavigateOptions | undefined;
+    expect(navigateOpts?.search({ state: JobState.Running })).toMatchObject({
+      tags: ["replacement"],
+    });
+
+    act(() => props.onFiltersChange?.([]));
+    navigateOpts = mockNavigate.mock.calls.at(-1)?.[0] as
+      NavigateOptions | undefined;
+    expect(
+      navigateOpts?.search({
+        state: JobState.Running,
+        tags: loaderDeps.tags,
+      }),
+    ).toEqual({
+      id: undefined,
+      kind: undefined,
+      priority: undefined,
+      queue: undefined,
+      state: JobState.Running,
+      tags: undefined,
+    });
+  });
+
+  it("refreshes the active tag-filtered query after mutations", async () => {
+    const { queryClient } = renderJobsIndex();
+    const invalidateQueries = vi.spyOn(queryClient, "invalidateQueries");
+    const removeQueries = vi.spyOn(queryClient, "removeQueries");
+
+    await waitFor(() => expect(mockListJobs).toHaveBeenCalled());
+    const props = latestJobListProps();
+
+    act(() => props.cancelJobs([123n]));
+    await waitFor(() =>
+      expect(invalidateQueries).toHaveBeenCalledWith({
+        queryKey: activeJobsKey,
+      }),
+    );
+
+    act(() => props.deleteJobs([123n]));
+    await waitFor(() =>
+      expect(removeQueries).toHaveBeenCalledWith({
+        queryKey: activeJobsKey,
+      }),
+    );
+
+    invalidateQueries.mockClear();
+    act(() => props.retryJobs([123n]));
+    expect(invalidateQueries).toHaveBeenCalledWith({
+      queryKey: activeJobsKey,
+    });
+  });
+});

src/routes/jobs/index.tsx

@@ -85,7 +85,7 @@ export const Route = createFileRoute("/jobs/")({
   component: JobsIndexComponent,
 });
 
-function JobsIndexComponent() {
+export function JobsIndexComponent() {
   const navigate = Route.useNavigate();
   const { id, limit, state, kind, queue, priority, tags } =
     Route.useLoaderDeps();