<?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>Designsor &#187; javascript测试框架</title>
	<atom:link href="http://www.designsor.com/tag/javascript%e6%b5%8b%e8%af%95%e6%a1%86%e6%9e%b6/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.designsor.com</link>
	<description>End Web Developer&#039;s Blog</description>
	<lastBuildDate>Sat, 14 Jan 2012 02:35:12 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Qunit-基于Jquery的javascript测试框架。</title>
		<link>http://www.designsor.com/2010/04/08/qunit/</link>
		<comments>http://www.designsor.com/2010/04/08/qunit/#comments</comments>
		<pubDate>Thu, 08 Apr 2010 14:33:52 +0000</pubDate>
		<dc:creator>xiaojue</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[javascript测试框架]]></category>
		<category><![CDATA[jquery测试框架]]></category>
		<category><![CDATA[Qunit体验]]></category>

		<guid isPermaLink="false">http://www.designsor.com/?p=607</guid>
		<description><![CDATA[在豆瓣javascript小组的群里，基于java框架的未来开发者，史努比同学每天催魂般的叫嚣……我终于翻开了qunit的文档，下载了代码，开始了使用javascript测试框架道路… 好了，言归正传…。 使用和下载方法google上的中文或者E文教程都说烂了，在这里随便提一下：下载http://docs.jquery.com/QUnit中的2个文件qunitCSS和JS，然后自己制作一个HTML测试页面，放在服务器或者随便哪…，对了，开头别忘记要加载最新的jquery库代码…然后就可以开始了。 嗯，初始化之后的页面，给个截图吧，很刺激的爆红和爆绿~ 然后对应上面的代码，其实很简单了。 module(“A”); //创建一个测试集 function nowpage(page){ //测试函数 var nowpagehtml=[]; for(i=1;i&#60;=page;i++){ nowpagehtml.push(i); } nowpagehtml=nowpagehtml.join(” “); return nowpagehtml; //返回一个数字字符串 } test(&#8216;测试函数&#8217;, function(){ //给测试函数起个名字test方法为创建一个测试函数 equals(nowpage(0),null, &#8216;函数返回字符串1&#8242;); //equals就是判断相等的，第一个是函数，第2个期望返回值，第3个是解释，然后对应界面，就可以看出怎么用了，另外一个方法是same，可以判断数据和对象的。详情看文档吧。 equals(nowpage(3),”1 2 3&#8243;, &#8216;函数返回字符串1 2 3&#8242;); equals(nowpage(“3&#8243;),”1 2 3&#8243;, &#8216;函数返回字符串1 2 3&#8242;); }); 再然后就是一个OK函数了。返回是否的，目前这个例子不太适合…但是应该可以理解的，例子： ok(simpleTest("2"), '"2"是一个数字'); 最后就是ajax异步的测试，这个的理解需要2个函数，stop();和start();例子： function ajaxdemo(Callback) { $.ajax({ url: &#8216;search.php?abc=xxx&#8217;, success: Callback }); } test(&#8216;asynchronous test&#8217;, function() { stop(); [...]]]></description>
			<content:encoded><![CDATA[<p>在豆瓣javascript小组的群里，基于java框架的未来开发者，史努比同学每天催魂般的叫嚣……我终于翻开了qunit的文档，下载了代码，开始了使用javascript测试框架道路…</p>
<p>好了，言归正传…。</p>
<p>使用和下载方法google上的中文或者E文教程都说烂了，在这里随便提一下：下载<a href="http://docs.jquery.com/QUnit">http://docs.jquery.com/QUnit</a>中的2个文件qunitCSS和JS，然后自己制作一个HTML测试页面，放在服务器或者随便哪…，对了，开头别忘记要加载最新的jquery库代码…然后就可以开始了。</p>
<p>嗯，初始化之后的页面，给个截图吧，很刺激的爆红和爆绿~</p>
<p><img class="alignnone" title="qunit" src="http://www.designsor.com/wp-content/uploads/2010/04/qunit.gif" alt="" width="500" height="210" /></p>
<p>然后对应上面的代码，其实很简单了。</p>
<p>module(“A”); //创建一个测试集<br />
function nowpage(page){ //测试函数<br />
var nowpagehtml=[];<br />
for(i=1;i&lt;=page;i++){<br />
nowpagehtml.push(i);<br />
}<br />
nowpagehtml=nowpagehtml.join(” “);<br />
return nowpagehtml; //返回一个数字字符串<br />
}<br />
test(&#8216;测试函数&#8217;, function(){ //给测试函数起个名字test方法为创建一个测试函数<br />
equals(nowpage(0),null, &#8216;函数返回字符串1&#8242;); //equals就是判断相等的，第一个是函数，第2个期望返回值，第3个是解释，然后对应界面，就可以看出怎么用了，另外一个方法是same，可以判断数据和对象的。详情看文档吧。<br />
equals(nowpage(3),”1 2 3&#8243;, &#8216;函数返回字符串1 2 3&#8242;);<br />
equals(nowpage(“3&#8243;),”1 2 3&#8243;, &#8216;函数返回字符串1 2 3&#8242;);<br />
});</p>
<p>再然后就是一个OK函数了。返回是否的，目前这个例子不太适合…但是应该可以理解的，例子：</p>
<p><span style="widows: 2; text-transform: none; text-indent: 0px; border-collapse: separate; font-family: 微软雅黑; white-space: normal; orphans: 2; letter-spacing: normal; color: #666666; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><span style="text-align: left; line-height: 14px; border-collapse: collapse; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; color: #000000; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><span style="color: #888888;"><code class="plain" style="background-image: none !important; position: static !important; text-align: left !important; line-height: 1.1em !important; font-style: normal !important; margin: 0px; outline-width: 0px !important; width: auto !important; bottom: auto !important; display: inline !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; direction: ltr !important; float: none !important; height: auto !important; color: #000000 !important; font-size: 1em !important; vertical-align: baseline !important; top: auto !important; right: auto !important; font-weight: normal !important; left: auto !important; background-origin: initial; background-clip: initial; border-width: 0px !important; padding: 0px !important;">ok(simpleTest("2"), '"2"是一个数字');</code></span></span></span></p>
<p><span style="widows: 2; text-transform: none; text-indent: 0px; border-collapse: separate; font-family: 微软雅黑; white-space: normal; orphans: 2; letter-spacing: normal; color: #666666; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"><span style="text-align: left; line-height: 14px; border-collapse: collapse; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; color: #000000; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px;"><code class="plain" style="background-image: none !important; position: static !important; text-align: left !important; line-height: 1.1em !important; font-style: normal !important; margin: 0px; outline-width: 0px !important; width: auto !important; bottom: auto !important; display: inline !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; direction: ltr !important; float: none !important; height: auto !important; color: #000000 !important; font-size: 1em !important; vertical-align: baseline !important; top: auto !important; right: auto !important; font-weight: normal !important; left: auto !important; background-origin: initial; background-clip: initial; border-width: 0px !important; padding: 0px !important;">最后就是ajax异步的测试，这个的理解需要2个函数，stop();和start();例子：</code></span></span></p>
<p><img class="alignnone" title="qunit" src="http://www.designsor.com/wp-content/uploads/2010/04/qunit3.jpg" alt="qunit" /></p>
<p>function ajaxdemo(Callback) {<br />
$.ajax({<br />
url: &#8216;search.php?abc=xxx&#8217;,<br />
success: Callback<br />
});<br />
}<br />
test(&#8216;asynchronous test&#8217;, function() {<br />
stop(); // 暂停测试告诉qunit我要异步调用了。<br />
ajaxdemo(function() {<br />
// 异步调用判断 看是否返回你预期的值等…<br />
})<br />
setTimeout(function() {<br />
start();<br />
}, 2000); //自己预期异步成功预期时间，到达时间调用start();继续qunit，返回测试结果。<br />
})</p>
<p>这个理解还要感谢史努比同学…，他解释的比较形象，大概这就是javascript中的单线程异步模型吧…</p>
<p>最后还发现了2个源代码中给出的提示，最新的qunit里的382行：</p>
<p>// Backwards compatibility, deprecated<br />
QUnit.equals = QUnit.equal;<br />
QUnit.same = QUnit.deepEqual;</p>
<p>嗯，上面可以替代使用并鼓励的2个方法，下面是文档中列出的所有方法和说明…</p>
<p><img class="alignnone" title="qunit" src="http://www.designsor.com/wp-content/uploads/2010/04/qunit2.gif" alt="qunit" /></p>
<p>OVER，以后多多测试吧，我只测了我的一个以前的函数，但是爆绿的感觉还不错呢。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.designsor.com/2010/04/08/qunit/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

