Internals

janodvarko edited this page Sep 13, 2010 · 6 revisions
Clone this wiki locally

###Files###

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

###Objects###
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 fireunit.compare 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, fireunit.compare and fireunit.reCompare methods.

###Firebug.FireUnitModule###
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).

###FireUnitPanel###
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 fireunit.compare 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, fireunit.compare 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 fireunit.compare 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. |

###Firebug.FireUnitModule.Fireunit###
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. |