Unit Testing RxJS streams using jasmine-marbles. The demo shows how we can create a Web Component that uses NGRX/store + NGRX/effects like workflow and how we test our effect streams

1. MARBLE TESTING RXJS STREAMS
USING JASMINE-MARBLES

2. A B O U T M E
{
"name": "Ilia Idakiev",
"experience": [
“Google Developer Expert (GDE)“,
"Developer & Co-founder @ HILLGRAND",
"Lecturer in 'Advanced JS' @ Sofia University",
"Contractor / Consultant",
"Public / Private Courses”
],
"involvedIn": [
"Angular Sofia", "SofiaJS / BeerJS",
]
}
!

3. MARBLE TESTING RXJS STREAMS
REACTIVE EXTENSIONS FOR JAVASCRIPT
▸ RxJS is a library for reactive programming using
Observables, to make it easier to compose
asynchronous or callback-based code.

4. BUILDING REUSABLE CUSTOM ELEMENTS USING ANGULAR

5. MARBLE TESTING RXJS STREAMS
WHAT ARE MARBLE DIAGRAMS?
▸ Marble diagrams is a way of visually representing reactive (asynchronous)
data streams.
▸ In a marble diagram, the X axis (left to right) represents time.
▸ The bottom-most line always represents the output of the sequence. That is,
what your code will see if you subscribe to the operator in question.

6. FILTER OPERATOR
Allow only values that match the filter predicate to continue flowing through the stream

7. DEBOUNCE TIME OPERATOR
Discard emitted values that take less than the specified time between output

8. WHERE DO WE USE RXJS

9. MARBLE TESTING RXJS STREAMS
WHERE DO WE USE RXJS
▸ Angular (it users RxJS internally)
▸ NGRX - a framework for building reactive applications in Angular.
▸ Store - RxJS powered state management for Angular apps, inspired by
Redux.
▸ Effects - Side effect model for @ngrx/store.

11. JASMINE-MARBLES

12. MARBLE TESTING RXJS STREAMS
ASCII MARBLE DIAGRAMS SYNTAX
▸ “ ” - whitespace: horizontal whitespace is ignored, and can be used to help vertically align multiple
marble diagrams.
▸ “-” - frame: 1 "frame" of virtual time passing.
▸ [0-9]+[ms|s|m] - time progression: the time progression syntax lets you progress virtual time by a
specific amount. It's a number, followed by a time unit of milliseconds (ms), seconds (s) or minutes
(m).
▸ ‘|’ - complete: The successful completion of an observable.
▸ ‘#’ - error: An error terminating the observable. This is the observable producer signaling.
▸ [a-z0-9] - any alphanumeric character: Represents a value being emitted by the producer signaling.

14. MARBLE TESTING RXJS STREAMS
RXJS SCHEDULERS
▸ QueueScheduler - Executes task synchronously but waits for current task to be
finished.
▸ AsapScheduler - Schedules on the micro task queue.
▸ AsyncScheduler - Schedules on the macro task queue.
▸ AnimationFrameScheduler - Relies on ‘requestAnimationFrame’.
▸ VirtualTimeScheduler - Will execute everything synchronous ordered by delay
and mainly used in testing

15. MARBLE TESTING RXJS STREAMS
JASMINE-MARBLES TEST SCHEDULER
▸ We can test our asynchronous RxJS code synchronously and deterministically
by virtualizing time using the TestScheduler
▸ At this time the TestScheduler can only be used to test code that uses timers,
like delay/debounceTime/etc (i.e. it uses AsyncScheduler with delays > 1). If
the code consumes a Promise or does scheduling with AsapScheduler/
AnimationFrameScheduler/etc it cannot be reliably tested with TestScheduler,
but instead should be tested more traditionally.

17. MARBLE TESTING RXJS STREAMS
TEST SCHEDULER API
▸ testScheduler.run(callback) - callback is being executed, any operator that uses timers/AsyncScheduler (like
delay, debounceTime, etc) will **automatically** use the TestScheduler instead, so that we have "virtual time”.
▸ Helpers:
▸ hot - create hot observable
▸ cold - create cold observable
▸ expectObservable(…).toBe(…) - schedules an assertion for when the TestScheduler flushes.
▸ expectSubscriptions(…).toBe(…) - schedules an assertion for when the TestScheduler flushes but for
subscriptions on hot/cold observables.
▸ flush() - immediately starts virtual time. Not often used since run() will automatically flush for you when your
callback returns, but in some cases you may wish to flush more than once or otherwise have more control.

