how do i select datepicker using page-object-gem and jqueryui_widgets - ruby

Question

I'm trying to use jqueryui_widgets combined with page-object-gem to test a datepicker, but I am failing on the first step.
on(HasADatepickerPage).the_datepicker = date
I get this error:
Watir::Exception::ObjectReadOnlyException: object is read only {:id=>"datepicker", :tag_name=>"input or textarea", :type=>"(any text type)"}
./features/step_definitions/datepicker_steps.rb:8:in `/^I enter the date "([^\"]*)"$/'
./features/has_a_datepicker.feature:8:in `When I enter the date "10/05/2015"'
has_a_date_picker_page.rb ( jqueryui_widgets example datepicker_page.rb )
class HasADatepickerPage
include PageObject
jqueryui_datepicker(:the_datepicker, :id => 'datepicker')
end
Questions:
What do I need to do prior to on(HasADatepickerPage).the_datepicker = date ?
What do I need to do prior to on(HasADatepickerPage).the_datepicker_select_day day ?
I cloned the jqueryui_widgets project, ran datepicker feature test, works fine. I modelled my solution as closely as I could to it.
I included snipets from my html page and the rest of the glory details I could think of below.
Thanks,
Tim
The Gory Details
my site html vs ( jqueryui_widgets example datepicker.html )
<div class="forms">
<div class="ajaxformitem" rel="Please select the number of passengers traveling">
<div class="ajaxformitem" rel="Please Enter the Date of Travel" style="background: transparent none repeat scroll 0% 0%;">
<div class="ajaxformitemleft">
<div class="ajaxformitemright">
<input id="datepicker" class="corner required hasDatepicker" type="text" placeholder="Pick Up Date" value="" readonly="true" name="PickUpTime[Date]"/>
<select id="hour" class="corner required" name="PickUpTime_Hour">
<select id="minute" class="corner required" name="PickUpTime[Mnute]">
</div>
</div>
ui-datepicker-div:
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 199px; left: 635.5px; z-index: 12; display: block;">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<a class="ui-datepicker-prev ui-corner-all" title="Prev" onclick="DP_jQuery_1440799766008.datepicker._adjustDate('#datepicker', -1, 'M');">
<a class="ui-datepicker-next ui-corner-all" title="Next" onclick="DP_jQuery_1440799766008.datepicker._adjustDate('#datepicker', +1, 'M');">
<div class="ui-datepicker-title">
</div>
<table class="ui-datepicker-calendar">
<thead>
<tbody>
</table>
</div>
has_a_datepicker.feature - same as example
Feature: Using the JQueryUI Datepicker widget
Background:
Given I am on the has datepicker page
Scenario: Testing datepicker jqueryui_widgets
When I enter the date "10/05/2015"
And I select day "25"
Then the date should be "10/25/2015"
datepicker_steps.rb - the_datepicker vs (datepicker_one and datepicker_two)
Given(/^I am on the has datepicker page$/) do
visit(HomePage)
on(HomePage).select_radio_for 'From'
on(HomePage).select_service 'Airport'
end
When(/^I enter the date "([^\"]*)"$/) do |date|
on(HasADatepickerPage).the_datepicker = date
end
And(/^I select day "(\d+)"$/) do |day|
on(HasADatepickerPage).the_datepicker_select_day day
end
Then(/^the date should be "([^\"]*)"$/) do |day|
#on(DatepickerPage).datepicker_one.should == day
expect(on(HasADatepickerPage).the_datepicker).to eql day
end

Answer 1

Selecting a Date
If you look at the datepicker methods, all of the interactions with the calendar assume that the calendar is already displayed. If you look at the gem's test (features), you will see they always inputted the text field first, which opens the calendar. Only after that do the tests try to interact with the calendar.
However, since your text field is read-only, you cannot input the text field to trigger the popup. As a result, you need to click the text field. The datepicker accessor creates a {name}_element method for accessing the text field. Therefore, you can do:
page.the_datepicker_element.click
page.the_datepicker_select_day('15')
Setting a Date
The {name}= method for directly setting the date will not work for your control. The method simply types into the text field, which being read-only is not valid.
You seem to have 2 options:
Click the Next/Previous Month controls until you get the right month and then select the day.
Use JavaScript to input the text field directly.
Unless there are events the application excepts to be raised when inputting the date, I would suggest going with option 2. It is quicker and less error prone. While it does not mimic the user, testing the interactions within a jQuery widget should not be your responsibility.
date = '08/13/2015'
page.execute_script("arguments[0].value='#{date}';", page.the_datepicker_element)
If you really want to input the value like a user:
# These libraries are added to help with doing date comparisons
require 'date'
require 'active_support/time'
# The date you want to set
date = '12/13/2015'
# Open the calender
page.the_datepicker_element.click
# Determine if we need to navigate to a prior or future month
final_date = Date.strptime(date, '%m/%d/%Y')
current_date = Date.strptime(
"#{page.the_datepicker_month} #{page.the_datepicker_year}",
'%B %Y'
)
difference = (final_date.year * 12 + final_date.month) - (current_date.year * 12 + current_date.month)
# Navigate to the required month/year
if difference < 0
difference.abs.times { page.the_datepicker_previous_month }
else
difference.abs.times { page.the_datepicker_next_month }
end
# Select the day
page.the_datepicker_select_day(final_date.day.to_s)
As you can see, having to click the next/previous controls adds a lot of complexity.

Answer 2

Your ui-datepicker-div has: <input id="datepicker" readonly="true">
Watir won't let you send text to an element that is set to be readonly. Remove that attribute and this should work.