Business Logic Component Utilities
Tools for building simple business logic component
Example: Todo App
TodoBloc.jsx
; /** * @param */ { const $todos = initialTodos; const $todoInput = ""; return ;}
TodoApp.jsx
import React useContext from "react";import Observer from "bloc-utils/react"; import createTodo from "../helpers";import changeValue preventDefaultThen from "../react-helpers"; import createTodoBloc from "./TodoBloc";import TodoItem from "./TodoItem"; /** @type */const todos = ; const TodoBloc = React; { return <TodoApp></TodoApp>;} { const bloc = ; return <div ="container"> <h1>Todos</h1> <ul ="list-group"> <Observer = = /> </ul> <br /> <form ="form-group" => <label ="todo-title">New Todo Title</label> <div ="input-group"> <Observer = = /> <button ="btn btn-primary">Add</button> </div> </form> </div> ;}
TodoItem.jsx
import React useContext from "react";import TodoBloc from "./TodoApp";import onEnterOrClick from "../react-helpers"; /** * TodoItem appears within the TodoApp * @param {{ todo: Todo }} props */ { const todos = ; return <li ="list-group-item" > <span => todotitle </span> <button ="btn btn-sm btn-default float-right" = > 🗑 </button> </li> ;}
Bloc Testing (jest)
bloc-utils
comes with jest wrappers right out of the box to help with
your unit testing needs.
By wrapping a bloc in the spyOnBloc
helper, every Observable
is now enabled
to be tested against either the .nextValue
(returns a Promise resolved with the nextValue
)
and the .latestValue
property which holds the last value emitted by the observable.
TodoBloc.test.js
;;; { return ;} jest; ; ; ; ;