Angular 4使用窗口測試代碼

Question

我想測試一個代碼

public openAttachment(attachment: Attachment) {
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(attachment.getFile());
    }
    else {
        let objectUrl = URL.createObjectURL(attachment.getFile());
        window.open(objectUrl);
    }
}

我不知道如何訪問窗口或模擬窗口以對其進行測試。 我是角度測試的新手，因此，如果您能詳細解釋一下，那就太好了！

Answer 1

您還可以在測試中訪問window對象。 因此，您可以輕松地監視它們。

我已經創建了一個輕量級的組件，並考慮了您的特定用例。

以下是組件：

 import { Component } from '@angular/core'; @Component({ selector: 'app-attachment', templateUrl: './attachment.component.html', styleUrls: ['./attachment.component.css'] }) export class AttachmentComponent { public openAttachment(attachment) { if (window.navigator && window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(attachment.getFile()); } else { let objectUrl = URL.createObjectURL(attachment.getFile()); window.open(objectUrl); } } } 

請注意，在這里我不確定Attachment類型是什么。 因此，我已將類型注釋從參數中移除到openAttachment函數。

現在這就是我的測試的樣子：

 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { AttachmentComponent } from './attachment.component'; describe('AttachmentComponent', () => { let component: AttachmentComponent; let fixture: ComponentFixture<AttachmentComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AttachmentComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(AttachmentComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should be created', () => { expect(component).toBeTruthy(); }); describe('openAttachment', () => { let attachment; beforeEach(() => { attachment = { getFile: function() { return 'foo'; } }; }); it('should call `window.open` if `msSaveOrOpenBlob` is not a method present on the `window.navigator`', () => { // Since this will probably run on Chrome, Chrome Headless or PhantomJS, if won't have a `msSaveOrOpenBlob` method on it. // So this is the test for the else condition. let windowOpenSpy = spyOn(window, 'open'); let returnValue = { foo: 'bar' }; let urlCreateObjectSpy = spyOn(URL, 'createObjectURL').and.returnValue(returnValue); component.openAttachment(attachment); expect(urlCreateObjectSpy).toHaveBeenCalledWith('foo'); expect(windowOpenSpy).toHaveBeenCalledWith(returnValue); }); it('should call the `window.navigator.msSaveOrOpenBlob` if `msSaveOrOpenBlob` is present on the navigator object', () => { // To cover the if condition, we'll have to attach a `msSaveOrOpenBlob` method on the window.navigator object. // We can then spy on it and check whether that spy was called or not. // Our implementation will have to return a boolean because that's what is the return type of `msSaveOrOpenBlob`. window.navigator.msSaveOrOpenBlob = function() { return true; }; let msSaveOrOpenBlobSpy = spyOn(window.navigator, 'msSaveOrOpenBlob'); component.openAttachment(attachment); expect(msSaveOrOpenBlobSpy).toHaveBeenCalledWith('foo'); }); }); }); 

我想再次強調一個事實，即我不確定附件的類型。 所以在beforeEach我的塊openAttachment描述塊，我將其分配給包含名為鍵的對象getFile與價值的功能，最終將返回一個字符串foo 。

同樣，由於您的測試默認情況下將在Chrome中運行，因此您不會在window.navigator對象上獲得msSaveOrOpenBlob函數。 因此， openAttachment describe塊中的第一個測試將僅覆蓋else塊。

不過，在第二個測試中，我們在window.navigator對象上添加了msSaveOrOpenBlob作為函數。 因此，現在它可以覆蓋if分支。 因此，您可以在msSaveOrOpenBlob函數上創建一個間諜，並expect這個間諜與attachment.getFile() toHaveBeenCalledWith attachment.getFile()方法返回的任何內容一起返回到toHaveBeenCalledWith （在這種情況下為字符串foo ）

希望這可以幫助。

Answer 2

beforeEach(() => {

//使用以下行

 (<any>window).navigator ={ function msSaveOrOpenBlob() {} };

   fixture = TestBed.createComponent(Your_Component);
   component = fixture.componentInstance;

   fixture.detectChanges();
}