如何对使用router.paramMap的Angular 4组件进行单元测试

Question

我是角度4的新手，试图从单元测试中测试一个角度4特征router.paramMap，以下面的方式读取路径参数并在我的应用程序中按预期工作。

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

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

但是在运行单元测试时，即使我通过传递路径参数，我也会收到错误，即不能调用未定义的订阅方法。

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

请建议

Answer 1

你需要提供paramMap而不是params。 paramMap应该是来自ParamMap的@angular/router类型，因此可以使用ParamMap的方法convertToParamMap()将正常对象转换为@angular/routing。

您可以提供如下的模拟ActivatedRoute：

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

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

Answer 2

我使用一种稍微不同的方法来获取组件中的参数：

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

这对茉莉花测试有用：

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

Answer 3

我们目前正在使用这个：

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

Answer 4

您的代码有问题，为了从URL获取参数，您必须以不同的方式编写内容。

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

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

Answer 5

对于任何需要对某个组件进行测试的人来说，当它确实有某个路由参数时，以及当它没有它时（如/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', () => {
            //...
        });
    });
});