請尋找// ****這是問題代碼,下面這行****評論。茉莉花測試,看似無關的測試干擾其他測試
代碼I中有兩個主要的描述功能,其中包含註釋。在第一個描述中(「啓動默認值」),如果我拿出最後一個測試('gameStarted和gameOver應該是false'),則第二個描述中的所有測試(「player press start」)PASS(我指的是測試元素是否具有類「灰色」)。
但是,如果我現在包含最後一個測試,那麼第二個測試中的所有測試(「玩家按下開始」)描述該元素是否具有「灰色」FAIL類。
如果我註釋掉最後一次測試('gameStarted和gameOver應該是false'),那麼其他測試再次通過。有了它的評論,如果我複製並粘貼上面的測試它('球員2應該是計算機')(以確保它不是一個語法問題),其他測試再次失敗!我不知道該怎麼做。它就像我可以在描述塊中放入多少()一樣有限制。
重申,spyClickEvent測試總是通過。 開始按鈕啓動遊戲並灰顯除重啓按鈕以外的所有選項。
整個項目是在Github這裏:https://github.com/Spekachu/Tic-Tac-Toe
你可以看到codepen http://codepen.io/Spekachu/pen/adKprJ?editors=0010 但沒有茉莉那裏的JavaScript。 布爾值都被初始化爲我期望它們在這些測試中的值。
一些JavaScript代碼發佈在底部,就像按下啓動按鈕時的啓動功能一樣。
describe('Tic Tac Toe', function(){
jasmine.getFixtures().fixturesPath = '/';
var spyClickEvent; // will detect all button clicks and game board clicks
beforeEach(function(){
loadFixtures('index.html');
});
describe("Game Board", function(){
it ('should have id "game-board"', function(){
expect($('#game-board')).toExist();
});
describe ('children', function(){
it ('there should be 5 children', function(){
expect($('#game-board').children().length).toEqual(5);
});
describe ('#name-plate', function(){
it ('exists', function(){
expect($('#name-plate')).toExist();
});
});
describe ('#result-ribbon', function(){
it ('exists', function(){
expect($('#result-ribbon')).toExist();
});
});
describe ('#play-wrapper', function(){
it ('exists', function(){
expect($('#play-wrapper')).toExist();
});
describe ('has #play-area, where the pieces get played', function(){
it("exists", function(){
expect($('#play-area')).toExist();
});
describe('slots', function(){
it('should have 9 slots', function(){
$('#play-area').html('');
initVars();
expect($('#play-area').children().length).toEqual(9);
});
it('each slot has an X and O background inset', function(){
$('#play-area').children().each(function(slot, val){
expect(val).toContainElement('p.shadow.o'); expect(val).toContainElement('p.shadow.x');
});
});
it('should have no played pieces at start', function(){
expect(gamePrintOut).toEqual(" | | \n | | \n | | ");
expect(playedPieces.length).toEqual(0);
expect(availSlots.length).toEqual(9);
});
// GAME PLAY
});
});
});
describe ('#options-wrapper', function(){
it ('exists', function(){
expect($('#options-wrapper')).toExist();
});
// *******************************************************************
// !!!!!! THIS IS THE CODE IN QUESTION, BELOW this line !!!!!!!!!!!!!!
describe('Start up defaults', function(){
it('Restart should be greyed out while the rest are red and clickable', function(){
expect($('#restart')).toHaveClass('greyed');
expect($('#start')).not.toHaveClass('greyed');
expect($('.piece-switch')).not.toHaveClass('greyed');
expect($('.choice-switch')).not.toHaveClass('greyed');
expect($('.order-switch')).not.toHaveClass('greyed');
});
it('player should be x, and be going first', function(){
expect(userIsX).toBe(true);
expect(userFirst).toBe(true);
expect(usersTurn).toBe(true);
});
it('player 2 should be Computer', function(){
expect(player2IsComp).toBe(true);
});
it('player 2 should be Computer', function(){
expect(player2IsComp).toBe(true);
});
it('gameStarted and gameOver should be false', function(){
expect(gameStarted).toBe(false);
expect(gameOver).toBe(false);
});
});
describe ('Player presses start', function(){
it ('should grey out options and itself and make Restart red and clickable', function(){
spyClickEvent = spyOnEvent('#start', 'click');
$('#start').trigger("click");
expect('click').toHaveBeenTriggeredOn('#start');
expect(spyClickEvent).toHaveBeenTriggered();
expect($('#restart')).not.toHaveClass('greyed');
expect($('#start')).toHaveClass('greyed');
expect($('.piece-switch')).toHaveClass('greyed');
expect($('.choice-switch')).toHaveClass('greyed');
expect($('.order-switch')).toHaveClass('greyed');
});
});
// ^^^^^^^^ THIS IS THE CODE IN QUESTION, ABOVE this line ^^^^^^^^^^^^^^^^
// *******************************************************************
});
describe ('#made-by', function(){
it ('exists', function(){
expect($('#made-by')).toExist();
});
});
});
});
});
SELECT JavaScript代碼
var usersTurn = true;
var userFirst = true;
var gameStarted = false;
var gameOver = false;
var userIsX = true;
var p2CanWin = false;
var userCanWin = false;
var player2IsComp = true;
var xSymbol = '⨯';
var isAndroid = /(android)/i.test(navigator.userAgent);
if (isAndroid) {
xSymbol = 'x';
}
var slots = ('<div class="slot"> <p class="shadow x">'+ xSymbol +'</p> <p class="shadow o">O</p> </div> ').repeat(9);
function initVars() {
playArea.html(slots);
winningSlots = [];
printGame();
}
function startGame() {
$('#restart').removeClass('greyed');
$('#start').addClass('greyed');
$('.switch-container .switch').addClass('greyed');
gameStarted = true;
gameOver = false;
if (!userFirst)
computerGo();
updateSizes();
}
UPDATE
,如果我離開,去年測試( 'gameStarted和GAMEOVER應該是假的'){...});註釋掉,所以一切都通過 - > 然後,如果我在相同的描述中插入此代碼(「玩家按下開始」),並在它之後(「應該灰掉選項...」){...}
it ("this should pass", function(){
expect(1).toEqual(1);
});
一切仍然通過。但如果我在它之前剪切並粘貼它(「應該灰掉所有其他選項......」),那麼它們又會失敗!
(我也知道我應該開始這個項目的測試第一,可惜我後開始)
你能後的代碼,這些變量/方法:'gameStarted',' userIsX','initVars()'等? – Sonata
是的!我添加了包含所有js的codepen鏈接。 gameStarted和其他布爾值在我的.js中被初始化爲我期望他們在這些測試中的東西。 initVars()只是爲遊戲板添加9個div的html。所有其他變量在聲明時被初始化。 – Spekachu
如果我在spyClickEvents之後和失敗測試之前調用startGame()函數,它們都會通過並且我沒有問題。我假設.trigger函數會觸發我的.js調用startGame()函數,但也許代碼是通過觸發「點擊」。它仍然是一個謎,爲什麼添加任何更多的它()函數高於它('應該灰色選項'){...}導致這些測試失敗。 – Spekachu