Trying to perform unit testing for an Angular component is a new experience for me. Currently, I am encountering a specific issue that I would like assistance with.
The component in question contains the following select statement:
this.store.select(getInfo)
.pipe(takeWhile(() => this.isLive)
)
.subscribe((data) => {
this.text = data;
});
The unit test case I have set up looks like this:
fdescribe(‘TestComponent', () => {
let component: TestComponent;
let fixture: ComponentFixture<TestComponent>;
const testStore = jasmine.createSpyObj('Store', ['select']);
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TestComponent],
imports: [MaterialModule, FiltersModule],
providers: [
{provide: Store, useValue: testStore }],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create Test component', async() => {
let initialState = {
data: {
“name: “xyz”,
“age” : 20
},
info: [1]
};
testStore.select.and.returnValues(
of(initialState.info)
);
fixture.detectChanges();
await fixture.whenStable();
expect(component).toBeTruthy();
});
it('should have at least 1 info’, async() => {
let initialState = {
data: {
“name: “xyz”,
“age” : 20
},
info: [1]
};
testStore.select.and.returnValues(
of(initialState.info)
);
fixture.detectChanges();
await fixture.whenStable();
console.log("text is ",component.text);
});
});
This test is quite basic as I am still learning how to write more complex tests. The error message I encounter states: "TypeError: Cannot read property 'pipe' of undefined", and interestingly, this only occurs for the 'should create Test component' test case. I am uncertain about the cause of this issue.
I appreciate any guidance on where I may be making a mistake.