lmatteis

import { Machine } from 'xstate'

const UPDATE = '@@statechart/UPDATE'

export function getStatechart(state) {
  return state.statechart
}

export function createStatechartMiddleware(statechart) {
  const machine = Machine(statechart)

lmatteis

const Comments = behavior([
  function* () {
    const comments = yield fetchComments()
    yield { request: FETCH_COMMENTS_SUCCESS, payload: comments }
  }
])(Comments)

const CommentsCount = behavior([
  function* () {
    yield { request: FETCH_COMMENTS_COUNT }

lmatteis

function ShowNumberOfAccounts(props) {
  return props.numberOfAccounts
}
withStatechart(function reducer(state = {}, event) {
  switch (event.type) {
    case ACCOUNTS:
      return {
        ...state,
        numberOfAccounts: accounts.length
      }

lmatteis

import React from 'react'
import { mount } from 'enzyme';
import { generate } from 'apiEndpoint';
import fetchMock from 'fetch-mock';
import xhrMock from 'xhr-mock';
xhrMock.setup()

import { BoostApp, store } from '../../bundles/hootsuite-boost';

import boostResponses from './fixtures/boost_responses';

lmatteis

import React from 'react';
import { shallow } from 'enzyme';
import ReduxTdd from '../src/redux-tdd';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/toArray';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';

lmatteis

reduxTdd({ items, error, loading, pages }, state => [
    <List
      items={getItems(state)} />,
    <Loading
      loading={state.loading} />,
    <RefreshButton
      onClick={refreshAction} />,
    <Error
      message={state.error} />,
    <Pages

lmatteis

https://github.com/lmatteis/redux-tdd

lmatteis

asdfadf

lmatteis

function main(sources) {
  const sinks = {
    DOM: sources.DOM.select('.field').events('input')
      .map(ev => ev.target.value)
      .startWith('')
      .map(name =>
        div([
          label('Name:'),
          input('.field', {attrs: {type: 'text'}}),
          hr(),

lmatteis

import { createCycleMiddleware } from 'redux-cycle-middleware';
import configureMockStore from 'redux-mock-store'
import expect from 'expect' // You can use any testing library

describe('Redux cycle middleware', () => {
  it('dispatches a PING to see whether the middleware dispatches a PONG', () => {
    function main(sources) {
      const pong$ = sources.ACTION
        .filter(action => action.type === 'PING')
        .mapTo({ type: 'PONG' });