feat(dropdown): test cases (#2786)

* fix(popover): trigger disabled prop warning

* chore(.changeset): fix typo

* feat(dropdown): add @nextui-org/image

* feat(dropdown): add more tests for custom trigger with isDisabled

* feat(dropdown): make sure the menu can be open

---------

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
This commit is contained in:
աӄա 2024-04-19 00:59:58 +08:00 committed by GitHub
parent 183a4a6cfd
commit 2bc1d1a58b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 66 additions and 30 deletions

View File

@ -4,4 +4,4 @@
"@nextui-org/theme": patch
---
Fix `isDisabled` prop warning on NextUI components that don't support this propterty, it is also fixed for non-NextUI components.
Fix `isDisabled` prop warning on NextUI components that don't support this property, it is also fixed for non-NextUI components.

View File

@ -3,6 +3,8 @@ import {act, render} from "@testing-library/react";
import {Button} from "@nextui-org/button";
import userEvent from "@testing-library/user-event";
import {User} from "@nextui-org/user";
import {Image} from "@nextui-org/image";
import {Avatar} from "@nextui-org/avatar";
import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSection} from "../src";
@ -146,6 +148,10 @@ describe("Dropdown", () => {
});
expect(spy).toBeCalledTimes(0);
let menu = wrapper.queryByRole("menu");
expect(menu).toBeTruthy();
});
it("should work with single selection (controlled)", async () => {
@ -455,14 +461,11 @@ describe("Dropdown", () => {
expect(onSelectionChange).toBeCalledTimes(0);
});
it("should render without error (custom trigger + isDisabled)", async () => {
it("should render without error (custom trigger with isDisabled)", async () => {
const spy = jest.spyOn(console, "error").mockImplementation(() => {});
render(
<Dropdown isDisabled>
<DropdownTrigger>
<div>Trigger</div>
</DropdownTrigger>
const renderDropdownMenu = () => {
return (
<DropdownMenu aria-label="Actions" onAction={alert}>
<DropdownItem key="new">New file</DropdownItem>
<DropdownItem key="copy">Copy link</DropdownItem>
@ -471,6 +474,16 @@ describe("Dropdown", () => {
Delete file
</DropdownItem>
</DropdownMenu>
);
};
// Non Next UI Element in DropdownTrigger
render(
<Dropdown isDisabled>
<DropdownTrigger>
<div>Trigger</div>
</DropdownTrigger>
{renderDropdownMenu()}
</Dropdown>,
);
@ -478,19 +491,45 @@ describe("Dropdown", () => {
spy.mockRestore();
// Next UI Element in DropdownTrigger
render(
<Dropdown isDisabled>
<DropdownTrigger>
<User as="button" description="@tonyreichert" name="Tony Reichert" />
</DropdownTrigger>
<DropdownMenu aria-label="Actions" onAction={alert}>
<DropdownItem key="new">New file</DropdownItem>
<DropdownItem key="copy">Copy link</DropdownItem>
<DropdownItem key="edit">Edit file</DropdownItem>
<DropdownItem key="delete" color="danger">
Delete file
</DropdownItem>
</DropdownMenu>
{renderDropdownMenu()}
</Dropdown>,
);
expect(spy).toBeCalledTimes(0);
spy.mockRestore();
// NextUI Element that supports isDisabled prop in DropdownTrigger
render(
<Dropdown isDisabled>
<DropdownTrigger>
<Avatar isDisabled name="Marcus" />
</DropdownTrigger>
{renderDropdownMenu()}
</Dropdown>,
);
expect(spy).toBeCalledTimes(0);
spy.mockRestore();
// NextUI Element that doesn't support isDisabled prop in DropdownTrigger
render(
<Dropdown isDisabled>
<DropdownTrigger>
<Image
alt="NextUI hero Image"
src="https://nextui-docs-v2.vercel.app/images/hero-card-complete.jpeg"
width={300}
/>
</DropdownTrigger>
{renderDropdownMenu()}
</Dropdown>,
);

View File

@ -57,6 +57,7 @@
"@nextui-org/button": "workspace:*",
"@nextui-org/avatar": "workspace:*",
"@nextui-org/user": "workspace:*",
"@nextui-org/image": "workspace:*",
"@nextui-org/shared-icons": "workspace:*",
"framer-motion": "^11.0.22",
"clean-package": "2.2.0",

26
pnpm-lock.yaml generated
View File

@ -146,7 +146,7 @@ importers:
version: 4.0.2(eslint@7.32.0)(webpack@5.91.0)
eslint-plugin-import:
specifier: ^2.26.0
version: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@3.6.1)(eslint@7.32.0)
version: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
eslint-plugin-jest:
specifier: ^24.3.6
version: 24.7.0(@typescript-eslint/eslint-plugin@5.62.0)(eslint@7.32.0)(typescript@4.9.5)
@ -1456,6 +1456,9 @@ importers:
'@nextui-org/button':
specifier: workspace:*
version: link:../button
'@nextui-org/image':
specifier: workspace:*
version: link:../image
'@nextui-org/shared-icons':
specifier: workspace:*
version: link:../../utilities/shared-icons
@ -5934,10 +5937,6 @@ packages:
peerDependencies:
'@effect-ts/otel-node': '*'
peerDependenciesMeta:
'@effect-ts/core':
optional: true
'@effect-ts/otel':
optional: true
'@effect-ts/otel-node':
optional: true
dependencies:
@ -16011,7 +16010,7 @@ packages:
dependencies:
confusing-browser-globals: 1.0.11
eslint: 7.32.0
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@3.6.1)(eslint@7.32.0)
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
object.assign: 4.1.5
object.entries: 1.1.8
dev: true
@ -16044,7 +16043,7 @@ packages:
dependencies:
eslint: 7.32.0
eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.29.1)(eslint@7.32.0)
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@3.6.1)(eslint@7.32.0)
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
eslint-plugin-jsx-a11y: 6.8.0(eslint@7.32.0)
eslint-plugin-react: 7.34.1(eslint@7.32.0)
eslint-plugin-react-hooks: 4.6.0(eslint@7.32.0)
@ -16067,7 +16066,7 @@ packages:
eslint: 7.32.0
eslint-import-resolver-node: 0.3.9
eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@7.32.0)
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@3.6.1)(eslint@7.32.0)
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
eslint-plugin-jsx-a11y: 6.8.0(eslint@7.32.0)
eslint-plugin-react: 7.34.1(eslint@7.32.0)
eslint-plugin-react-hooks: 4.6.0(eslint@7.32.0)
@ -16116,7 +16115,7 @@ packages:
confusing-browser-globals: 1.0.11
eslint: 7.32.0
eslint-plugin-flowtype: 5.10.0(eslint@7.32.0)
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@3.6.1)(eslint@7.32.0)
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
eslint-plugin-jest: 24.7.0(@typescript-eslint/eslint-plugin@5.62.0)(eslint@7.32.0)(typescript@4.9.5)
eslint-plugin-jsx-a11y: 6.8.0(eslint@7.32.0)
eslint-plugin-react: 7.34.1(eslint@7.32.0)
@ -16157,7 +16156,7 @@ packages:
dependencies:
debug: 4.3.4
eslint: 7.32.0
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@3.6.1)(eslint@7.32.0)
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
glob: 7.2.3
is-glob: 4.0.3
resolve: 1.22.8
@ -16177,7 +16176,7 @@ packages:
enhanced-resolve: 5.16.0
eslint: 7.32.0
eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@7.32.0)
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@3.6.1)(eslint@7.32.0)
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
fast-glob: 3.3.2
get-tsconfig: 4.7.3
is-core-module: 2.13.1
@ -16288,7 +16287,7 @@ packages:
string-natural-compare: 3.0.1
dev: true
/eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@3.6.1)(eslint@7.32.0):
/eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0):
resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
engines: {node: '>=4'}
peerDependencies:
@ -22431,9 +22430,6 @@ packages:
resolution: {integrity: sha512-W+gxAq7aQ9dJIg/XLKGcRT0cvnStFAQHPaI0pvD0U2l6IVLueUAm3nwN7lkY62zZNmlvNx6jNtE4wlbS+CyqSg==}
engines: {node: '>= 12.0.0'}
hasBin: true
peerDependenciesMeta:
'@parcel/core':
optional: true
dependencies:
'@parcel/config-default': 2.12.0(@parcel/core@2.12.0)(typescript@4.9.5)
'@parcel/core': 2.12.0