Угловой компонент модульного теста для Observable с использованием tick и fakeAsync - PullRequest
Новая
       12

Угловой компонент модульного теста для Observable с использованием tick и fakeAsync

1 голос
/ 06 марта 2019

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

У меня есть угловаяКомпонент как это: 

exportClass myTestComponent implements OnInit {
  isLoading: false;
  testOutput: any = [];
  someConstant: string = "gvt";
  private unsubscription$ = new Subject();
  constructor(private testService: TestService){}

  ngOnInit() {
    getTestOutputList(this.someConstant);
  }

  getTestOutputList(someConstant){
    this.isLoading = true;

    testService.getTestOutputList(someConstant)
    .pipe(takeUnitl(this.unsubscription$))
    .subscribe(res => {
       this.isLoading = true;
       this.testOutput = res;
     })

  }

}

Я пытался шпионить метод getTestOutputList, но я не знаю, как я могу передать аргумент для метода getTestOutputList в spyOn.И далее, как я могу проверить наблюдаемое.

1 Ответ

0 голосов
/ 07 марта 2019

Есть разные способы подойти к этому.Обычно я люблю использовать шпионский объект, поскольку он позволяет мне настроить шпион для конкретной службы и возвращаемое значение для тестирования за один шаг.

В вашем коде было много ошибок (например, отсутствует) this.'перед вашим вызовом' testService.getTestOutputList () ', неправильное написание' takeUntil ', установка isLoading на тип' false 'вместо логического значения и т. д.), поэтому я предполагаю, что вы не копировали и не вставляли из рабочего кода.:)

Тем не менее, я исправил ошибки и поместил код в StackBlitz , чтобы продемонстрировать, как такой компонент можно протестировать.Из этого Stackblitz, вот описание, которое включает в себя шпион на сервис и тест, чтобы показать, что подписка Observable работает. 

describe('MyTestComponent', () => {
  let component: MyTestComponent;
  let fixture: ComponentFixture<MyTestComponent>;
  let service: TestService;
  const serviceSpy = jasmine.createSpyObj('TestService', {
    getTestOutputList : of(['the result'])
  });

  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [MyTestComponent],
        providers: [ 
          { provide: TestService, useValue: serviceSpy }
        ]
      }).compileComponents().then(() => {
        service = TestBed.get(TestService);
        fixture = TestBed.createComponent(MyTestComponent);
        component = fixture.componentInstance;
      });
  }));

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

  it('should set this.testOutput properly if subscribe is working', () => {
    fixture.detectChanges(); // Need this here to execute ngOnInit()
    expect(component.testOutput).toEqual(['the result']);
  });

});

Как вы можете видеть в StackBlitz, все тестыпрохождение.Надеюсь, это поможет.

...