- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用带有 onClose
的 react-testing-library 测试 react Material UI Menu 组件当菜单失去焦点时触发的 Prop 。即使我向菜单外的组件添加单击或将输入元素放在外时,我也无法触发此状态。
const UserMenu: React.FunctionComponent<UserMenuProps> = ({ className }) => {
const signedIn = useAuthState(selectors => selectors.SignedIn);
const username = useAuthState(selectors => selectors.Username);
const messages = useMapState((state: AppRootState) => state.app.messages);
const signOut = useSignOut();
const [open, updateOpenStatus] = useState(false);
const anchorRef = useRef(null);
if (!signedIn) {
return <div data-testid="user-menu" className={className}>
<LinkButton to={ROUTES.SignIn.link()}>{messages.SignIn.Title}</LinkButton>
<LinkButton to={ROUTES.SignUp.link()}>{messages.SignUp.Title}</LinkButton>
<LinkButton to={ROUTES.ConfirmSignUp.link()}>{messages.ConfirmSignUp.Title}</LinkButton>
</div>;
}
return <div data-testid="user-menu" className={className}>
<Grid container direction="row" alignItems="center">
<Typography noWrap variant="subtitle2">
<span id="username" className="bold">{username}</span>
</Typography>
<IconButton id="menu-toggle" buttonRef={anchorRef} onClick={() => updateOpenStatus(true)}>
<AccountCircle/>
</IconButton>
<Menu
anchorEl={anchorRef.current}
anchorOrigin={{
vertical: 'top',
horizontal: 'right'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right'
}}
open={open}
onClose={() => updateOpenStatus(false)}
>
<MenuItem id="sign-out" onClick={() => { updateOpenStatus(false); signOut(); }}>{messages.SignOut.Action}</MenuItem>
</Menu>
</Grid>
</div>;
};
it('should open and close menu', async () => {
const { getByTestId } = render(<><UserMenu/>
<input data-testid="other"/>
</>, { state });
fireEvent.click(getByTestId('menu-toggle'));
expect(MockMenu).toHaveBeenLastCalledWith(expect.objectContaining({ open: true }), {});
fireEvent.focus(getByTestId('other'));
expect(MockMenu).toHaveBeenLastCalledWith(expect.objectContaining({ open: false }), {});
});
fireEvent.click(getByTestId('other'));
没有成功。
tree.find(Menu).simulate("close");
,但我认为这是不可能的
react-testing-library
.
最佳答案
您可以通过单击菜单生成的背景来触发关闭。我发现最简单的方法是通过 getByRole('presentation')
选择背景。 @testing-library
的方法.
测试代码:
it('should open and close the menu', () => {
const { getByTestId, getByRole } = render(<UserMenu />);
fireEvent.click(getByTestId('menu-toggle'));
// Get the backdrop, then get the firstChild because this is where the event listener is attached
fireEvent.click(getByRole('presentation').firstChild));
expect(MockMenu).toHaveBeenLastCalledWith(expect.objectContaining({ open: false }), {});
});
关于reactjs - 如何使用react-testing-library为react ui Menu触发onClose?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55030879/
我有这个简单的 WebSocket 问题 WebSocket Test var wsUri = "ws://echo.websocket.org/"; var output;
如何在用户关闭浏览器时运行 javascript。我尝试使用“onunload”,但每次我按 F5/刷新按钮时它都会调用?谢谢 最佳答案 就页面上的 Javascript 而言,关闭浏览器、导航到另一
我想在应用程序关闭时显示“感谢使用”消息。 处理应用程序关闭的事件是什么? 最佳答案 假设您的 Activity 在 A->B->C->D 中。当用户从 D Activity 按下后退按钮然后转到 C
我得到了这门课 class CWebBrowser2 : public CWnd 我想覆盖 OnClose 到目前为止我所做的是在我添加的头文件中 void OnClose();在我添加的 .cpp
我想检查一下我的 即将关闭。有没有办法使用我的 sidenav 对象的 EventEmitter onClose 来检查?你能举个例子吗? 最佳答案 这可以通过两种不同的方式实现——通过模板,以及在
我有一个系统,人们可以添加多个开始和结束日期,即屏幕截图: 选择第一个日期后,onClose 事件会设置第二个输入的日期并将其打开。浏览器 datePickers = function() {
我正在使用 fancyBox v2.0.4 ... 嗯,这应该很简单,但是在我的情况下不起作用...我只是想在 fancybox 关闭时运行回调函数... $('a#stpa_announcement
我正在研究一个放置在我项目的每种形式上的组件。是否可以在运行时让组件将代码包含到其所有者表单的 OnClose 事件处理程序中。换句话说,表单将触发它自己的 OnClose 事件处理程序,但组件还将包
我的项目中有许多使用 Form OnClose 事件的 Forms。但是,我需要在运行时的所有表单上添加另一个“通用”OnClose。有没有办法只添加新的事件方法,而不是替换它?因此,表单将触发两个
在 javascript 中,我们有 WebSocket.onclose() 用于在服务器关闭 websocket 连接时执行一些操作。当客户端设备关闭连接时,有没有办法在 Python 服务器中执行
在 javascript 中,我们有 WebSocket.onclose() 用于在服务器关闭 websocket 连接时执行一些操作。当客户端设备关闭连接时,有没有办法在 Python 服务器中执行
在我的 Fancybox 完全关闭且页面恢复正常后,我尝试触发第二个 jquery 函数。我尝试使用 onClosed fancybox 属性,但它不是在框关闭后发生,而是在框打开之前发生(在页面加载
我刚刚开始在浏览器中使用桌面通知来通知用户有关新任务和任务事件的信息。但重要的是要向每个用户通知每个事件,而且永远不要重复通知。 我检查了this descktop notification问题和许多
可以为你们提供一些帮助。 所以我使用 jQuery colorbox 并通过单击链接激活它。在颜色框中有一个带有一些复选框的表单,我想做的是在单击提交时将所选复选框的所有值放入父级(并随后关闭颜色框)
随着jQuery UI Datepicker Widget ,我想检查用户是否在模糊时将特定输入字段留空,如果是,则将日期值分配给 altField 的值。在我的脑海里有这样的事情...... $(s
回调事件不会在通过模态、关闭按钮和 esc 关闭弹出窗口时触发 我已经尝试将其添加到准备就绪的文档中,并且在单击触发器时它们都起作用了 $('.flipvideowrap').bind('click
我正在尝试重定向到 .fancybox 的“onclose”属性上的 URL ...它确实有效。有任何想法吗?代码如下。注意:模式看起来很好,但是当用户按下顶部的“x”时......屏幕只是空白。
我需要有关 UI 元素的帮助。我想在第一次关闭时显示下一个日历。不幸的是 onClose 函数没有运行:/我不知道为什么.. $(function () { $('#datepickerDat
我使用这个函数来调用我的窗口关闭。 这是确认框弹出窗口。 if(confirm("Sure you want to close the window"); { // yes return t
我正在实现一个带有 WebSocket 端点的应用程序。这是一些代码: @ApplicationScoped @ServerEndpoint(value="/socket", encoders = {
我是一名优秀的程序员,十分优秀!