Increase test coverage

examples/cypress/component/SimpleTodoList.cy.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+
+import { TodoList, store } from "../../react-todo/store/useTodos"
+import SimpleTodoListApp from "../../react-todo/SimpleApp"
+
+describe("SimpleTodoList", () => {
+  beforeEach(() => {
+    store.setState(new TodoList())
+  })
+
+  it("preserves list items references within store upon removal", () => {
+    cy.mount(<SimpleTodoListApp />)
+
+    cy.findByTestId("add-todo-input").type("Clean the house")
+    cy.findByText("Add").click()
+
+    cy.findByTestId("add-todo-input").type("Walk the dogs")
+    cy.findByText("Add")
+      .click()
+      .then(() => {
+        const todo1 = store.state[0]
+        const todo2 = store.state[1]
+
+        cy.findByTestId(`todo-${todo1.id}`).within(() => {
+          cy.findByText("Delete").click()
+        })
+
+        cy.findByTestId(`todo-${todo2.id}`).within(() => {
+          cy.findByText("Delete").click()
+        })
+      })
+  })
+})

examples/cypress/component/TodoList.cy.tsx

@@ -79,4 +79,29 @@ describe("TodoList", () => {
         cy.findByText("0 of 1 completed").should("exist")
       })
   })
+
+  it("preserves list items references within store upon removal", () => {
+    cy.mount(<TodoListApp />)
+
+    cy.findByTestId("add-todo-input").type("Clean the house")
+    cy.findByText("Add").click()
+
+    cy.findByTestId("add-todo-input").type("Walk the dogs")
+    cy.findByText("Add").click()
+
+    cy.findByText("All")
+      .click()
+      .then(() => {
+        const todo1 = store.state[0]
+        const todo2 = store.state[1]
+
+        cy.findByTestId(`todo-${todo1.id}`).within(() => {
+          cy.findByText("Delete").click()
+        })
+
+        cy.findByTestId(`todo-${todo2.id}`).within(() => {
+          cy.findByText("Delete").click()
+        })
+      })
+  })
 })

examples/react-todo/SimpleApp.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+
+import Summary from "./components/Summary"
+import NewTodoForm from "./components/NewTodoForm"
+import SimpleTodoList from "./components/SimpleTodoList"
+
+import "./index.css"
+
+export default function SimpleApp() {
+  return (
+    <div className="app">
+      <h1>todos</h1>
+
+      <div className="body">
+        <NewTodoForm />
+        <SimpleTodoList />
+
+        <div className="footer">
+          <Summary />
+        </div>
+      </div>
+    </div>
+  )
+}

examples/react-todo/components/SimpleTodoList.tsx

@@ -0,0 +1,17 @@
+import React, { memo } from "react"
+import { useArbor } from "@arborjs/react"
+
+import { TodoList, store } from "../store/useTodos"
+import TodoView from "./TodoView"
+
+export default memo(function SimpleTodoList() {
+  const todos = useArbor(store) as TodoList
+
+  return (
+    <div className="todo-list">
+      {todos.map((todo) => (
+        <TodoView key={todo.uuid} id={todo.uuid} />
+      ))}
+    </div>
+  )
+})

examples/react-todo/components/TodoView.tsx

@@ -10,7 +10,7 @@ export interface TodoProps {
 
 export default memo(function TodoView({ id }: TodoProps) {
   const [editing, setEditing] = useState(false)
-  const todo = useArbor(store.state.find(t => t.uuid === id)!)
+  const todo = useArbor(store.state.find((t) => t.uuid === id)!)
 
   return (
     <div

packages/arbor-store/tests/scoping/array.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from "vitest"
 import { Arbor } from "../../src/arbor"
 import { ScopedStore } from "../../src/scoping/store"
+import { detach } from "../../src/utilities"
 
 describe("Array", () => {
   describe("Symbol.iterator", () => {
@@ -389,4 +390,18 @@ describe("Array", () => {
       expect(subscriber).toHaveBeenCalledTimes(2)
     })
   })
+
+  it("preserves tree links when deleting items via detach", () => {
+    const state = [{ id: 1 }, { id: 2 }]
+
+    const store = new Arbor(state)
+    const scoped = new ScopedStore(store)
+    const item1 = scoped.state[0]
+    const item2 = scoped.state[1]
+
+    detach(item1)
+    detach(item2)
+
+    expect(store.state).toEqual([])
+  })
 })