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

Question

当我点击名为“New Post”的按钮时，我的Rails应用程序中有一个模式。然后你可以填写一个表格，它会创建一个帖子。这一切都是用React处理的（如果有的话）。 RSpec无法在模态中找到任何元素。下面是我的测试：

需要“rails_helper”

RSpec.feature "Creating a post" do 

before do 
    @user = User.create(email:"email@gmail.com", password: "password") 
end 


scenario "A valid user creates a post" do 
    visit '/' 
    click_link 'Login' 
    fill_in "Email", with: "email@gmail.com" 
    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 

我尝试添加睡觉，看是否在切换动画是这样做，但没有发生。这里是包含模态的完整React类。任何想法都会有帮助。

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