18. MARBLE TESTING RXJS STREAMS
ASCII MARBLE SUBSCRIPTION DIAGRAMS SYNTAX
▸ “^” - subscription point: shows the point in time at which a subscription
happen..
▸ “!” - unsubscription point: shows the point in time at which a subscription is
unsubscribed.
▸ [0-9]+[ms|s|m] - time progression: the time progression syntax lets you
progress virtual time by a specific amount. It's a number, followed by a time
unit of milliseconds (ms), seconds (s) or minutes (m).
▸ ‘-’ - time: 1 frame time passing.

19. DEMOCREATING OBSERVABLES

20. import { of } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap } from 'rxjs/operators';
export class UserService {
login = (data: any) => {
return of({ firstName: 'Ivan', lastName: 'Ivanov' })
};
loadUsers = () => {
return fromFetch('https://jsonplaceholder.typicode.com/users').pipe(switchMap(data => {
if (data.ok) { return data.json(); }
return throwError('Could not fetch!');
}))
};
};

21. import { of } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap } from 'rxjs/operators';
export class UserService {
login = (data: any) => {
return of({ firstName: 'Ivan', lastName: 'Ivanov' })
};
loadUsers = () => {
return fromFetch('https://jsonplaceholder.typicode.com/users').pipe(switchMap(data => {
if (data.ok) { return data.json(); }
return throwError('Could not fetch!');
}))
};
};

22. import { of } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap } from 'rxjs/operators';
export class UserService {
login = (data: any) => {
return of({ firstName: 'Ivan', lastName: 'Ivanov' })
};
loadUsers = () => {
return fromFetch('https://jsonplaceholder.typicode.com/users').pipe(switchMap(data => {
if (data.ok) { return data.json(); }
return throwError('Could not fetch!');
}))
};
};

23. import { of } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap } from 'rxjs/operators';
export class UserService {
login = (data: any) => {
return of({ firstName: 'Ivan', lastName: 'Ivanov' })
};
loadUsers = () => {
return fromFetch('https://jsonplaceholder.typicode.com/users').pipe(switchMap(data => {
if (data.ok) { return data.json(); }
return throwError('Could not fetch!');
}))
};
};

24. import { of } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap } from 'rxjs/operators';
export class UserService {
login = (data: any) => {
return of({ firstName: 'Ivan', lastName: 'Ivanov' })
};
loadUsers = () => {
return fromFetch('https://jsonplaceholder.typicode.com/users').pipe(switchMap(data => {
if (data.ok) { return data.json(); }
return throwError('Could not fetch!');
}))
};
};

25. import { of } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap } from 'rxjs/operators';
export class UserService {
login = (data: any) => {
return of({ firstName: 'Ivan', lastName: 'Ivanov' })
};
loadUsers = () => {
return fromFetch(‘https://jsonplaceholder.typicode.com/users');.pipe(switchMap(data => {
if (data.ok) { return data.json(); }
return throwError('Could not fetch!');
}))
};
};

26. import { of } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap } from 'rxjs/operators';
export class UserService {
login = (data: any) => {
return of({ firstName: 'Ivan', lastName: 'Ivanov' })
};
loadUsers = () => {
return fromFetch(‘https://jsonplaceholder.typicode.com/users');.pipe(switchMap(data => {
if (data.ok) { return data.json(); }
return throwError('Could not fetch!');
}))
};
};

27. import { of } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap } from 'rxjs/operators';
export class UserService {
login = (data: any) => {
return of({ firstName: 'Ivan', lastName: 'Ivanov' })
};
loadUsers = () => {
return fromFetch('https://jsonplaceholder.typicode.com/users').pipe(switchMap(data => {
if (data.ok) { return data.json(); }
return throwError('Could not fetch!');
}))
};
};

28. import { of, throwError } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap } from 'rxjs/operators';
export class UserService {
login = (data: any) => {
return of({ firstName: 'Ivan', lastName: 'Ivanov' })
};
loadUsers = () => {
return fromFetch('https://jsonplaceholder.typicode.com/users').pipe(switchMap(data => {
if (data.ok) { return data.json(); }
return throwError('Could not fetch!');
}))
};
};

29. import { of, throwError } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap } from 'rxjs/operators';
export class UserService {
login = (data: any) => {
return of({ firstName: 'Ivan', lastName: 'Ivanov' })
};
loadUsers = () => {
return fromFetch('https://jsonplaceholder.typicode.com/users').pipe(switchMap(data => {
if (data.ok) { return data.json(); }
return throwError('Could not fetch!');
}))
};
};

