Angular 6单元测试detectChange使用@input引发组件错误

Question

I have a simple component that is passed a config object as @input and uses it to set some values in ngOnInit

export class MyComponent implements OnInit {
    @input() config: ConfigObject;
    min: number;
    max: number;

    ngOnInit() {
        this.min = this.config.range.min;
        this.max = this.config.range.max;
    }
}

And I test it as follows:

describe('MyComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({...})
        .compileComponents();
    }));
    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        component.config = <ConfigObject>mockConfig;
        fixture.detectChanges();
    })
})

detectChanges here will throw an error [object ErrorEvent] thrown . If I call ngOnInit explicitly, I will receive TypeError: Cannot read property 'min' of undefined . From Angular's testing guide it seems like it should be possibly to set input explicitly on tested component, and then call detectChanges so I'm not sure why this isn't working.

In case you were wondering - the mockConfig object is a copy of the object passed to the component when code is run, and the component does not error in this case.

Answer 1

You need to give some mock value please check it now, it should work

  beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        component.config = range: {min:0, max:100};
        fixture.detectChanges();
    })
})