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

---

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;
  text$: Queryable<string>; // !todo.text
  completed$: Queryable<boolean>; // !todo.completed
  toggleCompleted: () => void; // !call:todo-toggleCompleted
  remove: () => void; // !call:todo-remove
};

export type TodoListVM = {
  header: {
    newTodoText$: Queryable<string>; // !newTodoText
    updateNewTodoText: (text: string) => void; // !call:todo-updateNewTodoText
    addTodo: () => void; // !call:todo-addTodo
  };
  itemList: {
    items$: Queryable<TodoItemVM[]>; // !visibleTodos
  };
  footer: {
    incompleteDisplayText$: Queryable<string>; // !incompleteDisplayText
    currentFilter$: Queryable<"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 = liveStore.query(vm.itemList.items$);

// 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(liveStore.query(items[0].text$)).toBe("Buy milk");
expect(liveStore.query(items[0].completed$)).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 { makeInMemoryAdapter } from "@livestore/adapter-web";
import { type Store, createStorePromise } from "@livestore/livestore";
import { LogLevel } from "effect";
import { afterAll, beforeAll, describe, expect, it } from "vitest";
import { schema } from "#sources/view-model-interfaces/todo-vm/livestore/schema.ts";
import { type TodoListVM, createTodoListScope } from "#sources/view-model-interfaces/todo-vm/scope.ts";

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

  beforeAll(async () => {
    liveStore = await createStorePromise({
      schema: schema,
      adapter: makeInMemoryAdapter(),
      storeId: "todo-list-test-store",
      logLevel: LogLevel.Warning,
    });
    vm = createTodoListScope(liveStore);
  });

  afterAll(async () => {
    await liveStore.shutdownPromise();
  });

  it("should return initial todo item values correctly", () => {
    const items = liveStore.query(vm.itemList.items$);

    // 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(liveStore.query(items[0].text$)).toBe("Buy milk");
    expect(liveStore.query(items[0].completed$)).toBe(false);
  });
});

```