In my Ember app, there is a dropdown that controls a status field. The status field controls how many columns appear in a table.
If the dropdown = Open, there are 14 columns. Otherwise, there are 12. The app behaves fine on this front.
I'm trying to write an acceptance test for this and am having some issues.
The dropdown is tagged with id=status-dropdown. It's on the orders template/route.
In my acceptance test, I have this:
test('Col numbers by status', function(assert) {
//go to the orders pages
visit('/orders');
//wait for the orders visit to resolve
andThen(function() {
//change the status to All Statuses
Ember.$('#status-dropdown').val("All Statuses").change();
//now check the number of columns in the orders table
assert.equal(Ember.$('#orders-table thead tr th').length, 12);
return pauseTest(); //for debugging
});
});
But the number of columns comes back as 14 in the test.
By using the pauseTest() call, I can see the DOM that the test seems to be working on. If I open the console, and do $('#orders-table thead tr th').length, it returns 12. Not 14. Yet the test thinks there are 14.
Is there some trick or quirk I'm missing related to Ember acceptance tests and dropdown effects on the DOM? Should I be changing dropdown values in some way other than jQuery calls like the one above?
Is there a reason why the DOM that pauseTest() returns would be different than the one the actual test seems to think is there?
I've tried moving the code that changes the dropdown to before the "andThen", but that doesn't work. I've tried nesting the change to the dropdown in a second "andThen()" within the first one, but that doesn't work either.
I'm using Mirage for the testing, if that matters.
Edited to add Handlebars code:
//status-dropdown.hbs
<select id="status-dropdown" class="col-xs-12" onchange={{action "filterByStatus" value="target.value"}}>
<option value="all" selected={{eq status -1}}>All Statuses</option>
<option value="Open" selected={{eq status "Open"}}>Open</option>
<option value="Filled" selected={{eq status "Filled"}}>Filled</option>
<option value="Rejected" selected={{eq status "Rejected"}}>Rejected</option>
<option value="Cancelled" selected={{eq status "Cancelled"}}>Cancelled</option>
<option value="Expired" selected={{eq status "Expired"}}>Expired</option>
</select>
The above code is integrated into the orders.hbs template as a partial.
The orders.hbs code is pretty big and complicated, but as far the test goes what matters is there are 14 columns in a main table. But the final two columns appear only if status = Open, which is checked with a {{#if statusIsOpen}} call in the orders.hbs template for the relevant columns.
