Blog Content Test (TodoVM Focused)

Adaptations

Original

jotai ×

TXT

Phosphor Team

Web

Cole Lawrence

𝕏 GitHub Web

October 17, 2025

Table of Contents

Blog Content Test

Blog Content Test#

Interface

export type TodoItemVM = {
  key: string;
  textAtom: Atom<string>; 
  completedAtom: Atom<boolean>; 
  toggleCompleted: () => void; 
  remove: () => void; 
};

export type TodoListVM = {
  header: {
    newTodoTextAtom: Atom<string>; 
    updateNewTodoText: (text: string) => void; 
    addTodo: () => void; 
  };
  itemList: {
    itemsAtom: Atom<TodoItemVM[]>; 
  };
  footer: {
    incompleteDisplayTextAtom: Atom<string>; 
    currentFilterAtom: Atom<"all" | "active" | "completed">; 
    showAll: () => void; 
    showActive: () => void; 
    showCompleted: () => void; 
    clearCompleted: () => void; 
  };
  reset: () => void;
};

React Code

🧺 Sort the whites
🌀 Start the washing machine

const items = jotaiStore.get(vm.itemList.itemsAtom);

// Assert the number of items using toHaveLength for better test errors
expect(items).toHaveLength(1);

// Assert on the first item's text and completed value with expect matchers
expect(jotaiStore.get(items[0].textAtom)).toBe("Buy milk");
expect(jotaiStore.get(items[0].completedAtom)).toBe(false);

Todo List Full Test

And if you're curious about the full test harness for the Todo List, I've included the source file below.

import { type Store, createStore } from "jotai";
import { afterAll, beforeAll, describe, expect, it } from "vitest";
import { type TodoListVM, createTodoListScope } from "#sources/view-model-interfaces/todo-vm/scope.ts";

// Guided by @docs/vitest-guidelines.md
describe("TodoListVM Integration", () => {
  let jotaiStore: Store;
  let vm: TodoListVM;

  beforeAll(async () => {
    jotaiStore = createStore();
    vm = createTodoListScope(jotaiStore);
  });

  it("should return initial todo item values correctly", () => {
    const items = jotaiStore.get(vm.itemList.itemsAtom);

    // Assert the number of items using toHaveLength for better test errors
    expect(items).toHaveLength(1);

    // Assert on the first item's text and completed value with expect matchers
    expect(jotaiStore.get(items[0].textAtom)).toBe("Buy milk");
    expect(jotaiStore.get(items[0].completedAtom)).toBe(false);
  });
});