I was trying the following test in my Rails app:
test "markup need for store.js.coffee is in place" do
get :index
assert_select '.store .entry > img', 3
assert_select '.entry input[type=submit]', 3
end
The test is all ok, I haven't failures or errors, but I can't understand what assert_selects are looking for in my HTML.
I will try to explain myself in a better way: is assert_select '.entry input[type=submit]', 3 looking for exact 3 fields of input type=submit inside the .entry element? and What is the first asser_select looking for?
This is the HTML where assert_selects act
<body class="store">
<div id="columns">
<div id="main">
<h1>Your Pragmatic Catalog</h1>
<div class="entry">
<img height="95px" src="/assets/cs.jpg" alt="Cs">
<h3>CoffeeScript</h3>
<p> CoffeeScript is JavaScript done right. It provides all of JavaScript's functionality wrapped in a cleaner, more succinct syntax. In the first book on this exciting new language, CoffeeScript guru Trevor Burnham shows you how to hold onto all the power and flexibility of JavaScript while writing clearer, cleaner, and safer code. </p>
<div class="price_line">
<span class="price">$36.00</span>
<form class="button_to" method="post" data-remote="true" action="/line_items?product_id=2">
<div>
<input type="submit" value="Add to Cart">
<input type="hidden" value="H5APP93C0onJsfliaMRqww+ER0u/hTZAjvGIeMluHIo=" name="authenticity_token">
</div>
</form>
</div>
</div>
<div class="entry">
<img height="95px" src="/assets/hp.jpg" alt="Hp">
<h3>Harry Potter</h3>
<p>Mago</p>
<div class="price_line">
<span class="price">$15.00</span>
<form class="button_to" method="post" data-remote="true" action="/line_items?product_id=5">
<div>
<input type="submit" value="Add to Cart">
<input type="hidden" value="H5APP93C0onJsfliaMRqww+ER0u/hTZAjvGIeMluHIo=" name="authenticity_token">
</div>
</form>
</div>
</div>
<div class="entry">
<img height="95px" src="/assets/ruby.jpg" alt="Ruby">
<h3>Programming Ruby 1.9 & 2.0</h3>
<p> Ruby is the fastest growing and most exciting dynamic language out there. If you need to get working programs delivered fast, you should add Ruby to your toolbox. </p>
<div class="price_line">
<span class="price">$49.95</span>
<form class="button_to" method="post" data-remote="true" action="/line_items?product_id=3">
<div>
<input type="submit" value="Add to Cart">
<input type="hidden" value="H5APP93C0onJsfliaMRqww+ER0u/hTZAjvGIeMluHIo=" name="authenticity_token">
</div>
</form>
</div>
</div>
<div class="entry">
<img height="95px" src="/assets/rtp.jpg" alt="Rtp">
<h3>Rails Test Prescriptions</h3>
<p>
<em>Rails Test Prescriptions</em>
is a comprehensive guide to testing Rails applications, covering Test-Driven Development from both a theoretical perspective (why to test) and from a practical perspective (how to test effectively). It covers the core Rails testing tools and procedures for Rails 2 and Rails 3, and introduces popular add-ons, including Cucumber, Shoulda, Machinist, Mocha, and Rcov.
</p>
<div class="price_line">
<span class="price">$34.95</span>
<form class="button_to" method="post" data-remote="true" action="/line_items?product_id=4">
<div>
<input type="submit" value="Add to Cart">
<input type="hidden" value="H5APP93C0onJsfliaMRqww+ER0u/hTZAjvGIeMluHIo=" name="authenticity_token">
</div>
</form>
</div>
</div>
</div>
</div>
</body>
Good question. I'm working through the same book - Agile Web Development with Rails 4. It's good stuff.
To answer your question:
The first assert_select is looking for exactly 3 image elements that are direct children of the .entry element which is below the .store element on the dom tree.
The second is, as you suggest, looking for 3 inputs fields of the type submit that are below the .entry element on the dom tree.
First select is looking for img placed as first child of element with .entry class, which is descendant of element with class .store
http://css-tricks.com/child-and-sibling-selectors/
Related
I am trying to design the contact us page in asp.net mvc. I would like to build a contact us form that also work as to send email to our email. This is the code in of front end; it is a design of form but I just copy this from a template. Can any body guide me to how to make it work or highlight any mistakes?
//code
<div class="contact-form">
<h2>Contact Us</h2>
<form method="post" action="contact-post.html">
<div>
<span><label>Name</label></span>
<span><input name="userName" type="text" class="textbox"></span>
</div>
<div>
<span><label>E-mail</label></span>
<span><input name="userEmail" type="text" class="textbox"></span>
</div>
<div>
<span><label>Mobile</label></span>
<span><input name="userPhone" type="text" class="textbox"></span>
</div>
<div>
<span><label>Subject</label></span>
<span><textarea name="userMsg"> </textarea></span>
</div>
<div>
<span><input type="submit" class="" value="Submit us"></span>
</div>
</form>
</div>
I am trying to submit a form in a bootstrap framework and cannot get past the validation, even with correct data.
I think there might be an error with this syntax,
<form name=form1 method=post action=signupck.php onsubmit='return validate(this)'><input type=hidden name=todo value=post>
then the form fields... which all display correctly - so no problems there - in the style:
<div class="row">
<div class="col-xs-2">
<label for="fname">Forename</label>
<input type="text" class="form-control" id="fname" placeholder="Forename"><br></br>
</div>
<div class="col-xs-2">
<label for="sname">Surname</label>
<input type="text" class="form-control" id="sname" placeholder="Surname">
</div>
</div>
and then,
<input type=submit value=Signup>
<input type="reset" class="btn btn-default" value="Reset">
The form on submission displays signupck.php, signalling validation messages when is should be submitted ok. I have got this working outside the bootstrap, but when I put this inside the template, in the form above, I get the problems.
Any help would be most appreciated.
I am using the acts-as-taggable gem in a Rails 4 app with an angular frontend. If I use the console it works fine. I have done all the obvious things and I can get it to work by adding this to the create controller:
if params[:tag_list]
droplet.tag_list.add(params[:tag_list], parse: true)
end
The problem is that it should be doing this anyway. Does anyone have any insight as to why it is simply not firing the tag_list.add method automatically? I am uncomfortable using this hack to get it to work.
And yes, I have added :tag_list to the strong parameters.
Update: The form html
<form ng-submit="createNewDropletForm.$valid && createNewDroplet()" name="createNewDropletForm" novalidate>
<div class="form-group">
<label for="name">Title:</label>
<input ng-keyup="keyup()" ng-model="drop.name" ng-model-options="{ debounce: 500 }" type="text" class="form-control" placeholder="Add Droplet Title Here" required>
</div>
<div class="form-group">
<label for="description">Description:</label>
<textarea class="form-control" rows="4" ng-model="drop.description" placeholder="Add helpful description of what this droplet tests." required></textarea>
</div>
<div class="form-group">
<label for="tags">Tags:</label>
<input class="form-control" ng-model="drop.tag_list" placeholder="add tags separated by commas">
</div>
<button type="submit" class="btn btn-default">Next</button>
</form>
I'm having difficulty getting Bootstrap's button addons to work in my MVC view. I'm using the latest NuGet version of ASP.NET MVC (5.1 rc1) and Bootstrap (3.03).
I have the following in my view (now that I've pared it back to just hand-coded HTML rather than using Html.EditorFor(), in an attempt to getting it to work):
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true)
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
This generates the following HTML:
<form action="xxx" method="post">
<input name="__RequestVerificationToken" type="hidden" value="T3k..." />
<div class="form-horizontal">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
</form>
The problem is that, when this is displayed in the browser (Chrome 32 / IE 11), there's a big gap between the input box and the button. Like this:
If I reduce the size of the div surrounding the input-group div to col-lg-3 or smaller, it's fine. But anything larger than that leaves a gap.
It's as though there's a maximum size on the input - and indeed, all my inputs do seem to be smaller their container div...
What could be causing this?
The default Site.css stylesheet that comes with a new MVC 5 project has a rule that limits the max-width of inputs. What you're getting is the result of the control spanning the full available width like it's supposed to, but then the input, itself, is being constrained to a defined width. Just comment out that piece of the stylesheet and everything will work as it should.
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
It's a pretty egregious shortcut the team seems to have taken in order to quickly build the sample site.
I am trying to generate a hidden div with a rails partial inside it. My intention is to use that hidden div as target for fancybox to open the edit form in a popup.
My partial code looks like:
<div style="display:none">
<div id="inline-edit-form-<%=feed_item.id%>" class="inline-edit-form">
<%= form_for (feed_item) do |f| %>
<%=render :partial => 'calendars/form', :locals => { :f => f }%>
<% end %>
</div>
</div>
Now, in Chrome, the layout is as intended and the partial is hidden initially. Fancybox manages to render this partial when its source link is clicked and things work fine. But in Firefox, the hidden DIV is not hidden by default and all controls are displayed. I checked HTML DOM structure on both Chrome and Firefox and there are huge differences.
Markup in Chrome (correct):
<div style="display:none">
<div id="inline-edit-form-596" class="inline-edit-form">
<form accept-charset="UTF-8" action="/calendars/596" class="edit_calendar" d="edit_calendar_596" method="post"></form>
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="put">
<input name="authenticity_token" type="hidden" value="">
</div>
<div>
<label for="calendar_event">Event</label><br>
<input class="inline-edit-input" id="calendar_event" name="calendar[event]" size="30" type="text" value="Interesting event">
</div>
The above markup is correct and what is expected. The shocking markup in Firefox is:
<div style="display: none;">
<div class="inline-edit-form" id="inline-edit-form-598">
</div>
</div>
<div style="margin: 0pt; padding: 0pt; display: inline;"></div>
<div>
<label for="calendar_event">Event</label><br>
<input type="text" value="Another interesting important event" size="30"
name="calendar[event]" id="calendar_event" class="inline-edit-input">
</div>
This mark up is not only incorrect, its not even rendering the FORM tag at all. I checked and rechecked my CSS and DOM structure but Firefox simply choses to screw the layout.
Any help?
Thanks for the hint. There was one validation error which fixed the error. The error was that I was including inside the table. After moving the hidden divs outside the table, the issue got resolved.