Sencha Inc. | HTML5 Apps

Blog

Introducing Siesta: A Testing Tool for Ext JS

December 14, 2011 | Mats Bryntse

Siesta logo In a previous guest post I described how we upgraded Ext Scheduler to Ext JS 4. As I mentioned then, one key factor that greatly simplified our upgrade was unit testing. While it may sound like an obvious thing to do, unit testing a UI generated by JavaScript is not as trivial as unit testing your server code.

For us, about midway through our upgrade, we realized that we badly needed a tool to help us verify that what used to work in the Ext JS 3 version still worked in the Ext JS 4 version. Doing the testing manually for each feature and API method would simply have taken way too much of our time. After evaluating a few popular options, we realized that none really fit our needs, so we started to design and write our own tool: Siesta. Siesta can help you test plain JavaScript or code built with popular JS frameworks such as Ext JS or NodeJS.

But before we get into the details of Siesta, let’s take a step back and give some more background.

Why testing JavaScript UIs is hard

Testing Ext JS, or any other JavaScript centric UI framework, is hard because the available tools are not really suited for the task. When it comes to DOM and user interaction testing, most popular web UI testing tools don’t offer enough help unless your application uses simple static HTML pages. Using Ext JS, the HTML markup is usually generated by JavaScript code, meaning that you cannot safely rely on pixel coordinates, element IDs or XPath/CSS selectors. Brittle tests become very time consuming, if you have to update them every time that you make a slight change to your UI. A tool to test Ext JS must know about Ext JS and make use of its power. This is where Siesta is different from the rest, because its top priority is Ext JS testing.

What we wanted from a test tool

There are a few underlying reasons why we decided to write our own tool. Here are the main features we needed in a good Ext JS test tool:

  • Write tests in JavaScript — we don’t want to have to learn a new language to write tests.
  • Automatable — we should not have to open a browser to run our tests
  • Extensible — we should be able to easily add our own assertion methods and abstractions.
  • Optimized for Ext JS — it should offer high level abstractions to assist with Ext JS testing.
  • Simple and user friendly UI — low learning curve, should be very easy to get started

Together, we believe these features provide a very powerful testing tool. Let’s take a peek at the Siesta UI. Below you can see the two main panels of Siesta: The left hand side holds the test suite tree, and the right panel shows the test assertion list for one of the recently executed tests.

Siesta user interface
The Siesta UI. Click to view larger.

How to write a simple Siesta test.

Let’s look at how to write a simple Hello World test. It would look something like this:

StartTest(function(test) {
  var myTextField = Ext.create("Ext.form.TextField", {
      renderTo : Ext.getBody()
  });
 
  test.click(myTextField);
 
  test.type(myTextField, 'Hello world', function() {
      test.is(myTextField.getValue(), 'Hello world', 'We did it!');
  });
});

A test starts in its StartTest method, which is similar to how you use Ext.onReady in your application. A text field is created and then typed into using the type() method. This method operates asynchronously and in the provided callback function we simply assert that the text field value is what we expect it to be — “Hello world”. When running this and enabling the “View DOM” mode, this is what you see:

Siesta output after running a simple test
Siesta output after running a simple test

Since Siesta can be automated easily using tools like Selenium or the excellent Phantom JS, you could just as well run the test above on the command line. You would then see the following output:

Siesta Command Line
Siesta Command Line

Even complex tests are made trivial by Siesta, for example testing moving, resizing and closing an Ext.Window:

StartTest(function(t) {
  var win = new Ext.Window({
      height : 200,
      width : 200,
      // Set window position to known state
      x     : 0,
      y     : 0
  });</p>
 
  win.show();
 
  t.ok(win.rendered, 'The window is rendered');
 
  t.hasPosition(win, 0, 0, 'Correct initial position');
  t.hasSize(win, 200, 200, 'Correct initial size');
 
  // Use component query to drag the header 20 px right/down
  t.drag(win.down('header'), null, [20, 20], function() {
      t.hasPosition(win, 20, 20, 'Window could be moved to new position');
 
      // Use regular CSS selector to drag the east resize handle 20 px to the right
      t.drag(win.getEl().down('.x-resizable-handle-east'), null, [20, 0], function() {
          t.hasSize(win, 220, 200, 'Size increased');
 
          t.click(win.down('tool[type=close]'));
 
          t.notOk(win.el.dom, 'The dom element of the window is gone');
      });
  });
});

What unit testing can do for your codebase

Testing your code brings lots of advantages, perhaps the biggest one is that it increases your confidence in your codebase. How do you know your code actually works? How do you know if a small change in the core of your application is safe or if it breaks some feature? The only way is to actually manually verify each and every feature of your system—but that’s not realistic unless you have a test suite.

