Jak wyśmiewać NavParams w testach?

Question

To może być pytanie tylko Ionic 2, ponieważ nie widzę NavParams w dokumentach Angular 2, ale niektóre koncepcje mogą się tłumaczyć, więc otagowałem oba.

Biorąc pod uwagę, że dzwonię pod numer navparams.get('somekey') w celu odsłuchiwania parametrów, które są przekazywane, trudno jest sfałszować NavParams w testach.

Na przykład, oto jak ja obecnie zrobić:

export class NavParamsMock { 
    public get(key): any { 
    return String(key) + 'Output'; 
    } 
} 

ta działa na bardzo podstawowych testów, ale gdybym miał komponent, że muszę przetestować że gets specyficzny rodzaj Object, np a User.

Następnie można zrobić coś jak

export class NavParamsMock { 
    public get(key): any { 
    if (key === 'user') { 
     return new User({'name':'Bob'}) 
    } 
    return String(key) + 'Output'; 
    } 
} 

Ale to nie zadziała, jeśli chcesz korzystać z get(user) w innym badaniu, czy nawet specyfikację innego składnika. Powiedzmy, że NavParams używasz w 2 różnych komponentach i obaj oczekują innego rezultatu, gdy robisz get(user), co jest coraz trudniejsze do udawania.

Czy ktoś znalazł rozwiązanie tego scenariusza?

Answer 1

Możesz uzyskać wartość swojego wyboru, wdrażając własną metodę setera.

export class NavParamsMock { 
    static returnParam = null; 
    public get(key): any { 
    if (NavParamsMock.returnParam) { 
     return NavParamsMock.returnParam 
    } 
    return 'default'; 
    } 
    static setParams(value){ 
    NavParamsMock.returnParam = value; 
    } 
} 

Następnie w każdym teście można uzyskać dostęp do usługi i ustawić własny obiekt params.

beforeEach(() => { 
    NavParamsMock.setParams(ownParams); //set your own params here 
    TestBed.configureTestingModule({ 
    providers: [ 
     {provide: NavParams, useClass: NavParamsMock}, 
    ] 
    }); 
}) 

Answer 2

Ja zmodyfikowałem odpowiedź @ raj z własną odmianą tej techniki. @ raj tylko pozwala ustawić jeden parametr. Mine pozwala na przechowywanie wartości klucza z wieloma parametrami.

export class NavParamsMock { 
    static returnParams: any = {}; 

    public get(key): any { 
    if (NavParamsMock.returnParams[key]) { 
     return NavParamsMock.returnParams[key]; 
    } 
    return 'No Params of ' + key + ' was supplied. Use NavParamsMock.setParams('+ key + ',value) to set it.'; 
    } 

    static setParams(key,value){ 
    NavParamsMock.returnParams[key] = value; 
    } 
} 

Answer 3

Zamiast szydząc z klasy, to najłatwiej jest po prostu utworzyć instancję klasy NavParams, a następnie użyć go. NavParams powoduje, że właściwość data jest publicznie przypisywana, więc w razie potrzeby można ją zmodyfikować w każdym teście.

Poniższy przykład zakłada, strona wygląda mniej więcej tak:

@IonicPage() 
@Component({...}) 
export class YourPage { 
    private data: string; 

    constructor(navParams: NavParams) { 
    this.data = navParams.get('data'); 
    } 
} 

To znaczy, ty zadzwonić navParams.get() na stronie constructor, ionViewDidLoad(), ngOnInit() lub podobną funkcję inicjatora. W tym przypadku, aby zmodyfikować dane NavParams i upewnić się, że jest stosowane właściwie, trzeba zmodyfikować testowy wstrzykiwano navParams.data własność, a następnie zregenerować swoją stronę:

import {IonicModule, NavParams} from 'ionic-angular'; 
import {ComponentFixture, TestBed} from '@angular/core/testing'; 

describe('YourPage',() => { 
    let fixture: ComponentFixture<YourPage>; 
    let component: YourPage; 
    const data = {data: 'foo'}; 
    const navParams = new NavParams(data); 

    function generateFixture() { 
    fixture = TestBed.createComponent(YourPage); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    } 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [YourPage], 
     imports: [ 
     IonicModule.forRoot(YourPage), 
     ], 
     providers: [ 
     {provide: NavParams, useValue: navParams}, 
     ] 
    }); 
    generateFixture(); 
    }); 

    describe('NavParams',() => { 
    it('should use injected data',() => { 
     expect(component['data']).toEqual('foo'); 
    }); 
    it('should use new injected data',() => { 
     const newData = {data: 'bar'}; 
     navParams.data = newData; 
     generateFixture(); 
     expect(component['data']).toEqual('bar'); 
    }); 
    }); 
}); 

Jeśli strona zwraca navParams.get('key') wszędzie zamiast przypisywania do prywatnej członka , po prostu ponowne przypisanie właściwości navParams.data jest wystarczające w każdym teście (nie ma potrzeby wywoływania za każdym razem generateFixture()).

Answer 4

Oto przykład z wieloma params

NavParamsMock

export class NavParamsMock { 

    static returnParams: any = {} 

    public get (key): any { 
    if (NavParamsMock.returnParams[key]) { 
     return NavParamsMock.returnParams[key] 
    } 
    } 

    static setParams (key, value): any { 
    NavParamsMock.returnParams[key] = value 
    } 

} 

Dodaj do pilotowej operatorzy następujące

{provide: NavParams, useClass: NavParamsMock} 

testów jednostkowych