30. DEMOCREATING SUBJECTS

31. import { Subject } from "rxjs";
import { filter, map } from "rxjs/operators";
export class MessageBus {
_mbus: Subject<{ type: string, data: any }>;
constructor() {
this._mbus = new Subject<{ type: string, data: any }>();
this._mbus.subscribe(console.log);
}
listen(type: string) {
return this._mbus.pipe(filter(m => m.type === type), map(m => m.data));
}
send(type: string, data: any) {
this._mbus.next({ type, data });
}
};

32. import { Subject } from 'rxjs';
import { filter, map } from "rxjs/operators";
export class MessageBus {
_mbus: Subject<{ type: string, data: any }>;
constructor() {
this._mbus = new Subject<{ type: string, data: any }>();
this._mbus.subscribe(console.log);
}
listen(type: string) {
return this._mbus.pipe(filter(m => m.type === type), map(m => m.data));
}
send(type: string, data: any) {
this._mbus.next({ type, data });
}
};

33. import { Subject } from 'rxjs';
import { filter, map } from "rxjs/operators";
export class MessageBus {
_mbus: Subject<{ type: string, data: any }>;
constructor() {
this._mbus = new Subject<{ type: string, data: any }>();
this._mbus.subscribe(console.log);
}
listen(type: string) {
return this._mbus.pipe(filter(m => m.type === type), map(m => m.data));
}
send(type: string, data: any) {
this._mbus.next({ type, data });
}
};

34. import { Subject } from 'rxjs';
import { filter, map } from "rxjs/operators";
export class MessageBus {
_mbus: Subject<{ type: string, data: any }>;
constructor() {
this._mbus = new Subject<{ type: string, data: any }>();
this._mbus.subscribe(console.log);
}
listen(type: string) {
return this._mbus.pipe(filter(m => m.type === type), map(m => m.data));
}
send(type: string, data: any) {
this._mbus.next({ type, data });
}
};

35. import { Subject } from 'rxjs';
import { filter, map } from "rxjs/operators";
export class MessageBus {
_mbus: Subject<{ type: string, data: any }>;
constructor() {
this._mbus = new Subject<{ type: string, data: any }>();
this._mbus.subscribe(console.log);
}
listen(type: string) {
return this._mbus.pipe(filter(m => m.type === type), map(m => m.data));
}
send(type: string, data: any) {
this._mbus.next({ type, data });
}
};

36. import { Subject } from 'rxjs';
import { filter, map } from "rxjs/operators";
export class MessageBus {
_mbus: Subject<{ type: string, data: any }>;
constructor() {
this._mbus = new Subject<{ type: string, data: any }>();
this._mbus.subscribe(console.log);
}
listen(type: string) {
return this._mbus.pipe(filter(m => m.type === type), map(m => m.data));
}
send(type: string, data: any) {
this._mbus.next({ type, data });
}
};

