I've added a route.queryParamMap.pipe(..) to this project. However, now the unit test for the component fails with TypeError: Cannot read properties of undefined (reading 'pipe') inside "should create". I'm unable to find an adequate solution to this. What changes do I have to implement into the unit test? How can I mock an ActivatedRoute or queryParamMap?
This is the component class:
export class ContainerComponent implements OnInit {
public tab$: Observable<string> = this.route.queryParamMap.pipe(
map(params => params.get('type')),
distinctUntilChanged()
);
// ...
constructor(private readonly route: ActivatedRoute,
private router: Router) {
}
ngOnInit() {
//...
}
This is the unit test without the imports:
describe('ContainerComponent', () => {
let component: ContainerComponent;
let fixture: ComponentFixture<ContainerComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
NgMaterialModule,
],
providers: [
{
provide: Router,
useValue: {navigate: jest.fn()},
},
{
provide: ActivatedRoute,
useValue: {
snapshot: {
queryParams: {
type: 'placeholder',
}
},
routeConfig: {
path: '',
}
}
},
],
declarations: [
ContainerComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ContainerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
Corrected the Unit Test by adding queryParamMap: of(params) and RouterTestingModule:
import {of} from 'rxjs';
import {RouterTestingModule} from '@angular/router/testing';
const params = {
get: jest.fn()
};
describe('ContainerComponent', () => {
//...
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
RouterTestingModule,
NgMaterialModule,
],
providers: [
// ...
{
provide: ActivatedRoute,
useValue: {
queryParamMap: of(params),
snapshot: {
queryParams: {
type: 'placeholder',
},
},
// ...