html - Angular 4 - Jasmine kullanarak birim testi - Buton tıklama kodu hata gösteriyor

Ben Jasmine'e yeniyim. Angular 4'te kod yazıyorum. Bir düğmeyi test etmek istiyorum. Spec dosyamda aşağıdaki kodu yazdım. Bu, çoklu dosya yükleme işlevselliğidir. Ve dosya(lar) seçildiğinde, kullanıcıya dosya yükleme izni veriyoruz.

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 tarayıcısında aşağıdaki sorunu görüyorum. Nasıl çözebilirim?

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 olarak gösteriliyor

HTML 21. satırda sorun gösteriyor sanırım, isRequestFromView - test koduna nasıl giriş verilir?

    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>

Cevap #1

Tanımlamalarınıza PrimeNG bileşeni Messages'i eklemeyi deneyin:

import {Messages} from "primeng/primeng";

...

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

Bunun nedeni, Jasmine testlerinin bağımlılıklarınızı otomatik olarak içe aktarmamasıdır. Bu, test ortamınız üzerinde daha fazla kontrol sahibi olmanızı sağlar ve gerektiğinde bileşenleri taklit etmenize olanak tanır.

Eğer bu size daha fazla hata verirse, bileşeni taklit etmeyi deneyin:

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

}

...

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

Bu, <p-messages> öğenizin olduğu yerde boş bir bileşenle sizi bırakacak, bu da testinizi tamamen başka bir şeyi test ettiğiniz için etkilememelidir.