pelagia-portal/App/tests/unit/vendors-table.test.tsx
Claude (auto-fix) cb25d2e5fd
All checks were successful
PR checks / checks (pull_request) Successful in 34s
PR checks / integration (pull_request) Successful in 26s
feat(vendors): search by vendor ID and show it next to the name
On /inventory/vendors, include vendorId in the search filter and render
it as a muted mono badge beside the vendor name. The vendorId data was
already passed to the client component, so this is a presentation/filter
change only. Unverified vendors (no vendorId) render unchanged.

Fixes #57

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-21 12:43:21 +05:30

64 lines
2.4 KiB
TypeScript

import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { VendorsTable } from "@/app/(portal)/inventory/vendors/vendors-table";
vi.mock("next/navigation", () => ({
useRouter: () => ({ push: vi.fn() }),
}));
type Row = Parameters<typeof VendorsTable>[0]["vendors"][number];
const makeRow = (over: Partial<Row> = {}): Row => ({
id: "v1",
name: "Acme Marine Supplies",
vendorId: "VND-001",
gstin: null,
address: null,
isVerified: false,
itemCount: 0,
primaryContact: null,
distanceKm: null,
...over,
});
describe("VendorsTable — vendor id (issue #57)", () => {
it("renders the vendorId next to the name when present", () => {
render(<VendorsTable vendors={[makeRow()]} hasSite={false} />);
expect(screen.getByText("Acme Marine Supplies")).toBeTruthy();
expect(screen.getByText("VND-001")).toBeTruthy();
});
it("omits the id (no placeholder) when vendorId is null", () => {
render(<VendorsTable vendors={[makeRow({ vendorId: null })]} hasSite={false} />);
expect(screen.queryByText("VND-001")).toBeNull();
});
it("filters by vendorId", () => {
const rows = [
makeRow({ id: "v1", name: "Acme Marine Supplies", vendorId: "VND-001" }),
makeRow({ id: "v2", name: "Beta Traders", vendorId: "VND-999" }),
];
render(<VendorsTable vendors={rows} hasSite={false} />);
const search = screen.getByPlaceholderText(/Search by name/i);
fireEvent.change(search, { target: { value: "VND-999" } });
expect(screen.queryByText("Acme Marine Supplies")).toBeNull();
expect(screen.getByText("Beta Traders")).toBeTruthy();
});
it("still filters by name", () => {
const rows = [
makeRow({ id: "v1", name: "Acme Marine Supplies", vendorId: "VND-001" }),
makeRow({ id: "v2", name: "Beta Traders", vendorId: "VND-999" }),
];
render(<VendorsTable vendors={rows} hasSite={false} />);
const search = screen.getByPlaceholderText(/Search by name/i);
fireEvent.change(search, { target: { value: "beta" } });
expect(screen.getByText("Beta Traders")).toBeTruthy();
expect(screen.queryByText("Acme Marine Supplies")).toBeNull();
});
it("advertises ID search in the placeholder", () => {
render(<VendorsTable vendors={[makeRow()]} hasSite={false} />);
expect(screen.getByPlaceholderText(/Search by name, ID, GSTIN or address/i)).toBeTruthy();
});
});