RSpec can not find modal in React/Rails view - ruby-on-rails

Question

I have a modal in my Rails app that appears when you click on a button called "New Post." You can then fill out a form and it will create a post. This is all handled with React (if that matters). RSpec is unable to find any element within the modal. Here is my test:
require '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
Here is the error this test throws:
expected to find text "Create a Post" in "Toggle navigation ReactBlog Home Logout New Post
I tried adding sleeps to see if the animation in the toggle was doing it, but nothing happened. Here is the full React class that contains the modal. Any thoughts would be helpful.
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">×</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

You have to enable javascript for the test.
scenario "A valid user creates a post", js: true do
...
end
Also, try adding save_and_open_page to see if you're getting what's expected
scenario "A valid user creates a post", js: true do
...
save_and_open_page
end