yuxuanhui
73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
import { fireEvent, render, screen, within } from "@testing-library/react"
|
|
import { describe, expect, it } from "vitest"
|
|
|
|
import { ComponentsPreviewPage } from "./components-preview-page"
|
|
|
|
describe("ComponentsPreviewPage", () => {
|
|
it("previews and updates the shared select", async () => {
|
|
render(<ComponentsPreviewPage />)
|
|
|
|
const select = screen.getByRole("combobox", { name: "信号分类" })
|
|
expect(select).toHaveTextContent("全部信号")
|
|
|
|
fireEvent.click(select)
|
|
const option = await screen.findByRole("option", { name: "超卖类" })
|
|
fireEvent.pointerDown(option, { pointerType: "mouse" })
|
|
fireEvent.click(option)
|
|
|
|
expect(select).toHaveTextContent("超卖类")
|
|
expect(screen.getByRole("status", { name: "当前选择" })).toHaveTextContent(
|
|
"当前选择：超卖类",
|
|
)
|
|
})
|
|
|
|
it("previews date picker selection and clearing", async () => {
|
|
render(<ComponentsPreviewPage />)
|
|
|
|
const selectedDatePicker = screen.getByRole("button", {
|
|
name: "已选择日期",
|
|
})
|
|
expect(selectedDatePicker).toHaveTextContent("2026-08-07")
|
|
|
|
fireEvent.click(selectedDatePicker)
|
|
const popover = document.querySelector(
|
|
'[data-slot="popover-content"]',
|
|
) as HTMLElement
|
|
expect(popover).toBeInTheDocument()
|
|
const calendar = within(popover).getByRole("grid", { name: /2026年8月/ })
|
|
const day = within(calendar).getByRole("button", { name: /2026年8月8日/ })
|
|
fireEvent.click(day)
|
|
|
|
expect(selectedDatePicker).toHaveTextContent("2026-08-08")
|
|
fireEvent.click(screen.getByRole("button", { name: "清空已选择日期" }))
|
|
expect(selectedDatePicker).toHaveTextContent("选择日期")
|
|
})
|
|
|
|
it("previews popover open and close behavior", async () => {
|
|
render(<ComponentsPreviewPage />)
|
|
|
|
const trigger = screen.getByRole("button", { name: "打开交互说明" })
|
|
expect(trigger).toHaveAttribute("aria-expanded", "false")
|
|
|
|
fireEvent.click(trigger)
|
|
const popup = await screen.findByText("弹层已打开")
|
|
expect(popup).toBeInTheDocument()
|
|
expect(trigger).toHaveAttribute("aria-expanded", "true")
|
|
|
|
fireEvent.click(screen.getByRole("button", { name: "关闭弹层" }))
|
|
expect(screen.queryByText("弹层已打开")).not.toBeInTheDocument()
|
|
expect(trigger).toHaveAttribute("aria-expanded", "false")
|
|
})
|
|
|
|
it("shows disabled and loading states", () => {
|
|
render(<ComponentsPreviewPage />)
|
|
|
|
expect(screen.getByRole("button", { name: "禁用状态" })).toBeDisabled()
|
|
expect(screen.getByRole("button", { name: "禁用日期" })).toBeDisabled()
|
|
expect(
|
|
screen.getByRole("button", { name: "清空已选择日期" }),
|
|
).not.toBeDisabled()
|
|
expect(document.querySelectorAll('[data-slot="skeleton"]')).toHaveLength(2)
|
|
})
|
|
})
|