web-dev-qa-db-ja.com

router.paramMapを使用するAngular 4コンポーネントを単体テストする方法

私はangular 4を初めて使用し、angular 4機能router.paramMapの1つを単体テストからテストしようとしています。私のアプリケーションで期待されています。

constructor(private router:Router, private actRoute:ActivatedRoute) {
}

ngOnInit() {
    this.router.paramMap.subscribe(params => {
        params.get(id);
    })
......
}

しかし、単体テストの実行中に、以下のようにパスパラメータを渡しても、undefinedのsubscribeメソッドを呼び出せないというエラーが発生します。

{
  provide: ActivatedRoute,
  useValue: { params: Observable.of({id: 1}) }
}

提案してください

angularjasminekarma-jasmine
14
Tatarao voleti

paramMapの代わりにparamsを提供する必要があります。 paramMapは@angular/routerのParamMap型である必要があるため、@angular/routingのメソッドconvertToParamMap()を使用して、通常のオブジェクトをParamMapに変換できます。

以下のようにモックActivatedRouteを提供できます。

import { convertToParamMap} from '@angular/router';
....
.....

{
      provide: ActivatedRoute,
      useValue: { paramMap: Observable.of(convertToParamMap({id: 1})) }
}
27
Preethi

私のコンポーネントでパラメータを取得するために少し異なる方法を使用しています：

this.id = this.route.snapshot.paramMap.get('id');

そして、これはジャスミンテストで私のために働いたものです：

{
      provide: ActivatedRoute,
      useValue: {
        snapshot: {
          paramMap: convertToParamMap({id: 1})
        }
      }
}
10
333Matt

特定のルートパラメータがある場合とない場合（/productと/product/:idのように）にコンポーネントのテストが必要な場合は、次のようにしてください。

コンポーネント：

export class PageProductComponent implements OnInit {
    id: string | null = null;

    constructor(private readonly activatedRoute: ActivatedRoute) { }

    ngOnInit(): void {
        this.id = this.activatedRoute.snapshot.paramMap.get('id');
    }
}

テスト：

describe('PageProductComponent ', () => {
    let component: PageProductComponent ;
    let fixture: ComponentFixture<PageProductComponent >;
    let debugEl: DebugElement;

    const makeCompiledTestBed = (provider?: object): void => {
        const moduleDef: TestModuleMetadata = {
            imports: [
                RouterTestingModule,
            ],
            declarations: [ PageProductComponent ],
            providers: [ ]
        };
        if (moduleDef.providers && provider) {
            moduleDef.providers.Push(provider);
        }
        TestBed.configureTestingModule(moduleDef).compileComponents();
    };

    const setupTestVars = (): void => {
        fixture = TestBed.createComponent(PageProductComponent );
        component = fixture.componentInstance;
        debugEl = fixture.debugElement;
        fixture.detectChanges();
    };

    describe('When an ID is NOT provided in the URL param', () => {
        beforeEach(async(makeCompiledTestBed));
        beforeEach(setupTestVars);

        it('should list all products', () => {
            //...
        });

    });

    describe('When an ID is provided in the URL param', () => {
        beforeEach(async(() => {
            makeCompiledTestBed({
                provide: ActivatedRoute,
                useValue: {
                    snapshot: {
                        paramMap: convertToParamMap({id: 1234})
                    }
                }
            });
        }));

        beforeEach(setupTestVars);

        it('should show a specific product', () => {
            //...
        });
    });
});
2
CBarr

私たちは現在これを使用しています：

    { provide: ActivatedRoute, useValue: { 'params': Observable.from([{ 'id': '1'}]) } },
0
Lotte Lemmens

コードに問題があります。URLからパラメーターを取得するには、別の方法で記述する必要があります。

constructor(private router:Router, private actRoute:ActivatedRoute) {
}

ngOnInit() {
    this.router.paramMap
        .switchMap((params: ParamMap) => {
            params.get(id);
            ....
        })
        .subscribe((....) => {
            ....
        })
}
0
Lorenzo Imperatrice