@etus/bhono-app 0.1.1

package/templates/base/src/client/components/ui/__tests__/card.test.tsx

@@ -0,0 +1,214 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "../../../__tests__/test-utils"
+import { createRef } from "react"
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "../card"
+
+describe("Card", () => {
+  it("renders Card with children", () => {
+    render(
+      <Card>
+        <div data-testid="card-child">Card content</div>
+      </Card>
+    )
+
+    expect(screen.getByTestId("card-child")).toBeInTheDocument()
+    expect(screen.getByText("Card content")).toBeInTheDocument()
+  })
+
+  it("applies default Card styles", () => {
+    render(<Card data-testid="card">Content</Card>)
+
+    const card = screen.getByTestId("card")
+    expect(card).toHaveClass("rounded-lg")
+    expect(card).toHaveClass("border")
+    expect(card).toHaveClass("bg-card")
+    expect(card).toHaveClass("shadow-sm")
+  })
+
+  it("applies custom className to Card", () => {
+    render(
+      <Card className="custom-card-class" data-testid="card">
+        Content
+      </Card>
+    )
+
+    const card = screen.getByTestId("card")
+    expect(card).toHaveClass("custom-card-class")
+  })
+
+  it("forwards ref to Card", () => {
+    const ref = createRef<HTMLDivElement>()
+    render(<Card ref={ref}>Content</Card>)
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement)
+  })
+})
+
+describe("CardHeader", () => {
+  it("renders CardHeader with children", () => {
+    render(
+      <CardHeader data-testid="header">
+        <span>Header content</span>
+      </CardHeader>
+    )
+
+    expect(screen.getByTestId("header")).toBeInTheDocument()
+    expect(screen.getByText("Header content")).toBeInTheDocument()
+  })
+
+  it("applies default CardHeader styles", () => {
+    render(<CardHeader data-testid="header">Content</CardHeader>)
+
+    const header = screen.getByTestId("header")
+    expect(header).toHaveClass("flex")
+    expect(header).toHaveClass("flex-col")
+    expect(header).toHaveClass("space-y-1.5")
+    expect(header).toHaveClass("p-6")
+  })
+
+  it("forwards ref to CardHeader", () => {
+    const ref = createRef<HTMLDivElement>()
+    render(<CardHeader ref={ref}>Content</CardHeader>)
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement)
+  })
+})
+
+describe("CardTitle", () => {
+  it("renders CardTitle with text", () => {
+    render(<CardTitle>My Title</CardTitle>)
+
+    expect(screen.getByText("My Title")).toBeInTheDocument()
+  })
+
+  it("applies default CardTitle styles", () => {
+    render(<CardTitle data-testid="title">Title</CardTitle>)
+
+    const title = screen.getByTestId("title")
+    expect(title).toHaveClass("font-semibold")
+    expect(title).toHaveClass("leading-none")
+    expect(title).toHaveClass("tracking-tight")
+  })
+
+  it("forwards ref to CardTitle", () => {
+    const ref = createRef<HTMLHeadingElement>()
+    render(<CardTitle ref={ref}>Title</CardTitle>)
+
+    expect(ref.current).toBeInstanceOf(HTMLHeadingElement)
+  })
+})
+
+describe("CardDescription", () => {
+  it("renders CardDescription with text", () => {
+    render(<CardDescription>Description text</CardDescription>)
+
+    expect(screen.getByText("Description text")).toBeInTheDocument()
+  })
+
+  it("applies default CardDescription styles", () => {
+    render(<CardDescription data-testid="desc">Description</CardDescription>)
+
+    const desc = screen.getByTestId("desc")
+    expect(desc).toHaveClass("text-sm")
+    expect(desc).toHaveClass("text-muted-foreground")
+  })
+
+  it("forwards ref to CardDescription", () => {
+    const ref = createRef<HTMLDivElement>()
+    render(<CardDescription ref={ref}>Description</CardDescription>)
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement)
+  })
+})
+
+describe("CardContent", () => {
+  it("renders CardContent with children", () => {
+    render(
+      <CardContent data-testid="content">
+        <p>Main content here</p>
+      </CardContent>
+    )
+
+    expect(screen.getByTestId("content")).toBeInTheDocument()
+    expect(screen.getByText("Main content here")).toBeInTheDocument()
+  })
+
+  it("applies default CardContent styles", () => {
+    render(<CardContent data-testid="content">Content</CardContent>)
+
+    const content = screen.getByTestId("content")
+    expect(content).toHaveClass("p-6")
+    expect(content).toHaveClass("pt-0")
+  })
+
+  it("forwards ref to CardContent", () => {
+    const ref = createRef<HTMLDivElement>()
+    render(<CardContent ref={ref}>Content</CardContent>)
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement)
+  })
+})
+
+describe("CardFooter", () => {
+  it("renders CardFooter with children", () => {
+    render(
+      <CardFooter data-testid="footer">
+        <button>Action</button>
+      </CardFooter>
+    )
+
+    expect(screen.getByTestId("footer")).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Action" })).toBeInTheDocument()
+  })
+
+  it("applies default CardFooter styles", () => {
+    render(<CardFooter data-testid="footer">Footer</CardFooter>)
+
+    const footer = screen.getByTestId("footer")
+    expect(footer).toHaveClass("flex")
+    expect(footer).toHaveClass("items-center")
+    expect(footer).toHaveClass("p-6")
+    expect(footer).toHaveClass("pt-0")
+  })
+
+  it("forwards ref to CardFooter", () => {
+    const ref = createRef<HTMLDivElement>()
+    render(<CardFooter ref={ref}>Footer</CardFooter>)
+
+    expect(ref.current).toBeInstanceOf(HTMLDivElement)
+  })
+})
+
+describe("Card composition", () => {
+  it("renders complete Card with all subcomponents", () => {
+    render(
+      <Card data-testid="complete-card">
+        <CardHeader>
+          <CardTitle>Card Title</CardTitle>
+          <CardDescription>Card description goes here</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>This is the main content of the card.</p>
+        </CardContent>
+        <CardFooter>
+          <button>Save</button>
+          <button>Cancel</button>
+        </CardFooter>
+      </Card>
+    )
+
+    expect(screen.getByTestId("complete-card")).toBeInTheDocument()
+    expect(screen.getByText("Card Title")).toBeInTheDocument()
+    expect(screen.getByText("Card description goes here")).toBeInTheDocument()
+    expect(screen.getByText("This is the main content of the card.")).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument()
+  })
+})

