使用 Jasmine 監視 document.createElement 從 angular mock 中拋出錯誤

Question

我有一個處理網絡攝像頭的 Angular 服務。 這是我要測試的功能：

this.takePicture = function() {
    var canvas = document.createElement('canvas');
    canvas.width = this.width;
    canvas.height = this.height;

    var context = canvas.getContext('2d');
    context.drawImage(this.videoElement, 0, 0, this.width, this.height);

    return canvas.toDataURL('image/jpeg', 100);
};

我試圖模擬對 document.createElement 的調用並返回一個假的畫布對象。 這是我的測試：

it('should draw an image', function() {
    var drawImageSpy = jasmine.createSpy('drawImage');

    var canvas = {
        getContext: jasmine.createSpy('getContext').and.returnValue({ drawImage: drawImageSpy }),
        width: 0,
        height: 0,
        toDataURL: jasmine.createSpy('toDataUrl').and.returnValue('data-uri')
    };

    document.createElement = jasmine.createSpy('createCanvas').and.returnValue(canvas);

    WcCameraService.takePicture();

    expect(drawImageSpy).toHaveBeenCalled();
});

這是我得到的錯誤：

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at TypeError (native)
    at Function.jQuery.extend.buildFragment (C:/Projects/Accurev/WebCOE_FRF_DEV/src/bower_components/jquery/dist/jquery.js:5565:24)
    at Function.jQuery.parseHTML (C:/Projects/Accurev/WebCOE_FRF_DEV/src/bower_components/jquery/dist/jquery.js:9923:18)
    at jQuery.fn.init (C:/Projects/Accurev/WebCOE_FRF_DEV/src/bower_components/jquery/dist/jquery.js:2774:33)
    at Object.jQuery [as element] (C:/Projects/Accurev/WebCOE_FRF_DEV/src/bower_components/jquery/dist/jquery.js:73:10)
    at $get (C:/Projects/Accurev/WebCOE_FRF_DEV/src/bower_components/angular-mocks/angular-mocks.min.js:6:18224)
    at Object.e [as invoke] (C:/Projects/Accurev/WebCOE_FRF_DEV/src/bower_components/angular/angular.min.js:39:193)
    at C:/Projects/Accurev/WebCOE_FRF_DEV/src/bower_components/angular/angular.min.js:41:10
    at Object.d [as get] (C:/Projects/Accurev/WebCOE_FRF_DEV/src/bower_components/angular/angular.min.js:38:394)
    at Object.<anonymous> (C:/Projects/Accurev/WebCOE_FRF_DEV/src/bower_components/angular-mocks/angular-mocks.min.js:6:21105)

有誰知道為什么會這樣？ 我正在查看 angular-mocks，但此時似乎失敗了：

if (window.jasmine || window.mocha) {

...

  if (injector) {
    injector.get('$rootElement').off();
  }

Answer 1

據我所知， document.createElement 是不可變的。 你真的不應該首先監視它。 這是一個內置函數，每次都以相同的方式執行。 你的其他間諜看起來不錯。

Answer 2

監視它有點奇怪。 但是 - 在更大版本的 angular 中 - 你可以通過監視createElement方法來完成它。 您可以使用帶有茉莉花間諜的returnValue加入此操作，以期待某些調用。 像這樣：

const toDataUrlSpy = jasmine.createSpy('dataUrl');
spyOn(document, 'createElement').and.returnValue({
  width: 0,
  height: '',
  getContext: () => ({ drawImage: () => {} })
  toDataURL: toDataUrlSpy
});

service.takePicture();
expect(toDataUrlSpy).toHaveBeenCalledTimes(1);

干杯!