NyaGarcia

import { TestScheduler } from "rxjs/testing";
import { Observable } from "rxjs";
import { filter } from "rxjs/operators";

describe("Awesome testing with Marble Diagrams", () => {
  const scheduler = new TestScheduler((actual, expected) => {
    expect(actual).toEqual(expected);
  });

  const isMultipleOfTen = (number: number) => number % 10 === 0;

NyaGarcia

import { TestScheduler } from "rxjs/testing";
import { filter, map } from "rxjs/operators";

describe("Awesome testing with Marble Diagrams", () => {
  const scheduler = new TestScheduler((actual, expected) => {
    expect(actual).toEqual(expected);
  });

  it("should filter non-Water type pokemon and add attack property", () => {
    scheduler.run(({ cold, expectObservable }) => {

NyaGarcia

import { range } from "rxjs";

// Observable will emit a sequence of numbers from 0 to 4 and complete
const number$ = range(5);

// Observable will emit a sequence of numbers from 1 to 5 and complete
const range$ = range(1, 5);

// Observable will emit a sequence of 10 numbers starting at 10 (from 10 to 19)
const moreNumber$ = range(10, 10);

NyaGarcia

import { fromEvent } from "rxjs";
import { map } from 'rxjs/operators';

// Creating an Observable from mouse clicks
const click$ = fromEvent<MouseEvent>(document, "click");

// Creating an Observable from pressed keys
const keyPressed$ = fromEvent<KeyboardEvent>(document, "keydown");

// Creating an Observable from scroll changes

NyaGarcia

import { ajax } from "rxjs/ajax";

// Observable will emit the entire AjaxResponse object
const ghibliFilmsResponse$ = ajax("https://ghibliapi.herokuapp.com/films");

// Observable will only emit the response data
const ghibliFilm$ = ajax.getJSON("https://ghibliapi.herokuapp.com/films");

// What if we need custom headers? No problem!
const ghibliFilmWithHeaders$ = ajax({

NyaGarcia

ghibliFilmsResponse$.subscribe(console.log);
// Output: AjaxResponse {xhr: {}, request: {}...}

ghibliFilm$.subscribe(films => console.log(films));
// Output: [Object, Object, Object...]

ghibliFilmWithHeaders$.subscribe(console.log);
// Output: AjaxResponse {xhr: {}, request: {}...}

NyaGarcia

import { ajax } from "rxjs/ajax";

// Observable will emit the entire AjaxResponse object
const ghibliFilmsResponse$ = ajax("https://ghibliapi.herokuapp.com/films");

ghibliFilmsResponse$.subscribe(console.log);
// Output: AjaxResponse {xhr: {}, request: {}...}

NyaGarcia

import { ajax } from "rxjs/ajax";

// Observable will only emit the response data
const ghibliFilm$ = ajax.getJSON("https://ghibliapi.herokuapp.com/films");

ghibliFilm$.subscribe(films => console.log(films));
// Output: [Object, Object, Object...]

NyaGarcia

// What if we need custom headers? No problem!
const ghibliFilmWithHeaders$ = ajax({
  url: 'https://ghibliapi.herokuapp.com/films',
  method: 'GET',
  headers: {
    'Content-Type': 'json'
  },
  body: {
    message: "Custom message 'cause we're so cool"
  }

NyaGarcia

import { generate } from "rxjs";

const number$ = generate(
  1,
  x => x < 10,
  x => x + 1
);

number$.subscribe(console.log);
// Output: 1, 2, 3, 4, 5, 6, 7, 8, 9