I've been recently working with John Resig on his great Firebug extension called Fireunit. This very promising extension is intended as an automated testing framework for Firefox extensions and it should also be useful for testing web pages in the future. It's still at the beginning, but growing and starting to be very useful for testing Firebug itself.

Such unit test framework is what I have been waiting for a long time. Not only debugging and profiling is important and the unit testing was the missing piece in the Firebug world.

User Interface

My goal was to improve Fireunit's UI and make the output more transparent for users. Let's take a quick look how it looks now.

Fireunit's UI

As you can see Fireunit brings a new Test panel that displays list of results from executed tests. Each entry is expandable so, some additional info about particular message can be discovered.

Since Fireunit's APIs allow to compare expected and actual state of the UI (HTML in most cases), there can be even additional info tab displaying if the message comes from this kind of test.

Fireunit's UI

Example Test

Running a test is as simple as navigating your browser to a test page. Try an empty example test here (sure you need Fireunit). Once the test finishes the Test panel should be displaying two passing and two failing tests.

The test page looks like as follows.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
fireunit.ok(true, "Passing test result");
fireunit.ok(false, "Failing test result.");
fireunit.compare("expected data", "expected data",
    "Passing verification of expected and actual input.");
fireunit.compare("<div>expected</div>", "<div>actual</div>",
    "Failing verification of expected and actual input.");

// Wait for asynchronous operation.
setTimeout(function(){
    // Finish test
    fireunit.testDone();
}, 1000);
</script>
</head>
<body/>
</html>

Tests for Firebug

I have also written some tests intended for Firebug's Net panel. If you want to run them just go to Firebug's SVN repository, download entire svn/tests/unit directory onto your local hard drive and navigate your browser to start.html file (using file: protocol). This file represents a test-suite, which automatically runs all the tests in the net directory (you can also try startScript.html file that runs one test for Script panel). Don't forget to enable Net (Script) panel, the test suite doesn't do it automatically yet.

Notice that these tests access chrome (in order to verify Firebug's UI) and so, you have to set following preference.

user_pref("signed.applets.codebase_principal_support", true);

Fireunit uses local HTTP server for tests that need to simulate network communication. If you want to avoid dialog asking for permissions (the first time) you can also set:

user_pref("capability.principal.codebase.p0.granted", "UniversalXPConnect");

user_pref("capability.principal.codebase.p0.id", "http://localhost:7080");

user_pref("capability.principal.codebase.p0.subjectName", "");

Installation

If you want to install Fireunit, I recommend Firebug 1.3b6 or Firebug 1.4a10. If you choose version with tracing console enabled, you can also see some logs generated from running tests (don't forget to check FIREUNIT option).

Download source code or use my latest build (v0.9.2).


Rss Commenti

15 Comments

  1. obviously, I think this is awesome. great post, honza!

    #1 robcee
  2. Awesome!! :-)

    #2 Alvaro
  3. Just when I was wondering what's going on in Firebug land, bang comes this baby. It's brilliant to hear about such great work progressing. Many thanks for the hard long hours hammering at the keys :)

    #3 pd
  4. This is very exciting. Is there a mailing list to discuss development, provide feedback, etc.?

    #4 Bob69
  5. Good question. I think the best way now is to use Firebug news group: http://groups.google.com/group/firebug/topics I am sure any feedback will reach the right people here.

    #5 admin
  6. I asked this at John Resig's article:

    Isn't fireUnit doing the same thing as Selenium?

    thx

    #6 Empee
  7. thank you for awesome.

    but, in Example Test above, if .xhtml file extension, its fail has appeared only one.

    #7 hide1080
  8. Would be neat.

    #8 aubrey
  9. FireUnit 和 CSS Reviewr...

    刚看到两个小工具,FireUnit 和 CSS Reviewr。
    FireUnit 是 John Resig(JQuery 的老爸)和 Jan Odvarko 写的一个JavaScript 单元测试扩展,这个扩展需要 Firefox 3+ 和 Firebug 1.2+,安装之后会在FireBug 中多出一个...

    #9 Dreamer's Blog
  10. Oh My !!What a great tool.

    #10 r7raul
  11. I'm not clear why everybody here is so happy with this tool.

    Actually, this stuff can't be used in developer's being as it's for Mozilla only, what about IE?
    And what is most important is continuous integration. As for me JSUnit is much better tool that has a lot of APIs but it also hasn't continous integration as without it's a bit useless. I think it would be much better if this plugin could integrate into jsunit.

    #11 Andrew
  12. @Andrew: Integration with JSUnit is one of the top features on my wish list. As far as IE is concerned, yes this tool is intended for Firebug/Mozilla world, at least so far.

    #12 admin
  13. [...] 另一個blog的介紹文章,更詳細:Fireunit, testing in the Firebug world. [...]

    #13 使用firebug + fireunit做javascript的單元測試 於囧
  14. Jan, what Firefox/Firebug addons provide the Storage, FBCache and Prototype tabs that can be seen in your screenshots?

    #14 Ionut G. Stan
  15. These are my test plugins, mainly for further Firebug development. They just slipped into the screenshot. Storage is displaying Firefox client side storage data, FBCache is viewer for Firebug internal page cache and Prototype was intended as a helper for Prototype JS lib.

    #15 admin

Leave a comment