I am trying to write an rspec test that will;
visit the store page
select a value in the Countries select box
and test that the value exists (initially in the Countries box but I would also be testing for cities which is dependent on Country in the second test)
HTML page
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App</title>
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/password_resets.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/people.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/products.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/sessions.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/store.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/password_resets.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/people.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/products.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/sessions.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/static_pages.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/store.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/users.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="NcsV3Ve7QqLTjeLNz5MLuCxzvG8urc63NiDk7RZTGtM=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
sample app
<nav>
<ul class="nav btn-group navbar-nav navbar-right list-inline">
<li>Home</li>
<li>Help</li>
<li>Sign in</li>
</ul>
</div>
</ul>
</nav>
</div>
</div>
</header>
<div class="container">
<h2>some text</h2>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="row">
<div class="col-md-6 col-md-offset-2">
<form accept-charset="UTF-8" action="/store/show" method="get"><div style="display:none"><input name="utf8" type="hidden" value="✓" /></div>
<label for="catalogue_country">Country</label>
<select id="countries_select" name="catalogue[country_id]"><option selected="selected" value="1">France</option>
<option value="2">Italy</option>
<option value="3">United Kingdom</option></select>
<div class="pull-right">
<input class="btn brn-large btn-primary" name="commit" type="submit" value="Add to Cart" />
</form> </div>
</div>
</div>
</div>
</div>
<footer class="footer">
<small>
Rails Tutorial
by Michael Hartl
</small>
<nav>
<ul>
<li>About</li>
<li>Contact</li>
<li>News</li>
</ul>
</nav>
</footer>
<pre class="debug_dump">--- !ruby/hash:ActionController::Parameters
controller: store
action: index
</pre>
</div>
</body>
</html>
My test
require 'spec_helper'
describe "index" do
subject { page }
before do
visit store_path
select "United Kingdom", :from => "catalogue[country_id]"
end
it { should have_select('country_id', :selected => 'United Kingdom') }
end
The failures
Failures:
1) index
Failure/Error: visit store_path
NoMethodError:
undefined method `id' for nil:NilClass
The rails console [app.store_path] verifies that store_path is '/store'
The select boxes are dynamically populated according to the directions in this blog posting
Any help is appreciated, thanks in advance
There are the routes
match '/store', to: 'store#index', as: :store, via: 'get'
get 'store/show'
match 'store/update_cities', to: 'store#update_cities', as: :update_cities, via: 'get'
match 'store/update_currencies', to: 'store#update_currencies', as: :update_currencies, via: 'get'
Its one index page (store_path) which has a countries select box.
This is the store controller
def index
#countries = Country.all
#cities = City.where("country_id = ?", Country.first.id)
#currencies = Currency.where("country_id = ?", Country.first.id)
#locations = Location.where("city_id = ?", Location.first.id)
#products = Product.where("Location_id = ?", Product.first.id)
#plugs = Plug.where("Location_id = ?", Plug.first.id)
end
def show
end
def update_cities
#cities = City.where("country_id = ?", params[:country_id])
respond_to do |format|
format.js
end
end
Are you trying to visit a specific store, or listing all the stores ?
in your case you are trying to visit a specific store which you need to pass a parameter for it in this case the store id
To know the exact path write in the console:
rake routes
you will find each path to its url, if you want to list all the stores you need to write:
stores_path
instead of:
store_path
store_path is /store/:id
Related
When I pass an HTML entity into HTML via the View Data object, it does not convert to it's result. (i.e. the ™ entity remains ™ and does not convert to ™)
This is the destination page
#{
ViewData["Title"] = "Assess Mental Health";
ViewData["HeaderTitle"] = "Assess Mental Health";
ViewData["HeaderLine1"] = "with";
ViewData["HeaderLine2"] = "Intelligent Assessments™";
ViewData["HeaderImage"] = "url(../img/headers/AI_Head.png)";
}
<main data-zanim-timeline="{}" data-zanim-trigger="scroll">
<partial name="_Header" />
</main>
This is the partial
<!--
####################################################
H E A D E R
####################################################
-->
<section class="overflow-hidden py-0" id="top">
<div class="bg-holder overlay parallax" style="background-image:#ViewData["HeaderImage"];background-position: center 58%;">
</div>
<!-- / bg-holder-->
<div class="header-overlay"></div>
<div class="container" data-zanim-xs='{"duration":"1.5","delay":"0.1"}'>
<div class="d-flex align-items-center pt-10 pb-8">
<div class="header-text">
<div class="overflow-hidden">
<h1 class="display-3 text-white fs-4 fs-md-6">#ViewData["HeaderTitle"]</h1>
<p class="text-uppercase text-400 ls-2 mt-2 my-0 pb-0 pt-2">#ViewData["HeaderLine1"]</p>
<p class="my-0 py-0"><span class="fs-7 logo-secondary-style-light">pr<span class="logo-primary-style-light">e</span>vidence<sup class="fs-3 font-weight-light">™</sup></span></p>
<p class="text-uppercase fs-1 text-400 ls-2 my-0 py-0">#ViewData["HeaderLine2"]</p>
</div>
<partial name="_CallToActionLight" />
<div class="header-indicator-down"><a class="indicator indicator-down opacity-75" href="#Content" data-fancyscroll="data-fancyscroll" data-offset="64"><span class="indicator-arrow indicator-arrow-one" data-zanim-xs='{"from":{"opacity":0,"y":30},"to":{"opacity":1,"y":0},"ease":"Back.easeOut","duration":1,"delay":1.5}'></span></a></div>
</div>
</div>
</div>
</section>
<!-- / end H E A D E R -->
This is my layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex">
<title>#ViewBag.Title | Previdence | Mental Healthcare Platform</title>
<partial name="_Favicons" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://kit.fontawesome.com/971f8efccd.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/non-npm/owl.carousel/owl.carousel.css" rel="stylesheet">
<link href="~/lib/non-npm/remodal/remodal.css" rel="stylesheet">
<link href="~/lib/non-npm/remodal/remodal-default-theme.css" rel="stylesheet">
<link href="~/lib/non-npm/theme/theme.css" rel="stylesheet">
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/cookiealert.css" />
</head>
<body>
<partial name="_Preloader" />
<partial name="_TopNavbar" />
#*<partial name="_CookieConsentPartial" />*#
#RenderBody()
<partial name="_Footer" />
<partial name="_GDPR_Alert" />
<!--
####################################################
J A V A S C R I P T - jquery, bootstrap, plugins
Place at the end of the document so the pages load faster
####################################################
-->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
#RenderSection("Scripts", required: false)
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/non-npm/plugins/plugins.min.js"></script>
<script src="~/lib/non-npm/stickyfilljs/stickyfill.min.js"></script>
<script src="~/lib/non-npm/fortawesome/all.min.js"></script>
<script src="~/lib/non-npm/rellax/rellax.min.js"></script>
<script src="~/lib/non-npm/progressbar/progressbar.min.js"></script>
<script src="~/lib/non-npm/isotope-layout/isotope.pkgd.min.js"></script>
<script src="~/lib/non-npm/isotope-packery/packery-mode.pkgd.min.js"></script>
<script src="~/lib/non-npm/owl.carousel/owl.carousel.js"></script>
<script src="~/lib/non-npm/remodal/remodal.min.js"></script>
<script src="~/lib/non-npm/hover-dir/jquery.hoverdir.js"></script>
<script src="~/lib/non-npm/typed/typed.js"></script>
<script src="~/lib/non-npm/theme/theme.min.js"></script>
<script src="~/lib/non-npm/GDPR_Alert/cookiealert.js"></script>
<!-- / end J A V A S C R I P T -->
</body>
</html>
Try with #Html.Raw(string) to render html string :
#Html.Raw(#ViewData["HeaderLine2"])
Thanks to #Nan Yu's answer above, I was able to find the answer.
Try with #Html.Raw(string) to render html string
#Html.Raw() was part of the answer, the other part was that I am using a text-uppercase text transformation so I also needed to add a text-transform-none to remove the text-uppercase text transformation (this text-transformation was not shown in my code example).
#Html.Raw(<span class=\"text-transform-none\">™</span>)
I now get the correct output where the ™ output is ™ instead of ™
I am using cocoon to generate the nested fields in a form but I am having a really hard time selecting the dynamically generated input fields for testing. I assume that the numeric part of the id and name (which are the same by default) is based on the timestamp so I deduce it needs regex to be selected properly.
Appreciate the help in advance.
_form.html.erb
<% if question.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(question.errors.count, "error") %> prohibited this question from being saved:</h2>
<ul>
<% question.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<p>
Body: <%= f.text_field :body %>
</p>
<p>
Notes: <%= f.text_field :notes %>
</p>
<p>
Distractors
</p>
<hr>
<div class="distractors">
</div>
<div class="actions">
<%= link_to_add_association('Add distractor', f, :distractors) %>
<%= f.submit %>
</div>
<% end %>
</div>
_distractor_fields.html.erb (as per cocoon conventions)
<div class="nested-fields form-control">
<%= f.text_field :body, class: "distractor_body" %>
<%= f.radio_button :correct, 'true', label: true%>
<%= link_to_remove_association "Delete distractor", f%>
</div>
Relevant cucumber step
Then(/^I fill the distractor field with "([^"]*)"$/) do |distractor_body|
expect(page).to have_css('.distractor_body')#Just to see if it works
page.should have_css("input", id: 'question[distractors_attributes][[0-9]*][body]')#Fails here
page.find('#/question\[distractors_attributes\]\[[0-9]*\]\[body\]/', class: '.distractor_body')#Another failing attempt
fill_in('.distractor_body', with: distractor_body)
# Cocoon generated id and name looks like this:
# question[distractors_attributes][1494262782667][body]
page.choose('correct')
end
Final generated HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Untitled</title>
<link rel="stylesheet" media="screen" href="/assets/_settings.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel="stylesheet" media="screen" href="/assets/bootstrap_and_overrides.self-78b811a59aab8664061acba3353fae061b154dec619ec9a7b47714ce5f737bc2.css?body=1" />
<link rel="stylesheet" media="screen" href="/assets/foundation_and_overrides.self-ec376498c201e4ea8c1b76053444700483ab234ced1658f9a5e717f9a93fbe32.css?body=1" />
<link rel="stylesheet" media="screen" href="/assets/questions.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel="stylesheet" media="screen" href="/assets/welcome.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel="stylesheet" media="screen" href="/assets/application.self-0e31f1d30f689436ae56e463f6474eb99704af8bbed5fc320a66ac33afb59c2b.css?body=1" />
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.core.self-4f457971ba9c2597b09f6a22a24331c38e7279daa591bd61b5bbf28876aa8fc3.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.abide.self-679179bf3ee1902bc3fe7da64bbb2b731fa4df4a75901538ba55e7d25286313e.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.accordion.self-8d244ceae0d451fcc15789a5e9e36ebed60650c8a9abbf5f9a126b6f327b6154.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.accordionMenu.self-d9a7c97eb11b52fe305e71d2becbdfaf772722f9da6bd56ad24121919d5e43ca.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.drilldown.self-1197ab1398f5a6e188d25902ca65cb079c5c769583801244c456e39aeb484876.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.dropdown.self-c0e613ea4f5cf333f28aa6e97d54dcf6f739b7b95beed9175870525fbb190200.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.dropdownMenu.self-386455a3346e601e0a524f9de7e5146e73ef63055ba5394290f5f9a3a2cb74d7.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.equalizer.self-7221ea2a8fba1b3495851e00b58ade3f76ce11a8230ab5cf9ca81a39e7eadd4e.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.interchange.self-be09943d6d46443136cd84ffda8b5b8a008db8355c144097949fcaf7d5289a56.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.magellan.self-789eaceb55bd54bd0ed8fea6adf2b18c21464581b0e95eaa8a5aff1130208b2d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.offcanvas.self-9ce0609e0e4404d19bde3425bf63955c74836aa9f0772d9b7e26ab731c1f2e8c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.orbit.self-a127e190c8224d789844ee10a7c4123fe5aef28bc5bf75e9e185b3e098651078.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.responsiveMenu.self-c16f1dc4c3fa8e4881e116d1072642a8f0d53db8725994fd5a32f5cab1a30991.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.responsiveToggle.self-e997867128d1cc2b0268d6d8a0b3d1d4acdd8b18481dbcc50e8c41b06dea77d1.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.reveal.self-958c10cf13f0fa316d5753a6c03b7e1c6c76819b5978cefa85df960856744a98.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.slider.self-130c3657134bb131ceec80b3553bfe98731d170c5b6b89506f7aeca0934bf3ab.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.sticky.self-6132d9675d96d8eb9d6426a329ba49a9c70756620079fcf1e9dc0509d710ff3b.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.tabs.self-76b83dbeb1a526b713949431c11539c4f15ea95620a32b357452afb4e969778d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.toggler.self-32c8ba5ef7c4612d3cf417a6fb5ff296ee2fc8a1778995f4571c5ca3aed7c1a5.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.tooltip.self-34253627e75f9473117d9e2f269e29eb8871e50679a25ee82736fb52acf0f65a.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.util.box.self-29f7cbc36d64afedbf3295384f579c067ee4a6107059d25041cf9c2ffbdac287.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.util.keyboard.self-4a273ab1fd2edf1b86d3e772465bff74a28c721021c719eb48de76cf9a220d9c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.util.mediaQuery.self-f587619a109ff8be49d8eacb95b733d75cbdcc9819a19ce8c2af1be48e65524b.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.util.motion.self-65f3e3cc6f7990ae5a0d964eb90d626e0a5486508a11487145ba14aa4b2a2e78.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.util.nest.self-10050c8cffe586f45b7cb4570a5aa0d498e566ac981f4e494bd42246b4daafc7.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.util.timerAndImageLoader.self-0cb4d35725065a9a79f69d241210298190b5f1e134522d565a872f984e1e26b8.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.util.touch.self-95e098450fe69653246bdfa7f1e7fe7dba15348524771d7b2c54c7c4298fccb5.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.util.triggers.self-4fef1a2bcee50931073341abc76d0747ace3559d818342a079c07c54e27f8add.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.zf.responsiveAccordionTabs.self-1cd003cd23ec70291aa4b3ee3c46097d1fddb74afe524d057af1339b0251bdc9.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/foundation.self-5ecf2f4d83e6260dabd6ec48e76d8ddebccf956563f34072221bf960d3b8c255.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/cocoon.self-6874ad698cefd21cc1119b773550f61b5c1a60396460f015222af59293affe80.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap.self-fdc98dee79ee88255e10cac6caa91338165cb76cf0d263744d8d90011fc2ef8f.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/action_cable.self-5454023407ffec0d29137c7110917e1e745525ae9afbc05f52104c4cd6597429.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/cable.self-6e0514260c1aa76eaf252412ce74e63f68819fd19bf740595f592c5ba4c36537.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/questions.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/welcome.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-c9d32bb43ab90153f07e848d3f326b7933d8ef0585cb9b8e9da6cb92ecb052a9.js?body=1" data-turbolinks-track="true"></script>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="qqzhq9qIk6xYZ24ic8AyIk5TTJYL2zI6pfhPKlGafE8cYveT4ITi1vodAxQxco5h06gg2M6N/F1opEvswl0xwQ==" />
</head>
<body>
<h1>New Question</h1>
<div class="row">
<form class="new_question" id="new_question" action="/questions" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="5zxWU69klqpU0gKvE3hnIDdNuyB7wrY1nmoYUn5ojABXKR3IroJ4UpiD/P167VcyOKYg2wHiAGT6dGfh+N7ndg==" />
<p>
Body: <input type="text" name="question[body]" id="question_body" />
</p>
<p>
Notes: <input type="text" name="question[notes]" id="question_notes" />
</p>
<p>
Distractors
</p>
<hr>
<div class="distractors">
</div>
<div class="actions">
<a class="add_fields" data-association="distractor" data-associations="distractors" data-association-insertion-template=" <div class="nested-fields form-control">
<input class="distractor_body" type="text" name="question[distractors_attributes][new_distractors][body]" id="question_distractors_attributes_new_distractors_body" />
<input label="true" type="radio" value="true" name="question[distractors_attributes][new_distractors][correct]" id="question_distractors_attributes_new_distractors_correct_true" />
<input type="hidden" name="question[distractors_attributes][new_distractors][_destroy]" id="question_distractors_attributes_new_distractors__destroy" value="false" /><a class="remove_fields dynamic" href="#">Delete distractor</a>
</div>
" href="#">Add distractor</a>
<input type="submit" name="commit" value="Create Question" data-disable-with="Create Question" />
</div>
</form></div>
Back
</body>
</html>
Capybara doesn't support regexes for id or name attributes (and your example attempts actually show you passing strings not regexes anyway). When dealing with dynamically generated elements the key is generally to scope your element locating via known elements that allow you to select a single element via class or other known attribute. In your case the example HTML doesn't actually show an instance of the input you're trying to fill out, but assuming instances of the nested-fields templates are inserted dynamically into the .distractors div something along the lines of the following should work
find('.distractors .nested-fields:first-child .distractor_body').set(distractor_body) # use last-child, nth-child to select the correct section if multiple
When using this in your step with the need to
choose the radio button as well it would probably be best to scope using within
Then(/^I fill the distractor field with "([^"]*)"$/) do |distractor_body|
within('.distractors .nested-fields:first-child') do
find('.distractor_body').set(distractor_body)
choose('correct')
end
end
I'm using RSpec (v. 3.1.0) and Capybara (v. 2.4.3) to test my Rails 4 application. My user delete spec.rb contains the following code:
it "is successful when clicking the destroy link" do
visit "/users"
save_and_open_page
within "#user_#{user.id}" do
click_link "Destroy"
end
expect(page).to have_content("User was successfully destroyed.")
Capybara throws the following error:
1) Deleting User is successful when clicking the destroy link
Failure/Error: within "#user_#{user.id}" do
Capybara::ElementNotFound:
Unable to find css "#user_509"
Save_and_open_page shows FactoryGirl created a user for the test. The error message indicates the user's id is 509. My program's code (delete method) works as expected, so the problem appears to be my test code. What can I do to help Capybara find the user? Thanks for any help!
UPDATE: Here's the HTML source:
<!DOCTYPE html>
<html>
<head>
<title>Users | App </title>
<link data-turbolinks-track="true" href="/assets/appointments.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/cardio_exercises.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/members.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/sessions.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/strength_exercises.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/trainers.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/appointments.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/cardio_exercises.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/members.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/sessions.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/static_pages.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/strength_exercises.js?body=1"></script>
</script>
Home
Help
Log in
<div class="container">
<h1>Listing Users</h1>
<table>
<thead>
<tr>
<th>User Name</th>
<th>Email</th>
<th>Member</th>
<th>Trainer</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<tr>
<td>ColeCole</td>
<td>xx#xxx.com</td>
<td>true</td>
<td>false</td>
<td>Show</td>
<td>Edit</td>
<td><a data-confirm="Are you sure?" data-method="delete" href="/users/14" rel="nofollow">Destroy</a></td>
</tr>
</tbody>
</table>
<br>
New User
<footer class="footer">
<small>
The xxxx
by xxxx
</small>
<nav>
<ul>
<li>Contact</li>
<li>About</li>
<li>xxxx</li>
</ul>
</nav>
</footer>
<pre class="debug_dump">--- !ruby/hash:ActionController::Parameters
action: index
controller: users
</pre>
</div>
</body>
</html>
This should work if you only have one delete button on the page:
it "is successful when clicking the destroy link" do
visit "/users"
click_link "Destroy"
expect(page).to have_content("User was successfully destroyed.")
Edit: I'm going to assume you are not very familiar with CSS selectors. With Capybara, when you say:
#user_#{user.id}
You are not grabbing text such as "user_509" but rather you are grabbing a DOM element with the identity of "user_509." Thus to have Capybara find that element in your code, you would have to have something like this:
<a id="user_509" data-confirm="Are you sure?" data-method="delete" href="/users/14" rel="nofollow">Destroy</a>
Merely having a text field would not suffice as text is not part of the DOM.
Hi I am trying to render a bootstrap modal popup window based login for that I have included
in my _header.html.erb file as below
<div class="modal hide fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<%= link_to "View", signin_path %>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
But I was not displaying any signin button on the screen But when I try to see source code of my web page there I have having the link as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Skillable App </title>
<!-- Javascripts
================================================== -->
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/bootstrap-transition.js?body=1"></script>
<script src="/assets/bootstrap-affix.js?body=1"></script>
<script src="/assets/bootstrap-alert.js?body=1"></script>
<script src="/assets/bootstrap-button.js?body=1"></script>
<script src="/assets/bootstrap-carousel.js?body=1"></script>
<script src="/assets/bootstrap-collapse.js?body=1"></script>
<script src="/assets/bootstrap-dropdown.js?body=1"></script>
<script src="/assets/bootstrap-modal.js?body=1"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1"></script>
<script src="/assets/bootstrap-tab.js?body=1"></script>
<script src="/assets/bootstrap-tooltip.js?body=1"></script>
<script src="/assets/bootstrap-popover.js?body=1"></script>
<script src="/assets/bootstrap-typeahead.js?body=1"></script>
<script src="/assets/bootstrap.js?body=1"></script>
<!-- Stylesheets
================================================== -->
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap-responsive.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/companyrating.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/global.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/pages.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/user_session.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/users.css?body=1" media="screen" rel="stylesheet" />
<meta content="authenticity_token" name="csrf-param" />
<meta content="/UOprUnr0t8ItxVtX1Yc1GaaX3zgs2/kCFicNAtWM68=" name="csrf-token" />
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
SAMPLE
<nav>
<ul class="nav pull-right">
<li>Companies_list</li>
<li><div class="modal hide fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Login</h3>
</div>
<div class="modal-body">
View
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div></li>
</ul>
</nav>
</div>
</div>
And I have also used <%= render "/sessions/new.html.erb"%> but I am getting the following error
ActionView::MissingTemplate in Pages#companies_list
Showing /home/seshendra/rails_app-master/app/views/layouts/_header.html.erb where line #22 raised:
Missing partial sessions/new.html.erb with {:locale=>[:en], :formats=>[:html], :handlers=>[:erb, :builder, :raw, :ruby, :jbuilder, :coffee]}. Searched in:
* "/home/seshendra/rails_app-master/app/views"
<%= render "/sessions/new.html.erb"%>
So can any one please tell me how to solve it. I am totally a newbie I have gone through this website http://raycoding.net/2012/10/30/creating-social-network-on-ruby-on-rails-day-5-navigationstwitter-bootstrap-stylesjquery-part-2/
try removing first slash ('/') on path
use
<%= render "sessions/new.html.erb" %>
I tried a test file which is working but this file isn't. I also tried validating from w3c and it showed no errors. I also tried pasting
outside jquery ui tabs but still didn't worked out. Could there be any conflict between plugins. And also when i gave absolute path for demo file it worked while relative path didn't. Here's the two file:
This one is working (demo file)-
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <!-- optional -->
<!--[if lt IE 9]>
<script type="text/javascript" src="../js/excanvas/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/lightview.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightview/lightview.css" />
<link rel="stylesheet" type="text/css" href="css/main-style.css" />
</head>
<body>
<a href='img/colorful-abstract.jpg' class='lightview' data-lightview-group='example'>
<img src='img/thumbs colorful-abstract.jpg' alt=''/>
</a>
</body>
</html>
Where as this original ones isn't working-
<!DOCTYPE html>
<head>
<title>Rahul Dagli's Portfolio Website</title>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/jquery-main.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<!--lightview-->
<script type="text/javascript" src="js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/lightview.js"></script>
<script type="text/javascript" src="js/excanvas/excanvas.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<!--CSS-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/navigation-menu.css" >
<link rel="stylesheet" type="text/css" href="css/main-style.css" />
<link rel="Stylesheet" type="text/css" href="css/jquery-ui-1.8.17.custom.css">
<link rel="stylesheet" type="text/css" href="css/lightview/lightview.css" />
</head>
<body>
<!--main navigation-->
<nav>
<ul id="navigation">
<li class="portfolio"></li>
<li class="about"></li>
<li class="contact"></li>
</ul>
</nav>
<!--main content-->
<div id="sections">
<!--Portfolio page starts-->
<section id="section-portfolio">
<header>
<hgroup>
<h1>Rahul Dagli</h1>
<h2> Web Designer</h2>
</hgroup>
<p>Welcome to my online portfolio. Take a look at my work and find out who I am.</p>
</header>
<!--Tabbed Image Gallery-->
<div id="portfolio-list">
<div id="tabs" class="tabs-bottom">
<ul>
<li>Graphic design</li>
<li>Web design</li>
<li>Flash</li>
<li>3d</li>
</ul>
<div id="tabs-1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</div>
</section>
<!--Portfolio page ends-->
<!--About page starts-->
<section id="section-about">
</section>
<!--About page ends-->
<!--Contact page starts-->
<section id="section-contact">
</section>
<!--Contact page ends-->
</div>
<a href='img/colorful-abstract.jpg' class='lightview' data-lightview-group='example'>
<img src='img/thumbs-colorful-abstract.jpg' alt=''/>
</a>
</body>
</html>
There's an example folder in the download you could use to start from, it shows a proper installation. Once that works, Lightview should work in the tabs as well.
Also keep in mind that all the Lightview related includes on your page are absolute, not relative like your other includes. So it could be that the files aren't where you expect them to be.