Jquery中文網 伊蒂哈德7比2 www.jvkwgx.com.cn
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 [gist]BDD using jasmine jquery

恒大伊蒂哈德:[gist]BDD using jasmine jquery

發布時間:2016-09-19   編輯:伊蒂哈德7比2 www.jvkwgx.com.cn
jquery中文網為您提供[gist]BDD using jasmine jquery等資源,歡迎您收藏本站,我們將為您提供最新的[gist]BDD using jasmine jquery資源

伊蒂哈德7比2 www.jvkwgx.com.cn from //oyanglul.us

jasmine-jquery 來BDD 就是一個bug, 一個大bug

參加 TWU 時寫 jasmine 測試的時候花了大量時間研究為什么不能綁定事件到
fixture. 這導致 teamate 和我自己都會認為我這個帶頭引入這么難用的
jasmine 的人簡直是要殺千刀. 但是其實問題不是 jasmine 當然也不是我,
都是 jasmine-jquery

不管是 loadfixtures 還是 preload(fixtureUrl[, fixtureUrl, …]) 都無法
綁定事件到 fixtures

BDD 不就是想要點哪然后看哪得反應…結果不知道為什么傻傻的就沒有反應.

傻兮兮的官方文檔是這樣的

var spyEvent = spyOnEvent('#some_element', 'click')
$('#some_element').click()
expect('click').toHaveBeenTriggeredOn('#some_element')

這…不是廢話么….這是在測試”測試代碼”么?

真正關心測試的應該是綁定在click事件上的function, 誰管你被tri沒
trigger. 比如我在元素 #anchor_01 上綁定了添加 css class 的事件.那么我
應該這樣測試我的 javascript 代碼.

describe("when fixture contains an <script src='to/your/source'> tag", function () {
  var fixtureUrl = "fixture_with_javascript.html"

  it("should load content of fixture file and javascripts and bind events", function () {
    jasmine.getFixtures().load(fixtureUrl)
    $('#anchor_01').click()
    expect($("#anchor_01")).toHaveClass('foo')
  })
})

但是這樣的 test 是會 fail 掉…

原因在于包含綁定事件的 script 在 specRunner.html 加載時就已經被load了.即
時你用的時 $() wrapper, 因為 specRunner.html 的 document 在運行你的
**spec.js 時已經是ready的了

也就是說這時候并沒有loadFixtures, script 中的事件不會綁定到元素上, 除
非你用的時live…

what do we do

之前一個項目也碰到過類似的情況, 當時的 OO 得比較好, 可以在loadFixtures
之后再 init 一下需要測試的類. 但是那些不OO的代碼腫么辦

事實上我認為 fixture 應該是業務邏輯的一個片段, 那么將需要綁定事件到
fixture 的 script 扔到 fixture 比較 make sense 因為他們本來就是緊耦合.

因此我的 hot fix 是將需要測試的 js 放到它所依賴的 fixtrue 里面, 之后在
loadFixtures 時將 script inline 到 fixture 中然后加載到 specRunner 頁
面上.

diff --git a/lib/jasmine-jquery.js b/lib/jasmine-jquery.js
index 87d7ef8..30d12db 100644
--- a/lib/jasmine-jquery.js
+++ b/lib/jasmine-jquery.js
@@ -119,17 +119,33 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFT
WARE.
   jasmine.Fixtures.prototype.loadFixtureIntoCache_ = function (relativeUrl) {
     var self = this
       , url = this.makeFixtureUrl_(relativeUrl)
+      , htmlText = ''
       , request = $.ajax({
         async: false, // must be synchronous to guarantee that no tests are run
 before fixture is loaded
         cache: false,
         url: url,
         success: function (data, status, $xhr) {
-          self.fixturesCache_[relativeUrl] = $xhr.responseText
+          htmlText = $xhr.responseText
         },
         error: function (jqXHR, status, errorThrown) {
           throw new Error('Fixture could not be loaded: ' + url + ' (status: '
+ status + ', message: ' + errorThrown.message + ')')
         }
       })
+      var scripts = $($.parseHTML(htmlText, true)).find('script') || [];
+      scripts.each(function(){
+        $.ajax({
+            async: false, // must be synchronous to guarantee that no tests are
 run before fixture is loaded
+            cache: false,
+            url: $(this).attr('src'),
+            success: function (data, status, $xhr) {
+                htmlText += '<script>' + $xhr.responseText + '</script>'
+            },
+            error: function (jqXHR, status, errorThrown) {
+                throw new Error('Script could not be loaded: ' + scriptSrc + '
(status: ' + status + ', message: ' + errorThrown.message + ')')
+            }
+        });
+      })
+      self.fixturesCache_[relativeUrl] = htmlText;
   }

   jasmine.Fixtures.prototype.makeFixtureUrl_ = function (relativeUrl){

這樣用起來會比較簡單, 只需要在fixture里面加入 script 即可

<div id="anchor_01"></div>
<script src="spec/fixtures/javascripts/jasmine_javascript_c
lick.js"></script>
<script src="spec/fixtures/javascripts/jasmine_javascript_hove
r.js"></script>

不需要修改任何 jasmine 測試代碼, 依然是這段代碼, 這是它應該就會

describe("when fixture contains an <script src='to/your/source'> tag", function () {
  var fixtureUrl = "fixture_with_javascript.html"

  it("should load content of fixture file and javascripts and bind events", function () {
    jasmine.getFixtures().load(fixtureUrl)
    $('#anchor_01').click()
    expect($("#anchor_01")).toHaveClass('foo')
  })
})

fin
我已經 pull request 到這里 但是人家木有一點要 merge 的意思…好吧,反正我是不會用了,
要是誰被無法綁定事件困擾就不要再浪費時間困擾了, 可以 clone 我的 fork
吧 親.

view raw
2013-11-27-bdd-using-jasmine-jquery.org
hosted with ? by GitHub

您可能感興趣的文章:
jQuery Multi Level horizontal CSS Menu
Ajax Submit
Jquery ajax傳遞復雜參數給WebService的實現代碼
jquery $.ajax入門應用一
Jquery+WebService 校驗賬號是否已被注冊的代碼
ClockPick, a Time Picker
PopupWindow
LavaLamp
jQuery的表格擴展插件 jTable
jQuery Color Plugin

[關閉]