Unit test angular activate route correctly

Question

I'm just starting to implement some tests into my application, I am having trouble with ActivatedRoute though

I have set up the activatedRouteStub as shown in the angular docs

import { convertToParamMap, ParamMap, Params } from '@angular/router';
import { ReplaySubject } from 'rxjs';

// An ActivateRoute test double with a `paramMap` observable.
// Use the `setParamMap()` method to add the next `paramMap` value.

export class ActivatedRouteStub {
  // Use a ReplaySubject to share previous values with subscribers
  // and pump new values into the `paramMap` observable
  private subject = new ReplaySubject<ParamMap>();

  constructor(initialParams?: Params) {
    this.setParamMap(initialParams);
  }

  /** The mock paramMap observable */
  readonly paramMap = this.subject.asObservable();

  /** Set the paramMap observables's next value */
  setParamMap(params?: Params) {
    this.subject.next(convertToParamMap(params));
  }

}

then in my spec.ts component

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AuthFormComponent } from './auth-form.component';
import { ActivatedRoute, Router } from '@angular/router';
import { ActivatedRouteStub } from 'testing/activated-route-stub';

describe('AuthFormComponent', () => {
  const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
  let component: AuthFormComponent;
  let fixture: ComponentFixture<AuthFormComponent>;
  let activatedRoute;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AuthFormComponent ],
      imports: [
        FormsModule,
        ReactiveFormsModule,
      ],
      providers: [
        { provide: Router, useValue: routerSpy },
        { provide: ActivatedRoute, useValue: new ActivatedRouteStub() }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AuthFormComponent);
    component = fixture.componentInstance;
    activatedRoute = fixture.debugElement.injector.get(ActivatedRoute);
    activatedRoute.setParamMap({ _ga: 1886587047.1559712233 });
    fixture.detectChanges();
  });

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

basically, I have a function in my form to check if there is a _ga code in the params like so

checkForGACode() {
        this.activatedRoute.queryParams
            .subscribe((result) => {
                if (result._ga) {
                    this._storage.setSession('_ga', result._ga.split('-')[1]);
                }
            });
}

but when I run my tests I get

not sure what I am doing wrong here any help would be appreciated!

EDIT

From another post I saw the provider implemented another way like so

{ provide: ActivatedRoute, useClass: ActivatedRouteStub }

but I just get a different error

You can import `RouterTestingModule` instead of `RouterModule`. This module provides a mocked implementation of all the router services. — KiraAG, Jun 24 '19 at 06:35

score 0 · Answer 1 · answered Jun 24 '19 at 04:14

0

You can probably add the following line of code and it should work

 Provide: ActivatedRoute,
 useValue: {
    queryParams: returnAMockObservableHere
 }

BTW, instead of UseValue, you could define a class and replace it by UseClass.

answered Jun 24 '19 at 04:14

amanagg1204

92
7

Unit test angular activate route correctly

1 Answers1

Linked