package/templates/base/src/client/components/ui/__tests__/dialog.test.tsx

@@ -0,0 +1,297 @@
+import { describe, it, expect, vi } from "vitest"
+import { render, screen, waitFor } from "../../../__tests__/test-utils"
+import userEvent from "@testing-library/user-event"
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "../dialog"
+
+describe("Dialog", () => {
+  it("opens dialog when trigger is clicked", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    )
+
+    // Dialog content should not be visible initially
+    expect(screen.queryByText("Dialog Title")).not.toBeInTheDocument()
+
+    // Click the trigger
+    await user.click(screen.getByText("Open Dialog"))
+
+    // Dialog content should now be visible
+    expect(screen.getByText("Dialog Title")).toBeInTheDocument()
+  })
+
+  it("closes dialog when close button is clicked", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    )
+
+    // Open the dialog
+    await user.click(screen.getByText("Open Dialog"))
+    expect(screen.getByText("Dialog Title")).toBeInTheDocument()
+
+    // Click the close button (sr-only text "Close")
+    const closeButton = screen.getByRole("button", { name: "Close" })
+    await user.click(closeButton)
+
+    // Dialog should be closed
+    await waitFor(() => {
+      expect(screen.queryByText("Dialog Title")).not.toBeInTheDocument()
+    })
+  })
+
+  it("renders dialog content correctly", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Test Title</DialogTitle>
+            <DialogDescription>Test description text</DialogDescription>
+          </DialogHeader>
+          <div>Main content area</div>
+          <DialogFooter>
+            <button>Cancel</button>
+            <button>Confirm</button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+
+    await user.click(screen.getByText("Open Dialog"))
+
+    expect(screen.getByText("Test Title")).toBeInTheDocument()
+    expect(screen.getByText("Test description text")).toBeInTheDocument()
+    expect(screen.getByText("Main content area")).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: "Confirm" })).toBeInTheDocument()
+  })
+
+  it("handles overlay click to close", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent data-testid="dialog-content">
+          <DialogTitle>Dialog Title</DialogTitle>
+        </DialogContent>
+      </Dialog>
+    )
+
+    // Open the dialog
+    await user.click(screen.getByText("Open Dialog"))
+    expect(screen.getByText("Dialog Title")).toBeInTheDocument()
+
+    // Click on the overlay (the background)
+    // The overlay is the fixed inset-0 element with bg-black/80
+    const overlay = document.querySelector(".bg-black\\/80")
+    if (overlay) {
+      await user.click(overlay)
+    }
+
+    // Dialog should be closed
+    await waitFor(() => {
+      expect(screen.queryByText("Dialog Title")).not.toBeInTheDocument()
+    })
+  })
+
+  it("closes dialog when Escape key is pressed", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Dialog Title</DialogTitle>
+        </DialogContent>
+      </Dialog>
+    )
+
+    // Open the dialog
+    await user.click(screen.getByText("Open Dialog"))
+    expect(screen.getByText("Dialog Title")).toBeInTheDocument()
+
+    // Press Escape
+    await user.keyboard("{Escape}")
+
+    // Dialog should be closed
+    await waitFor(() => {
+      expect(screen.queryByText("Dialog Title")).not.toBeInTheDocument()
+    })
+  })
+
+  it("supports controlled open state", async () => {
+    const user = userEvent.setup()
+    const onOpenChange = vi.fn()
+
+    render(
+      <Dialog open={false} onOpenChange={onOpenChange}>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Dialog Title</DialogTitle>
+        </DialogContent>
+      </Dialog>
+    )
+
+    // Click trigger should call onOpenChange
+    await user.click(screen.getByText("Open Dialog"))
+    expect(onOpenChange).toHaveBeenCalledWith(true)
+  })
+
+  it("renders open controlled dialog", () => {
+    render(
+      <Dialog open={true} onOpenChange={() => {}}>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Controlled Dialog</DialogTitle>
+        </DialogContent>
+      </Dialog>
+    )
+
+    // Dialog should be visible because open={true}
+    expect(screen.getByText("Controlled Dialog")).toBeInTheDocument()
+  })
+
+  it("does not close when clicking inside dialog content", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+          </DialogHeader>
+          <button>Inner Button</button>
+        </DialogContent>
+      </Dialog>
+    )
+
+    // Open the dialog
+    await user.click(screen.getByText("Open Dialog"))
+    expect(screen.getByText("Dialog Title")).toBeInTheDocument()
+
+    // Click inside the dialog content
+    await user.click(screen.getByRole("button", { name: "Inner Button" }))
+
+    // Dialog should still be open
+    expect(screen.getByText("Dialog Title")).toBeInTheDocument()
+  })
+})
+
+describe("DialogHeader", () => {
+  it("applies correct styles", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open</DialogTrigger>
+        <DialogContent>
+          <DialogHeader data-testid="header">
+            <DialogTitle>Title</DialogTitle>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    )
+
+    await user.click(screen.getByText("Open"))
+
+    const header = screen.getByTestId("header")
+    expect(header).toHaveClass("flex")
+    expect(header).toHaveClass("flex-col")
+    expect(header).toHaveClass("space-y-1.5")
+  })
+})
+
+describe("DialogFooter", () => {
+  it("applies correct styles", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Title</DialogTitle>
+          <DialogFooter data-testid="footer">
+            <button>Action</button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+
+    await user.click(screen.getByText("Open"))
+
+    const footer = screen.getByTestId("footer")
+    expect(footer).toHaveClass("flex")
+    expect(footer).toHaveClass("flex-col-reverse")
+  })
+})
+
+describe("DialogTitle", () => {
+  it("renders as h2 element", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>My Title</DialogTitle>
+        </DialogContent>
+      </Dialog>
+    )
+
+    await user.click(screen.getByText("Open"))
+
+    const title = screen.getByRole("heading", { level: 2 })
+    expect(title).toHaveTextContent("My Title")
+  })
+})
+
+describe("DialogDescription", () => {
+  it("renders with muted text style", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Dialog>
+        <DialogTrigger>Open</DialogTrigger>
+        <DialogContent>
+          <DialogTitle>Title</DialogTitle>
+          <DialogDescription data-testid="desc">Description text</DialogDescription>
+        </DialogContent>
+      </Dialog>
+    )
+
+    await user.click(screen.getByText("Open"))
+
+    const desc = screen.getByTestId("desc")
+    expect(desc).toHaveClass("text-sm")
+    expect(desc).toHaveClass("text-muted-foreground")
+  })
+})

