How to Unit-Test-Eckige 2-routing params

Sagen, dass ich will einfach nur den Komponententest eine Komponente, welche Parameter aus einem Teil der Strecke. Zum Beispiel, meine Komponente ngOnInit sieht wie folgt aus:

  ngOnInit() {
    this.route.parent.params.switchMap((params: Params) => this.service.getProject(params['projectId']))
      .subscribe((project: Project) => this.update(project));
  }

Wie kann ich nun:
1: meine setup-test, so dass die Komponente erstellen funktioniert das überhaupt, also kann ich das Gerät testen, andere Teile

Bearbeitet mit Antwort - das Beispiel ActivatedRouteStub verlängert werden sollte, mit einem Elternteil, die auch über eine beobachtbare Parameter, und ich hätte useClass statt useValue (vergessen zu ändern zurück):

@Injectable()
export class ActivatedRouteStub {

    //ActivatedRoute.params is Observable
    private subject = new BehaviorSubject(this.testParams);
    params = this.subject.asObservable();

    //Test parameters
    private _testParams: {};
    get testParams() { return this._testParams; }
    set testParams(params: {}) {
        this._testParams = params;
        this.subject.next(params);
    }

    //ActivatedRoute.snapshot.params
    get snapshot() {
        return { params: this.testParams };
    }
        //ActivatedRoute.parent.params
    get parent() {
        return { params: this.subject.asObservable() };
    }
}

2: geben Sie einen Wert für die projectId in meinem UnitTest?

Beispiele aus der angular2 Dokumentation nicht zu funktionieren scheint für switchMap, oder sogar überhaupt (ich habe die ActivatedRouteStub von dort, aber kein Glück mit, dass bisher - params ist immer undefiniert).

Bearbeitet mit Antwort:

describe('ProjectDetailsComponent', () => {
  let component: ProjectDetailsComponent;
  let fixture: ComponentFixture<ProjectDetailsComponent>;
  let activatedRoute: ActivatedRouteStub;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes([{ path: 'projects/:projectId', component: ProjectDetailsComponent }])],
      declarations: [ProjectDetailsComponent],
      schemas: [NO_ERRORS_SCHEMA],
      providers: [{ provide: ProjectsService, useClass: ProjectsServiceStub }, {provide: ActivatedRoute, useClass: ActivatedRouteStub}]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ProjectDetailsComponent);
    component = fixture.componentInstance;
    activatedRoute = fixture.debugElement.injector.get(ActivatedRoute);
    activatedRoute.testParams = { projectId: '123'};
    fixture.detectChanges();
  });

  fit('should create', () => {
    expect(component).toBeTruthy();
  });
});

InformationsquelleAutor Arwin | 2017-02-05

5

Der einzige Weg, params wäre undefiniert ist, wenn Sie nicht die Erstellung der stub-richtig. Blick auf die call
```
this.route.parent.params.switchMap
```
params ist eine nested-Eigenschaft auf zwei Ebenen tief. Also als reinen JS-Objekt, das Sie brauchen würde,
```
let mock = {
  parent: {
    params: Observable.of(...)
  }
}
```
Wenn Sie möchten, verwenden Sie Klassen, Sie könnte so etwas wie
```
class ActivatedRouteStub {

  parent = {
    params: Observable.of({})
  };

  set testParams(params: any) {
    this.parent.params = Observable.of(params);
  }
}
```
Verwenden Sie einfach einen setter der testParams um den Wert der parent.params. Also dann, wenn Sie stub.testParams = whatever, die Wert legen auf die observable von der parent.params.

UPDATE

Abgesehen von den oben genannten Erklärung, wie können Sie diese umsetzen, haben Sie auch einen Fehler in deiner Konfiguration
```
{provide: ActivatedRoute, useValue: ActivatedRouteStub}
```
useValue sein soll, ein Objekt, das Sie erstellen. So übergeben Sie eine Klasse, und diese Klasse wird was eingespritzt wird, nicht ein Instanz der Klasse. Wenn Sie möchten, Eckig, um es zu schaffen, dann sollten Sie useClass. Ansonsten sollten Sie das erstellen der Instanz selbst, und verwenden Sie diese Instanz als Wert
```
{provide: ActivatedRoute, useValue: new ActivatedRouteStub() }
```
Beachten Sie die Instanziierung.
- Ich war nur die Eingabe so ziemlich das als Antwort auf meine Frage wenn es an der Tür klingelte, so erhalten Sie die credits 😀 ich fand es heraus. Nach allem, was ich versucht (es ist ein halbes Wochenende dafür an dieser Stelle ...), habe ich vergessen, um wieder zu ändern useValue zu useClass. Dann, zu realisieren, dass ich wahrscheinlich in der Lage sein, um debug-dieser test im browser (ja ich weiß), habe ich bemerkt, dass die Eltern war nichts zu beobachten. Also änderte ich die ActivatedRouteStub die Rücksendung des testParams (wird aktualisieren Sie den test später zu ermöglichen, die Bereitstellung von übergeordneten params separat)
- Aktualisiert die Frage mit der Antwort. Und danke, natürlich! Die neue in useValue ist auch ein nützlicher Tipp.
InformationsquelleAutor Paul Samsotha
1

Wenn jemand landet mit diesem problem mit Winkel 7 der Winkel-docs geben ein klares Beispiel, wie test-Komponenten abhängig von der ActivatedRoute service https://angular.io/guide/testing#activatedroutestub. Nur ein bisschen anders aus als in den Antworten oben.

InformationsquelleAutor Marius Lazar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

UPDATE