Maofeng
c64864b3b5
Accept className on action declarations and carry it through compiled actions, default toolbar controls, menu items, custom renderers, and custom controls. Keep preset action ordering consistent across toolbar and bubble placements, with coverage for default and custom rendering paths.
113 lines
3.1 KiB
TypeScript
113 lines
3.1 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import { cleanup, fireEvent, render, screen } from "@testing-library/react"
|
|
import { afterEach, describe, expect, it } from "vitest"
|
|
|
|
import {
|
|
ActionGroup,
|
|
Bold,
|
|
Date,
|
|
LexicalActions,
|
|
LexicalBubbleToolbar,
|
|
LexicalContent,
|
|
LexicalFixedToolbar,
|
|
LexicalFooter,
|
|
LexicalRoot,
|
|
} from "."
|
|
|
|
afterEach(cleanup)
|
|
|
|
describe("declarative Lexical actions", () => {
|
|
it("renders actions only in their declared regions", () => {
|
|
render(
|
|
<LexicalRoot value="" onChange={() => undefined}>
|
|
<LexicalActions>
|
|
<Bold in={["toolbar", "bubble"]} />
|
|
<Date in="footer" />
|
|
</LexicalActions>
|
|
<LexicalFixedToolbar aria-label="fixed" />
|
|
<LexicalBubbleToolbar />
|
|
<LexicalContent />
|
|
<LexicalFooter aria-label="footer" />
|
|
</LexicalRoot>
|
|
)
|
|
|
|
expect(screen.getByRole("toolbar", { name: "fixed" })).not.toBeNull()
|
|
expect(screen.getByLabelText("footer")).not.toBeNull()
|
|
expect(screen.getByRole("button", { name: "Bold" })).not.toBeNull()
|
|
expect(screen.getByRole("button", { name: "Date" })).not.toBeNull()
|
|
})
|
|
|
|
it("supports menu groups", () => {
|
|
render(
|
|
<LexicalRoot value="" onChange={() => undefined}>
|
|
<LexicalActions>
|
|
<ActionGroup type="menu" label="格式">
|
|
<Bold />
|
|
</ActionGroup>
|
|
</LexicalActions>
|
|
<LexicalFixedToolbar />
|
|
<LexicalContent />
|
|
</LexicalRoot>
|
|
)
|
|
|
|
expect(screen.getByRole("button", { name: "格式" })).not.toBeNull()
|
|
})
|
|
|
|
it("forwards an action className to its default control", () => {
|
|
render(
|
|
<LexicalRoot value="" onChange={() => undefined}>
|
|
<LexicalActions>
|
|
<Bold className="text-destructive" />
|
|
</LexicalActions>
|
|
<LexicalFixedToolbar />
|
|
<LexicalContent />
|
|
</LexicalRoot>
|
|
)
|
|
|
|
expect(
|
|
screen
|
|
.getByRole("button", { name: "Bold" })
|
|
.classList.contains("text-destructive")
|
|
).toBe(true)
|
|
})
|
|
|
|
it("forwards an action className to its default menu item", async () => {
|
|
render(
|
|
<LexicalRoot value="" onChange={() => undefined}>
|
|
<LexicalActions>
|
|
<ActionGroup type="menu" label="格式">
|
|
<Bold className="text-destructive" />
|
|
</ActionGroup>
|
|
</LexicalActions>
|
|
<LexicalFixedToolbar />
|
|
<LexicalContent />
|
|
</LexicalRoot>
|
|
)
|
|
|
|
fireEvent.click(screen.getByRole("button", { name: "格式" }))
|
|
|
|
expect(
|
|
(
|
|
await screen.findByRole("menuitem", { name: "Bold" })
|
|
).classList.contains("text-destructive")
|
|
).toBe(true)
|
|
})
|
|
|
|
it("does not render optional regions without matching actions", () => {
|
|
render(
|
|
<LexicalRoot value="" onChange={() => undefined}>
|
|
<LexicalActions>
|
|
<Bold />
|
|
</LexicalActions>
|
|
<LexicalBubbleToolbar aria-label="bubble" />
|
|
<LexicalFooter aria-label="footer" />
|
|
<LexicalContent />
|
|
</LexicalRoot>
|
|
)
|
|
|
|
expect(screen.queryByLabelText("bubble")).toBeNull()
|
|
expect(screen.queryByLabelText("footer")).toBeNull()
|
|
})
|
|
})
|