我在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之前進行測試。
謝謝你的答案。賽程是一個好主意。但我怎麼有我的人緣經過預處理的少的文件如CSS,這樣我就可以測試它? – olefrank
好吧,我現在明白了。通過使用固定裝置,來自較少業力預處理器的輸出可自動獲得,因此我可以對其進行測試。謝謝您的幫助。 – olefrank