xiaoxia-saas/apps/web/src/test/components/layout/AppLayout.test.tsx

/**
 * AppLayout 组件测试
 */
import React from "react"
import { describe, it, expect, vi } from "vitest"
import { render, screen } from "@testing-library/react"
import { MemoryRouter } from "react-router-dom"

// mock Header 组件
vi.mock("@/components/layout/Header", () => ({
  default: () => <header data-testid="mock-header">Mock Header</header>,
}))

// mock Outlet
vi.mock("react-router-dom", async () => {
  const actual = await vi.importActual<typeof import("react-router-dom")>("react-router-dom")
  return {
    ...actual,
    Outlet: () => <div data-testid="mock-outlet">Outlet Content</div>,
  }
})

import AppLayout from "@/components/layout/AppLayout"

const renderWithRouter = (ui: React.ReactElement) => {
  return render(<MemoryRouter>{ui}</MemoryRouter>)
}

describe("AppLayout", () => {
  it("应该渲染 Header", () => {
    renderWithRouter(<AppLayout sidebar={<aside>侧边栏</aside>} />)
    expect(screen.getByTestId("mock-header")).toBeInTheDocument()
  })

  it("应该渲染侧边栏", () => {
    renderWithRouter(<AppLayout sidebar={<aside data-testid="sidebar">侧边栏内容</aside>} />)
    expect(screen.getByTestId("sidebar")).toBeInTheDocument()
  })

  it("应该渲染 Outlet 内容", () => {
    renderWithRouter(<AppLayout sidebar={<aside>侧边栏</aside>} />)
    expect(screen.getByTestId("mock-outlet")).toBeInTheDocument()
  })

  it("应该包含正确的语义化结构", () => {
    const { container } = renderWithRouter(<AppLayout sidebar={<aside>侧边栏</aside>} />)
    expect(container.querySelector(".xx-app-shell")).toBeInTheDocument()
    expect(container.querySelector(".xx-app-body")).toBeInTheDocument()
    expect(container.querySelector(".xx-app-content")).toBeInTheDocument()
    expect(container.querySelector("main")).toBeInTheDocument()
  })
})