Todo List
Overview
A todo list demonstrates how Fault Sense validates critical user interactions in a typical CRUD application. Each operation is monitored to ensure proper functionality across different user environments and usage patterns.
Implementation
<!-- Todo List Container with Initial State Assertion -->
<div id="todos-list"
fs-feature="TodoApp"
fs-assert="TodoAppInitialState"
fs-trigger="mount"
fs-assert-visible=".todos-empty">
<!-- Add Todo Form -->
<form>
<input type="text" placeholder="Add a new todo..." />
<button type="submit"
fs-feature="TodoApp"
fs-assert="AddNewTodo"
fs-trigger="click"
fs-assert-visible="#todos-list"
fs-assert-added=".todo-item">
Add Todo
</button>
</form>
<!-- Todo Items -->
<div class="todo-item">
<input type="checkbox"
data-todo-id="123"
fs-feature="TodoApp"
fs-assert="ToggleTodoCompletion"
fs-trigger="change"
fs-assert-visible="input[data-todo-id='123']:checked" />
<span>Todo text</span>
<button fs-feature="TodoApp"
fs-assert="RemoveTodo"
fs-trigger="click"
fs-assert-removed=".todo-item">
Remove
</button>
</div>
</div>Try it
No todos yet. Add one above!
Key Attributes
fs-featureGroups related assertions under a feature name for organized reporting
fs-assertUnique identifier for each assertion (TodoAppInitialState, AddNewTodo, ToggleTodoCompletion, RemoveTodo)
fs-triggerEvent that triggers the assertion (mount, click, change)
fs-assert-visibleValidates element visibility, including CSS pseudo-selectors like :checked
fs-assert-addedValidates that new elements are added to the DOM
fs-assert-removedValidates that elements are removed from the DOM