There are other advantages that are definitely worth thinking about:

  • You will save lots of time if you can automate your cross-browser testing prior to pushing out a new release of your application. Doing this will move the quality of your releases to a whole new level.
  • If you use a write-tests-first approach, you are forced to think about your spec and requirements one extra time, before even writing a single line of code.
  • Unit tests help you find tightly coupled code. If you cannot test component A, without also creating a component B and C, then you should probably refactor your code.
  • Siesta can automatically detect global variable leaks for you by analyzing the window at the end of a test.

Another advantage, especially for custom components, is that unit tests provide real usage examples for your APIs, which is like extra documentation built into your project.

When refactoring your code or when upgrading the underlying Ext JS version of your application, it is a huge plus to have a test tool to help you verify the state of your application. Or as someone wrote on Twitter recently: “Without unit tests you’re not refactoring. You’re just changing sh—”.

That is why, for big systems without a test suite, programmers are often afraid of refactoring, and instead only make minor cosmetic changes on the surface, patching here and there. As a result, such systems accumulate a lot of cruft, making further development much more costly.

Summing it up…

I hope this post has given you an idea of what Siesta is and how you can benefit from using it. We still have many features to implement. In the next couple of months we’ll be adding support for Sencha Touch testing, code coverage, performance benchmarking, and lots more. I’d like to invite everyone to join our forums and try Siesta. We are constantly looking for new ideas and ways to improve it, so please let your voice be heard in our community forums.

There are 21 responses. Add yours.

gevik

3 years ago

Siesta is a great testing tool. We have been using it since the beta version and integrated it in our test/build process of developing the Ext4Yii Freamework.

camelCase

3 years ago

A nicely pitched post and one I will be sure to return to when the time is right.

I have a question about the suitability of Siesta for integration testing of larger applications. The examples above would fall into the fine grained unit test category and there is nothing wrong with that. It would be interesting however to know if it is possible and also see a examples of how Siesta could reach into a much larger established application, tweak of UI feature and then look for a response that might originate from a server.

Perhaps in a follow-on post you could demo example tests against the Sencha ExtJS kitchen sink app and another which includes server-side paging into an ExtJS grid.

Mats

3 years ago

@gevik thanks for the kind words smile

@camelCase: It should work well to test a large app too. We’ll be creating more advanced Ext JS testing demo along the road, wanted the initial demos to be simple and understandable. As for testing server side paging, did you try the online demo found at “Sencha Ext JS examples/General/020_ext_custom_combo.t.tjs”? Sort of similar to grid paging…

http://www.bryntum.com/products/siesta/latest/examples/browse-all-desktop.html

Paipai

3 years ago

Nice post but you forgot to say that if you want to use Siesta you must pay.
Dojo get its own test tool too ...and it’s free.

Westy

3 years ago

Sounds interesting; I look forward to finding the time to try it.

Hehe, have to chuckle at the >500 discount… think I need a few more. My post frequency dropped off massively after Ext 4.0.2a hit and our development ramped up.
Are the people that post the streaming adverts going to buy it I wonder? smile

Cheers,
Westy

Mats

3 years ago

@Westy: Right, perhaps we should have a separate discount for spam bots smile. Hope to hear some feedback from you when you find the time.

Axel Segers

3 years ago

Great effort!

Mats

3 years ago

@Axel: thanks smile

Bobot

3 years ago

@Mats - what version of phantomjs were you using? i tried with the 1.3.0 (one that comes with the exe file) - but always give ‘Cant Open’ URL error even if the URL supplied appears valid. Does this ring a bell?

Mats

3 years ago

Could be a firewall or virus scanner issue. Are you able to use Phantom at all?

Flashmattic

3 years ago

This is really nice, but what about testing MVC application done in ExtJS?
How does Seista cope with dynamic class loading of ExtJS?

cheers.

Mats

3 years ago

@Flashmattic: Testing MVC is easy, since we support dynamic loading through various ‘waitFor’ conditions. And we’ll build to improve our MVC layer even more in the near future. I’m working on creating a simple test example of an MVC app. Would be great if you downloaded the trial and gave your thoughts smile

Flashmattic

3 years ago

Thanks for the quick reply.
I did download the trial, and started playing with it, but I can’t seem to find any example of how to use it on an MVC application.
I want to just simulate a click on a button in the application, but I can’t seem to get a “hold” of it using the component query. Can you please direct me to some code samples.
Cheers.

John White

3 years ago

Hi, does Siesta support ExtJs version 3 ?

Mats

3 years ago

Yes it does - wrote 2 new Ext 3 samples today. Join our forum and let us know how it goes, if you find errors we’ll fix them smile

s

3 years ago

nice post….

Ruben Reusser

3 years ago

Hi - can Siesta be used for ext gwt as well?

Omkar

3 years ago

Hello,
Can siesta be used for Testing/Verifying JSON objects ?
Omkar

Mats

3 years ago

Yup, check the API and samples and you’ll see methods like ‘isDeeply’ and isDeeplyStrict.

http://www.bryntum.com/products/siesta/docs/

LoreZyra

3 years ago

Would like to see a video of this in action! :D

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.