---
title: "Blog Content Test (TodoVM Focused) (jotai)"
description: "Testing the blog content + substitutions for the TodoVM."
date: "2025-10-17"
draft: true
authors: ["Phosphor Team","Cole Lawrence"]
adaptation: "jotai"

---

Authors: Phosphor Team ([website](https://phosphor.co)), Cole Lawrence ([website](https://colelawrence.com), [x](https://x.com/refactorordie), [github](https://github.com/colelawrence))

# Blog Content Test

---

### Interface

```typescript
export type TodoItemVM = {
  key: string;
  textAtom: Atom<string>; // !todo.text
  completedAtom: Atom<boolean>; // !todo.completed
  toggleCompleted: () => void; // !call:todo-toggleCompleted
  remove: () => void; // !call:todo-remove
};

export type TodoListVM = {
  header: {
    newTodoTextAtom: Atom<string>; // !newTodoText
    updateNewTodoText: (text: string) => void; // !call:todo-updateNewTodoText
    addTodo: () => void; // !call:todo-addTodo
  };
  itemList: {
    itemsAtom: Atom<TodoItemVM[]>; // !visibleTodos
  };
  footer: {
    incompleteDisplayTextAtom: Atom<string>; // !incompleteDisplayText
    currentFilterAtom: Atom<"all" | "active" | "completed">; // !currentFilter
    showAll: () => void; // !call:todo-showAll
    showActive: () => void; // !call:todo-showActive
    showCompleted: () => void; // !call:todo-showCompleted
    clearCompleted: () => void; // !call:todo-clearCompleted
  };
  reset: () => void;
};
```

### React Code

<!-- Interactive Demo: todo-vm -->

```typescript
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);
```

{% collapsible(title="Todo List Full Test", open=true) %}

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

<!-- more -->

```typescript
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);
  });
});

```