Wie teste ich eine Komponente, die von den Parametern von ActivatedRoute abhängt?

Ich teste eine Komponente, die zum Bearbeiten eines Objekts verwendet wird. Das Objekt verfügt über eine eindeutige idEigenschaft, die verwendet wird, um das bestimmte Objekt aus einem Array von Objekten abzurufen, die in einem Dienst gehostet werden. Das Spezifische idwird über einen Parameter beschafft, der über das Routing übergeben wird, insbesondere über die ActivatedRouteKlasse.

Der Konstruktor ist wie folgt:

 constructor(private _router:Router, private _curRoute:ActivatedRoute, private _session:Session) {
}

ngOnInit() {
    this._curRoute.params.subscribe(params => {
        this.userId = params['id'];
        this.userObj = this._session.allUsers.filter(user => user.id.toString() === this.userId.toString())[0];

Ich möchte grundlegende Komponententests für diese Komponente durchführen. Ich bin mir jedoch nicht sicher, wie ich den idParameter einfügen kann, und die Komponente benötigt diesen Parameter.

Übrigens: Ich habe schon ein Mock für den SessionService, also keine Sorge.

Der einfachste Weg, dies zu tun, besteht darin, einfach das useValueAttribut zu verwenden und ein Observable des Wertes bereitzustellen, den Sie verspotten möchten.

RxJS <6

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
...
{
  provide: ActivatedRoute,
  useValue: {
    params: Observable.of({id: 123})
  }
}

RxJS> = 6

import { of } from 'rxjs';
...
{
  provide: ActivatedRoute,
  useValue: {
    params: of({id: 123})
  }
}

Ich habe herausgefunden, wie das geht!

Da ActivatedRoutees sich um einen Dienst handelt, kann ein Scheindienst dafür eingerichtet werden. Nennen wir diesen Mock-Service MockActivatedRoute. Wir erweitern ActivatedRoutein MockActivatedRoute, wie folgt:

class MockActivatedRoute extends ActivatedRoute {
    constructor() {
        super(null, null, null, null, null);
        this.params = Observable.of({id: "5"});
    }

Die Zeile super(null, ....)initialisiert die Superklasse, die vier obligatorische Parameter hat. In diesem Fall benötigen wir jedoch nichts von diesen Parametern, daher initialisieren wir sie mit nullWerten. Alles was wir brauchen ist der Wert, der paramsein ist Observable<>. Daher this.paramsüberschreiben wir mit den Wert von paramsund initialisieren ihn so, dass er Observable<>der Parameter ist, auf den sich die Testperson verlässt.

Initialisieren Sie ihn dann wie jeden anderen Mock-Service einfach und überschreiben Sie den Anbieter für die Komponente.

Viel Glück!

Hier ist, wie ich es in Angular 2.0 getestet habe ...

import { ActivatedRoute, Data } from '@angular/router';

und im Abschnitt Anbieter

{
  provide: ActivatedRoute,
  useValue: {
    data: {
      subscribe: (fn: (value: Data) => void) => fn({
        yourData: 'yolo'
      })
    }
  }
}

In Winkel 8+ gibt es das RouterTestingModule, mit dem Sie auf die ActivatedRoute oder den Router der Komponente zugreifen können. Sie können auch Routen an das RouterTestingModule übergeben und Spione für die angeforderten Routenmethoden erstellen.

Zum Beispiel habe ich in meiner Komponente:

ngOnInit() {
    if (this.route.snapshot.paramMap.get('id')) this.editMode()
    this.titleService.setTitle(`${this.pageTitle} | ${TAB_SUFFIX}`)
}

Und in meinem Test habe ich:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ProductLinePageComponent ],
      schemas: [NO_ERRORS_SCHEMA],
      imports: [
        RouterTestingModule.withRoutes([])
      ],
    })
    .compileComponents()
  }))

  beforeEach(() => {
    router = TestBed.get(Router)
    route = TestBed.get(ActivatedRoute)
  })

