我试图添加一个快餐栏,以便在用户登录或不登录时显示一条消息。SnackBar.jsx:
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import ErrorIcon from "@material-ui/icons/Error";
import CloseIcon from "@material-ui/icons/Close";
import green from "@material-ui/core/colors/green";
import IconButton from "@material-ui/core/IconButton";
import Snackbar from "@material-ui/core/Snackbar";
import SnackbarContent from "@material-ui/core/SnackbarContent";
import { withStyles } from "@material-ui/core/styles";
const variantIcon = {
success: CheckCircleIcon,
error: ErrorIcon
};
const styles1 = theme => ({
success: {
backgroundColor: green[600]
},
error: {
backgroundColor: theme.palette.error.dark
},
icon: {
fontSize: 20
},
iconVariant: {
opacity: …Run Code Online (Sandbox Code Playgroud) 每次我点击我想要处理的HTML文件时,Dreamweaver都会加载.如果我可以将Dreamweaver for atom作为默认值进行交换,那将会很棒.我无法弄清楚如何做到这一点.目前在OS X Yosemite 10.10.1和Atom版本0.165.0上.
我一直在尝试使用cypress.io测试条带结帐表单
如果有人设法让这个工作,请告诉我.我在这里找到了一个关于这个问题的帖子https://github.com/cypress-io/cypress/issues/136并基于此我想出了:
cy.get('iframe.stripe_checkout_app')
.wait(10000)
.then($iframe => {
const iframe = $iframe.contents()
const myInput0 = iframe.find('input:eq(0)')
const myInput1 = iframe.find('input:eq(1)')
const myInput2 = iframe.find('input:eq(2)')
const myButton = iframe.find('button')
cy
.wrap(myInput0)
.invoke('val', 4000056655665556)
.trigger('change')
cy
.wrap(myInput1)
.invoke('val', 112019)
.trigger('change')
cy
.wrap(myInput2)
.invoke('val', 424)
.trigger('change')
cy.wrap(myButton).click({ force: true })
})
Run Code Online (Sandbox Code Playgroud)
但问题是条带形式仍然没有注册输入值.以下是http://www.giphy.com/gifs/xT0xeEZ8CmCTVMwOU8发生的一些小故事.基本上,表单不会注册更改输入触发器.
有谁知道如何使用cypress将数据输入到iframe中的表单中?
我正在尝试从firebase数据库渲染一些行,我收到此错误:
TaskQueue:任务错误:不变违规:尝试获取超出范围索引NaN的帧
const { currentUser } = firebase.auth();
var userfavorites = firebase.database().ref(`/users/${currentUser.uid}/favorites/`);
userfavorites.once('value').then(snapshot => {
this.setState({ userfav: snapshot.val() })
})
...
<FlatList
data={this.state.userfav}
renderItem={({ item }) => (
<Text>{item.favdata}</Text>
)}
/>
Run Code Online (Sandbox Code Playgroud)
我正在使用 redux 和 react 路由器。
我想测试一个路由参数是否显示在页面上。
test('route param is displayed', async () => {
const { queryByText } = customRender(
<EditCard />,
{
route: '/card/1554990887217',
}
);
const cardId = queryByText(/1554990887217/);
await waitForElement(() => cardId);
})
Run Code Online (Sandbox Code Playgroud)
我的自定义渲染像这样包装路由器和 redux:
export const customRender = (
ui,
{
route = '/',
history = createMemoryHistory({ initialEntries: [route] }),
initialState,
store = createStore(rootReducer, initialState),
...options
} = {}
) => ({
...rtl(
<Provider store={store}>
<Router history={history}>{ui}</Router>
</Provider>,
options
),
history,
});
Run Code Online (Sandbox Code Playgroud)
路线参数只是没有出现在测试中。它只是超时错误。
不过,它可以在页面上运行,因为如果我启动应用程序并手动测试它,一切都按预期运行。
javascript testing reactjs react-router react-testing-library
?fireEvent.change()只是不起作用。
它说元素上没有设置器。
我尝试改用咏叹调选择器
const DraftEditor = getByRole('textbox')
DraftEditor.value ='something';
fireEvent.change(DraftEditor);
Run Code Online (Sandbox Code Playgroud)
我再次尝试使用查询选择器
const DraftEditor = container.querySelector('.public-DraftEditor-content'));
Run Code Online (Sandbox Code Playgroud)
改为尝试键盘事件。
没有。
有没有人设法使用draftjs 和反应测试库发送富文本输入文本?
我有一个表格,在处理时显示“正在提交”状态,在完成后显示“已提交”状态。
这是我正在使用的提交处理程序......
const handleSubmit = (e, _setTitle) => {
e.preventDefault()
_setTitle('Submitting...')
try {
doformStuff(emailRef.current.value)
} catch (err) {
throw new Error(err)
} finally {
_setTitle('Submitted perfectly.')
}
}
Run Code Online (Sandbox Code Playgroud)
我想测试提交状态是否出现,无论多短。
it('shows "submitting" when submitting', async () => {
// arrange
render(<MobileEmailCapture/>)
// act
const emailInput = screen.getByPlaceholderText('yourem@il.com')
userEvent.type(emailInput, fakeEmail)
fireEvent.submit(screen.getByTestId('form'))
// assert
expect(screen.getByTestId('title')).toHaveTextContent('Submitting...')
})
Run Code Online (Sandbox Code Playgroud)
问题是测试直接跳转到提交状态
Error: FAILED Expected 'Submitted perfectly.' to match 'Submitting...'.
我知道这就是最终的结果,但我想测试临时过渡状态。我怎么做?
我在前端使用react-apollo,在后端使用graphcool.我有一个突变,创建一个这样的教程:
const CREATE_TUTORIAL_MUTATION = gql`
mutation CreateTutorialMutation(
$author: String
$link: String
$title: String!
$postedById: ID!
$completed: Boolean!
) {
createTutorial(
author: $author
link: $link
title: $title
postedById: $postedById
completed: $completed
) {
author
link
title
postedBy {
id
name
}
completed
}
}
`
Run Code Online (Sandbox Code Playgroud)
它在提交处理程序中调用,如此...
this.props.createTutorialMutation({
variables: {
author,
link,
title,
completed: false,
postedById
}
})
Run Code Online (Sandbox Code Playgroud)
一切都很美妙.
现在我想在创建新教程时添加一组标记.我创建了输入字段并将其连接起来,以便tags变量是一个对象数组,每个对象都有一个标记id和标记文本.
如果我尝试将标记字段添加到变异中,则需要标量类型.但是对于一组对象似乎没有标量类型.
如果我在调用变异时将tag变量作为参数传递,我如何填充变异中的Scalar类型字段(在148行上这里https://github.com/joshpitzalis/path/blob/graphQL/src/ components/Add.js)和架构?
我是graphQL的新手,我明白我可能会以错误的方式接近这一点.如果是这种情况,我如何在graphQL中添加一个对象数组?
我有这个组件状态
this.state = {
title: "",
salary: {
min: "",
max: "",
single: ""
}
}
Run Code Online (Sandbox Code Playgroud)
我使用这个函数来处理用户输入
handleInputChange = (e) => {
this.setState({[e.target.name]:e.target.value});
}
Run Code Online (Sandbox Code Playgroud)
它与
<input type="text" id="title" name="title" onChange={this.handleInputChange}/>
Run Code Online (Sandbox Code Playgroud)
我可以用这样的函数来改变 this.state.salary.min/max ...
我的意思是这种类型的函数可以与 state 中的嵌套对象一起使用<input/> name art吗?
在我学习 react 和 firebase 项目的最后阶段,我遇到了一个问题。通过阅读这两个的文档,我已经了解了在大多数情况下如何以及如何做。
我想从博客文章中获取内容,然后对其进行编辑并使用
update()
Run Code Online (Sandbox Code Playgroud)
方法 firebase 有。到目前为止,我面临的两个错误是我无法编辑该内容,因为 react 说它是一个受控元素,我从文档中了解到这是因为我将其作为值传入。
但是,当我尝试删除它并在 onInputChange 中创建一个 setState 时,就像文档建议的那样,它已更新但内容为空白,并且输入字段中也缺少原始文本。这意味着我在反应时做错了但我不确定它是什么。
这是目前设置代码的方式。问题的摘要归结为为什么我无法更改文本框中的值。请问我做错了什么?
reactjs ×8
javascript ×6
testing ×4
firebase ×2
apollo ×1
atom-editor ×1
cypress ×1
default ×1
draftjs ×1
edit ×1
forms ×1
graphcool ×1
graphql ×1
macos ×1
material-ui ×1
react-native ×1
react-router ×1
redux ×1