How do I detect when all bindings have been updated and the page update is complete?

Question

I am looking at how to test a knockout based website via an automated testing tool like Selenium or PhantomJS. The general flow of the tests is:

1. Do something (e.g., click button)
2. Check to see if the success side effect has occurred (e.g., span text updated)
3. Repeat

The problem is #2. Knockout updates do not occur immediately, so I do the following:

1. Check for success condition every 100ms
2. If 5 seconds have passed, fail.

This sucks, as I either have to make the timeout long enough that knockout will always be complete, or live with spurious failures.

Is there a way that I can detect when all dependencies have been updated? Or is there another approach that I missed?

Thanks, Erick

Answer 1

You can attach your own subscriptions to be notified of changes to observables. Once your subscription is invoked, it can be a trigger for you to check the success condition.

For example:

myViewModel.personName.subscribe(function(newValue) {
    alert("The person's new name is " + newValue);
    //Person got a new name, now lets run the testing tool 
});

More details here.