37. import { Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
export class MessageBus {
_mbus: Subject<{ type: string, data: any }>;
constructor() {
this._mbus = new Subject<{ type: string, data: any }>();
this._mbus.subscribe(console.log);
}
listen(type: string) {
return this._mbus.pipe(filter(m => m.type === type), map(m => m.data));
}
send(type: string, data: any) {
this._mbus.next({ type, data });
}
};

38. import { Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
export class MessageBus {
_mbus: Subject<{ type: string, data: any }>;
constructor() {
this._mbus = new Subject<{ type: string, data: any }>();
this._mbus.subscribe(console.log);
}
listen(type: string) {
return this._mbus.pipe(filter(m => m.type === type), map(m => m.data));
}
send(type: string, data: any) {
this._mbus.next({ type, data });
}
};

39. DEMOUSING THE MESSAGE BUS

40. export class App extends HTMLElement {
...
constructor(private messageBus: MessageBus) {
super();
...
const userUpdate$ = messageBus.listen('[AUTH] Login Success').pipe(tap(user => this.loggedUser = user));
const usersUpdate$ = messageBus.listen('[USERS] Load Users Success').pipe(tap(users => this.userList = users));
const isLoadingUpdate$ = messageBus.listen('[GLOBAL] Set Loader').pipe(tap(isLoading => this.isLoading = isLoading));
merge(userUpdate$, usersUpdate$, isLoadingUpdate$).pipe(
startWith(null), takeUntil(this.isAlive$)
).subscribe(this.render);
}
loginHandler = () => {
this.messageBus.send('[AUTH] Login', this.formData);
}
disconnectedCallback() {
this.isAlive$.next();
this.isAlive$.complete();
}
}
customElements.define('hg-app', App);

41. export class App extends HTMLElement {
...
constructor(private messageBus: MessageBus) {
super();
...
const userUpdate$ = messageBus.listen('[AUTH] Login Success').pipe(tap(user => this.loggedUser = user));
const usersUpdate$ = messageBus.listen('[USERS] Load Users Success').pipe(tap(users => this.userList = users));
const isLoadingUpdate$ = messageBus.listen('[GLOBAL] Set Loader').pipe(tap(isLoading => this.isLoading = isLoading));
merge(userUpdate$, usersUpdate$, isLoadingUpdate$).pipe(
startWith(null), takeUntil(this.isAlive$)
).subscribe(this.render);
}
loginHandler = () => {
this.messageBus.send('[AUTH] Login', this.formData);
}
disconnectedCallback() {
this.isAlive$.next();
this.isAlive$.complete();
}
}
customElements.define('hg-app', App);

42. export class App extends HTMLElement {
...
constructor(private messageBus: MessageBus) {
super();
...
const userUpdate$ = messageBus.listen('[AUTH] Login Success').pipe(tap(user => this.loggedUser = user));
const usersUpdate$ = messageBus.listen('[USERS] Load Users Success').pipe(tap(users => this.userList = users));
const isLoadingUpdate$ = messageBus.listen('[GLOBAL] Set Loader').pipe(tap(isLoading => this.isLoading = isLoading));
merge(userUpdate$, usersUpdate$, isLoadingUpdate$).pipe(
startWith(null), takeUntil(this.isAlive$)
).subscribe(this.render);
}
loginHandler = () => {
this.messageBus.send('[AUTH] Login', this.formData);
}
disconnectedCallback() {
this.isAlive$.next();
this.isAlive$.complete();
}
}
customElements.define('hg-app', App);

43. export class App extends HTMLElement {
...
constructor(private messageBus: MessageBus) {
super();
...
const userUpdate$ = messageBus.listen('[AUTH] Login Success').pipe(tap(user => this.loggedUser = user));
const usersUpdate$ = messageBus.listen('[USERS] Load Users Success').pipe(tap(users => this.userList = users));
const isLoadingUpdate$ = messageBus.listen('[GLOBAL] Set Loader').pipe(tap(isLoading => this.isLoading = isLoading));
merge(userUpdate$, usersUpdate$, isLoadingUpdate$).pipe(
startWith(null), takeUntil(this.isAlive$)
).subscribe(this.render);
}
loginHandler = () => {
this.messageBus.send('[AUTH] Login', this.formData);
}
disconnectedCallback() {
this.isAlive$.next();
this.isAlive$.complete();
}
}
customElements.define('hg-app', App);

44. export class App extends HTMLElement {
...
constructor(private messageBus: MessageBus) {
super();
...
const userUpdate$ = messageBus.listen('[AUTH] Login Success').pipe(tap(user => this.loggedUser = user));
const usersUpdate$ = messageBus.listen('[USERS] Load Users Success').pipe(tap(users => this.userList = users));
const isLoadingUpdate$ = messageBus.listen('[GLOBAL] Set Loader').pipe(tap(isLoading => this.isLoading = isLoading));
merge(userUpdate$, usersUpdate$, isLoadingUpdate$).pipe(
startWith(null), takeUntil(this.isAlive$)
).subscribe(this.render);
}
loginHandler = () => {
this.messageBus.send('[AUTH] Login', this.formData);
}
disconnectedCallback() {
this.isAlive$.next();
this.isAlive$.complete();
}
}
customElements.define('hg-app', App);

45. export class App extends HTMLElement {
...
constructor(private messageBus: MessageBus) {
super();
...
const userUpdate$ = messageBus.listen('[AUTH] Login Success').pipe(tap(user => this.loggedUser = user));
const usersUpdate$ = messageBus.listen('[USERS] Load Users Success').pipe(tap(users => this.userList = users));
const isLoadingUpdate$ = messageBus.listen('[GLOBAL] Set Loader').pipe(tap(isLoading => this.isLoading = isLoading));
merge(userUpdate$, usersUpdate$, isLoadingUpdate$).pipe(
startWith(null), takeUntil(this.isAlive$)
).subscribe(this.render);
}
loginHandler = () => {
this.messageBus.send('[AUTH] Login', this.formData);
}
disconnectedCallback() {
this.isAlive$.next();
this.isAlive$.complete();
}
}
customElements.define('hg-app', App);

46. export class App extends HTMLElement {
...
constructor(private messageBus: MessageBus) {
super();
...
const userUpdate$ = messageBus.listen('[AUTH] Login Success').pipe(tap(user => this.loggedUser = user));
const usersUpdate$ = messageBus.listen('[USERS] Load Users Success').pipe(tap(users => this.userList = users));
const isLoadingUpdate$ = messageBus.listen('[GLOBAL] Set Loader').pipe(tap(isLoading => this.isLoading = isLoading));
merge(userUpdate$, usersUpdate$, isLoadingUpdate$).pipe(
startWith(null), takeUntil(this.isAlive$)
).subscribe(this.changeHandler);
}
loginHandler = () => {
this.messageBus.send('[AUTH] Login', this.formData);
}
disconnectedCallback() {
this.isAlive$.next();
this.isAlive$.complete();
}
}
customElements.define('hg-app', App);

47. export class App extends HTMLElement {
...
constructor(private messageBus: MessageBus) {
super();
...
const userUpdate$ = messageBus.listen('[AUTH] Login Success').pipe(tap(user => this.loggedUser = user));
const usersUpdate$ = messageBus.listen('[USERS] Load Users Success').pipe(tap(users => this.userList = users));
const isLoadingUpdate$ = messageBus.listen('[GLOBAL] Set Loader').pipe(tap(isLoading => this.isLoading = isLoading));
merge(userUpdate$, usersUpdate$, isLoadingUpdate$).pipe(
startWith(null), takeUntil(this.isAlive$)
).subscribe(this.changeHandler);
}
loginHandler = () => {
this.messageBus.send('[AUTH] Login', this.formData);
}
disconnectedCallback() {
this.isAlive$.next();
this.isAlive$.complete();
}
}
customElements.define('hg-app', App);

48. export class App extends HTMLElement {
...
constructor(private messageBus: MessageBus) {
super();
...
const userUpdate$ = messageBus.listen('[AUTH] Login Success').pipe(tap(user => this.loggedUser = user));
const usersUpdate$ = messageBus.listen('[USERS] Load Users Success').pipe(tap(users => this.userList = users));
const isLoadingUpdate$ = messageBus.listen('[GLOBAL] Set Loader').pipe(tap(isLoading => this.isLoading = isLoading));
merge(userUpdate$, usersUpdate$, isLoadingUpdate$).pipe(
startWith(null), takeUntil(this.isAlive$)
).subscribe(this.changeHandler);
}
loginHandler = () => {
this.messageBus.send('[AUTH] Login', this.formData);
}
disconnectedCallback() {
this.isAlive$.next();
this.isAlive$.complete();
}
}
customElements.define('hg-app', App);

49. export class App extends HTMLElement {
...
constructor(private messageBus: MessageBus) {
super();
...
const userUpdate$ = messageBus.listen('[AUTH] Login Success').pipe(tap(user => this.loggedUser = user));
const usersUpdate$ = messageBus.listen('[USERS] Load Users Success').pipe(tap(users => this.userList = users));
const isLoadingUpdate$ = messageBus.listen('[GLOBAL] Set Loader').pipe(tap(isLoading => this.isLoading = isLoading));
merge(userUpdate$, usersUpdate$, isLoadingUpdate$).pipe(
startWith(null), takeUntil(this.isAlive$)
).subscribe(this.changeHandler);
}
loginHandler = () => {
this.messageBus.send('[AUTH] Login', this.formData);
}
disconnectedCallback() {
this.isAlive$.next();
this.isAlive$.complete();
}
}
customElements.define('hg-app', App);

50. DEMODEALING WITH SIDE EFFECTS

51. export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000, this.scheduler),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService, private scheduler?: Scheduler) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}
}

