CODEWITHSUNDEEP
javascriptangularunit-testingtypescript
Jim
Jim

Reputation: 385

Test if a component is passing an @Input to another

I'm fairly new to unit testing. I wonder how I could test if a smart component is passing some as an @Input() to a dumb one (using Angular 4+).

At first, I thought about checking if the property exists:

it('should have some data', async(() => {
  expect(component.data).toBeTruthy();
}));

However, I faced two issues: 1) that tells me if data is true but doesn't necessarily means it's being passed as an input to my dumb component; 2) if the data property doesn't exist, then the test suite won't be executed.

Any tips? Is there a better way to approach this? Thanks.

Upvotes: 1

Views: 1238

Answers (1)

Max Koretskyi
Max Koretskyi

Reputation: 105547

Since input bindings are processed as part of change detection you can basically change the property used in bindings on the parent component, then run detectChanges() on the parent component and check if the input property has changed in the child component. Something along these lines:

parentComponent = TestBed.createComponent(BannerComponent);
const childComponentEl = fixture.debugElement.query(By.directive(ChildComponent));
const childComponent = childComponentEl.injector.get(ChildComponent);

it('should have some data', async(() => {
  parentComponent.componentInstance.boundProperty = 3;
  parentComponent.detectChanges();
  expect(childComponent.inputProperty).toBe(3);
}));

You can read more about why input bindings update in:

Upvotes: 2

Related Questions