Trying to test route in one component

Issue

I am trying to test a route in one of my components but it is giving error. I have included routertestingmodule to the imports in testbed configuration too.

here is my order-in-progress.spec.ts file

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { AppConfigService } from 'src/app/services/config/app-config.service';
import { OrderInprogressComponent } from './order-inprogress.component';
import {RfqRoutingModule, routes} from '../../rfq/rfq-routing.module';

fdescribe('OrderInprogressComponent', () => {
  let component: OrderInprogressComponent;
  let fixture: ComponentFixture<OrderInprogressComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes(routes),
                FormsModule,
                HttpClientTestingModule,
                ReactiveFormsModule],
      declarations: [ OrderInprogressComponent ],
      providers: [{
        provide:
        AppConfigService,
        useValue: {
          getConfig: () => ({ 
          baseUrl: 'dummy-url',
          serviceBase: 'api-base'
         })
      }
    }
  ],
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(OrderInprogressComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

it('should contain route for /pages/rfq', () => {
    const expectedRoute = { path: '/pages/rfq', component: OrderInprogressComponent };
    expect(routes).toContain(expectedRoute);
});

});

and here is my order-in-progress.ts file

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { RfqService } from '../../rfq/service/rfq.service';
import { InitiRfq } from '../models/initi-rfq.model';
import { OrderManagementService } from '../service/order-management.service';

@Component({
  selector: 'app-order-inprogress',
  templateUrl: './order-inprogress.component.html',
  styleUrls: ['./order-inprogress.component.scss']
})
export class OrderInprogressComponent implements OnInit {

  @Input() item = '';
  @Output() initialRfqAfterLoadCount = new EventEmitter();
  initialRFQ!: FormGroup;
  initialRFQForModelArray = new Array<InitiRfq>();
  constructor(private fb: FormBuilder,
    private router: Router,
    private orderManagementService: OrderManagementService,
    private rfqService: RfqService) {
  }

  loading: boolean = true;
  ngOnInit(): void {
    this.initForm();
  }

  changeIcon(_rfqid: string) {
    this.router.navigate(['/pages/rfq', { rfqid: _rfqid }]);

  } //want to test this route path

rfq-routing.module.ts file where routes is declared

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UnSaveChangeGuard } from './gard/un-save-change.guard';
import { RfqPageComponent } from './rfq-page.component';


export const routes: Routes = [{ path: '', component: RfqPageComponent ,canDeactivate: [UnSaveChangeGuard]}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class RfqRoutingModule { }

and I am getting the following error

OrderInprogressComponent > should contain route for /pages/rfq
Expected [ Object({ path: '', component: Function, canDeactivate: [ Function ] }) ] to contain Object({ path: '/pages/rfq', component: Function }).
Error: Expected [ Object({ path: '', component: Function, canDeactivate: [ Function ] }) ] to contain Object({ path: '/pages/rfq', component: Function }).
    at <Jasmine>
    at UserContext.<anonymous> (http://localhost:9877/_karma_webpack_/webpack:/src/app/modules/pages/order-management/order-inprogress/order-inprogress.component.spec.ts:76:20)
    at _ZoneDelegate.invoke (http://localhost:9877/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:372:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9877/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:287:1)

Solution

The error is pretty much telling you the problem. You're not really testing the component routing, but you're just testing if the routes you declared in the routing module contain what you wrote in the test. In my opinion, this is a test you don't need to write as it is adding almost no real value, but in order to fix it you simply need to add the route to the routes array like so:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UnSaveChangeGuard } from './gard/un-save-change.guard';
import { RfqPageComponent } from './rfq-page.component';


export const routes: Routes = [
  { 
    path: '', 
    component: RfqPageComponent ,
    canDeactivate: [UnSaveChangeGuard]
  },
  { 
    path: '/pages/rfq', 
    component: OrderInprogressComponent 
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class RfqRoutingModule { }

Answered By - ye-olde-dev