Ошибка как Невозможно прочитать свойство «подписаться». для активированного маршрута в угловых 7 при юнит-тестировании - PullRequest
Новая
       22

Ошибка как Невозможно прочитать свойство «подписаться». для активированного маршрута в угловых 7 при юнит-тестировании

0 голосов
/ 04 апреля 2019

Я получаю сообщение об ошибке, так как не могу прочитать свойство «подписка» неопределенного для активированного маршрута в angular 7 во время модульного тестирования. Я пробовал его несколькими способами, любезно помогите.

Observer.of не работает для меня, так как у меня есть версия 6.3.3

rx.js

вот мой компонентный файл ChildComponent.ts 

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
    selector: 'app-child',
    template: `
        <h1>Enter your name</h1>
        <form
              [formGroup]="nameForm"
              (ngSubmit)="submitForm(nameForm)"
        >
            <input
                   type="text"
                   formControlName="firstName"
                   placeholder="first"
            >
            <input
                   type="text"
                   formControlName="lastName"
                   placeholder="last"
            >
            <button type="submit">launch to space</button>
        </form>
    `,
    styleUrls: ['./child.component.css']
})
export class ChildComponent {
    @Input() nameForm: FormGroup;
    private abc: number;
    constructor(
        public route: ActivatedRoute,
       ) {

        this.route.queryParams.subscribe(params => {
          this.abc = params['abc'];
        });

      }

    submitForm(form: FormGroup) {
        console.log(form);
        // really you would be using an event emitter
    }
}

вот мой файл модульного теста для тестового примера модуля дочернего компонента 


import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ActivatedRoute, Router, Data, Params } from '@angular/router';
import { Observable, of } from 'rxjs';
import { BehaviorSubject } from 'rxjs';


export class MockActivatedRoute {
    private paramsSubject = new BehaviorSubject(this.testParams);
    private _testParams: {};

    params  = this.paramsSubject.asObservable();

    get testParams() {
        return this._testParams;
    }
    set testParams(newParams: any) {
        this._testParams = newParams;
        this.paramsSubject.next(newParams);
    }
}


import { ChildComponent } from './child.component';


describe('StaticComponent', () => {
    let component: ChildComponent;
    let fixture: ComponentFixture<ChildComponent>;

    class MockActivatedRoute1 extends ActivatedRoute {
    constructor() {
        super();
        this.params = of({id: "5"});
    }
  }

    // create new instance of FormBuilder
    const formBuilder: FormBuilder = new FormBuilder();
    let activeRoute: MockActivatedRoute;  


    beforeEach(() => {
        activeRoute = new MockActivatedRoute();
    });


    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                declarations: [
                    ChildComponent
                ],
                imports: [
                    CommonModule,
                    ReactiveFormsModule,
                    //AppModule
                ],
                providers: [
                    // reference the new instance of formBuilder from above
                    { provide: FormBuilder, useValue: formBuilder },
                    {
                        provide: ActivatedRoute,
                        useValue: {
                            params: {
                                subscribe: (fn: (value: Data) => void) => fn({
                                    abc: 1
                                })
                            }
                        }
                    }
                ]
            }).compileComponents();
        })
    );

    beforeEach(() => {
        fixture = TestBed.createComponent(ChildComponent);
        component = fixture.componentInstance;

        // pass in the form dynamically
        component.nameForm = formBuilder.group({
            firstName: null,
            lastName: null
        });
        fixture.detectChanges();
    });

    it('should be created', () => {
        expect(component).toBeTruthy();
    });
});

1 Ответ

1 голос
/ 04 апреля 2019

Вы были очень близки! Чтобы сдать ваш тест, я издевался над ActivatedRoute так: 

const mockActivatedRoute = { 
  queryParams: of({ abc: 'testABC' }) 
};

А затем использовал его в массиве провайдеров TestBed следующим образом: 

providers: [
    ...
    { provide: ActivatedRoute, useValue: mockActivatedRoute }
]

Вот рабочий Stackblitz . В Stackblitz я также закомментировал весь другой код, который больше не нужен.

...