RSPEC在React/Rails视图中找不到模态

Question

我在我的铁路应用中有一个模态，当您单击一个称为"新帖子"的按钮时会出现。然后，您可以填写表格，它将创建一个帖子。这一切都是用反应来处理的(如果很重要的话(。RSPEC无法在模式中找到任何元素。这是我的测试：

需要'rails_helper'

RSpec.feature "Creating a post" do 
before do 
    @user = User.create(email:"[e-mail]", password: "password")
end

scenario "A valid user creates a post" do 
    visit '/'
    click_link 'Login'
    fill_in "Email", with: "[e-mail]"
    fill_in "Password", with: "password"
    click_button "Log in"
    click_link "New Post"
    expect(page).to have_content("Create a Post")
end
end 

这是此测试引发的错误：

 expected to find text "Create a Post" in "Toggle navigation ReactBlog Home Logout New Post

我尝试添加睡眠，以查看切换中的动画是否在这样做，但什么也没有发生。这是包含模态的完整反应类。任何想法都会有所帮助。

var Posts = React.createClass({
getInitialState: function(){
    return {
        posts: this.props.posts,
        post: {
            title: '',
            author: '',
            content: '',
            video: ''
        }
    }
},
handlePostCreate: function(){
    var that = this;
    $.ajax({
        method: 'POST',
        data: { post: that.state.post },
        url: '/posts.json',
        success: function(res){
            var newPostList = that.state.posts;
            newPostList.push(res);
            that.setState({
                posts: newPostList,
                post: {
                    title: '',
                    author: '',
                    content: '',
                    video: ''
                }
            });
        } 
    });
},
handlePostDelete(post){
    var postList = this.state.posts.filter(function(item) {
      return post.id !== item.id;
    });
    this.setState({posts: postList});
},
handleTitleChange(e) {
    var newPost = this.state.post
    newPost.title = e.target.value
    this.setState({post: newPost});
},
handleAuthorChange(e) {
    var newPost = this.state.post
    newPost.author = e.target.value
    this.setState({post: newPost});
},
handleContentChange(e) {
    var newPost = this.state.post
    newPost.content = e.target.value
    this.setState({post: newPost});
},
handleVideoChange(e) {
    var newPost = this.state.post
    newPost.video = e.target.value
    this.setState({ post: newPost });
},
render: function(){ 
        var that = this; 
        var postBoard = this.state.posts.map(function(post){
            return (
            <Post post={post} key={post.id} onDeletePost={that.handlePostDelete} />
            );
        });
    return (
        <div>
            <div className="modal fade" id="myModal" role="dialog">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                          <button type="button" className="close" data-dismiss="modal">&times;</button>
                          <h4 className="modal-title">Create a Post</h4>
                        </div>
                        <div className="modal-body">
                            <div className='form-group'>
                                <input value={this.state.post.title} onChange={this.handleTitleChange} type='text' id="Title" className='form-control' placeholder="Title" />
                            </div>
                            <div className='form-group'>
                                <input value={this.state.post.author} onChange={this.handleAuthorChange} type='text' className='form-control' placeholder="Author" />
                            </div>
                            <div className='form-group'>
                                <input value={this.state.post.video} onChange={this.handleVideoChange} type="text" className='form-control' placeholder="Video URL" />
                            </div> 
                            <div className='form-group'>
                                <textarea value={this.state.post.content} onChange={this.handleContentChange} type="text" className="form-control" placeholder="Content" ></textarea>
                            </div>
                        </div>
                        <div className="modal-footer">
                            <button type="button" onClick={this.handlePostCreate} className="btn btn-primary" data-dismiss="modal">Post</button>
                        </div>
                    </div>
                </div>
            </div>

            { postBoard }
        </div>
    );
}
});

Answer 1

您必须为测试启用JavaScript。

scenario "A valid user creates a post", js: true do
  ...
end

另外，尝试添加save_and_open_page，看看您是否得到了预期的

scenario "A valid user creates a post", js: true do
  ...
  save_and_open_page
end