web-dev-qa-db-ja.com

ActivatedRouteをモックする方法

私はAngularと私はテストをしたいが、私は立ち往生している。私は機能を持っている：

ngOnInit(): void {
    this.route.paramMap
    .switchMap((params: ParamMap) => 
        this.SomethingService.getSomething(params.get('id')))
        .subscribe(something => {
            this.something = something;
            this.doSomethingElse();
    });
}

どこで

route: ActivatedRoute

それをテストしたいのですが、ActivatedRouteをモックする方法がわかりません

angularunit-testingangular-router
11
Daria Domagała

ActivatedRouteをモックする簡単な方法は次のとおりです。

_    TestBed.configureTestingModule({
      declarations: [YourComponenToTest],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: {
            params: Observable.from([{id: 1}]),
          },
        },
      ]
    });
_

その後、テストで使用可能になり、関数がこれで機能するはずです（少なくともActivatedRoute部分）

変数に格納する場合は、it関数のTestBed.get(ActivatedRoute)で取得できます。

Observableを_rxjs/Rx_ではなく_rxjs/Observable_からインポートすることを忘れないでください

15
Nicolas DINQUEL

複数のプロパティを使用して適切に行う方法に興味がある人は、これがあなたのモッククラスを定義する方法です：

import { convertToParamMap } from '@angular/router';
import { Observable } from 'rxjs/Observable';

export class ActivatedRouteMock {
    public paramMap = Observable.of(convertToParamMap({ 
        testId: 'abc123',
        anotherId: 'd31e8b48-7309-4c83-9884-4142efdf7271',          
    }));
}

このようにして、paramMapをサブスクライブし、複数の値（この場合はtestIdとanotherId）を取得できます。

11
Andrius Naruševičius

私はparamsの代わりにparamMapを使用して同じ問題に直面していました。少なくとも最も単純なケースでは、これでうまくいきました。

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { ComponentToTest } from './component-to-test.component';
import { ActivatedRoute } from '@angular/router';

TestBed.configureTestingModule({
  declarations: [ComponentToTest],
  providers: [
    { 
        provide: ActivatedRoute, 
        useValue: {
            paramMap: Observable.of({ get: (key) => 'value' })
        }
    }
  ]
});
8
Flaid

上記のAndrusの答えを修正します。 。 。

RxJS 6以降の場合：

import { convertToParamMap } from '@angular/router';
import { of } from 'rxjs';


export class ActivatedRouteMock {
    public paramMap = of(convertToParamMap({ 
        testId: 'abc123',
        anotherId: 'd31e8b48-7309-4c83-9884-4142efdf7271',          
    }));
}

https://www.learnrxjs.io/operators/creation/of.html

5
schuno

私の場合、このタイプのテストを処理するために新しいクラスを作成する必要がありました。このクラスを使用すると、スナップショット、queryParams、およびparamsを処理できます。

import { Params } from '@angular/router';
import { BehaviorSubject } from 'rxjs';

export class MockActivatedRoute {
  private innerTestParams?: any;
  private subject?: BehaviorSubject<any> = new BehaviorSubject(this.testParams);

  params = this.subject.asObservable();
  queryParams = this.subject.asObservable();

  constructor(params?: Params) {
    if (params) {
      this.testParams = params;
    } else {
      this.testParams = {};
    }
  }

  get testParams() {
    return this.innerTestParams;
  }

  set testParams(params: {}) {
    this.innerTestParams = params;
    this.subject.next(params);
  }

  get snapshot() {
    return { params: this.testParams, queryParams: this.testParams };
  }
}

これは、テストの外観です。

import { MockActivatedRoute } from './mock-active-router';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let activatedRouteStub: MockActivatedRoute;

  beforeEach(async(() => {
    activatedRouteStub = new MockActivatedRoute();
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [
        { provide: ActivatedRoute, useValue: activatedRouteStub }
      ]
    }).compileComponents();
  }));

  it('should change params', () => {
    expect(component.myparam).toBeUndefined();
    expect(component.paramTwo).toBeUndefined();

    activatedRouteStub.testParams = {
      myparam: 'value',
      paramTwo: 1
    };
    fixture.detectChanges();

    expect(component.myparam).toEqual('value');
    expect(component.paramTwo).toEqual(1);
  });

https://Gist.github.com/dvaJi/cf552bbe6725535955f7a5eeb92d7d2e

0
DvaJi