Subscribe to RSS Feed

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>


Rss Commenti

42 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
  16. I did up a short screencast of building a feature step-by-step using FireUnit:

    http://bigbangtechnology.com/blog/post/writing_tests_first_in_fireunit

    Enjoy!

    #16 Cameron Westland
  17. [...] Resig and Jan Odvarko have announced something pretty darn cool, [...]

    #17 Css howto » FireUnit: JavaScript Unit Testing Extension
  18. nice post.. thanks for using snapshots and codes...

    #18 net software development
  19. [...] latest extension.You can also grab the source off of the repository on Github.Jan has also written a blog post detailing a little bit more about what we're using FireUnit for in the Firebug Working Group.This [...]

    #19 linkfeedr » Blog Archive » FireUnit: JavaScript Unit Testing Extension - RSS Indexer (beta)
  20. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #20 50 Fresh JavaScript Tools That Will Improve Your Workflow | Developer's Toolbox | Smashing Magazine
  21. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #21 50 Fresh JavaScript Tools That Will Improve Your Workflow
  22. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #22 50 Fresh JavaScript Tools That Will Improve Your Workflow » News » Tech7.Net
  23. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #23 Myfreepedia.com » Blog Archive » 50 Fresh JavaScript Tools That Will Improve Your Workflow
  24. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #24 50 Fresh JavaScript Tools That Will Improve Your Workflow « Dogfeeds——IT Telescope
  25. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #25 50 Fresh JavaScript Tools That Will Improve Your Workflow | rapid-DEV.net
  26. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #26 Wordpress Blog Services - 50 Fresh JavaScript Tools That Will Improve Your Workflow
  27. [...] Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #27 50 Fresh JavaScript Tools That Will Improve Your Workflow « 4Kreation
  28. [...] Your Workflow – отличный пост от SmashingMagazineВынес для себе FireUnit. Обязательно попробуем. Share and [...]

    #28 JavaScript фреш | Codeline
  29. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #29 50 Fresh JavaScript Tools That Will Improve Your Workflow @ Nilesh Manohar & Erzsebet Marothi
  30. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #30 50 Fresh JavaScript Tools That Will Improve Your Workflow - Programming Blog
  31. [...] FireUnitUnit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #31 50 Fresh JavaScript Tools That Will Improve Your Workflow | TechTuneZ
  32. I'm stumped on how to access fireunit from a separate extension.

    I've looked at the source code for Firebug and Fireunit, as well as the docs online http://getfirebug.com/docs.html

    My first thought was to access fireunit through the global namespace:
    fireunit.ok(true,"it worked!!");
    fireunit.testDone();

    This fails because "fireunit" is not defined. (btw, I'm not sure how to regulate the order with which extensions load.)

    "Firebug" and "FBL" are defined.

    I see in fireunit.js that Fireunit registers the FireUnitModule with Firebug, and I see the global modules variable in firebug.js

    I've played with different objects, to no avail. How do I access the "ok" and "testDone" functions of fireunit?

    I even tried doing the following, though it appears not to get executed.

    FBL.ns(function() { with (FBL) {

    firebug.ok(true, "it worked!");
    firebug.testDone();

    }});

    Thanks for your help,
    Lucy.

    Possibly relevant from fireunit.js

    Firebug.FireUnitModule = extend(Firebug.Module, {
    ...
    });

    Firebug.FireUnitModule.Fireunit = function(context, win) {
    var fireunit = {
    ok: ...,
    ...
    }
    fireunit.__defineGetter__("browser", function() {
    return canChrome(win) ? window : null;
    });
    this.__proto__ = fireunit;
    };

    #32 lucy
  33. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #33 50 Fresh JavaScript Tools That Will Improve Your Workflow | Graffititools:Designing tips n tools, tutorials, tricks
  34. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #34 50 Fresh JavaScript Tools That Will Improve Your Workflow — Graffititools:Designing tips n tools, tutorials, tricks
  35. Seems to be working fine on FireBug 1.4.3 when I downloaded from resig's github and ran the make file then did File --> Open File from FireFox. I am definitely going to have to play with this thing - I love the compare and stack traces! Great work!

    #35 Rob Levin
  36. Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API.

    #36 Communication all the time
  37. its a great post and good blog i appreciate

    #37 Communication all the time
  38. [...] 如果感兴趣,可以访问Fireunit.org下载并测试(这个网站内就包含了测试代码,安装后即可看到第一张图的内容) 可以在Github上获取源码,得用git而不是svn Jan也写了一篇文章,可以看看。 [...]

    #38 javascript unit test tools « My Coding World
  39. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #39 50 Fresh JavaScript Tools That Will Improve Your Workflow | DX Blog
  40. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #40 Geek is a Lift-Style. » Blog Archive » 50 Fresh JavaScript Tools That Will Improve Your Workflow
  41. This blog is very nice and informative.Thank you for the great story.

    #41 Belen
  42. [...] FireUnit Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit. [...]

    #42 Geek is a Lift-Style. »Archive » 50 Fresh JavaScript Tools That Will Improve Your Workflow

Sorry, the comment form is closed at this time.