I have a problem with my jasmine set and my use of the new jQuery.on () event logging method.
Here is a simplified version of my fix:
<div id='rent_payment_schedule_container'> <select class="select optional" id="frequency_select" name="payment_schedule[frequency]"> <option value="0">Monthly</option> <option value="1">Weekly</option> <option value="2">Bi-Weekly</option> </select> <div class="control-group select optional start-day-select" id="monthly_select"></div> <div class="control-group select optional start-day-select" id="weekly_select" style="display: none;"></div> </div>
Here's the coffeescript (which works fine on the actual page it is used on):
$ -> $('#rent_payment_schedule_container').on 'change', '#frequency_select', (event) -> $('.start-day-select').hide() switch $(event.target).val() when '0' $('#monthly_select').show() when '1' $('#weekly_select').show() when '2' $('#weekly_select').show()
And here is the specification:
describe 'The UI components on the payment schedule creation page', -> beforeEach -> loadFixtures 'payment_schedule' describe 'The toggling of the monthly and weekly day select options', -> it 'shows the weekly select div and hides the monthly select div when the weekly option is selected from the #frequency_select select box', -> $('#frequency_select option[value=1]').attr('selected', 'selected') $('#frequency_select').change() expect($("#weekly_select")).toBeVisible() it 'shows the weekly select div and hides the monthly select div when the bi-weekly option is selected from the #frequency_select select box', -> $('#frequency_select option[value=2]').attr('selected', 'selected') $('#frequency_select').change() expect($("#weekly_select")).toBeVisible() it 'shows the monthly select div and hides the weekly select div when the monthly option is selected from the #frequency_select select box', -> $('#frequency_select option[value=1]').attr('selected', 'selected') $('#frequency_select').change() $('#frequency_select option[value=0]').attr('selected', 'selected') $('#frequency_select').change() expect($("#monthly_select")).toBeVisible()
And it fails, every time.
However, if instead of $('#rent_payment_schedule_container') as the receiver for .on() , I use $(document) , all this works fine.
$ -> $(document).on 'change', '#frequency_select', (event) -> $('.start-day-select').hide() switch $(event.target).val() when '0' $('#monthly_select').show() when '1' $('#weekly_select').show() when '2' $('#weekly_select').show()
So, I think this has something to do with the order or speed of how jasmine loads the device and then runs the tests, but I cannot be sure. Can someone point me in the right direction, why is this happening and how can I fix it?