角單元測試服務元素持久性

Question

我目前正在編寫一項服務來控制上傳流程。我正在爲顯示和隱藏上傳模式框的功能編寫單元測試。在測試中，我使用angular.element.find來查看模態是否存在。在第二項測試中，這個數字從我預期的數字上升，好像它沒有重置。

兩個測試如下：

describe('show', function() { 
     it('should initially not show the modal', function() { 
      expect(upload.isShowing()).toEqual(false); 
      expect(angular.element.find('.modal').length).toEqual(0); 
     }); 

     it('should show the upload modal', function() { 
      expect(upload.isShowing()).toEqual(false); 
      expect(angular.element.find('.modal').length).toEqual(0); 

      upload.show(); 
      $rootScope.$digest(); 
      expect(upload.isShowing()).toEqual(true); 
      expect(angular.element.find('.modal').length).toEqual(1); 
     }); 
    }); 

    describe('cancel', function() { 
     it('should hide the upload form', function() { 
      expect(upload.isShowing()).toEqual(false); 
      expect(angular.element.find('.modal').length).toEqual(0); 

      upload.show(); 
      $rootScope.$digest(); 
      expect(upload.isShowing()).toEqual(true); 
      expect(angular.element.find('.modal').length).toEqual(1); 

     }); 
    }); 

第一描述塊經過細，但第二個失敗。它告訴我它Expected 1 to equal 0.如果我在cancel的測試中對angular.element.find進行了第一次預期評論，它表示'期望2等於1'。

所有我能確定的是，html都被扔進相同的空間，並在每次測試後複合。有什麼方法可以防止這種行爲，或者使用'afterEach'語句來刷新以前的HTML？

謝謝！

---

Ammendment

這裏是這個套件的測試的完整的代碼，如果它可以幫助：

describe('uploadService', function() { 
    var $rootScope, 
     upload; 

    beforeEach(module('upload')); 
    beforeEach(module('upload.service')); 
    beforeEach(module('bublNg.templates')); 
    beforeEach(module('ui.bootstrap.tpls')); 

    beforeEach(inject(function($injector) { 
     upload = $injector.get('upload'); 
     $rootScope = $injector.get('$rootScope'); 
    })); 

    describe('isShowing', function() { 
     it('should return true if the modal us showing', function() { 
      expect(upload.isShowing()).toEqual(false); 

      upload.show(); 
      expect(upload.isShowing()).toEqual(true); 
     }); 
    }); 

    describe('show', function() { 
     it('should initially not show the modal', function() { 
      expect(upload.isShowing()).toEqual(false); 
      expect(angular.element.find('.modal').length).toEqual(0); 
     }); 

     it('should show the upload modal', function() { 
      expect(upload.isShowing()).toEqual(false); 
      expect(angular.element.find('.modal').length).toEqual(0); 

      upload.show(); 
      $rootScope.$digest(); 
      expect(upload.isShowing()).toEqual(true); 
      expect(angular.element.find('.modal').length).toEqual(1); 
     }); 
    }); 

    describe('cancel', function() { 
     it('should hide the upload form', function() { 
      expect(upload.isShowing()).toEqual(false); 
      // expect(angular.element.find('.modal').length).toEqual(0); 

      upload.show(); 
      $rootScope.$digest(); 
      expect(upload.isShowing()).toEqual(true); 
      // expect(angular.element.find('.modal').length).toEqual(1); 
      upload.cancel(); 
      expect(upload.isShowing()).toEqual(false); 

     }); 
    }); 
}); 

Answer 1

避免測試像這樣的HTML元素的存在。當您使用UI Bootstrap時，您應該將$modal服務注入您的測試並窺探其open方法。然後測試你的代碼對它的調用。這可以防止測試過程中DOM的污染。

這種模式應該讓你開始：

var $modal; 

beforeEach(inject(function($injector) { 
    $modal = $injector.get('$modal'); 
})); 

beforeEach(function() { 
    spyOn($modal, 'open'); 
    // or, to mock/fake a modal object so you can test close/dismiss handlers 
    // spyOn($modal, 'open').and.returnValue(mockModal); 
    // see: http://stackoverflow.com/a/21370703/2943490 
}); 

describe('show', function() { 
    it('should initially not show the modal', function() { 
     expect($modal.open).not.toHaveBeenCalled(); 
    }); 

    it('should show the upload modal', function() { 
     upload.show(); 
     $rootScope.$digest(); 

     expect($modal.open).toHaveBeenCalledWith({ 
      // your modal options 
     }); 
    }); 
}); 

Answer 2

現在你可能把代碼設置你的測試在你的文件開始。嘗試將它放在beforeEach語句中。