package/templates/base/src/client/components/ui/__tests__/error-fallback.test.tsx

@@ -0,0 +1,145 @@
+// src/client/components/ui/__tests__/error-fallback.test.tsx
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ErrorFallback, NotFound, Unauthorized } from '../error-fallback'
+
+describe('ErrorFallback', () => {
+  it('renders with default props', () => {
+    render(<ErrorFallback />)
+
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+    expect(screen.getByText('An unexpected error occurred. Please try again.')).toBeInTheDocument()
+  })
+
+  it('renders with custom title and message', () => {
+    render(<ErrorFallback title="Custom Title" message="Custom message" />)
+
+    expect(screen.getByText('Custom Title')).toBeInTheDocument()
+    expect(screen.getByText('Custom message')).toBeInTheDocument()
+  })
+
+  it('shows error details in development mode', () => {
+    const error = new Error('Detailed error message')
+
+    render(<ErrorFallback error={error} showDetails={true} />)
+
+    expect(screen.getByText('Error details:')).toBeInTheDocument()
+    expect(screen.getByText(/Detailed error message/)).toBeInTheDocument()
+  })
+
+  it('hides error details when showDetails is false', () => {
+    const error = new Error('Detailed error message')
+
+    render(<ErrorFallback error={error} showDetails={false} />)
+
+    expect(screen.queryByText('Detailed error message')).not.toBeInTheDocument()
+  })
+
+  it('calls onRetry when retry button is clicked', () => {
+    const onRetry = vi.fn()
+
+    render(<ErrorFallback onRetry={onRetry} />)
+
+    fireEvent.click(screen.getByText('Try again'))
+    expect(onRetry).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onGoBack when go back button is clicked', () => {
+    const onGoBack = vi.fn()
+
+    render(<ErrorFallback onGoBack={onGoBack} />)
+
+    fireEvent.click(screen.getByText('Go back'))
+    expect(onGoBack).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onGoHome when go home button is clicked', () => {
+    const onGoHome = vi.fn()
+
+    render(<ErrorFallback onGoHome={onGoHome} />)
+
+    fireEvent.click(screen.getByText('Go home'))
+    expect(onGoHome).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not render buttons when callbacks are not provided', () => {
+    render(<ErrorFallback />)
+
+    expect(screen.queryByText('Try again')).not.toBeInTheDocument()
+    expect(screen.queryByText('Go back')).not.toBeInTheDocument()
+    expect(screen.queryByText('Go home')).not.toBeInTheDocument()
+  })
+})
+
+describe('NotFound', () => {
+  it('renders with default props', () => {
+    render(<NotFound />)
+
+    expect(screen.getByText('404')).toBeInTheDocument()
+    expect(screen.getByText('Page not found')).toBeInTheDocument()
+    expect(
+      screen.getByText("The page you're looking for doesn't exist or has been moved.")
+    ).toBeInTheDocument()
+  })
+
+  it('renders with custom title and message', () => {
+    render(<NotFound title="Custom 404" message="Custom not found message" />)
+
+    expect(screen.getByText('Custom 404')).toBeInTheDocument()
+    expect(screen.getByText('Custom not found message')).toBeInTheDocument()
+  })
+
+  it('calls onGoBack when go back button is clicked', () => {
+    const onGoBack = vi.fn()
+
+    render(<NotFound onGoBack={onGoBack} />)
+
+    fireEvent.click(screen.getByText('Go back'))
+    expect(onGoBack).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onGoHome when go home button is clicked', () => {
+    const onGoHome = vi.fn()
+
+    render(<NotFound onGoHome={onGoHome} />)
+
+    fireEvent.click(screen.getByText('Go home'))
+    expect(onGoHome).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('Unauthorized', () => {
+  it('renders with default props', () => {
+    render(<Unauthorized />)
+
+    expect(screen.getByText('Access denied')).toBeInTheDocument()
+    expect(
+      screen.getByText("You don't have permission to access this page.")
+    ).toBeInTheDocument()
+  })
+
+  it('renders with custom title and message', () => {
+    render(<Unauthorized title="Custom 403" message="Custom unauthorized message" />)
+
+    expect(screen.getByText('Custom 403')).toBeInTheDocument()
+    expect(screen.getByText('Custom unauthorized message')).toBeInTheDocument()
+  })
+
+  it('calls onLogin when sign in button is clicked', () => {
+    const onLogin = vi.fn()
+
+    render(<Unauthorized onLogin={onLogin} />)
+
+    fireEvent.click(screen.getByText('Sign in'))
+    expect(onLogin).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onGoBack when go back button is clicked', () => {
+    const onGoBack = vi.fn()
+
+    render(<Unauthorized onGoBack={onGoBack} />)
+
+    fireEvent.click(screen.getByText('Go back'))
+    expect(onGoBack).toHaveBeenCalledTimes(1)
+  })
+})