I have looked on the angular2 website, as well as checked many SO posts and I could not find an example that illustrates my use case.
I want to mock data from an object that has an @Input() tag. My component looks like this:
...
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;
}
}
My unit test file for this component looks like this:
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();
});
});
I would like to write a test that mocks the inputInfo:DriftInfo and its object in DriftInfoDisplayComponent and its properties so that I can test that this data is being displayed properly in the html template. How can I do this?
Thanks for any help that may be provided!
A mock component in Angular tests can be created by MockComponent function. The mock component respects the interface of its original component, but all its methods are dummies. To create a mock component, simply pass its class into MockComponent function.
The ComponentFixture is a test harness for interacting with the created component and its corresponding element. Access the component instance through the fixture and confirm it exists with a Jasmine expectation: content_copy const component = fixture. componentInstance; expect(component).
Introduction. Mocking is a great idea for testing Angular apps because it makes maintenance easier and helps reduce future bugs. There are a few complex tools, such as XUnit, for mocking an Angular CLI project. You can execute the mocking methods described in this guide only if you use vanilla Jasmine + Angular Testbed ...
Just add it as a property of the component-under-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();
)};
Stub an object, for example:
const InputInfo = {
headerText: 'headerText',
informationText: 'informationText',
linkText: 'linkText',
visible: 'visible' };
Assign it the component property in your synchronous before each:
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
});
Test your template:
it('should have a header', () => {
const header = element.querySelector('h1').textContent;
expect(header).toBe('headerText');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With