Business Logic Component Utilities
Tools for building simple business logic component
Example: Todo App
TodoState.jsx
; /** * @param */ { const $todos = initialTodos; const $todoInput = ""; return ;}
TodoApp.jsx
import React useContext from "react";import Observer from "behavior-state/react"; import createTodo from "../helpers";import changeValue preventDefaultThen from "../react-helpers"; import createTodoState from "./TodoState";import TodoItem from "./TodoItem"; /** @type */const todos = ; const TodoState = React; { return <TodoApp></TodoApp>;} { const state = ; 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 TodoState 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> ;}
State Testing (jest)
behavior-state
comes with jest wrappers right out of the box to help with
your unit testing needs.
By wrapping a state in the spyOnState
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.
TodoState.test.js
;;; { return ;} jest; ; ; ; ;