2016-08-28 57 views
0

我在javascript中製作'simon says'遊戲。我正嘗試使用支持TDD的Gulp來設置開發環境。我使用Karma運行的Jasmine,並且很難開始使用業力較少的預處理器。如何在業力茉莉花css測試中設置較少的預處理

項目結構

  • 構建

    • CSS
    • app.min.css
    • JS
    • app.min.ks
    • 的index.html
  • SRC

    • 更少
    • styles.less
    • JS
    • 的script.js
    • 的index.html
  • 測試

    • JS
    • scriptSpec.js

在我gulpfile我處理少,巴貝爾將其放入 '構建' 文件夾之前運行如下。

我的index.html有一個元素。這個元素被傳遞給一個'createDom'js函數,它創建了遊戲的所有元素(棋盤,按鈕等)。路徑樣式和js是硬編碼是這樣的:

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Simon</title> 
    <!-- bower:css --> 
    <!-- endinject --> 
    <link rel="stylesheet" href="css/app.min.css"> 
</head> 
<body> 

<div id="simon"></div> 

<script src="js/app.min.js"></script> 
<script> 
    // DOM Ready 
    document.addEventListener("DOMContentLoaded", function() { 
     var el = document.getElementById('simon'); 
     Simon.createDom(el); 
    }); 
</script> 
<!-- bower:js --> 
<!-- endinject --> 
</body> 
</html> 

Simon.createDom()創建了這些元素:

<div id="simon"> 
    <div class="board"> 
     <div class="colorbox red" id="red" style="pointer-events: none;"></div> 
     <div class="colorbox green" id="green" style="pointer-events: none;"></div> 
     <div class="colorbox yellow" id="yellow" style="pointer-events: none;"></div> 
     <div class="colorbox blue" id="blue" style="pointer-events: none;"></div> 
    </div> 
    <h4 class="scoreFld">0</h4> 
    <h4 class="roundFld">0</h4><button class="btnStart">START</button> 
</div> 

我想測試的背景顏色元素。但我不能找出如何設置的業力能夠寫一個規範是這樣的:

simonSpec.js

describe('playSequence()', function() { 
    var el, 
     sequence; 

    beforeEach(function() { 
     el = document.getElementById('simon'); 
     Simon.createDom(el); 

     jasmine.clock().install(); 
     sequence = ['red', 'green', 'blue']; 
    }); 

    afterEach(function() { 
     jasmine.clock().uninstall(); 
     sequence = []; 
    }); 

    it('the first color should be red', function() { 
     Simon.playSequence(sequence); 

     var actual = document.getElementById('red').style.backgroundColor; 
     var expected = "rgb(255, 0, 0)";-color'); 

     expect(actual).toEqual(expected); 
    }); 
}) 

ID爲「紅」的元素總是不確定的。

任何人都可以指出我如何設置它的一個例子。我在少開發,並希望在處理到CSS之前進行測試。

回答

0

Karma在虛擬「HTML」文件的上下文中執行測試,該虛擬「HTML」文件只需按照Karma配置(files)定義的那樣進行測試。這就是included在噶files配置指。因此,document.getElementById()是要作用於該虛擬DOM,因此它不會找到你的元素。

您需要做的是在您的Jasmine測試中加載裝置,以定義要使用的HTML,然後讓您的Simon遊戲在通過Jasmine測試執行時在您的燈具上運行。同樣你document.getElementById()邏輯也應該進行修改,以在夾具代替工作。

既然你已經使用了茉莉花,可以考慮使用Jasmine JQuery插件,還增加了一種方便的方式與燈具工作的支持。

+0

謝謝你的答案。賽程是一個好主意。但我怎麼有我的人緣經過預處理的少的文件如CSS,這樣我就可以測試它? – olefrank

+0

好吧,我現在明白了。通過使用固定裝置,來自較少業力預處理器的輸出可自動獲得,因此我可以對其進行測試。謝謝您的幫助。 – olefrank