Wie man ein @Input() Objekt in angular2 vortäuscht?

Question

Ich habe auf der angular2-Website nachgesehen, sowie viele SO-Posts überprüft und konnte kein Beispiel finden, das nach Anwendungsfall veranschaulicht.

Ich möchte Daten von einem Objekt vortäuschen, das ein @Input() -Tag hat. Meine Komponente sieht wie folgt aus

... 
export class DriftInfoDisplayComponent implements OnInit { 

    showThisDriftInfo:boolean; 
    headerText:string; 
    informationText:string; 
    linkText:string; 
    @Input() inputInfo:DriftInfo; 

    constructor(){} 

    ngOnInit() { 
    this.headerText = this.inputInfo.headerText; 
    this.informationText = this.inputInfo.informationText; 
    this.linkText = this.inputInfo.linkText; 
    this.showThisDriftInfo = this.inputInfo.visible; 
    } 

    toggleDriftInfo(){ 
    this.showThisDriftInfo = ! this.showThisDriftInfo; 
    } 
} 

Meine Einheit Testdatei für diese Komponente wie folgt

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


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

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

    it('should create',() => { 
    const fixture = TestBed.createComponent(DriftInfoDisplayComponent); 
    const drift = fixture.debugElement.componentInstance; 
    expect(drift).toBeTruthy(); 
    }); 
}); 

sieht Ich möchte einen Test schreiben, die die inputInfo spottet: DriftInfo und ihre Aufgabe in DriftInfoDisplayComponent und seine Eigenschaften damit ich testen kann, ob diese Daten in der HTML-Vorlage korrekt angezeigt werden. Wie kann ich das machen?

Danke für jede Hilfe, die zur Verfügung gestellt werden kann!

Answer 1

Fügen Sie einfach es als Eigenschaft der Komponente im Test:

beforeEach(() => { 
    const fixture = TestBed.createComponent(DriftInfoDisplayComponent); 
    const drift = fixture.debugElement.componentInstance; 
    const driftInfo: DriftInfo = new DriftInfo(); 
    drift.inputInfo = driftInfo; 
}); 

it('should have input info',() => { 
    expect(drift.driftInfo instanceof DriftInfo).toBeTruthy(); 
)}; 

Answer 2

Stub ein Objekt, zum Beispiel:

const InputInfo = { 
     headerText: 'headerText', 
     informationText: 'informationText', 
     linkText: 'linkText', 
     visible: 'visible' }; 

es die Komponenteneigenschaft in Ihrem synchronen vor jedem zuordnen:

beforeEach(() => { 
    fixture = TestBed.createComponent(DriftInfoDisplayComponent); 
    element = fixture.debugElement.nativeElement; 
    component = fixture.debugElement.componentInstance; 
    component.inputInfo = InputInfo; // Assign stub to component property 
    fixture.detectChanges(); // calls NgOnit 
}); 

Testen Sie Ihre Vorlage:

it('should have a header',() => { 
const header = element.querySelector('h1').textContent; 

expect(header).toBe('headerText'); 
});