Angular 4 - 使用 Jasmine 进行单元测试 - 显示错误的按钮单击代码答案

【问题标题】：Angular 4 - Unit testing using Jasmine - Button click code showing errorAngular 4 - 使用 Jasmine 进行单元测试 - 显示错误的按钮单击代码
【发布时间】：2017-12-15 16:37:27
【问题描述】：

我是 Jasmine 的新手。在 Angular 4 中编写代码。我想测试一个按钮。我在我的规范文件中编写了以下代码。这就是多文件上传的功能。在选择文件时，我们允许用户上传文件。

import {
    async,
    ComponentFixture,
    TestBed
} from '@angular/core/testing';

import {
    UploaddocumentComponent
} from './uploaddocument.component';

describe('UploaddocumentComponent', () => {
    let component: UploaddocumentComponent;
    let fixture: ComponentFixture < UploaddocumentComponent > ;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
                declarations: [UploaddocumentComponent]
            })
            .compileComponents();
    }));

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

    // it('should create', () => {
    //   expect(component).toBeTruthy();
    // });
    it('should', async(() => {
        spyOn(component, 'uploadFileByRest');

        let button = fixture.debugElement.nativeElement.querySelector('button');
        button.click();

        fixture.whenStable().then(() => {
            expect(component.uploadFileByRest).toHaveBeenCalled();
        })
    }));
});

在 PhantomJS 浏览器中，看到以下问题。如何解决？

invoke@webpack:///~/zone.js/dist/zone.js:490:0 <- src/polyfills.ts:3454:
PhantomJS 2.1.1 (Windows 7 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.981 
secs/ 0.127 secs)

HTML

<button pButton type="button" icon="fa-check" class="form-control" 
(click)="uploadFileByRest(); file.value = ''" [disabled]="!isFileSelected"
label="Upload"></button>

TS

doUploadByRest() {
   //Saving file to Alfresco and DB
}

Chrome 显示为

HTML 21 行显示我认为的问题 isRequestFromView - 如何为测试代码提供输入？

    21 line <div class="row" *ngIf="!isRequestFromView">
        <p-messages [(value)]="msgs"></p-messages>            
        <div class="col-md-4">
            <label>Add File:</label>
            <input multiple type="file" name="filedata" class="form-control" #file (change)="fileChangeEvent(file.files)" />
        </div>
        <div class="col-md-2"  style="margin-top:25px">
            <button pButton type="button" icon="fa-check" class="form-control" (click)="uploadFile(); file.value = ''" [disabled]="!isFileSelected"
                label="Upload"></button>
        </div>
    </div>

【问题讨论】：

可以分享一下组件的html/ts吗？另外，你能不能尝试在chrome中运行它，它可能会有更详细的错误消息。
我更新了 HTML 和 TS 代码。我无法在 chrome 中运行。我添加了 karma.conf.js - 浏览器：['Chrome']。 11 07 2017 20:20:38.012:ERROR [launcher]: Cannot load browser "Chrome": 它没有注册！也许您缺少一些插件？ 2017 年 11 月 7 日 20:20:38.012:ERROR [karma]: 发现 1 个加载错误

标签： html angular typescript jasmine karma-jasmine

【解决方案1】：

尝试将 PrimeNG 组件 Messages 添加到您的声明中：

import {Messages} from "primeng/primeng";

...

beforeEach(async(() => {
    TestBed.configureTestingModule({
            declarations: [UploaddocumentComponent, Message]
        })
        .compileComponents();
}));

这是因为 Jasmine 测试不会自动导入您的依赖项。这使您可以更好地控制测试环境，允许您根据需要模拟组件。

如果这给您带来更多错误，请尝试模拟组件：

@Component({
  selector: 'p-messages',
  template: ''
})
class MyMessageMock {

}

...

beforeEach(async(() => {
    TestBed.configureTestingModule({
            declarations: [UploaddocumentComponent, MyMessageMock]
        })
        .compileComponents();
}));

这将在您的 <p-messages> 元素所在的位置留下一个空组件，这不会影响您的测试，因为您完全在测试其他东西。

【讨论】：