How can I waitFor an element to have children with Geb? - ajax

Question

I'm executing a test that runs a functional use of a "click to add" feature.
The user is given a table of items that allow them to click an "Add" button to add the item to their cart.
The button executes an ajax call to append the item to the user's cart. When the item is added successfully, the item is then displayed in the Cart UI. The Cart UI is essentially another table.
//pseudo code
$('.addButton').on('click', function (event) {
$.ajax({
url:...,
success: updateCart
});
});
function updateCart (data) {
// use data to create tr_fragment
$("#cart-ui-target").append(tr_fragment); //new row
}
What I've tried is in the then statement is use waitFor until the #cart-ui-target has a <tr> size greater or equal to 1:
waitFor(5) {$('#cart-ui-target').find('tr').size() >= 1}
However, every once in a while the test fails with the following exception:
geb.waiting.WaitTimeoutException: condition did not pass in 5.0 seconds (failed with exception)
I've even tried to increase the waitFor time to 10 seconds with a 2 second interval, but it still doesn't work:
waitFor(10, 2) {$('#cart-ui-target').find('tr').size() >= 1}
What can I do to make this a better wait and prevent the sporadic failures?
UPDATE
This is what I'm seeing in the log info of phantomjs.
$('#cart-ui-target').find('tr').size()
| | |
| [] 0
[[[[[PhantomJSDriver: phantomjs on LINUX (113358b0-7bf1-11e4-a10e-9f2b2537fa31)] -> tag name: html]] -> css selector: #cart-ui-target]]

Answer 1

I think your trying to test the JavaScript behaviour, not the adding to the cart itself (probably tested in backend logic?).
I think the way to go is to mock $.ajax and call the callback from your mock using fixture data. If your using jasmine this can look something this:
it('should add something when something is succesfully addes', function() {
data = 'data_for_callback_here';
spyOn($, 'ajax').andCallFake(function(data) { data.success(data); } );
$('.addButton').click();
expect() // Expect something
});