0

I'm trying to test a sinatra (1.3.2) application with fields that are updated using data-bind's through Knockout.js to concatenate on client-side and I need to run some tests on this. However I can't seem to get it to work. I have configured RSpec with Capybara (using webkit for the js driver) and for some reason when I test using find_field('lead[temporary_notes).text on the relevant field (which gets it's value from Knockout) I get an empty string.. Any ideas why that is or how to test that properly?

Thanks!

-- Jake

Here's the spec (it visits the page in a before block in a higher describe block):

describe "submitting with empty field (home phone)" do
    before do
      fill_in "Home Phone", with: ""
      fill_in "lead[temporary_notes]", with: x_lead.temporary_notes
      fill_in "Appointment Time", with: "07/07/12 9:43 am"
      click_button "Post Lead"
    end
    it { should have_selector('div.alert', text: "missing required fields")}
    it { find_field('First Name').value.should == x_lead.fname }
    it { find_field('Last Name').value.should == x_lead.lname }
    it { find_field('Address').value.should == x_lead.address1 }
    it { find_field('City').value.should == x_lead.city }
    it { find_field('Zip').value.should == x_lead.zip }
    it { find_field('Home Phone').value.should == "" }
    it { find_field('Cell Phone').value.should == x_lead.phone3 }
    it { find_field('Spouse Phone').value.should == x_lead.phone4 }
    it { find_field('Email Address').value.should == x_lead.email }
    it { find_field('lead[temporary_notes]').text.should == x_lead.temporary_notes }
  end

And here's the page (erb):

    <div id="lead-form" class="row">
    <form accept-charset="UTF-8" action="/leads" class="new_lead" id="new_lead" method="post" name="new_lead">
        <div style="margin:0;padding:0;display:inline">
            <input name="utf8" type="hidden" value="✓">
            <div id="lead-personal" class="span3">
                <label class="switch-spousename no_selection required_field" for="lead_fname"><span id="first_name_switch">First Name</span></label><input id="lead_fname" name="lead[fname]" size="30" type="text" value="<%= @lead.fname %>">
                 <label class="switch-lastname no_selection required_field" for="lead_lname"><span id="last_name_switch">Last Name</span></label> <input id="lead_lname" name="lead[lname]" size="30" type="text" value="<%= @lead.lname %>">
                 <label class="switch-spousename no_selection" for="lead_spouse"><span id="spouse_name_switch">Spouse Name</span></label><input id="lead_spouse" name="lead[spouse]" size="30" type="text" value="<%= @lead.spouse %>">
                 <label for="lead[email]">Email Address</label><input type="text" name="lead[email]" value="<%= @lead.email %>" id="lead[email]">
            </div>

            <div id="lead-phone" class="span3">
                <label for="lead_phone1" class="required_field">Home Phone</label><input id="lead_phone1" name="lead[phone1]" size="30" type="text" value="<%= @lead.phone1 %>">
                <label for="lead_phone2">Cell Phone</label><input id="lead_phone2" name="lead[phone2]" size="30" type="text" value="<%= @lead.phone2 %>"> 
                <label for="lead_phone4">Spouse Phone</label> <input id="lead_phone4" name="lead[phone4]" size="30" type="text" value="<%= @lead.phone4 %>">
            </div>
            <div id="lead-address" class="span4">
                <label for="lead_address1" class="required_field">Address</label> <input id="lead_address1" name="lead[address1]" size="30" value="<%= @lead.address1 %>"type="text"> 
                <label for="lead_city" class="required_field">City</label> <input id="lead_city" name="lead[city]" size="30" type="text" value="<%= @lead.city %>"> 
                <label for="lead_state" class="required_field">State</label> <input id="lead_state" name="lead[state]" size="30" type="text" value="<%= @lead.state %>"> 
                <label for="lead_zip" class="required_field">Zip</label> <input id="lead_zip" name="lead[zip]" size="30" type="text" value="<%= @lead.zip %>">

                <div class="control-group">
                    <label class="control-label" class="required_field" for="lead_lead_home_ownership">Homeowner Status:</label>
                    <div id="lead-homeowner-status" class="controls">
                        <label class="radio inline" for="lead_lead_home_ownership">Own</label> <input checked="checked" class="radio inline" id="lead_lead_home_ownership_own" name="lead[lead_home_ownership]" type="radio" value="Own"> <label class="radio inline" for="lead_lead_home_ownership">Rent</label> <input class="radio inline" id="lead_lead_home_ownership_rent" name="lead[lead_home_ownership]" type="radio" value="Rent"> <label class="radio inline" for="lead_lead_home_ownership">Lease</label> <input class="radio inline" id="lead_lead_home_ownership_lease" name="lead[lead_home_ownership]" type="radio" value="Lease"> <label class="radio inline" for="lead_lead_home_ownership">Other</label> <input class="radio inline" id="lead_lead_home_ownership_other" name="lead[lead_home_ownership]" type="radio" value="Other" >
                    </div>
                </div>
            </div>
            <div id="lead-comments" class="span3">

                <label for="lead[temporary_notes]">Notes</label> 
                <textarea cols="30" name="lead[temporary_notes]" data-bind="value: leadTelemarketerNotes" rows="3" value="<%= @lead.temporary_notes %>" id="lead_temporary_notes"/>
</textarea>
            </div>
            <div id="lead-appointment" class="span3">
                <label for="lead_contact_time" class="required_field">Appointment Time</label> <input id="lead_contact_time" name="lead[contact_time]" size="30" type="text" value="<%= @lead.contact_time %>">

            </div>

            <input type="hidden" name="lead[lead_callcenter_notes]" data-bind="value: leadCallcenterNotes" />
            <input type="hidden" name="lead[lead_callcenter_rep]" data-bind="value: leadTelemarketerName" />

            <input class="btn btn-success" id="lead-submit" name="commit" type="submit" value="Post Lead">
        </div>
    </form>
</div>
    <script type="text/javascript" charset="utf-8">
    var ko_form = new LeadViewModel("<%= @lead.lead_callcenter_rep %>", "<%= @lead.temporary_notes %>", <%= @lead.has_alarm %>);
    ko.applyBindings(ko_form);
  var tooltipDelay = ({ show: 550, hide: 75 });
  $('#first_name_switch').tooltip({title: "Click: Switch with Spouse name", delay: tooltipDelay});
  $('#last_name_switch').tooltip({title: "Click: Switch with First name", delay: tooltipDelay});
  $('#spouse_name_switch').tooltip({title: "Click: Switch with First name", delay: tooltipDelay});
</script>

I get this when running the spec:

Failure/Error: it { find_field('lead[temporary_notes]').text.should == x_lead.temporary_notes}
   expected: "Some notes"
        got: "" (using ==)
Jake
  • 66
  • 2
  • 5

1 Answers1

0

You may need to explicitly state the test requires the JavaScript driver. You can try:

describe "test description", :js => true do
  ...
end
Tanzeeb Khalili
  • 7,324
  • 2
  • 23
  • 27
  • I did do that for the top level describe, would you have to explicitly add that for every describe block? – Jake Jul 19 '12 at 23:23
  • No, the top level setting should cascade down. This must be a different problem. In your `spec_helper.rb`, what have you set `Capybara.javascript_driver` to? – Tanzeeb Khalili Jul 20 '12 at 03:53
  • I've got it set as Capybara.javascript_driver = :webkit – Jake Jul 30 '12 at 05:21
  • I did also install the dependencies (I'm on OS X, installed qt with Brew). – Jake Jul 30 '12 at 05:23
  • Can you also try adding :type => :request to the top level describe block? – Tanzeeb Khalili Jul 30 '12 at 05:32
  • Yep I do have that one as well. So it's weird, I am able to use knockout.js to update other html elements and test them but not the form elements' values directly. – Jake Aug 04 '12 at 20:29