52. export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000, this.scheduler),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor() { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}
}

53. import { MessageBus } from './message-bus';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000, this.scheduler),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}
}

54. import { MessageBus } from './message-bus';
import { UserService } from ‘./user-service';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000, this.scheduler),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}
}

55. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000, this.scheduler),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}

56. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { switchMap, delay, startWith, catchError } from 'rxjs/operators';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000, this.scheduler),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}

57. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { switchMap, delay, startWith, catchError } from 'rxjs/operators';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000, this.scheduler),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}

58. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { switchMap } from 'rxjs/operators';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000, this.scheduler),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}

59. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { switchMap } from 'rxjs/operators';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000, this.scheduler),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}

60. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { switchMap, delay } from 'rxjs/operators';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}

61. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { switchMap, delay } from 'rxjs/operators';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}

62. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { switchMap, delay } from 'rxjs/operators';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}

63. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { switchMap, delay, catchError } from 'rxjs/operators';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}

64. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { switchMap, delay, startWith, catchError } from 'rxjs/operators';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}

65. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { merge, Observable } from 'rxjs';
import { switchMap, delay, startWith, catchError } from 'rxjs/operators';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}

66. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { merge, Observable } from 'rxjs';
import { switchMap, delay, startWith, catchError } from 'rxjs/operators';
export class AppEffects {
login$ = ...
loadUsers$ = this.messageBus.listen('[USERS] Load Users').pipe(
switchMap(() => this.userService.loadUsers().pipe(
switchMap(users => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[USERS] Load Users Success', data: users }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[USERS] Load Users Failed', data: error },
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}

67. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { merge, Observable } from 'rxjs';
import { switchMap, delay, startWith, catchError } from 'rxjs/operators';
export class AppEffects {
login$ = ...
loadUsers$ = this.messageBus.listen('[USERS] Load Users').pipe(
switchMap(() => this.userService.loadUsers().pipe(
switchMap(users => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[USERS] Load Users Success', data: users }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[USERS] Load Users Failed', data: error },
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }
connect = () => {
merge(...Object.values(this).filter(val => val instanceof Observable)).subscribe(this.messageBus._mbus);
}
}

68. import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { merge, Observable } from 'rxjs';
import { switchMap, delay, startWith, catchError } from 'rxjs/operators';
export class AppEffects {
login$ = this.messageBus.listen('[AUTH] Login').pipe(
switchMap(data => this.userService.login(data).pipe(
delay(2000),
switchMap((user) => [
{ type: '[AUTH] Login Success', data: user },
{ type: '[USERS] Load Users', data: null }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[AUTH] Login Failed', data: error }
])
))
);
loadUsers$ = this.messageBus.listen('[USERS] Load Users').pipe(
switchMap(() => this.userService.loadUsers().pipe(
switchMap(users => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[USERS] Load Users Success', data: users }
]),
startWith({ type: '[GLOBAL] Set Loader', data: true }),
catchError(error => [
{ type: '[GLOBAL] Set Loader', data: false },
{ type: '[USERS] Load Users Failed', data: error },
])
))
);
constructor(private messageBus: MessageBus, private userService: UserService) { }

69. DEMOBOOTSTRAP

70. import { App } from './app';
import { MessageBus } from './message-bus';
import { UserService } from './user-service';
import { AppEffects } from './app-effects';
(function bootstrap() {
const messageBus = new MessageBus();
const userService = new UserService();
const appEffects = new AppEffects(messageBus, userService);
appEffects.connect();
const app = new App(messageBus);
document.body.appendChild(app);
})();

71. DEMOEFFECT SPECS

72. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

73. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

74. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

75. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

76. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

77. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

78. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

79. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

80. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

81. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

82. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

83. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

84. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

85. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

86. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

87. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

88. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

89. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

90. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

91. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

92. describe('App Effects Testing', () => {
let effects: AppEffects;
let messageBus: MessageBus;
let actions$: any;
let scheduler: TestScheduler;
let userService: UserService;
beforeEach(() => {
messageBus = new MessageBus();
messageBus._mbus = defer(() => actions$) as any;
userService = new UserService();
scheduler = getTestScheduler();
effects = new AppEffects(messageBus, userService);
effects.connect();
});
it('should test login success', () => {
scheduler.run(({ cold, expectObservable, flush }) => {
const spy = spyOn(userService, 'login').and.callThrough();
actions$ = cold('--a', {
a: { type: '[AUTH] Login', data: { email: 'aaa', password: 'aaa' } }
});
expectObservable(effects.login$).toBe('--a 1999ms (bc)', {
a: { type: '[GLOBAL] Set Loader', data: true },
b: { type: '[AUTH] Login Success', data: { firstName: "Ivan", lastName: "Ivanov" } },
c: { type: '[USERS] Load Users', data: null }
});
flush();
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith({ email: 'aaa', password: 'aaa' });
});
});

93. DEMOALL SPECS

94. MARBLE TESTING RXJS STREAMS
CONNECT
GitHub > https://github.com/iliaidakiev (/slides/ - list of future and past events)
Twitter > @ilia_idakiev

95. THANK YOU!