Как протестировать код внутри подписки Observable с помощью jasmine marbles

У меня есть компонент, который подписывается на наблюдаемое, возвращаемое из службы в ngOnInit. У меня также есть метод (updateData), который подписывается на наблюдаемое из службы, но также обновляет некоторые свойства внутри подписки. Мне нужно создать тест, чтобы проверить, изменяется ли это свойство на правильное значение при вызове updateData.

Фрагмент компонента:

ngOnInit() {
    this.myService.loadData().subscribe() => {
        // some code here
    });
}

...

public updateData() {
    this.myService.updateData(this.data).subscribe(() => {
        this.dataUpdated = true;
    });
}

Испытательная установка

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let myServiceSpy: jasmine.SpyObj<MyService>;

  const dataMock = {};
  const updateResponseMock = {};

  beforeEach(async(() => {
    myServiceSpy = jasmine.createSpyObj('DesignPickerService', [
      'loadData',
      'updateData'
    ]);
    myServiceSpy.loadData.and.returnValue(
      cold('-a|', { a: dataMock })
    );
    myServiceSpy.updateData.and.returnValue(
      cold('--b|', { b: updateResponseMock })
    );
    TestBed.configureTestingModule({
      declarations: [
        MyComponent,
      ],
      providers: [
        {
          provide: MyService,
          useFactory: () => {
            return myServiceSpy;
          }
        }
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  describe('Tests', () => {
    it('updateData should set dataUpdated to true', () => {
      ??? // some code to wait for myService.loadData to finish
      component.dataUpdated = false;
      component.updateData();
      ??? // some code to wait for myService.updateData to finish
      expect(component.dataUpdated).toBe(true);
    })
  });
});

Я хочу добавить эти недостающие строки, чтобы тест прошел. Любая помощь будет оценена по достоинству.


unit-testing angular karma-jasmine jasmine-marbles
person orlyohreally    schedule 18.09.2019    source источник
comment
вы хотите пройти тест e2e или модульный тест?   -  person Robert    schedule 18.09.2019
comment
@ Роберт модульный тест   -  person orlyohreally    schedule 18.09.2019

Ответы (1)


arrow_upward
0
arrow_downward

Извините, я подумал, что вы говорите о http-вызове, вы можете попробовать этот способ, но я не использовал сервис, вы можете легко имитировать его.

fit ('должен возвращать правильные данные', (готово) => {

expect(component.dataUpdated).toEqual(false);

component.getData().subscribe(data => {
  expect(data).toEqual([1, 2, 3, 4]);
  expect(component.dataUpdated).toEqual(true);
  done();
}
  );

  });


export class ObservableTddComponent implements OnInit {

  dataUpdated;

  constructor() {
    this.dataUpdated = false;
  }

  ngOnInit() {
    this.getData().subscribe( (x) => {
      this.dataUpdated = true;
    });
  }

  getData(){
    return of([1,2,3,4]).pipe(delay(500));
  }

}

Вы можете узнать об этом больше, прочитав эту статью: https://itnext.io/a-quick-tip-on-testing-observables-e2fbdebef4c.

person Robert    schedule 18.09.2019
comment
Ваш пример предназначен для тестирования службы, имеющей зависимость HttpClient. Я не об этом спрашиваю - person orlyohreally; 18.09.2019