Как провести модульное тестирование компонента, вызывающего наблюдаемую службу

Question 1

Я пытаюсь выполнить модульное тестирование функции, которая подписана на наблюдаемую службу. Не уверен, где начать.

Компонентная функция, которую я пытаюсь выполнить модульным тестом:

  register() {
    this._registrationService.registerUser(this.form.value)
        .subscribe(data => {
          if (data) {
            this.errorMessage = '';
            this.successMessage = 'Account successfully created';
          } else {
            this.errorMessage = 'Error';
            this.successMessage = '';
          }
        },
        error => {
          this.errorMessage = error;
          this.successMessage = '';
        });
  }

Обслуживание:

  registerUser(user) {
    const registerUrl = this.apiUrl;

    return this._http.post(registerUrl, JSON.stringify(user), { headers: this.apiHeaders })
      .map(res => res.json())
      .catch(this._handleError);
  }

unit-testing jasmine angular rxjs

0

xphong 25 Апр 2016 в 21:34

Answer

Я бы издевался над службой RegistrationService, чтобы возвращать данные с помощью Observable.of.

class MockRegistrationService {
  registerUser(data: any) {
    return Observable.of({});
  }
}

В модульном тесте вам необходимо заменить сервис RegistrationService на поддельный:

describe('component tests', () => {
  setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS,
                   TEST_BROWSER_APPLICATION_PROVIDERS);

  var service = new MockRegistrationService();

  beforeEachProviders(() => [
    provide(RegistrationService, { useValue: service })
  ]);

  it('should open', 
    injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      return tcb
      .createAsync(RegistrationComponent)
      .then(fixture => {
        let elt = fixture.nativeElement;
        let comp: RegistrationComponent = fixture.componentInstance;

        fixture.detectChanges();

        expect(comp.successMessage).toEqual('Account successfully created');
        expect(comp.errorMessage).toEqual('');
      });
    });
  }));
});

См. Этот plunkr для более подробной информации: https://plnkr.co/edit/zTy3Ou?p=info .

1

Thierry Templier 25 Апр 2016 в 18:46

Answer

Отправляю свой рабочий файл test / spec, если кому-то интересно, как это получилось:

Тестовый файл:

import {
  it,
  inject,
  injectAsync,
  describe,
  beforeEachProviders,
  TestComponentBuilder,
  resetBaseTestProviders,
  setBaseTestProviders
} from 'angular2/testing';

import {TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS} from 'angular2/platform/testing/browser';
import {Observable} from 'rxjs/Rx';
import {provide} from 'angular2/core';
import {RootRouter} from 'angular2/src/router/router';
import {Location, Router, RouteRegistry, ROUTER_PRIMARY_COMPONENT} from 'angular2/router';
import {SpyLocation} from 'angular2/src/mock/location_mock';

import {RegistrationService} from '../shared/services/registration';
import {Register} from './register';
import {App} from '../app';

class MockRegistrationService {
  registerUser(user) {
    return Observable.of({
      username: 'TestUser1',
      password: 'TestPassword1'
    });
  }
}

describe('Register', () => {
  resetBaseTestProviders();
  setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);

  let registrationService = new MockRegistrationService();

  beforeEachProviders(() => [
    Register,
    RouteRegistry,
    provide(RegistrationService, { useValue: registrationService }),
    provide(Location, {useClass: SpyLocation}),
    provide(Router, {useClass: RootRouter}),
    provide(ROUTER_PRIMARY_COMPONENT, {useValue: App})
  ]);


  it('should open', injectAsync([TestComponentBuilder], (tcb) => {
      return tcb
        .createAsync(Register)
        .then(fixture => {
          let registerComponent = fixture.componentInstance;

          fixture.detectChanges();

          registerComponent.register({
            username: 'TestUser1',
            password: 'TestPassword1'
          });

          expect(registerComponent.successMessage).toEqual('Account successfully created');
          expect(registerComponent.errorMessage).toEqual('');
        });
    }));

});

0

xphong 25 Апр 2016 в 20:05

Answer

В модульном тесте есть только один «настоящий» объект: тот, который вы тестируете. Зависимости, как и другие объекты и функции, следует высмеивать.

Мокинг - это создание объектов, имитирующих поведение реальных объектов. В этом разделе содержится дополнительная информация: Что такое насмешка?

Я не знаком с Жасмин, но здесь я нашел статью, которая может быть полезна: https://volaresystems.com/blog/post/ 10 декабря 2014 г. / Mocking-calls-with-Jasmine

0

Community 23 Май 2017 в 10:30

Question 2