und später im Abschnitt 'es':

  it('should update', () => {
    const spyRoute = spyOn(route.snapshot.paramMap, 'get')
    spyRoute.and.returnValue('21')
    fixture = TestBed.createComponent(ProductLinePageComponent)
    component = fixture.componentInstance
    fixture.detectChanges()
    expect(component).toBeTruthy()
    expect(component.pageTitle).toBe('Edit Product Line')
    expect(component.formTitle).toBe('Edit Product Line')
    // here you can test the functionality which is triggered by the snapshot
  })

In ähnlicher Weise können Sie die paramMap direkt über die spyOnProperty-Methode von Jasmin testen, indem Sie ein Observable zurückgeben oder rxjs-Murmeln verwenden. Dies kann einige Zeit sparen und erfordert auch keine zusätzliche Scheinklasse. Hoffe, dass es nützlich und sinnvoll ist.

Fügen Sie einfach einen Mock der ActivatedRoute hinzu:

providers: [
  { provide: ActivatedRoute, useClass: MockActivatedRoute }
]

...

class MockActivatedRoute {
  // here you can add your mock objects, like snapshot or parent or whatever
  // example:
  parent = {
    snapshot: {data: {title: 'myTitle ' } },
    routeConfig: { children: { filter: () => {} } }
  };
}

Für einige Leute, die an Angular> 5 arbeiten, wenn Observable.of (); funktioniert nicht, dann können sie nur von () verwenden, indem sie import {of} aus 'rxjs' importieren;

Beim Erstellen von Testsuiten für einen Routing-Pfad ist dasselbe Problem aufgetreten wie:

{
   path: 'edit/:property/:someId',
   component: YourComponent,
   resolve: {
       yourResolvedValue: YourResolver
   }
}

In der Komponente habe ich die übergebene Eigenschaft wie folgt initialisiert:

ngOnInit(): void {    
   this.property = this.activatedRoute.snapshot.params.property;
   ...
}

Wenn Sie beim Ausführen der Tests keinen Eigenschaftswert in Ihrer aktivierten ActivatedRoute "useValue" übergeben, werden Sie undefiniert, wenn Sie Änderungen mit "fixture.detectChanges ()" erkennen. Dies liegt daran, dass die Scheinwerte für ActivatedRoute nicht die Eigenschaft params.property enthalten. Dann muss der Mock useValue über diese Parameter verfügen, damit das Fixture die Eigenschaft 'this.property' in der Komponente initialisieren kann. Sie können es hinzufügen als:

  let fixture: ComponentFixture<YourComponent>;
  let component: YourComponent;
  let activatedRoute: ActivatedRoute; 

  beforeEach(done => {
        TestBed.configureTestingModule({
          declarations: [YourComponent],
          imports: [ YourImportedModules ],
          providers: [
            YourRequiredServices,
            {
              provide: ActivatedRoute,
              useValue: {
                snapshot: {
                  params: {
                    property: 'yourProperty',
                    someId: someId
                  },
                  data: {
                    yourResolvedValue: { data: mockResolvedData() }
                  }
                }
              }
            }
          ]
        })
          .compileComponents()
          .then(() => {
            fixture = TestBed.createComponent(YourComponent);
            component = fixture.debugElement.componentInstance;
            activatedRoute = TestBed.get(ActivatedRoute);
            fixture.detectChanges();
            done();
          });
      });

Sie können mit dem Testen beginnen, wie zum Beispiel:

it('should ensure property param is yourProperty', async () => {
   expect(activatedRoute.snapshot.params.property).toEqual('yourProperty');
   ....
});

Angenommen, Sie möchten einen anderen Eigenschaftswert testen, dann können Sie Ihre nachgebildete ActivatedRoute wie folgt aktualisieren:

  it('should ensure property param is newProperty', async () => {
    activatedRoute.snapshot.params.property = 'newProperty';
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.debugElement.componentInstance;
    activatedRoute = TestBed.get(ActivatedRoute);
    fixture.detectChanges();

    expect(activatedRoute.snapshot.params.property).toEqual('newProperty');
});

Hoffe das hilft!

Anbieter in der Testklasse hinzugefügt als:

{
  provide: ActivatedRoute,
  useValue: {
    paramMap: of({ get: v => { return { id: 123 }; } })
  } 
}