- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Material-UI 和 React 来构建一个 Dropdown
组件。
下拉.tsx
import React from "react";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import Grow, { GrowProps } from "@material-ui/core/Grow";
import Input from "@material-ui/core/Input";
import MenuList from "@material-ui/core/MenuList";
import Paper from "@material-ui/core/Paper";
import Popper from "@material-ui/core/Popper";
import MenuItem from "@material-ui/core/MenuItem";
export default function Dropdown(props: {
onSearch: (suggestion: string) => void;
}) {
const [searchText, setSearchText] = React.useState("");
const [open, setOpen] = React.useState(false);
let searchElement: null | HTMLElement = null;
const onSearchTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchText(event.target.value);
setOpen(true);
};
const openSearchSuggestion = () => {
setOpen(true);
};
const setSearchElement = (node: null | HTMLElement) => {
searchElement = node;
};
const closeSearchSuggestion = () => {
setOpen(false);
};
const handleOnClickAway = (event: React.MouseEvent<EventTarget>) => {
if (searchElement && searchElement.contains(event.target as HTMLElement)) {
return;
}
closeSearchSuggestion();
};
const handleSearchSuggestionClick = (suggestion: string) => (
event: React.MouseEvent<EventTarget>
) => {
props.onSearch(suggestion);
};
const searchSuggestionsRenderer = (suggestion: string, index: number) => {
return (
<MenuItem
key={index}
onClick={handleSearchSuggestionClick(suggestion)}
className="suggestion-item"
id={`suggestion-item-${index}`}
disabled={suggestion === "Criteria 2"}
>
{searchText} in {suggestion}
</MenuItem>
);
};
const popperTrans = ({ TransitionProps }: { TransitionProps: GrowProps }) => {
const searchSuggestions = ["Criteria 1", "Criteria 2"];
return (
<Grow {...TransitionProps} style={{ transformOrigin: "0 0 0" }}>
<Paper className="search-suggestions-paper">
<ClickAwayListener onClickAway={handleOnClickAway}>
<MenuList>
{searchText &&
searchSuggestions &&
searchSuggestions.map(searchSuggestionsRenderer)}
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
);
};
return (
<div>
<Input
inputRef={setSearchElement}
className="search-input"
placeholder="Search"
value={searchText}
onChange={onSearchTextChange}
onFocus={openSearchSuggestion}
data-testid="searchInput"
/>
<Popper
className="search-suggestion-popper"
open={open && searchText.trim().length >= 2}
anchorEl={searchElement}
placement="bottom-start"
transition={true}
>
{popperTrans}
</Popper>
</div>
);
}
我现在正在使用 react-testing-library 测试这个组件。我想检查下拉列表中的第二个选项是否被禁用。我尝试检查单击第二个选项时是否调用了单击菜单项时调用的 onSearch 函数。
测试检查选项被禁用
test('that criteria 2 option is disabled', () => {
const props = { onSearch: jest.fn() }
const { getAllByRole, getByTestId } = render(<Dropdown {...props} />);
const Input = getByTestId('searchInput');
const TextBox = globalGetByRole(Input, 'textbox') as HTMLInputElement;
fireEvent.change(TextBox, { target: { value: 'test' } });
const MenuItems = getAllByRole('menuitem');
expect(MenuItems.length).toBe(2);
const Criteria2MenuItem = MenuItems[1];
fireEvent.click(Criteria2MenuItem);
expect(props.onSearch).toHaveBeenCalledTimes(0);
});
但这没有用。该函数被调用一次。为什么会发生这种情况,我该如何测试我想测试的内容?
最佳答案
当您禁用 Material-UI MenuItem
时
<MenuItem disabled>
{...}
</MenuItem>
它将 aria-disabled="true"
和 Mui-disabled
CSS 类添加到 DOM 中的 li
元素。 li
不是一个有效的按钮,因此您不能通过单击它来测试它。您需要使用 jest-dom
中的 .toHaveAttribute()
检查它是否具有 aria-disabled
属性。
expect(Criteria2MenuItem).toHaveAttribute("aria-disabled")
关于reactjs - 如何使用 react-testing-library 检查 material-ui MenuItem 是否被禁用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64553059/
我想为 MenuItem 实现键盘快捷键。我使用了下面的代码: ` 但是当我按下 CTRL+N 时,InputGestureText 属性没有响应。我正在使用
例子: 菜单 1(可见 = 假) 菜单 2(可见 = 假) 菜单 3(可见 = 真) 当点击 Menu3 时,我希望显示 Menu1 和 Menu2。 @Override public void on
我的应用程序中有菜单。我需要检查用户选择了哪个菜单项并采取适当的措施。我这样做是为了, @Override public boolean onOptionsItemSelected(MenuI
我有以下 xaml: TestItemModel 类仅包含一个 IsSelected bool 属
我是 BlackBerry 的新手,我仍然为 BlackBerry OS 5 开发应用程序。 我知道 BlackBerry 中的 MenuItem 类用于在 Blackberry 中创建菜单项。我的
在页面加载时,JavaScript 使第一个缩略图处于事件状态,但我想根据它正在加载的页面将其更改为第二个、第三个甚至第四个缩略图。 JavaScript 适用于第一个缩略图处于事件状态: $('#m
如何获取已单击的任何给定菜单项的文本? 菜单是动态填充的,所以我似乎仅限于此: Menu.MenuItems.Add(new MenuItem("MenuName", new EventHandle
我有一个"file"MenuItem,我想显示最近打开的文件列表。 这是我现在拥有的 xaml:
我一直在使用 React/Next.js 来使用 Material-UI,但遇到了一个奇怪且持续存在的错误。我无法获取呈现常规垂直下拉菜单。我如何获得 s 垂直渲染? 我搜索了文档,但找不到任何内容。
下面的代码我有问题。当我将鼠标悬停在菜单项上时,departmentsHover 类不会影响菜单项。颜色和背景图像没有改变。 我必须做什么? P.S 我在环境中使用 MS visual Studio
我的 TableViewController 类中有这个奇怪的错误消息 class MenuTableViewController: UITableViewController { filepriva
我正在使用旧版 MainMenu control (with MenuItem s) control in an application, and would like to implement zo
我在 Button 上有一个 ContextMenu,显示时它会显示一个菜单项列表,这很好。如果我将鼠标移到菜单中的某个项目上,它会高亮显示,但当我将鼠标悬停在文本上方和周围时,我也会得到一个辅助高亮
我想向我的 ContextMenu 的某些 MenuItems 添加一个 Ellipse。 遗憾的是我无法让它工作[没有显示任何内容]。 Canvas canvas = new Canvas() {
我有一个基于 MVVM 的 WPF 上下文菜单,并希望将菜单项的可见性绑定(bind)到 IsEnabled其子菜单项的属性。问题是:根MenuItem始终可见,即使所有子菜单项都被禁用。但是在菜单项
我想知道我上面提出的问题的答案。我发现了很多关于这个问题的信息,但仅限于 Java Swing,而且 Action 处理是完全不同的。感谢您的回答,我很抱歉我的英语不好。 最佳答案 你可以做到 Eve
在shinydashboard中,可以创建menuItem(),它们是侧边栏中的选项卡。我希望能够使用标准 input$foo 语法轮询哪个选项卡处于事件状态。 但是,我没能做到。我尝试引用 menu
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我有一个菜单,我想点击菜单,但如果你们知道我的意思的话,我不想点击文本。MenuItem 有一个边框或类似的东西,但是当我点击它时它不会重定向到我想要的页面,除非我点击文本。 是否可以单击整个“按钮”
我正在编写一个备份工具。在我的工具之上,我有一个包含两个工具条菜单项的菜单条。我根据我的期望稍微改变了颜色。不关注菜单看起来很棒: 当我现在单击菜单项"file"打开上下文菜单时,颜色变为白色,我无法
我是一名优秀的程序员,十分优秀!