Can't seem to find resources about testing a Cycle.js app

Question

I have been trying to search for guide about testing a Cycle.js app but couldn't seem to find one. Can someone please point me to a guide or provide some examples?

Answer 1

There is this guide plus a lot of helpful devs on cycle-core gitter: http://staltz.com/how-to-debug-rxjs-code.html

Answer 2

From Cycle.js.org:

Sources and sinks can be easily used as Adapters and Ports. This also means testing is mostly a matter of feeding inputs and inspecting the output. No deep mocking needed. Your application is just a pure transformation of data.

Indeed, from this GitHub issue from Cycle.js core, author of Cycle.js André Staltz explains that:

Testing Cycle.js code is basically just about testing Observables

The simplest test take the form:

// Create the mocked user events
const userEvents = mockDOMSource(...);

// Use them in your tests against `main`
const sinks = main({DOM: userEvents});

sinks.DOM.subscribe(function (vtree) {
  // make assertions here on the vtree
});

Notice that here we use mockDOMSource. rx.js v5.3.0 released mockDOMResponse, that was later renamed to mockDOMSource. It is a function that makes it easy to mock user interactions (mock out intentions like DOM.select('.foo').events('click')).

Here is an example:

test('CounterButton should increment number by 1 when clicked', t => {
  t.plan(4)
  const DOM = mockDOMSource({'.inc': {click: Observable.repeat({}, 3)}})
  const sinks = CounterButton({DOM})
  sinks.DOM
    .take(4)
    .toArray()
    .subscribe(vtrees => {
      const counts = vtrees.map(vt => vt.children[0].text.match(/\d+$/)[0])
      t.equal(counts[0], '0', 'button has count 0')
      t.equal(counts[1], '1', 'button has count 1')
      t.equal(counts[2], '2', 'button has count 2')
      t.equal(counts[3], '3', 'button has count 3')
    })
})

If you search for globally in GitHub for mockDOMSource here and mockDOMResponse here then you can find some examples of Cycle.js tests.

You can also check out the Testing section of the Awesome Cycle.js repo.

Sidenote: Soon we will be able to write Marble Tests. Unfortunately this is currently not possible with Cycle.js 6 that only supports rxjs v4. Marble tests is a new feature for rxjs v5. See: Rxjs testing - is it possible to use marble diagrams also in RxJs 4?