How to use the @cycle/history.makeHistoryDriver function in @cycle/history

test('Main component tests', function(t) {
  t.plan(3);
  // mock the Main component and pass it the sources
  function mainComponent(sources) {
    let requests = Main(sources)
    return requests
  }

  // Pass Main through our RenderTarget
  let {sinks, sources} = run(mainComponent, {
    DOM: makeDOMDriver(createRenderTarget()),
    History: makeHistoryDriver({
      hash: false,
      queries: true,
    }),
  });
  // take our sources.Dom and select a class from it then subscribe and start testing against the results
  sources.DOM.select('.pure-g').observable.skip(1).take(1).subscribe(function (el) {

    t.equal(Array.isArray(el), true, 'Our subscription output is an array');
    const childrenEls = el[0].childNodes;
    t.equal(childrenEls[0].className, "sidebar pure-u-1 pure-u-md-1-4", "the first node should be the sidebar");
    t.equal(childrenEls[1].className, "content pure-u-1 pure-u-md-3-4", "the second node should be the content");
  });
});

const view = (content) => div('.routertest', [content]);

  function app(sources) {
    const Content = contentRouter(sources);
    const view$ = Rx.Observable.just(view(Content.DOM));

    return {
      DOM: view$,
      History: Rx.Observable.from([url.home]),
    }
  }

  let {sources} = Cycle.run(app, {
    DOM: makeDOMDriver(createRenderTarget()),
    History: makeHistoryDriver({hash: false, queries: true,}),
    // this is our counter Prop value of 2
    Props: () => Rx.Observable.just(2)
  });

  sources.DOM.select('.homepage').observable.skip(1).take(1).subscribe(function (element) {

    t.equal(Array.isArray(element), true, 'element is an array')
    t.equal(element[0].className, 'homepage', 'element has homepage class');

    const childrenElCounter = element[0].childNodes[2];

    t.equal(childrenElCounter.className, 'pure-u-1-2 counter-table', 'child element is counter table');

    const counterResults = childrenElCounter.childNodes[2].childNodes[0];
    const counterValue = counterResults.innerHTML.replace('Counter: ', '')

const view = (content) => div('.routertest', [content]);

  function app(sources) {
    const Content = contentRouter(sources);
    const view$ = Rx.Observable.just(view(Content.DOM));

    return {
      DOM: view$,
      History: Rx.Observable.from([url.home]),
    }
  }

  let {sources} = Cycle.run(app, {
    DOM: makeDOMDriver(createRenderTarget()),
    History: makeHistoryDriver({hash: false, queries: true,}),
    // this is our counter Prop value of 2
    Props: () => Rx.Observable.just(2)
  });

  sources.DOM.select('.homepage').observable.skip(1).take(1).subscribe(function (element) {

    t.equal(Array.isArray(element), true, 'element is an array')
    t.equal(element[0].className, 'homepage', 'element has homepage class');

    const childrenElCounter = element[0].childNodes[2];

    t.equal(childrenElCounter.className, 'pure-u-1-2 counter-table', 'child element is counter table');

    const counterResults = childrenElCounter.childNodes[2].childNodes[0];
    const counterValue = counterResults.innerHTML.replace('Counter: ', '')

import isolate from '@cycle/isolate'
import {restart, restartable} from 'cycle-restart'

let app = require('./app/app').default

//Define selector string of root vTree element.
//See the (module.hot) section below for explanation.
const ROOT_SELECTOR = '.app-container'

//Define what drivers our Cycle app will use
const drivers = {
  DOM: restartable(makeDOMDriver(ROOT_SELECTOR, {
    modules: [StyleModule, PropsModule, AttrsModule, ClassModule, HeroModule],
  }), {pauseSinksWhileReplaying: false}),
  HTTP: restartable(makeHTTPDriver()),
  History: restartable(makeHistoryDriver({hash: false, queries: true}), {pauseSinksWhileReplaying: true}),
}

//Initialize Cycle.js!
const {sinks, sources} = Cycle.run(app, drivers)

//Code to enable Webpack Hot Module Replacement.
if (module.hot) {
  module.hot.accept('./app/app', () => {
    //reassign 'app' variable to the updated version
    app = require('./app/app').default
    //restart the cycle app
    restart(app, drivers, {sinks, sources}, isolate)
  })
  // module.hot.dispose(() => {
  //   /*
  //     SNABBDOM-SPECIFIC WORKAROUND

function makeRouterDriver(history: History, routeMatcher: RouteMatcher) {
  if (!history) {
    throw new Error('Cyclic router must be given a history object');
  }
  const historyDriver = makeHistoryDriver(history);
  /**
   * The actual router driver.
   * @public
   * @typedef {routerDriver}
   * @name routerDriver
   * @method routerDriver
   * @param  {Stream} sink$ - This is the same input that the
   * history driver would expect.
   * @return {routerAPI}
   */
  return function routerDriver(sink$: RouterSink) {
    const history$ = historyDriver(sink$).remember();
    return new RouterSource(history$, [], history.createHref, routeMatcher);
  };
}

import {restart, restartable} from 'cycle-restart'

const ROOT_SELECTOR = '.app-container'

const snabbdomModules = [
  require(`snabbdom/modules/class`),
  require(`snabbdom/modules/hero`),
  require(`snabbdom/modules/style`),
  require(`snabbdom/modules/props`),
  require(`snabbdom/modules/attributes`),
]

const drivers = {
  DOM: restartable(makeDOMDriver(ROOT_SELECTOR, snabbdomModules), {pauseSinksWhileReplaying: false}),
  HTTP: restartable(makeHTTPDriver()),
  History: restartable(makeHistoryDriver({hash: false, queries: true}), {pauseSinksWhileReplaying: true}),
}

const {sinks, sources} = Cycle.run(app, drivers)

//Code to enable Webpack Hot Module Replacement.
if (module.hot) {
  module.hot.accept('./app', () => {
    app = require('./app').default
    restart(app, drivers, {sinks, sources}, isolate)
  })
}

function makeRouterDriver(...historyArgs) {
  const historyDriver = makeHistoryDriver(...historyArgs)
  /**
   * The actual router driver.
   * @public
   * @typedef {routerDriver}
   * @name routerDriver
   * @method routerDriver
   * @param  {Observable} sink$ - This is the same input that the
   * history driver would expect.
   * @return {routerAPI}
   */
  function routerDriver(sink$, runSA) {
    const history$ = historyDriver(sink$, runSA)
    const rxHistory$ = RxAdapter.adapt(history$, runSA.streamSubscribe)
    return createAPI(rxHistory$.share(), [], history$.createHref)
  }

//Define selector string of root vTree element.
//See the (module.hot) section below for explanation.
const ROOT_SELECTOR = '.app-container'

//Initialize the History object which the driver will use
const history = createHistory()

//Define what drivers our Cycle app will use
const drivers = {
  DOM: makeDOMDriver(ROOT_SELECTOR, {
    transposition: true,
    modules: [StyleModule, PropsModule, AttrsModule, ClassModule, HeroModule],
  }),
  HTTP: makeHTTPDriver(),
  History: makeHistoryDriver(history),
}

//Initialize Cycle.js!
run(app, drivers)

//Code to enable Webpack Hot Module Replacement.
if (module.hot) {
  module.hot.accept()
  module.hot.dispose(() => {
    /*
      SNABBDOM-SPECIFIC WORKAROUND (TODO: CONFIRM THIS IS STILL A PROBLEM)
      ----------------------------
      If your Cycle app vTree's root element has a different selector (class/id) than
      the original selector passed into makeDOMDriver(), you will need to uncomment
      the code below to recreate the original container.  This scenario is likely
      to come up if you are migrating your app from using @cycle/dom to cycle-snabbdom.