茉莉花 - 點擊檢查addClass

Question

這是一個Rails應用程序。我正在用Jasmine-Jquery使用Jasmine寶石。

這裏是我的JS在資產管道：

$selector = function() { 
    $('#filters li').click(function() { 
     $('#filters li').siblings().removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 
} 
$selector(); 

這就是所謂的workgrid_spec.html我夾具：

<div class="row"> 
    <div class="large-12 columns"> 
     <ul id="filters"> 
      <li class="identity" data-filter=".identity">Identity</li> 
      <li>//</li> 
      <li data-filter=".print">Print</li> 
      <li>//</li> 
      <li data-filter=".web">Web</li> 
      <li>//</li> 
      <li data-filter=".video">Video</li> 
      <li>//</li> 
      <li class="selected" data-filter="*">See All</li> 
     </ul> 
    </div> 
</div> 

這是我的spec文件：

describe("Make sure the workgrid works right", function() {  
    beforeEach(function() { 
     loadFixtures('workgrid_spec.html');  
    });  
    describe("when a filter is clicked", function() { 
     it("is highlighted in the list with the 'selected' class", function() { 
      $('.identity').click(); 
      expect('.identity').toHaveClass('selected'); 
     });  
    }); 
}); 

而這裏的錯誤我得到：

Error: Expected '.identity' to have class 'selected'. 
    at new jasmine.ExpectationResult (http://localhost:8888/__jasmine__/jasmine.js:114:32) 
    at null.toHaveClass (http://localhost:8888/__jasmine__/jasmine.js:1235:29) 
    at null.<anonymous> (http://localhost:8888/__spec__/workgrid_spec.js:12:24) 

Answer 1

問題是你在加載燈具之前調用了函數，所以事件不能添加到元素中。您必須再次在您的測試中調用該函數或使用jquerys delegate函數來綁定該事件。由Andreas描述

Answer 2

至於，您需要使用您的選擇，像這樣：

it("is highlighted in the list with the 'selected' class", function() { 
     $('.identity').click(); 
     expect($('.identity')).toHaveClass('selected'); 
}); 

記住，包括JQuery的在規格爲好，即。

var $ = require('jquery');