Question

我有一个Angular 4组件，其<input>类型为file。我想创建一个Jasmine测试，以验证在输入字段接收文件时是否调用了事件处理程序。

这是组件：

<div>
    <input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".xls, .xlsx" style="padding-left: 5px">
</div>

这是事件处理程序：

fileChange(event) {
    let fileList: FileList = event.target.files;
    if (fileList.length > 0) {
        // save the file to the backend - this behaviour is tested in a different test
    }
}

这是我到目前为止的测试用例，从Stackoverflow上的各种答案拼凑而成（例如these answers中的一些）似乎在Angular 2中有效，但在Angular 4中没有：

beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

it('file change event should arrive in handler', () => {
    let input  = fixture.debugElement.query(By.css('input[type=file]')).nativeElement;
    input.value = {name: 'excel'};
    input.dispatchEvent(new Event('input'));

    // check that the event handler has been called
    spyOn(component, 'fileChange');

    expect(component.fileChange).toHaveBeenCalled();
});

问题是，Karma会为行SecurityError: The operation is insecure.显示input.value = {name: 'excel'};。是否有另一种方法可以手动分配输入字段的值，或者至少让它发送由fileChange处理的事件？

Answer 1

还有另一种手动分配输入字段值的方法

出于安全原因，您无法为input[type="file"]赋值。

或至少让它发送由fileChange处理的事件

您可以在change之后触发spyOn事件：

spyOn(component, 'fileChange');
input.dispatchEvent(new Event('change'));
expect(component.fileChange).toHaveBeenCalled();

Plunker Example

Answer 2

describe("A suite is just a function", function() {
  var a;

  it("and so is a spec", function() {
    a = true;

    expect(a).toBe(true);
  });
});

测试文件输入接收数据时调用事件处理程序

2 个答案: