test(ui): strengthen disabled cursor assertions and fix linting
This commit is contained in:
@@ -23,9 +23,7 @@ describe("Button component", () => {
|
|||||||
render(<Button disabled>Disabled Button</Button>)
|
render(<Button disabled>Disabled Button</Button>)
|
||||||
const button = screen.getByRole("button", { name: /disabled button/i })
|
const button = screen.getByRole("button", { name: /disabled button/i })
|
||||||
expect(button).toBeDisabled()
|
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:pointer-events-none")
|
||||||
|
expect(button).toHaveClass("disabled:cursor-default")
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import { render, screen } from "@testing-library/react"
|
|||||||
import { describe, expect, it } from "vitest"
|
import { describe, expect, it } from "vitest"
|
||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownMenuTrigger,
|
|
||||||
DropdownMenuContent,
|
DropdownMenuContent,
|
||||||
DropdownMenuItem,
|
DropdownMenuItem,
|
||||||
DropdownMenuSub,
|
DropdownMenuSub,
|
||||||
@@ -41,7 +40,7 @@ describe("DropdownMenu components", () => {
|
|||||||
expect(trigger).toHaveClass("cursor-pointer")
|
expect(trigger).toHaveClass("cursor-pointer")
|
||||||
})
|
})
|
||||||
|
|
||||||
it("DropdownMenuItem should not have cursor-pointer behavior when disabled", () => {
|
it("DropdownMenuItem should show default cursor when disabled", () => {
|
||||||
render(
|
render(
|
||||||
<DropdownMenu open={true}>
|
<DropdownMenu open={true}>
|
||||||
<DropdownMenuContent>
|
<DropdownMenuContent>
|
||||||
@@ -52,8 +51,24 @@ describe("DropdownMenu components", () => {
|
|||||||
const item = screen.getByText("Disabled Item")
|
const item = screen.getByText("Disabled Item")
|
||||||
// Radix sets data-disabled attribute
|
// Radix sets data-disabled attribute
|
||||||
expect(item).toHaveAttribute("data-disabled")
|
expect(item).toHaveAttribute("data-disabled")
|
||||||
// If pointer-events-none is missing, we check for cursor class
|
expect(item).toHaveClass("data-[disabled]:cursor-default")
|
||||||
// We expect the final class to have disabled:cursor-default or similar,
|
})
|
||||||
// or rely on pointer-events-none to block interactions.
|
|
||||||
|
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")
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user