adrianfaciu

  @Effect()
  fetchDataWithDebounce$ = this.actions$
      .ofType(actions.DATA_WITH_DEBOUNCE_FETCH)
      .debounceTime(100)
      // Call API service or some other processing
      .map(() => ({ type: actions.DATA_WITH_DEBOUNCE_FETCH_SUCCESS }));

adrianfaciu

describe('app state effects', () => {
  it('can fetch data with args from state', () => {
    const source = cold('a', { a: { type: actions.DATA_WITH_STATE_FETCH } });
    const storeStub = getStoreStub();

    const effect = new AppStateEffect(new Actions(source), storeStub);

    const expected = cold('a', { a: { type: actions.DATA_WITH_STATE_FETCH_SUCCESS } });
    expect(effect.fetchDataWithState$).toBeObservable(expected);
  });

adrianfaciu

export class AppStateEffect {
  constructor(private actions$: Actions,
              private store: Store<AppState>,
  ) { }

  numberStream$ = this.store.select(mf => mf.count);
  textStream$ = this.store.select(mf => mf.text);

  @Effect()
  fetchDataWithState$ = this.actions$

adrianfaciu

  it('can handle fetching data errors', () => {
    const source = cold('a', { a: { type: actions.DATA_FETCH } });
    const service = createServiceStub(new Error('Error occurred!'));
    const effects = new AppServiceEffect(new Actions(source), service);

    const expected = cold('a', { a: { type: actions.DATA_FETCH_FAILED } });
    expect(effects.fetchAppData$).toBeObservable(expected);
  });

adrianfaciu

  it('can fetch app data', () => {
    const source = cold('a', { a: { type: actions.DATA_FETCH } });
    const service = createServiceStub({});
    const effects = new AppServiceEffect(new Actions(source), service);

    const expected = cold('a', { a: { type: actions.DATA_FETCH_SUCCESS } });
    expect(effects.fetchAppData$).toBeObservable(expected);
  });

adrianfaciu

function createServiceStub(response: any) {
    const service = jasmine.createSpyObj('service', [ 'getDummyData' ]);

    const isError = response instanceof Error;
    const serviceResponse = isError ? Observable.throw(response) : Observable.of(response);

    service.getDummyData.and.returnValue(serviceResponse);

    return service;
  }

adrianfaciu

export class AppServiceEffect {
  constructor(private actions$: Actions,
              private appService: AppService,
            ) { }

  @Effect()
  fetchAppData$ = this.actions$
    .ofType(actions.DATA_FETCH)
    .switchMap(_ => this.appService
      .getDummyData()

adrianfaciu

    it('basic test', () => {
        const source = cold('a', { a: { type: actions.INCREMENT_ACTION } });
        const effects = new AppEffects(new Actions(source));

        const expected = cold('a', { a: { type: actions.UPDATE_TEXT_ACTION } });
        expect(effects.updateTextOnIncrement$).toBeObservable(expected);
    });

adrianfaciu

    @Effect()
    updateTextOnIncrement$ = this.actions$
        .ofType(actions.INCREMENT_ACTION)
        // Any additional processing we might want to do here
        .mapTo(({ type: actions.UPDATE_TEXT_ACTION }));

adrianfaciu

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../../core/index';

import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';