- Published:December 17th, 2008
- Comments:42 Comments
- Category:Firebug, Fireunit, Planet Mozilla
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.
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.
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.
<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>
42 Comments
obviously, I think this is awesome. great post, honza!
Awesome!! 🙂
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 🙂
This is very exciting. Is there a mailing list to discuss development, provide feedback, etc.?
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.
I asked this at John Resig's article:
Isn't fireUnit doing the same thing as Selenium?
thx
thank you for awesome.
but, in Example Test above, if .xhtml file extension, its fail has appeared only one.
Would be neat.
FireUnit 和 CSS Reviewr...
刚看到两个小工具，FireUnit 和 CSS Reviewr。
FireUnit 是 John Resig（JQuery 的老爸）和 Jan Odvarko 写的一个JavaScript 单元测试扩展，这个扩展需要 Firefox 3+ 和 Firebug 1.2+，安装之后会在FireBug 中多出一个...
Oh My !!What a great tool.
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.
@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.
[...] 另一個blog的介紹文章，更詳細：Fireunit, testing in the Firebug world. [...]
Jan, what Firefox/Firebug addons provide the Storage, FBCache and Prototype tabs that can be seen in your screenshots?
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.
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!
[...] Resig and Jan Odvarko have announced something pretty darn cool, [...]
nice post.. thanks for using snapshots and codes...
[...] 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 [...]
[...] 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. [...]
[...] 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. [...]
[...] 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. [...]
[...] 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. [...]
[...] 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. [...]
[...] 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. [...]
[...] 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. [...]
[...] 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. [...]
[...] Your Workflow – отличный пост от SmashingMagazineВынес для себе FireUnit. Обязательно попробуем. Share and [...]
[...] 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. [...]
[...] 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. [...]
[...] 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. [...]
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;
};
[...] 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. [...]
[...] 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. [...]
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!
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.
its a great post and good blog i appreciate
[...] 如果感兴趣，可以访问Fireunit.org下载并测试（这个网站内就包含了测试代码，安装后即可看到第一张图的内容） 可以在Github上获取源码，得用git而不是svn Jan也写了一篇文章，可以看看。 [...]
[...] 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. [...]
[...] 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. [...]
This blog is very nice and informative.Thank you for the great story.
[...] 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. [...]