How to unit test ExtJS or similar JavaScript based interfaces?

I am using PHPUnit to test my PHP source code, but I need a way to test client-side code, too. I use ExtJS to build rather complex interfaces that call the server for data. 开发者_C百科I am wondering here is how does one test the UI?

There's a new tool that just came out recently called Siesta. It's geared toward Ext JS specifically (though can also test any JS code) and it's a great fit for testing Ext JS UI code as it has built-in Ext JS event simulation and recording.

I also personally use Jasmine for my unit testing, as does the Ext JS team internally, though it's not particularly well suited to UI testing (it's great for testing code though).

There are many different ways.

If you want to test it functionally (like a user) then use something like Selenium or Watir. This will work through your site as a user would and exercise the JavaScript and the Backend code.

If you want to just test your JavaScript by itself then i would use JSTestDriver. It allows you to unit test your JavaScript. It doesnt support async calls but can do the test.

I just ran across Siesta, which is specifically for ExtJS. It looks promising. It's what the Ext team used to test their API when migrating from v3 to v4.

Found this page useful while tuning up testing platform for enterprise ExtJS GUI project from scratch. Here is an addon and topic update and our final choice, based on a couple of days experience. I hope someone saves the time, making choices and escaping first tests errors.

First effort was to screw everything inside Netbeans and use its built-in jsTestDriver engine with default Jasmine library support. Succeded, but as Jasmine is mostly unit (isolated code blocks) testing, we could draw out an ordinary javascript object, but failed to draw out Ext components and therefore its contents. We tried to import Siesta library using the same standard approach (in jsTestDriver.conf file), saw it through code completion, but still no help with ExtJS objects. I found on Siesta Forums, that there were some principal differences in architechture between Siesta and jsTestDriver, so we decided to give up to save time.

As Siesta is the most obvious choice for such a project, next step was to do it exactly following the original Brynthum tutorial. Though it was not preferable to go outside the IDE and multiply production windows with a loss of integration.

Important, that Brynthum tutorial also has a trick. After passing your first test in Brynthum Harness Browser, you can see no test details to the right and face a browser error Uncaught TypeError: Cannot read property 'parentNode' of null. The reason is that ExtJS library for Brynthum Harness Browser has to obligatory correspond Siesta library version. Currently Siesta 2.0.5 = Ext 4.2.0. For your project purposes other ExtJS library version can be uploaded in configuration file.