A Rosmaro implementation of the famous TodoMVC.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
css
js
testSteps Unified vocabulary. Jan 27, 2019
testUtils
.babelrc
.editorconfig Formatting. Jan 25, 2019
.gitattributes move the css to it's own module Jan 30, 2015
.gitignore Renamed test steps and cases. Jan 25, 2019
.prettierc
index.html
jest-setup.js Tests and missing features. Dec 29, 2018
package-lock.json
package.json
readme.md

readme.md

RosmaroTodoMVC

Rosmaro is a visual automata-based programming framework.

It's all about associating functions with (state machine) graph nodes.

Resources

Articles

Support

Let us know if you discover anything worth sharing.

Implementation

The whole app is a single ({state, action}) => ({state, result}) function made of a graph drawn in the Rosmaro editor and code utilising the rosmaro-binding-utils bound to it using the Rosmaro CLI tools.

Here's part of the graph visible in the editor: Item graph

Here's a piece of code:

const noneCompleted = () => ({ arrow: 'none are completed' });

export default ({ dispatch }) => ({
  handler: makeHandler({
    NO_TODOS_COMPLETED: noneCompleted,
    NO_TODOS: noneCompleted,

    RENDER: () =>
      h(
        'button.clear-completed',
        {
          on: { click: () => dispatch({ type: 'CLEAR_COMPLETED' }) },
        },
        'Clear completed'
      ),
  }),
});

And here's a test:

describe('clear completed', () => {
  it('is not visible when there are no completed todos', () =>
    testFlow([
      addTodo({ value: 'todo A' }),
      addTodo({ value: 'todo B' }),
      addTodo({ value: 'todo C' }),

      clearCompletedInvisible,
    ]));

  it('is visible when there is at least one completed todo', () =>
    testFlow([
      addTodo({ value: 'todo A' }),

      addTodo({ value: 'todo B' }),
      toggleTodo({ value: 'todo B' }),

      addTodo({ value: 'todo C' }),

      clearCompletedVisible,
    ]));

  it('removes completed todos when clicked', () =>
    testFlow([
      addTodo({ value: 'todo A' }),

      addTodo({ value: 'todo B' }),
      toggleTodo({ value: 'todo B' }),

      addTodo({ value: 'todo C' }),

      addTodo({ value: 'todo D' }),
      toggleTodo({ value: 'todo D' }),

      clearCompletedVisible,
      clickClearCompleted,
      clearCompletedInvisible,

      assertTodoActive({ value: 'todo A' }),
      assertTodoNotPresent({ value: 'todo B' }),
      assertTodoActive({ value: 'todo C' }),
      assertTodoNotPresent({ value: 'todo D' }),
    ]));
});

The user flows are tested using the rosmaro-testing-library.

The state of the app lives in a Redux store connected to Redux-Saga.

The UI itself is built using Snabbdom with the snabbdom-signature module for protection and tested with snabbdom-testing-library based on the wonderful dom-testing-library.

Credit

Created by Łukasz Makuch