Hello I am doing my very first tests and I would need your help. I am using Rails5.
The problem is because of the nested fields I believe...(used Cocoon gem)
Capybara returns this error:
Capybara::ElementNotFound:
Unable to find field "event_participants_attributes_1489697584487_first_name"
my html looks like this:
<div class="nested-fields">
<div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_1489697584487_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][1489697584487][first_name]" id="event_participants_attributes_1489697584487_first_name" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_1489697584487_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][1489697584487][salary]" id="event_participants_attributes_1489697584487_salary"></div>
<div class="links">
<input type="hidden" name="event[participants_attributes][1489697584487][_destroy]" id="event_participants_attributes_1489697584487__destroy" value="false"><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a>
</div>
</div>
and here is my features/events/create_event.spec.rb
require 'spec_helper'
require 'rails_helper'
describe "Creating an event" do
it "redirects on result page on success" do
visit "/"
click_link "Create a new event"
expect(page).to have_content('Wanna share fair?')
fill_in :name, with: 'Rent a plane'
fill_in "What is the total price", with: 200
click_link "Add a participant"
fill_in "event_participants_attributes_1489697584487_first_name", with: "John"
enter code here
fill_in ":event_participants_attributes_1489697584487_salary", with: 2300
click_button "See result"
expect(page).to have_content('Your salary together:')
end
end
And here are my simple_forms:
_form.html.erb
<%= simple_form_for #event do |f| %>
<div class="col-xs-12 col-md-10 col-md-offset-1">
<h1>Wanna share fair?</h1>
<p>Create an event, enter the bill to share.</p>
<%= f.input :name, label: "Event's name" %>
<%= f.input :total_price, label: "What is the total price" %>
<p>Add the participants.</p>
<div id="participants">
<%= f.simple_fields_for :participants do |participant| %>
<%= render "participants_fields", f: participant %>
<% end %>
<div class="links text-center">
<%= link_to_add_association "Add a participant", f, :participants, partial: "participants_fields", class:"btn btn-primary btn-sm btn-add-friend" %>
</div>
</div>
</div>
<div class="col-xs-12 col-md-10 col-md-offset-1 text-center">
<%= f.submit "See result" , class:"btn btn-success btn-lg btn-event" %>
</div>
<% end %>
_participants_fields.html.erb
<div class="nested-fields">
<%= f.input :first_name, label: "Participant's first name" %>
<%= f.input :salary, label: "Participant's monthly pay" %>
<div class="links">
<%= link_to_remove_association "Remove this friend", f , class: "btn btn-danger btn-xs btn-remove-friend" %>
</div>
</div>
edit more html
<form novalidate="novalidate" class="simple_form new_event" id="new_event" action="/events" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="O5XM0JMiVBbpPNaKF1apw7rdtC/XEBhasZQoK6POycZQ2Zp14Td1ljoJyIUKTwtl91LlBHeDkKFtcWRnNu+iEQ==">
<div class="col-xs-12 col-md-10 col-md-offset-1">
<h1>Wanna share fair?</h1>
<p>Create an event, enter the bill to share.</p>
<div class="form-group string optional event_name"><label class="control-label string optional" for="event_name">Event's name</label><input class="form-control string optional" type="text" name="event[name]" id="event_name" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="form-group integer optional event_total_price"><label class="control-label integer optional" for="event_total_price">What is the total price</label><input class="form-control numeric integer optional" type="number" step="1" name="event[total_price]" id="event_total_price" data-com.agilebits.onepassword.user-edited="yes"></div>
<p>Add the participants.</p>
<div id="participants">
<div class="nested-fields">
<div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_1489705438668_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][1489705438668][first_name]" id="event_participants_attributes_1489705438668_first_name" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_1489705438668_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][1489705438668][salary]" id="event_participants_attributes_1489705438668_salary" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="links">
<input type="hidden" name="event[participants_attributes][1489705438668][_destroy]" id="event_participants_attributes_1489705438668__destroy" value="false"><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a>
</div>
</div><div class="nested-fields">
<div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_1489705443842_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][1489705443842][first_name]" id="event_participants_attributes_1489705443842_first_name" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_1489705443842_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][1489705443842][salary]" id="event_participants_attributes_1489705443842_salary" data-com.agilebits.onepassword.user-edited="yes"></div>
<div class="links">
<input type="hidden" name="event[participants_attributes][1489705443842][_destroy]" id="event_participants_attributes_1489705443842__destroy" value="false"><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a>
</div>
</div><div class="links text-center">
<a class="btn btn-primary btn-sm btn-add-friend add_fields" data-association="participant" data-associations="participants" data-association-insertion-template="<div class="nested-fields">
<div class="form-group string optional event_participants_first_name"><label class="control-label string optional" for="event_participants_attributes_new_participants_first_name">Participant's first name</label><input class="form-control string optional" type="text" name="event[participants_attributes][new_participants][first_name]" id="event_participants_attributes_new_participants_first_name" /></div>
<div class="form-group integer optional event_participants_salary"><label class="control-label integer optional" for="event_participants_attributes_new_participants_salary">Participant's monthly pay</label><input class="form-control numeric integer optional" type="number" step="1" name="event[participants_attributes][new_participants][salary]" id="event_participants_attributes_new_participants_salary" /></div>
<div class="links">
<input type="hidden" name="event[participants_attributes][new_participants][_destroy]" id="event_participants_attributes_new_participants__destroy" value="false" /><a class="btn btn-danger btn-xs btn-remove-friend remove_fields dynamic" href="#">Remove this friend</a>
</div>
</div>
" href="#">Add a participant</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-10 col-md-offset-1 text-center">
<input type="submit" name="commit" value="See result" class="btn btn-success btn-lg btn-event" data-disable-with="See result">
</div>
</form>
IIRC the "1489697584487" part of the ids you show is created by Cocoon based on the current timestamp. That means every time you run your test the number will be different so you're not going to be able to select those elements by id.
Instead if you're only adding one participant you should be able to do something like
fill_in "Participant's first name", with: "John"
fill_in "Participant's monthly pay", with: "2300"
If you are adding multiple participants then depending on the exact layout you can use nth-child/nth-of-type CSS selectors to scope the fill_in or use all and select the one you want, etc.
find('.nested-fields:nth-child(2)').fill_in ...
all(:field, "Participant's first name", minimum: 2)[1].set("John") # 0 based index so minimum should be 1 more than the index you want
Also - For any of this to work you need to be using a JS capable driver (Cocoon requires JS). You haven't tagged your spec with js: true metadata so either you've overridden the default driver, or you're not currently using a JS capable driver - see https://github.com/teamcapybara/capybara#selecting-the-driver. Also see https://github.com/teamcapybara/capybara#transactions-and-database-setup and https://github.com/DatabaseCleaner/database_cleaner#rspec-with-capybara-example if you haven't yet configure database_cleaner for use with JS capable drivers
Related
I have an ASP MVC view that contains only a Textbox that takes a string, and a submit button to submit the value.
I want to add the validation error message with an Icon before it as in the following snippet:
<div class="form-group row">
<label class="col-sm-4 col-form-label">Check User Id</label>
<div class="col-sm-8">
<input asp-for="#Model.userId" type="text" class="form-control" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label"></label>
<div class="col-sm-8">
<input type="submit" class="btn btn-primary" value="Check" asp-action="Index" asp-controller="UserController" />
<div class="col-sm-8">
<i asp-validation-for="userId" class="fa fa-info-circle"></i>
<span asp-validation-for="userId" class="text-dark"></span>
</div>
</div>
</div>
My Problem now is that the info Icon is always showing, and I want it to show ONLY if there is an error/validation message. Is there a way to achieve that from the view only with no changes to the Business logic?
I would know how display a error message on my invalid field
I have a simple form
<%= simple_form_for #bien do |f| %>
<div class="col-md-6 col-md-offset-3 text-center">
<div class="row">
<div class="form-group">
<%= f.input :adress, :input_html =>{:id => 'address'}, placeholder: 'Adresse', label: "Adresse" %>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="form-group">
<h5><b>Type de mandat</b></h5>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-danger active" style="margin-right: 10px;">
<input id="bien_mandat_type_true" name="bien[mandat_type]" type="radio" autocomplete="off" value="Simple"/> Simple
</label>
<label class="btn btn-danger" style="margin-right: 10px;">
<input id="bien_mandat_type_true" name="bien[mandat_type]" type="radio" autocomplete="off" value="Exclusif" /> Exclusif
</label>
<label class="btn btn-danger">
<input id="bien_mandat_type_true" name="bien[mandat_type]" type="radio" autocomplete="off" value="Délégation" /> Délégation
</label>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 text-center">
<%= f.button :submit, "Valider", class: "btn btn-fill callpremium btn-danger btn-lg" %>
</div>
<% end %>
And i would display a error message when my input is empty like i do with the normal adress field, i wont use flash messages
Simple form error messages are driven by your model's validations. Add a presence validation to the fields you want to have errors when empty and simple form will respond accordingly automatically. For example, you could add this to your model to give an error when address is empty:
validates :address, presence: true
I am trying to make custom wrapper for a hybrid form like this:
The idea here is that there are the radio buttons that enable either the date picker, occurrences or indefinite. I currently have these manually created and I am trying to make a custom Simple Form wrapper to avoid all the hassle of adding tons of code to a simple input. The second occurrence input is the one that I can't get quite right. Here is the HTML for the form shown:
<div class="form-group radio_buttons required work_order_end_task">
<label class="radio_buttons required col-sm-2 control-label"><i class="fa fa-check-circle text-danger"></i> End Date</label>
<div class="col-sm-2">
<div class="input-group">
<span class="input-group-addon border-none">
<input class="radio_buttons required" type="radio" value="date" name="work_order[end_task]" id="work_order_end_task_date">
</span>
<input disabled="" type="text" value="" name="work_order[end_date]" id="work_order_end_date" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-clear-btn="true" data-date-today-btn="linked" data-date-orientation="auto right" data-date-today-highlight="true" class="date required form-control left-border-rounded">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon border-none">
<input class="radio_buttons required" type="radio" value="number" name="work_order[end_task]" id="work_order_end_task_number">
</span>
<input class="numeric integer form-control" type="string" value="" name="work_order[count]" id="work_order_count">
<span class="input-group-addon">
Occurrence(s)
</span>
</div>
<br>
<div class="input-group integer optional work_order_count">
<span class="input-group-addon border-none radio_buttons optional work_order_end_task">
<span class="radio">
<label for="work_order_end_task_none">
<input class="radio_buttons optional radio_buttons" type="radio" value="none" checked="checked" name="work_order[end_task]" id="work_order_end_task_none">
</label>
</span>
</span>
<input class="string optional form-control" type="text" value="" name="work_order[count]" id="work_order_count">
<span class="input-group-addon">Occurrence(s)</span>
</div>
<br>
<div class="form-group radio_buttons optional work_order_end_task"><div class="col-sm-10"><span class="radio"><label class="static-radio" for="work_order_end_task_none"><input class="radio_buttons optional" type="radio" value="none" checked="checked" name="work_order[end_task]" id="work_order_end_task_none">Indefinite</label></span></div></div>
</div>
</div>
The issue is all the extra spans and labels being added. Here is my code:
<%= f.input :count, wrapper: :input_group do %>
<%= f.input :end_task, as: :radio_buttons, wrapper: :radio_addon, collection: [['','none']], label: false %>
<%= f.input_field :count, as: :string, class: "form-control" %>
<span class="input-group-addon">Occurrence(s)</span>
<% end %>
and wrappers:
config.wrappers :input_group, tag: 'div', class: 'input-group', error_class: 'has-error' do |b|
b.use :html5
b.use :input, class: 'form-control'
end
config.wrappers :radio_addon, tag: 'span', class: 'input-group-addon border-none' do |b|
b.use :html5
b.optional :readonly
b.use :input, class: 'radio_buttons'
end
So how do I get rid of the <span class="radio">
and <label for="work_order_end_task_none"> on the radio buttons and then all the extra classes ( integer optional work_order_count for example) being inserted into the wrappers and inputs?
I think I figured this out (sort of):
<span class="input-group-addon border-none">
<%= f.radio_button :end_task, 'number', label: false %>
</span>
Works like a charm. I would still like to add a custom wrapper to this to avoid having to manually add the wrapper span but that does not seem to work.
I have a form that uses styles of twitter/bootstrap
however the content of the form is not saved.
May I please know what am I missing?
<%= form_for #customer_detail, url: { action: "create" } do |f| %>
<div class="form-group">
<div class="row">
<div class='col-sm-3'>
<label for="Check in">Check in:</label><br>
<div class='input-group date' id='datetimepicker1'>
<input class="form-control" type='text'>
<span class="input-group-addon"><span class=
"glyphicon glyphicon-calendar"></span></span>
</div>
</div><label for="Check out">Check out:</label><br>
<div class='col-sm-3'>
<div class='input-group date' id='datetimepicker2'>
<input class="form-control" type='text'>
<span class="input-group-addon"><span class=
"glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<% end %>
Seems like you should read this article. It describe to create form use Rails helpers and action for save to database.
I have a form created using Simple Form, as such
<%= simple_form_for #organisation do |f| %>
<div class="form-inputs">
<%= f.association :causes, as: :check_boxes %>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
The page works fine when I use a browser, but when I try to check this with Capybara, such as:
check('organisation_cause_ids_1')
And have tried many variations of this e.g.
find(:xpath , '//*[#id="organisation_cause_ids_1"]').set(true)
find("organisation_cause_ids_1").check
These always give an error:
Failure/Error: check('organisation_cause_ids_1')
Capybara::ElementNotFound:
Unable to find checkbox "organisation_cause_ids_1"
The HTML generated by Simple Form is:
<div class="input check_boxes optional organisation_causes">
<label class="check_boxes optional">Causes</label>
<span class="checkbox">
<label for="organisation_cause_ids_1" name="organisation[cause_ids]">
<input class="check_boxes optional" id="organisation_cause_ids_1" name="organisation[cause_ids][]" type="checkbox" value="1" />Cause A</label>
</span>
<span class="checkbox">
<label for="organisation_cause_ids_2" name="organisation[cause_ids]">
<input class="check_boxes optional" id="organisation_cause_ids_2" name="organisation[cause_ids][]" type="checkbox" value="2" />Hunger</label>
</span>
...
Edit: The problem was due to the lazy loading of the 'Causes' I created with the factories. They weren't being created so the page had no checkboxes.
Try with this
find_by_id('organisation_cause_ids_1').find("checkbox[value='1']").select_option
or maybe with this
find(:css, ".check_boxes[value='1']").set(true)