637254ed2f
- Update board grid to use minmax(260px, 1fr) for minimum column widths - Replace overflow: hidden with overflow-x: auto for horizontal scrolling - Add min-width: 260px to column class for consistent sizing - Add Board test verifying id='board' attribute for scroll targeting
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { describe, it, expect, vi } from "vitest";
|
|
import { render, screen } from "@testing-library/react";
|
|
import { Board } from "../Board";
|
|
import { COLUMNS } from "@hai/core";
|
|
|
|
// Mock child components so we only test Board's own rendering
|
|
vi.mock("../Column", () => ({
|
|
Column: ({ column }: { column: string }) => (
|
|
<div data-testid={`column-${column}`} />
|
|
),
|
|
}));
|
|
|
|
const noop = () => {};
|
|
const noopAsync = () => Promise.resolve({} as any);
|
|
|
|
function renderBoard() {
|
|
return render(
|
|
<Board
|
|
tasks={[]}
|
|
maxConcurrent={2}
|
|
onMoveTask={noopAsync}
|
|
onOpenDetail={noop}
|
|
addToast={noop}
|
|
isCreating={false}
|
|
onCancelCreate={noop}
|
|
onCreateTask={noopAsync}
|
|
onNewTask={noop}
|
|
autoMerge={false}
|
|
onToggleAutoMerge={noop}
|
|
/>,
|
|
);
|
|
}
|
|
|
|
describe("Board", () => {
|
|
it("renders a <main> element with class 'board'", () => {
|
|
renderBoard();
|
|
const main = screen.getByRole("main");
|
|
expect(main).toBeDefined();
|
|
expect(main.className).toContain("board");
|
|
});
|
|
|
|
it("renders with id='board' for scroll targeting", () => {
|
|
renderBoard();
|
|
const main = screen.getByRole("main");
|
|
expect(main.id).toBe("board");
|
|
});
|
|
|
|
it("renders all 5 columns", () => {
|
|
renderBoard();
|
|
for (const col of COLUMNS) {
|
|
expect(screen.getByTestId(`column-${col}`)).toBeDefined();
|
|
}
|
|
});
|
|
});
|