I have a textarea which is using Summernote and I set onChange event to it. I want to write test with RSpec + Capybara + Poltergeist to confirm the onChange event is working.
As far as I checked, the textarea displayed in browser is actually div tag with 'note-editable' css class. How can I set text to it and fire onChange event?
I wrote a code like this, but got an error Capybara::ElementNotFound: Unable to find field "Some label"
:
visit edit_foo_path
fill_in 'Some label', with: 'Foo bar'
EDIT
I created a sample app for this issue:
https://github.com/JunichiIto/summernote-rspec-sandbox
Raw HTML
<!DOCTYPE html>
<html>
<head>
<title>SummernoteRspecSandbox</title>
<link rel="stylesheet" media="all" href="/assets/application.self-f866ffa01bf26be2b8a8ac982e49d917be3b9a46604dfdc9fc8c139b62409465.css?body=1" data-turbolinks-track="true" />
<script src="/assets/jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-ca5248a2fad13d6bd58ea121318d642f195f0b2dd818b30615f785ff365e8d1f.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap.self-2bbd2c0465f01b1f8270958ddfc2e62a08915f295a35d22df2971eb936cf3c64.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/summernote.self-612431947ae9c3f1f0283dbbbc757153947f8e5de408f9bd8886b1232e8a54f7.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/blogs.self-b9a3bc0ee16e0bc44fb466bd5c7833ebec276447634d25729280397c65cff176.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-f8806224e027f3e3f0138ea9ce99319e298dfdb323304d1f1be6eae8e8c74724.js?body=1" data-turbolinks-track="true"></script>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="4iu31ugTgvMERb1xQRjtcySSssjMthLWclgiHMe60aHGMeC3IMeNKZlkfFSKT33hNuvDqUUgUNTUaQEcoBl9mw==" />
</head>
<body>
<h1>New Blog</h1>
<form class="new_blog" id="new_blog" action="/blogs" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="TBkcVk38/42Cx9coe717KKpb1H2cmDpv8kz7LREfkiloA0s3hSjwVx/mFg2w6uu6uCKlHBUOeG1Ufdgtdrw+Ew==" />
<div class="field">
<label for="blog_title">Title</label><br>
<input type="text" name="blog[title]" id="blog_title" />
</div>
<div class="field">
<label for="blog_content">Content</label><br>
<textarea class="summernote" name="blog[content]" id="blog_content">
</textarea>
</div>
<div class="actions">
<input type="submit" name="commit" value="Create Blog" />
</div>
</form>
<a href="/blogs">Back</a>
</body>
</html>
CoffeeScript
$ ->
$('.summernote').summernote()
RSpec
require 'rails_helper'
feature 'Blogs' do
scenario 'Create blog' do
visit new_blog_path
fill_in 'Title', with: 'Hello, world!'
fill_in 'Content', with: 'This is awesome blog.'
click_button 'Create Blog'
expect(page).to have_content 'Blog was successfully created.'
expect(page).to have_content 'Hello, world!'
expect(page).to have_content 'This is awesome blog.'
end
scenario 'Create blog with JS', js: true do
visit new_blog_path
fill_in 'Title', with: 'Hello, world!'
pending 'Capybara::ElementNotFound: Unable to find field "Content"'
fill_in 'Content', with: 'This is awesome blog.'
click_button 'Create Blog'
expect(page).to have_content 'Blog was successfully created.'
expect(page).to have_content 'Hello, world!'
expect(page).to have_content 'This is awesome blog.'
end
end