web-dev-qa-db-fra.com

Comment tester un composant Angular 4 composant qui utilise router.paramMap

Je suis nouveau sur angular 4 et j'essaie de tester l'une des angular 4 fonctionnalité router.paramMap des tests unitaires, lire les paramètres de l'itinéraire de manière jachère et travailler comme attendu dans ma candidature.

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

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

Mais lors de l'exécution du test unitaire, j'obtiens une erreur qui dit ne peut pas appeler la méthode d'abonnement indéfinie même si je passe le paramètre de route de passage comme ci-dessous.

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

Veuillez suggérer

angularjasminekarma-jasmine
14
Tatarao voleti

Vous devez fournir paramMap au lieu de params. paramMap doit être de type ParamMap from @angular/router, donc l'objet normal peut être converti en ParamMap en utilisant la méthode convertToParamMap() from @angular/routing.

Vous pouvez fournir la maquette ActivatedRoute comme ci-dessous:

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

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

J'utilise une méthode légèrement différente pour obtenir les paramètres de mon composant:

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

Et c'est ce qui a fonctionné pour moi dans le test au jasmin:

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

Pour toute personne ayant besoin de tests sur un composant pour savoir quand il a un certain paramètre de route et quand il ne l'a pas (comme dans /product et /product/:id), les travaux suivants me conviennent:

Le composant:

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

    constructor(private readonly activatedRoute: ActivatedRoute) { }

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

Les tests:

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

nous utilisons actuellement ceci:

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

Votre code a un problème, pour obtenir un paramètre de l'URL, vous devez écrire les choses d'une manière différente.

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

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