adam/shoc-frontend-new
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/shoc-frontend-new.git synced 2026-10-06 15:52:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix(work-orders): expose flag picker as named dialog

Browse source
This commit is contained in:
Arthur Bassi 2026-08-31 11:46:04 -03:00
parent 8d44b1868c
commit 065ebbd403
2 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app/(protected)/workorders/_components/list/table/cells/flag-cell.tsx
View file

@ -59,6 +59,7 @@ export function FlagCell({ color, disabled, onChange }: FlagCellProps) {
slotProps={{ slotProps={{
paper: { paper: {
className: "rounded-lg border border-border p-2", className: "rounded-lg border border-border p-2",
role: "dialog",
"aria-label": "Choose flag color", "aria-label": "Choose flag color",
}, },
}} }}

14
src/test/app/(protected)/workorders/flag-cell.test.tsx
View file

@ -1,28 +1,34 @@
import { fireEvent, render, screen } from "@testing-library/react"; import { fireEvent, render, screen, within } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest"; import { describe, expect, it, vi } from "vitest";
import { FlagCell } from "@/app/(protected)/workorders/_components/list/table/cells/flag-cell"; import { FlagCell } from "@/app/(protected)/workorders/_components/list/table/cells/flag-cell";
import { WoTableHead } from "@/app/(protected)/workorders/_components/list/table/wo-table-head"; import { WoTableHead } from "@/app/(protected)/workorders/_components/list/table/wo-table-head";
function flagPickerDialog() {
return screen.getByRole("dialog", { name: "Choose flag color" });
}
describe("FlagCell", () => { describe("FlagCell", () => {
it("sets, changes, and clears a flag by named controls", () => { it("sets, changes, and clears a flag by named controls", () => {
const onChange = vi.fn(); const onChange = vi.fn();
const { rerender } = render(<FlagCell color={null} onChange={onChange} />); const { rerender } = render(<FlagCell color={null} onChange={onChange} />);
fireEvent.click(screen.getByRole("button", { name: "Add flag" })); fireEvent.click(screen.getByRole("button", { name: "Add flag" }));
fireEvent.click(screen.getByRole("button", { name: "Red" })); fireEvent.click(within(flagPickerDialog()).getByRole("button", { name: "Red" }));
expect(onChange).toHaveBeenCalledWith("#EF4444"); expect(onChange).toHaveBeenCalledWith("#EF4444");
expect(screen.queryByRole("dialog", { name: "Choose flag color" })).toBeNull();
rerender(<FlagCell color="#EF4444" onChange={onChange} />); rerender(<FlagCell color="#EF4444" onChange={onChange} />);
expect(screen.getByRole("button", { name: "Red flag" })).toBeInTheDocument(); expect(screen.getByRole("button", { name: "Red flag" })).toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "Red flag" })); fireEvent.click(screen.getByRole("button", { name: "Red flag" }));
fireEvent.click(screen.getByRole("button", { name: "Blue" })); fireEvent.click(within(flagPickerDialog()).getByRole("button", { name: "Blue" }));
expect(onChange).toHaveBeenCalledWith("#3B82F6"); expect(onChange).toHaveBeenCalledWith("#3B82F6");
rerender(<FlagCell color="#3B82F6" onChange={onChange} />); rerender(<FlagCell color="#3B82F6" onChange={onChange} />);
fireEvent.click(screen.getByRole("button", { name: "Blue flag" })); fireEvent.click(screen.getByRole("button", { name: "Blue flag" }));
fireEvent.click(screen.getByRole("button", { name: "Clear flag" })); fireEvent.click(within(flagPickerDialog()).getByRole("button", { name: "Clear flag" }));
expect(onChange).toHaveBeenCalledWith(null); expect(onChange).toHaveBeenCalledWith(null);
expect(screen.queryByRole("dialog", { name: "Choose flag color" })).toBeNull();
}); });
it("exposes a non-color name when the hex is not in the palette", () => { it("exposes a non-color name when the hex is not in the palette", () => {