Marble Testing RxJS streams
0 likes1,169 views
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
![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",
]
}
!](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-2-320.jpg)
![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.](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-12-320.jpg)
![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.](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-18-320.jpg)
![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);](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-40-320.jpg)
![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);](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-41-320.jpg)
![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);](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-42-320.jpg)
![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);](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-43-320.jpg)
![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);](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-44-320.jpg)
![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);](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-45-320.jpg)
![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);](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-46-320.jpg)
![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);](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-47-320.jpg)
![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);](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-48-320.jpg)
![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);](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-49-320.jpg)
![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);
}
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-51-320.jpg)
![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);
}
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-52-320.jpg)
![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);
}
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-53-320.jpg)
![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);
}
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-54-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-55-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-56-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-57-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-58-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-59-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-60-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-61-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-62-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-63-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-64-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-65-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-66-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-67-320.jpg)
![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) { }](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-68-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-72-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-73-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-74-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-75-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-76-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-77-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-78-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-79-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-80-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-81-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-82-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-83-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-84-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-85-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-86-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-87-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-88-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-89-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-90-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-91-320.jpg)
![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' });
});
});](https://image.slidesharecdn.com/rxjsmarbletesting-190621080428/85/Marble-Testing-RxJS-streams-92-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Marble Testing RxJS streams (20)
![[JEEConf-2017] RxJava as a key component in mature Big Data product](https://cdn.slidesharecdn.com/ss_thumbnails/v-170525170754-thumbnail.jpg?width=560&fit=bounds)
![RxJava applied [JavaDay Kyiv 2016]](https://cdn.slidesharecdn.com/ss_thumbnails/pdfrxjava-appliedjavaday-161013154948-thumbnail.jpg?width=560&fit=bounds)
Ad
More from Ilia Idakiev (16)
Ad
Recently uploaded (20)
Marble Testing RxJS 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.
- 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!'); })) }; };
- 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!