Question

请查找// ****这是问题的代码，在此行****评论。

我在代码中有两个主要的描述函数，它们带有注释。在第一个描述（＆＃34;启动默认值＆＃34;）中，如果我取出最后一个测试（＆＃39; gameStarted和gameOver应该是假的＆＃39;），第二个描述中的所有测试（＆＃ 34;玩家按下开始＆＃34;）PASS（我指的是测试元素是否具有类别＆＃39;灰色＆＃39;）的测试。

但是如果我现在包括那个最后一个测试，那么第二个测试中的所有测试都会描述（＆＃34;播放器按下开始＆＃34;）该元素是否具有类“灰色”＆＃39; FAIL。

如果我注释掉最后一次测试（＆＃39; gameStarted和gameOver应该是假的＆＃39;），那么其他测试再次通过。随着它的注释，如果我将测试复制并粘贴到它上面（＆＃39;播放器2应该是计算机＆＃39;）（为了确保它不是语法问题），其他测试再次失败！我没办法。就像在那个描述块中我可以放入多少（...）的限制一样。

重申一下，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();
        });
      });
    });
  });
});

选择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 = '&#x02A2F';
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();
}

更新

如果我离开最后一次测试（＆＃39; gameStarted和gameOver应该是假的＆＃39;）{...}）;注释掉所以一切都过去了 - ＆gt; 然后，如果我在同一个描述中插入此代码（＆＃34;播放器按下开始＆＃34;），然后在它之后（＆＃34;应该灰显选项......＆＃34;）{...} < / p>

      it ("this should pass", function(){
        expect(1).toEqual(1);
      });

一切仍然过去了。但是如果我在它之前剪切并粘贴它（＆＃34;应该使所有其他选项变灰......＆＃34;），那么它们会再次失败！

（另外我知道我应该首先开始测试这个项目，不幸的是我开始了之后）

Answer 1

所以，我检查了你的代码和控制台日志消息，在我看来测试是在jquery初始化之前运行的。我不确定原因，因为我之前没有使用过jquery-jasmine，但是让你的test async应该解决这个问题：

describe ('Player presses start', function(){
    it ('should grey out options and itself and make Restart red and clickable', function(done){
        setTimeout(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($('.piece-switch')).toHaveClass('greyed');
            expect($('.choice-switch')).toHaveClass('greyed');
            expect($('.order-switch')).toHaveClass('greyed');
            done();
        }, 2000);
    });
});

茉莉花测试，看似无关的测试正在干扰其他测试

1 个答案: