Javascript 使用Jasmine监视document.createElement会从角度模拟中抛出错误
我有一个角度服务,处理网络摄像头。下面是我要测试的函数:Javascript 使用Jasmine监视document.createElement会从角度模拟中抛出错误,javascript,angularjs,unit-testing,jasmine,angular-mock,Javascript,Angularjs,Unit Testing,Jasmine,Angular Mock,我有一个角度服务,处理网络摄像头。下面是我要测试的函数: this.takePicture = function() { var canvas = document.createElement('canvas'); canvas.width = this.width; canvas.height = this.height; var context = canvas.getContext('2d'); context.drawImage(this.vid
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)
据我所知,document.createElement是不可变的。你真的不应该一开始就监视它。它是一个内置函数,每次都将以相同的方式执行。你的其他间谍看起来不错。监视这件事有点奇怪。但是,在angular的更大版本中,您可以通过窥探
createElement
方法来实现。您可以使用returnValue
和jasmine spy将其连接起来,以期待某些调用。像这样:
const toDataUrlSpy = jasmine.createSpy('dataUrl');
spyOn(document, 'createElement').and.returnValue({
width: 0,
height: '',
getContext: () => ({ drawImage: () => {} })
toDataURL: toDataUrlSpy
});
service.takePicture();
expect(toDataUrlSpy).toHaveBeenCalledTimes(1);
干杯
const toDataUrlSpy = jasmine.createSpy('dataUrl');
spyOn(document, 'createElement').and.returnValue({
width: 0,
height: '',
getContext: () => ({ drawImage: () => {} })
toDataURL: toDataUrlSpy
});
service.takePicture();
expect(toDataUrlSpy).toHaveBeenCalledTimes(1);