I am attempting to write one for the following component. I am using queryParams and then a switchmap to call a service. This is what the url looks like:

http://localhost:4200/test-fee/details?test_code=PRVFA

Component:

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))
    );
  }

}

The following test throws the 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();
  });
});

I am not finding any help online for this type of test. I am assuming that the activated route is okay, but the service that I am trying to get is not succeeding. Do I need to set up mock data for the service?

CodePudding user response：

I think your main issue is that you have params instead of queryParams where your component requires queryParams.

I am going to comment, follow the !! for the comments:

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();
  });
});

That should hopefully fix it. The rest looks good to me.