Description: A Firebug extension for JavaScript testing.
Home | Edit | New



  • fireunit.js – implementation of the extension
  • fireunit.xul – overlay for Firebug
  • httpd.jsHTTP daemon (for network related tests)
  • jsdiff.js – helper for diffing
  • – string bundle for all UI strings
  • fireunit.cssCSS styles for the Test panel
  • tabView.css – another CSS styles for tabView template.


Entire extension is composed from set of objects that are mostly extending existing objects coming from Firebug framework. See the following list of all existing objects (include a namespace) and brief description.

  • Firebug.FireUnitModel – (derived from Firebug.Module) represents a module of the extension. Notice that there is only one instance of this object per browser window. This object is responsible for injecting fireunit object into a page, which is done in watchWindow method). This object is also used as a namespace (container) for other defined objects.
  • Firebug.FireUnitModule.Fireunit – represents the fireunit object available in a page.
  • FireUnitPanel – (derived from Firebug.Panel) represents a Test panel displayed within Firebug’s UI. This panel is using Domplate templates (see below) to display list of logs (test results) coming from executed tests. In case of a test suite (more test == more pages to load) logs are queued and displayed after the last test finishes. If only one test is executed, messages appears immediately.
  • Firebug.FireUnitModule.TestResultRep – (derived from Firebug.Rep) this template represents basic list of logs (test results) within the panel.
  • Firebug.FireUnitModule.TestResultTabView – (derived from Firebug.Rep) this template represents a info (tab) view that is displayed when a log is expanded (by mouse click).
  • Firebug.FireUnitModule.ParseErrorRep – (derived from_Firebug.Rep_) this template is used to display a parse error. The error can occur if result and expected result (used in and fireunit.reCompare methods) are not well formed.
  • Firebug.FireUnitModule.TestResult – represents a test result (log) coming from executed tests. The result is generated by fireunit.ok, and fireunit.reCompare methods.


Module of the Fireunit extension. This module injects Firebug.FireUnitModule.Fireunit object into a page so, a test case can use available testing APIs. The object is deleted in unWatchWindow method (page is unloading).


This object represents a new Test panel that is displayed within Firebug’s UI. This panel displays list of entries where each entry represents a log (test result) coming from executed test(s). The basic content of the panel is generated using Firebug.FireUnitModule.TestResultRep template (tableTag member) when the first log is appended.

There are following methods:
Method Description
initialize called when the panel is initialized. Append custom style-sheets into the panel’s document.
getOptionsMenuItems defines two Options items (Passing Tests and Failing Tests). If Passing Tests is checked passed results are displayed. If Failing Tests is checked failing results are displayed. Both is checked by default (current state stored in preferences).
appendResult appends new test results into the panel.

Firebug.FireUnitModule.TestResultRep (template)

This template generates list of test results.

There are following domplate tags defined in this object:
Method Description
tableTag defines basic (table) layout of the list. This tag is used to generate general content of the Panel.
resultTag defines a result row within the (above) table. This tag is used whenever a new log is appending into the panel. Notice that new log(s) are appended using FireUnitPanel.appendResults method.
resultInfoTag defines an info row that is inserted dynamically into the table when an existing result is expanded. This row is removed as soon as the result is collapsed again. Notice that this tag defines an empty row. The proper content is inserted by Firebug.FireUnitModule.TestResultTabView.

This template implements all necessary functionality related to collapsing/expanding test results and also a context menu with View Source action that navigates the user into Script panel showing the source code from where the log comes from (see onViewSource method).

Firebug.FireUnitModule.TestResultTabView (template)

This template represents an info that is displayed when a test result is expanded.

There are following domplate tags defined in this object:
Method Description
viewTag represents basic (table) layout of the info-row content. This tag aggregates tabList tag (see below)
tabList list of tabs and tab-bodies. This tag aggregates tabBar and tabBodies tags (see below)
tabBar represents list of tab. Each tab has a title. Click on a tab activates it and associated logic displays associated tab-body.
tabBodies defines list of tab-bodies. Each body is represented by an empty DIV element. The proper content is generated by another tag (i.e. stackTag and compareTag, see below)
stackTag used to generate content of the Stack tab – list of clickable stack-frames. Clicking on a link navigates the user to Script tab that shows the code that generated the log (test result).
compareTag used to generate content of the Compare tab.
There are also following methods:
Method Description
hideStackTab returns true if the Stack tab shouldn’t be displayed. This method returns always false in the current implementation. The tab should always display at least one stack-frame.
hideCompareTab returns false if the Compare tab shouldn’t be displayed. This method returns true only if both result.expected and result.result members of the associated result object are presented (these members are set if the result object comes from or fireunit.reCompare methods)
onClickTab handler for click event on a tab.
selectTabByName helper for selecting a tab by name. Where name is unique identifier of the tab.
selectTab logic associated with tab activation. This method makes sure that (associated) body is displayed and the previous body hidden. This method also mange selected attribute on the tab that is utilized by CSS styles (tabView.css).
updateTabBody generates content for a tab-body. The content is generated just once (within the tabView life time, notice that entire resultInfoRow is removed as soon as it’s collapsed) and only if the tab is activated. This method utilizes stackTag and compareTag to generate appropriate content.
onSwitchView switches between view source and pretty print modes (HTML for expected result and actual result)
insertXml parses expected result and actual result and uses Firebug.HTMLPanel.CompleteElement template to generate HTML preview. In case of a parse error, Firebug.FireUnitModule.ParseErrorRep template is used.

Firebug.FireUnitModule.TestResult (template)

This object represents a test result (log) coming from executed test(s). Instance of the object are created from fireunit.ok, and fireunit.reCompare methods. Each entry in Test panel is associated with an instance of this object and it’s used by (almost) all templates (as result property) when the UI is generated.

There are following members:
Method Description
fileName name of the file the result comes from (displayed on the right side of an Test panel entry).
pass set to true if the result passed given condition, otherwise false.
expected expected HTML in the UI (used by and fireunit.reCompare methods).
result actual HTML in the UI.
stack list of stack-frame info (lineNumber and fileName). The info is generated in constructor of this object. Frames coming from fireunit.js are skipped.


This object implements APIs that are accessible within the test page. Instance of this page is injected by Firebug.FireUnitModule in watchWindow as new fireunit property of the window object (at the time when the page is loading).

There are following methods:
Method Description
ok prints a message (test result) into the Test panel. If the specified condition is false, the message is marked as failing (displayed in red).
compare prints a message into the Test panel. If expected and result parameters are not equal, the message is marked as failing.
log prints informative log text into the Test panel
reCompare expects regular expression (within expected) to compare with result parameter.
testDone Finishes a test.
forceHTTP starts local HTTP server (httpd.js) for network related tests. Also makes sure that cache is cleared.
registerPathHandler makes possible to register handler for dynamically generated responses.
runTests run list of specified tests (in the same order as the are specified)
id returns DOM element according to the specified ID.
test inserts tests to execute into a current queue.
click fires fake click event on specified DOM element.
focus focuses specified DOM element.
value sets value of the specified DOM element.
key fires fake keypress event on specified DOM element.
panel returns specified Firebug’s panel.
privilege Enables or disables privileges for pages coming from http://localhost:7080 and file://
There are following properties:
Method Description
browser access to chrome (only available for chrome:// and http://localhost:/ tests).
testTimeout represents a period of time (milliseconds) after which the test is canceled (an error) and next one is started.
Last edited by janodvarko, 6 days ago
Home | Edit | New