Angular 4-使用Jasmine進行單元測試-顯示錯誤的按鈕單擊代碼

Question

我是茉莉新手。 用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>

Answer 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>元素所在的位置留下一個空組件，這不會影響您的測試，因為您正在完全測試其他內容。