test(ui): strengthen disabled cursor assertions and fix linting

This commit is contained in:
Yunxiao Xu
2026-02-23 05:46:44 -08:00
parent 322ae1e7c8
commit e7be0dbeca
2 changed files with 21 additions and 8 deletions

View File

@@ -23,9 +23,7 @@ describe("Button component", () => {
render(<Button disabled>Disabled Button</Button>)
const button = screen.getByRole("button", { name: /disabled button/i })
expect(button).toBeDisabled()
// It should have cursor-pointer but also disabled:pointer-events-none
// which prevents the cursor from changing.
// We can also add disabled:cursor-default for clarity.
expect(button).toHaveClass("disabled:pointer-events-none")
expect(button).toHaveClass("disabled:cursor-default")
})
})

View File

@@ -2,7 +2,6 @@ import { render, screen } from "@testing-library/react"
import { describe, expect, it } from "vitest"
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSub,
@@ -41,7 +40,7 @@ describe("DropdownMenu components", () => {
expect(trigger).toHaveClass("cursor-pointer")
})
it("DropdownMenuItem should not have cursor-pointer behavior when disabled", () => {
it("DropdownMenuItem should show default cursor when disabled", () => {
render(
<DropdownMenu open={true}>
<DropdownMenuContent>
@@ -52,8 +51,24 @@ describe("DropdownMenu components", () => {
const item = screen.getByText("Disabled Item")
// Radix sets data-disabled attribute
expect(item).toHaveAttribute("data-disabled")
// If pointer-events-none is missing, we check for cursor class
// We expect the final class to have disabled:cursor-default or similar,
// or rely on pointer-events-none to block interactions.
expect(item).toHaveClass("data-[disabled]:cursor-default")
})
it("DropdownMenuSubTrigger should show default cursor when disabled", () => {
render(
<DropdownMenu open={true}>
<DropdownMenuContent>
<DropdownMenuSub>
<DropdownMenuSubTrigger disabled>Disabled Sub Trigger</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent />
</DropdownMenuPortal>
</DropdownMenuSub>
</DropdownMenuContent>
</DropdownMenu>
)
const trigger = screen.getByText("Disabled Sub Trigger")
expect(trigger).toHaveAttribute("data-disabled")
expect(trigger).toHaveClass("data-[disabled]:cursor-default")
})
})