Checking local variable while unit testing on a component in Angular gives error

Question

Suppose there are 2 components : AppComponent and TestComponent. I am calling TestComponent using it\'s directive in the HTML template of AppComponent. Now TestComponent has

Answer 1

As you have added spy on onClick function, it will never fire and update value of filter.

You need to remove that spy function and see the actual value change.

Change test as below:

it('should check whether onClick is called on button click or not and also the value of filter', () => {
      component.myTitle = temp;
      fixture.detectChanges();

      let btn = fixture.debugElement.query(By.css('button'));
      btn.triggerEventHandler('click', null);

      fixture.whenStable().then(() => {
        expect(component.filter).toEqual("GokuSSj3");
      });