TDD Router in Cycle.js

router-tdd.ts

import {mockTimeSource} from '@cycle/time';
import {mockDOMSource} from '@cycle/dom';

describe.only('steve example', () => {
  function Router (sources, change$, definitions) {
    let instances = {};

    function map (attr) {
      return change$.map(path => {
        if (path in instances) {
          return instances[path][attr] || xs.empty();
        }

        const instance = instances[path] = definitions[path](sources);

        return instance[attr] || xs.empty();
      }).flatten();
    }

    return {
      map
    }
  }

  function main (sources) {
    function Hello (sources) {
      return {
        DOM: xs.of('hello world')
      }
    }

    function Second (sources) {
      return {
        DOM: xs.of('second page')
      }
    }

    function Third (sources) {
      const add$ = sources
        .DOM
        .select('.counter .add')
        .events('click')
        .mapTo(+1);

      const count$ = add$.fold((acc, val) => acc + val, 0);

      return {
        DOM: count$.map(count => `Count: ${count}`),
        HTTP: add$.mapTo('example.org')
      }
    }

    const routeDefinitions = {
      '/hello': Hello,
      '/second': Second,
      '/third': Third,
    }

    const second$ = sources.DOM
      .select('.next-page')
      .events('click')
      .mapTo('/second');

    const hello$ = sources.DOM
      .select('.previous-page')
      .events('click')
      .mapTo('/hello');

    const third$ = sources.DOM
      .select('.third-page')
      .events('click')
      .mapTo('/third');

    const change$ = xs.merge(hello$, second$, third$)
      .startWith('/hello');

    const router = Router(sources, change$, routeDefinitions);

    const page$ = router.map('DOM');
    const http$ = router.map('HTTP');

    return {
      DOM: page$,
      HTTP: http$
    }
  }

  it('displays hello world', (done) => {
    const Time = mockTimeSource();
    const expectedDOMValues = {
      a: 'hello world',
      b: 'second page',
      c: 'Count: 0',
      d: 'Count: 1',
    };

    const next$         = Time.diagram('---x--------------');
    const previous$     = Time.diagram('------x-------x---');
    const thirdPage$    = Time.diagram('----------x------x');
    const counterAdd$   = Time.diagram('------------x-----');
    const expected$     = Time.diagram('a--b--a---c-d-a--d', expectedDOMValues);
    const expectedHTTP$ = Time.diagram('------------x-----', {x: 'example.org'});

    const DOM = mockDOMSource({
      '.next-page': {
        'click': next$
      },
      '.previous-page': {
        'click': previous$
      },
      '.third-page': {
        click: thirdPage$
      },
      '.counter .add': {
        click: counterAdd$
      }
    });

    const app = main({DOM, Time});

    Time.assertEqual(app.DOM, expected$);
    Time.assertEqual(app.HTTP, expectedHTTP$);
    Time.run(done);
  });
});