from http://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