bdb4eb782d
- Add QuickEntryBox component for inline quick task entry in columns - Add NewTaskModal component with full-featured task creation UI - Integrate quick create flow through Column → Board → App component hierarchy - Add comprehensive tests for both new components and updated existing tests - Add CSS styles for modal, form inputs, and quick entry UI - Include changeset for @dustinbyrne/kb package release
73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import { describe, it, expect, vi } from "vitest";
|
|
import { render, screen } from "@testing-library/react";
|
|
import { Board } from "../Board";
|
|
import { COLUMNS } from "@kb/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}
|
|
onQuickCreate={noopAsync}
|
|
onNewTask={noop}
|
|
autoMerge={true}
|
|
onToggleAutoMerge={noop}
|
|
globalPaused={false}
|
|
/>,
|
|
);
|
|
}
|
|
|
|
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 6 columns", () => {
|
|
renderBoard();
|
|
for (const col of COLUMNS) {
|
|
expect(screen.getByTestId(`column-${col}`)).toBeDefined();
|
|
}
|
|
});
|
|
|
|
it("renders all 6 columns as direct children of .board (CSS selector target)", () => {
|
|
renderBoard();
|
|
const board = screen.getByRole("main");
|
|
// The mock Column renders <div data-testid="column-{col}" />, which are direct children
|
|
const directChildren = Array.from(board.children);
|
|
expect(directChildren).toHaveLength(COLUMNS.length);
|
|
// Each direct child should be one of the column test-id elements
|
|
for (const col of COLUMNS) {
|
|
const colEl = screen.getByTestId(`column-${col}`);
|
|
expect(colEl.parentElement).toBe(board);
|
|
}
|
|
});
|
|
|
|
it("renders the board element as a <main> tag (semantic structure)", () => {
|
|
renderBoard();
|
|
const board = screen.getByRole("main");
|
|
expect(board.tagName).toBe("MAIN");
|
|
});
|
|
});
|