postdown/tests/ui/file_input_test.tsx

import { assertEquals, cleanup, render } from "./setup.ts";
import FileInput from "../../components/form/FileInput.tsx";

Deno.test({
  name: "FileInput - renders bare input without label",
  fn() {
    const { container } = render(<FileInput />);
    const fileInput = container.querySelector(
      'input[type="file"]',
    ) as HTMLInputElement;
    assertEquals(fileInput !== null, true);
    assertEquals(fileInput.type, "file");
    const labelEl = container.querySelector("label");
    assertEquals(labelEl, null);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "FileInput - renders with label wrapper",
  fn() {
    const { container } = render(<FileInput label="Import file" />);
    const labelEl = container.querySelector("label");
    assertEquals(labelEl !== null, true);
    assertEquals(labelEl?.textContent?.includes("Import file"), true);
    const fileInput = container.querySelector(
      'input[type="file"]',
    ) as HTMLInputElement;
    assertEquals(fileInput !== null, true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "FileInput - passes through accept attribute",
  fn() {
    const { container } = render(<FileInput accept=".md,.txt" />);
    const fileInput = container.querySelector(
      'input[type="file"]',
    ) as HTMLInputElement;
    assertEquals(fileInput.getAttribute("accept"), ".md,.txt");
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "FileInput - passes through disabled attribute",
  fn() {
    const { container } = render(<FileInput disabled />);
    const fileInput = container.querySelector(
      'input[type="file"]',
    ) as HTMLInputElement;
    assertEquals(fileInput.hasAttribute("disabled"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "FileInput - appends custom className",
  fn() {
    const { container } = render(<FileInput className="my-file" />);
    const fileInput = container.querySelector(
      'input[type="file"]',
    ) as HTMLInputElement;
    assertEquals(fileInput.classList.contains("my-file"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});

Deno.test({
  name: "FileInput - includes dark mode file button styles",
  fn() {
    const { container } = render(<FileInput />);
    const fileInput = container.querySelector(
      'input[type="file"]',
    ) as HTMLInputElement;
    assertEquals(fileInput.classList.contains("file:dark:bg-gray-600"), true);
    assertEquals(
      fileInput.classList.contains("file:dark:hover:bg-gray-500"),
      true,
    );
    assertEquals(fileInput.classList.contains("file:dark:text-gray-100"), true);
    cleanup();
  },
  sanitizeResources: false,
  sanitizeOps: false,
});