<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>走走停停看看 &#187; FireUnit</title>
	<atom:link href="http://shawphy.com/tag/fireunit/feed" rel="self" type="application/rss+xml" />
	<link>http://shawphy.com</link>
	<description>关注HTML,CSS,JavaScript,jQuery等前端开发</description>
	<lastBuildDate>Mon, 02 Jan 2012 09:47:25 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>FireUnit:基于Firebug的JavaScript单元测试扩展</title>
		<link>http://shawphy.com/2008/12/fireunit.html</link>
		<comments>http://shawphy.com/2008/12/fireunit.html#comments</comments>
		<pubDate>Thu, 18 Dec 2008 08:43:15 +0000</pubDate>
		<dc:creator>Shawphy</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Firebug]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[FireUnit]]></category>

		<guid isPermaLink="false">http://shawphy.com/?p=128</guid>
		<description><![CDATA[John Resig最近在他的博客中发表文章John Resig &#8211; FireUnit: JavaScript Unit Testing Extension.发布了他与Jan Odvarko合作开发的一款基于Firebug的扩展FireUnit。(Firebug真是越来越强大了……) 简单说来，FireUnit给Firebug增加了一个标签面板，并提供了一些简单的JavaScript API来记录和查看测试。 举例来说： // Simple true-like/false-like testing fireunit.ok(&#160;true, &#34;I'm going to pass!&#34; ); fireunit.ok(&#160;false, &#34;I'm going to fail!&#34; ); &#160; // Compare two strings - shows a diff of the &#8230; <a href="http://shawphy.com/2008/12/fireunit.html">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>John Resig最近在他的博客中发表文章<a href="http://ejohn.org/blog/fireunit/">John Resig &#8211;   FireUnit: JavaScript Unit Testing Extension</a>.发布了他与<a href="http://www.softwareishard.com/">Jan Odvarko</a>合作开发的一款基于Firebug的扩展<a href="http://fireunit.org/">FireUnit</a>。(Firebug真是越来越强大了……)<br />
简单说来，FireUnit给Firebug增加了一个标签面板，并提供了一些简单的JavaScript API来记录和查看测试。<br />
举例来说：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: #ffa500;">// Simple true-like/false-like testing</span></li>
<li><span style="color: Blue;">fireunit</span><span style="color: Gray;">.</span><span style="color: Blue;">ok</span><span style="color: Olive;">(</span><span style="color: Gray;">&nbsp;</span><span style="color: Green;">true</span><span style="color: Gray;">, </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">I'm going to pass!</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Blue;">fireunit</span><span style="color: Gray;">.</span><span style="color: Blue;">ok</span><span style="color: Olive;">(</span><span style="color: Gray;">&nbsp;</span><span style="color: Green;">false</span><span style="color: Gray;">, </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">I'm going to fail!</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: #ffa500;">// Compare two strings - shows a diff of the</span></li>
<li><span style="color: #ffa500;">// results if they're different</span></li>
<li><span style="color: Blue;">fireunit</span><span style="color: Gray;">.</span><span style="color: Blue;">compare</span><span style="color: Olive;">(</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">The lazy fox jumped over the log.</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">The lazy brown fox jumped the log.</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">Are these two strings the same?</span><span style="color: #8b0000;">&quot;</span></li>
<li><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: #ffa500;">// Compare a string using a regular expression</span></li>
<li><span style="color: Blue;">fireunit</span><span style="color: Gray;">.</span><span style="color: Blue;">reCompare</span><span style="color: Olive;">(</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #8b0000;">/</span><span style="color: Red;">The .* fox jumped the log.</span><span style="color: #8b0000;">/</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">The lazy brown fox jumped the log.</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">Compare a string using a RegExp.</span><span style="color: #8b0000;">&quot;</span></li>
<li><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: #ffa500;">// Display the total results</span></li>
<li><span style="color: Blue;">fireunit</span><span style="color: Gray;">.</span><span style="color: Blue;">testDone</span><span style="color: Olive;">()</span><span style="color: Gray;">;</span></li></ol></div>
<p>就可以在Firebug中的Test标签面板中看到下图：</p>
<p style="text-align: center;"><a href="http://ejohn.org/blog/fireunit/"><img src="http://fireunit.org/fireunit-1.png" alt="fireunit测试" /></a></p>
<p>FireUnit还可以模拟触发原生浏览器事件：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: #ffa500;">// You can also simulate browser events</span></li>
<li><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">input</span><span style="color: Gray;"> = </span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementsByTagName</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">input</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)[</span><span style="color: Maroon;">0</span><span style="color: Olive;">]</span><span style="color: Gray;">;</span></li>
<li><span style="color: Blue;">fireunit</span><span style="color: Gray;">.</span><span style="color: Blue;">mouseDown</span><span style="color: Olive;">(</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">input</span><span style="color: Gray;"> </span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Blue;">fireunit</span><span style="color: Gray;">.</span><span style="color: Blue;">click</span><span style="color: Olive;">(</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">input</span><span style="color: Gray;"> </span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Blue;">fireunit</span><span style="color: Gray;">.</span><span style="color: Blue;">focus</span><span style="color: Olive;">(</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">input</span><span style="color: Gray;"> </span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Blue;">fireunit</span><span style="color: Gray;">.</span><span style="color: Blue;">key</span><span style="color: Olive;">(</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">input</span><span style="color: Gray;">, </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">a</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li></ol></div>
<p>此外，可以批量测试文件（每个文件都含有一些独立测试）</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: #ffa500;">// Or run multiple pages of tests:</span></li>
<li><span style="color: Blue;">fireunit</span><span style="color: Gray;">.</span><span style="color: Blue;">runTests</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">test2.html</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">, </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">test3.html</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: #ffa500;">// Place at the end of every test file in order to continue</span></li>
<li><span style="color: Blue;">fireunit</span><span style="color: Gray;">.</span><span style="color: Blue;">testDone</span><span style="color: Olive;">()</span><span style="color: Gray;">;</span></li></ol></div>
<p style="text-align: center;"><a href="http://ejohn.org/blog/fireunit/"><img src="http://www.softwareishard.com/images/posts/fireunit/fireunit-ui-thumb.png" alt="fireunit批量测试" /></a></p>
<p>推荐把测试代码包含在下面的if语句内</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Green;">if</span><span style="color: Gray;"> </span><span style="color: Olive;">(</span><span style="color: Gray;"> </span><span style="color: Green;">typeof</span><span style="color: Gray;"> </span><span style="color: Blue;">fireunit</span><span style="color: Gray;"> === </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">object</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: Olive;">)</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">//Your code for test</span></li>
<li><span style="color: Olive;">}</span></li></ol></div>
<p>如果感兴趣，可以访问<a href="http://fireunit.org/">Fireunit.org</a>下载并测试（这个网站内就包含了测试代码，安装后即可看到第一张图的内容）<br />
可以在Github上获取<a href="http://github.com/jeresig/fireunit">源码</a>，得用git而不是svn<br />
Jan也写了一篇<a href="http://www.softwareishard.com/blog/firebug/fireunit-testing-in-the-firebug-world/">文章</a>，可以看看。</p>
]]></content:encoded>
			<wfw:commentRss>http://shawphy.com/2008/12/fireunit.html/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

