Estoy intentando escribir uno para el siguiente componente. Estoy usando queryParams y luego un switchmap para llamar a un servicio. Así es como se ve la URL:
http://localhost:4200/prueba-tarifa/detalles?test_code=PRVFA
Componente:
import { Component, OnInit } from '@angular/core'; import { TestFeeService, TestObject } from '../../services/test-fee.service'; import { switchMap } from 'rxjs/operators'; import { ActivatedRoute } from "@angular/router"; import { Observable } from 'rxjs'; @Component({ selector: 'app-test-fee-code', templateUrl: './test-fee-code.component.html', styleUrls: ['./test-fee-code.component.scss'] }) export class TestFeeCodeComponent implements OnInit { test$: Observable<TestObject>; constructor( private tfService: TestFeeService, private route: ActivatedRoute ) { } ngOnInit(): void { this.test$ = this.route.queryParams.pipe( switchMap((params) => this.tfService.getByCode(params.test_code)) ); } } La siguiente prueba arroja el error: TypeError: Cannot read properties of undefined (reading 'pipe')
import { HttpClientTestingModule } from '@angular/common/http/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ActivatedRoute } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; import { of, Observable } from 'rxjs'; import { TestFeeCodeComponent } from './test-fee-code.component'; import { TestFeeService, TestObject } from 'src/app/services/test-fee.service'; describe('TestFeeCodeComponent', () => { let component: TestFeeCodeComponent; let fixture: ComponentFixture<TestFeeCodeComponent>; let route: ActivatedRoute; const TestFeeServiceSpy = jasmine.createSpyObj('TestFeeService', [ 'getByCode' ]); let testFeeServiceSpy; let test$: Observable<TestObject>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ TestFeeCodeComponent ], imports: [ HttpClientTestingModule, RouterTestingModule.withRoutes([]) ], providers: [ { provide: ActivatedRoute, useValue: {params: of({test_code: "PRVFA"})} }, { provide: TestFeeService, useValue: testFeeServiceSpy } ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(TestFeeCodeComponent); route = TestBed.inject(ActivatedRoute); test$ = TestFeeServiceSpy.getByCode.and.returnValue(of({test_code: "PRVFA"})); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); });No encuentro ninguna ayuda en línea para este tipo de prueba. Supongo que la ruta activada está bien, pero el servicio que intento obtener no funciona. ¿Necesito configurar datos simulados para el servicio?
Creo que su principal problema es que tiene params en lugar de queryParams donde su componente requiere queryParams .
Voy a comentar, sigue el !! por los comentarios:
import { HttpClientTestingModule } from '@angular/common/http/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ActivatedRoute } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; import { of, Observable } from 'rxjs'; import { TestFeeCodeComponent } from './test-fee-code.component'; import { TestFeeService, TestObject } from 'src/app/services/test-fee.service'; describe('TestFeeCodeComponent', () => { let component: TestFeeCodeComponent; let fixture: ComponentFixture<TestFeeCodeComponent>; let route: ActivatedRoute; // !! declare the spy here let testFeeServiceSpy: jasmine.SpyObj<TestFeeService>; let test$: Observable<TestObject>; beforeEach(async(() => { // !! assign your testFeeServiceSpy each time in a beforeEach // This is important so your spies are fresh for every test testFeeServiceSpy = jasmine.createSpyObj<TestFeeService>('TestFeeService', ['getByCode']); TestBed.configureTestingModule({ declarations: [ TestFeeCodeComponent ], imports: [ HttpClientTestingModule, RouterTestingModule.withRoutes([]) ], providers: [ // !! change params to queryParams here { provide: ActivatedRoute, useValue: {queryParams: of({test_code: "PRVFA"})} }, { provide: TestFeeService, useValue: testFeeServiceSpy } ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(TestFeeCodeComponent); route = TestBed.inject(ActivatedRoute); // !! Change the following code and no need to assign it to test$ testFeeServiceSpy.getByCode.and.returnValue(of({test_code: "PRVFA"})); component = fixture.componentInstance; // the first fixture.detectChanges is when ngOnInit is called fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); });Eso debería arreglarlo. El resto me parece bien.