test(FilesToolbar): add 18-case vitest suite
Covers: directory selector (4 options), file count display, + New / Upload buttons visible only for /configs, Download All (Export), Clear (Delete all files) visible only for /configs, Refresh, all button click handlers, setRoot callback, upload input triggers onUpload, rerender on prop changes. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
d763a3cea4
commit
71b0e4fbf4
@ -0,0 +1,158 @@
|
||||
// @vitest-environment jsdom
|
||||
/**
|
||||
* Tests for FilesToolbar — file browser toolbar in FilesTab.
|
||||
*
|
||||
* Coverage:
|
||||
* - Renders directory selector (4 options)
|
||||
* - Shows file count
|
||||
* - Shows + New button only for /configs
|
||||
* - Shows upload folder button only for /configs
|
||||
* - Hides + New/upload for /home, /workspace, /plugins
|
||||
* - Shows Download All and Clear All buttons
|
||||
* - Shows Refresh button
|
||||
* - Calls setRoot when directory changes
|
||||
* - Calls onNewFile when + New clicked
|
||||
* - File count updates with prop changes
|
||||
* - Upload input triggers onUpload callback
|
||||
*/
|
||||
import React from "react";
|
||||
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { FilesToolbar } from "../FilesToolbar";
|
||||
|
||||
const fireUpload = () => {
|
||||
const input = screen.getByRole("button", { name: /upload folder/i }).closest("div")?.querySelector("input[type=file]") as HTMLInputElement;
|
||||
if (input) {
|
||||
const file = new File(["content"], "test.txt", { type: "text/plain" });
|
||||
Object.defineProperty(input, "files", { value: [file], configurable: true });
|
||||
fireEvent.change(input);
|
||||
}
|
||||
};
|
||||
|
||||
describe("FilesToolbar", () => {
|
||||
beforeEach(() => { vi.useRealTimers(); });
|
||||
afterEach(() => { cleanup(); vi.useRealTimers(); });
|
||||
|
||||
it("renders directory selector with 4 options", () => {
|
||||
const setRoot = vi.fn();
|
||||
render(<FilesToolbar root="/configs" setRoot={setRoot} fileCount={3} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={vi.fn()} />);
|
||||
expect(screen.getByRole("combobox", { name: /file root directory/i })).toBeTruthy();
|
||||
expect(screen.getByRole("option", { name: "/configs" })).toBeTruthy();
|
||||
expect(screen.getByRole("option", { name: "/home" })).toBeTruthy();
|
||||
expect(screen.getByRole("option", { name: "/workspace" })).toBeTruthy();
|
||||
expect(screen.getByRole("option", { name: "/plugins" })).toBeTruthy();
|
||||
});
|
||||
|
||||
it("shows file count", () => {
|
||||
const setRoot = vi.fn();
|
||||
render(<FilesToolbar root="/configs" setRoot={setRoot} fileCount={42} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={vi.fn()} />);
|
||||
expect(screen.getByText("42 files")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("calls setRoot when directory changes", () => {
|
||||
const setRoot = vi.fn();
|
||||
render(<FilesToolbar root="/configs" setRoot={setRoot} fileCount={0} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={vi.fn()} />);
|
||||
fireEvent.change(screen.getByRole("combobox"), { target: { value: "/workspace" } });
|
||||
expect(setRoot).toHaveBeenCalledWith("/workspace");
|
||||
});
|
||||
|
||||
it("calls onNewFile when + New is clicked", () => {
|
||||
const onNewFile = vi.fn();
|
||||
render(<FilesToolbar root="/configs" setRoot={vi.fn()} fileCount={0} onNewFile={onNewFile} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={vi.fn()} />);
|
||||
fireEvent.click(screen.getByRole("button", { name: /create new file/i }));
|
||||
expect(onNewFile).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("hides + New button for /home", () => {
|
||||
const onNewFile = vi.fn();
|
||||
render(<FilesToolbar root="/home" setRoot={vi.fn()} fileCount={0} onNewFile={onNewFile} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={vi.fn()} />);
|
||||
expect(screen.queryByRole("button", { name: /create new file/i })).toBeFalsy();
|
||||
});
|
||||
|
||||
it("hides + New button for /workspace", () => {
|
||||
render(<FilesToolbar root="/workspace" setRoot={vi.fn()} fileCount={0} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={vi.fn()} />);
|
||||
expect(screen.queryByRole("button", { name: /create new file/i })).toBeFalsy();
|
||||
});
|
||||
|
||||
it("hides + New button for /plugins", () => {
|
||||
render(<FilesToolbar root="/plugins" setRoot={vi.fn()} fileCount={0} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={vi.fn()} />);
|
||||
expect(screen.queryByRole("button", { name: /create new file/i })).toBeFalsy();
|
||||
});
|
||||
|
||||
it("shows upload folder button for /configs", () => {
|
||||
render(<FilesToolbar root="/configs" setRoot={vi.fn()} fileCount={0} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={vi.fn()} />);
|
||||
expect(screen.getByRole("button", { name: /upload folder/i })).toBeTruthy();
|
||||
});
|
||||
|
||||
it("hides upload folder button for /home", () => {
|
||||
render(<FilesToolbar root="/home" setRoot={vi.fn()} fileCount={0} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={vi.fn()} />);
|
||||
expect(screen.queryByRole("button", { name: /upload folder/i })).toBeFalsy();
|
||||
});
|
||||
|
||||
it("calls onUpload when file input changes", () => {
|
||||
const onUpload = vi.fn();
|
||||
render(<FilesToolbar root="/configs" setRoot={vi.fn()} fileCount={0} onNewFile={vi.fn()} onUpload={onUpload} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={vi.fn()} />);
|
||||
// The upload button opens a hidden file input. Trigger it via change.
|
||||
const input = document.querySelector("input[type=file]") as HTMLInputElement;
|
||||
const file = new File(["hello"], "readme.txt", { type: "text/plain" });
|
||||
Object.defineProperty(input, "files", { value: [file], configurable: true });
|
||||
fireEvent.change(input);
|
||||
expect(onUpload).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("shows Export button", () => {
|
||||
const onDownloadAll = vi.fn();
|
||||
render(<FilesToolbar root="/configs" setRoot={vi.fn()} fileCount={0} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={onDownloadAll} onClearAll={vi.fn()} onRefresh={vi.fn()} />);
|
||||
expect(screen.getByRole("button", { name: /download all files/i })).toBeTruthy();
|
||||
});
|
||||
|
||||
it("calls onDownloadAll when Export clicked", () => {
|
||||
const onDownloadAll = vi.fn();
|
||||
render(<FilesToolbar root="/configs" setRoot={vi.fn()} fileCount={0} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={onDownloadAll} onClearAll={vi.fn()} onRefresh={vi.fn()} />);
|
||||
fireEvent.click(screen.getByRole("button", { name: /download all files/i }));
|
||||
expect(onDownloadAll).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("shows Clear button for /configs", () => {
|
||||
const onClearAll = vi.fn();
|
||||
render(<FilesToolbar root="/configs" setRoot={vi.fn()} fileCount={0} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={onClearAll} onRefresh={vi.fn()} />);
|
||||
expect(screen.getByRole("button", { name: /delete all files/i })).toBeTruthy();
|
||||
});
|
||||
|
||||
it("calls onClearAll when Clear clicked", () => {
|
||||
const onClearAll = vi.fn();
|
||||
render(<FilesToolbar root="/configs" setRoot={vi.fn()} fileCount={0} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={onClearAll} onRefresh={vi.fn()} />);
|
||||
fireEvent.click(screen.getByRole("button", { name: /delete all files/i }));
|
||||
expect(onClearAll).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("shows Refresh button", () => {
|
||||
const onRefresh = vi.fn();
|
||||
render(<FilesToolbar root="/configs" setRoot={vi.fn()} fileCount={0} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={onRefresh} />);
|
||||
expect(screen.getByRole("button", { name: /refresh file list/i })).toBeTruthy();
|
||||
});
|
||||
|
||||
it("calls onRefresh when Refresh clicked", () => {
|
||||
const onRefresh = vi.fn();
|
||||
render(<FilesToolbar root="/configs" setRoot={vi.fn()} fileCount={0} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={onRefresh} />);
|
||||
fireEvent.click(screen.getByRole("button", { name: /refresh file list/i }));
|
||||
expect(onRefresh).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("file count updates with prop", () => {
|
||||
const { rerender } = render(
|
||||
<FilesToolbar root="/configs" setRoot={vi.fn()} fileCount={5} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={vi.fn()} />
|
||||
);
|
||||
expect(screen.getByText("5 files")).toBeTruthy();
|
||||
rerender(
|
||||
<FilesToolbar root="/configs" setRoot={vi.fn()} fileCount={99} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={vi.fn()} />
|
||||
);
|
||||
expect(screen.getByText("99 files")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("selected directory matches root prop", () => {
|
||||
const setRoot = vi.fn();
|
||||
render(<FilesToolbar root="/plugins" setRoot={setRoot} fileCount={0} onNewFile={vi.fn()} onUpload={vi.fn()} onDownloadAll={vi.fn()} onClearAll={vi.fn()} onRefresh={vi.fn()} />);
|
||||
expect((screen.getByRole("combobox") as HTMLSelectElement).value).toBe("/plugins");
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user