From a1cdf97fedbfdecf3f75fe25abb221cf667c34ae Mon Sep 17 00:00:00 2001
From: Diego Borges <drborges.cic@gmail.com>
Date: Sat, 12 Oct 2024 17:18:41 -0300
Subject: [PATCH] Increase test coverage

---
 .../cypress/component/SimpleTodoList.cy.tsx   | 33 +++++++++++++++++++
 examples/cypress/component/TodoList.cy.tsx    | 25 ++++++++++++++
 examples/react-todo/SimpleApp.tsx             | 24 ++++++++++++++
 .../react-todo/components/SimpleTodoList.tsx  | 17 ++++++++++
 examples/react-todo/components/TodoView.tsx   |  2 +-
 .../arbor-store/tests/scoping/array.test.ts   | 15 +++++++++
 6 files changed, 115 insertions(+), 1 deletion(-)
 create mode 100644 examples/cypress/component/SimpleTodoList.cy.tsx
 create mode 100644 examples/react-todo/SimpleApp.tsx
 create mode 100644 examples/react-todo/components/SimpleTodoList.tsx

diff --git a/examples/cypress/component/SimpleTodoList.cy.tsx b/examples/cypress/component/SimpleTodoList.cy.tsx
new file mode 100644
index 00000000..9417e172
--- /dev/null
+++ b/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()
+        })
+      })
+  })
+})
diff --git a/examples/cypress/component/TodoList.cy.tsx b/examples/cypress/component/TodoList.cy.tsx
index 5f71e37f..c57ca69e 100644
--- a/examples/cypress/component/TodoList.cy.tsx
+++ b/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()
+        })
+      })
+  })
 })
diff --git a/examples/react-todo/SimpleApp.tsx b/examples/react-todo/SimpleApp.tsx
new file mode 100644
index 00000000..5d4bdfd7
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/examples/react-todo/components/SimpleTodoList.tsx b/examples/react-todo/components/SimpleTodoList.tsx
new file mode 100644
index 00000000..e79de579
--- /dev/null
+++ b/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>
+  )
+})
diff --git a/examples/react-todo/components/TodoView.tsx b/examples/react-todo/components/TodoView.tsx
index 53be51a4..9303351a 100644
--- a/examples/react-todo/components/TodoView.tsx
+++ b/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
diff --git a/packages/arbor-store/tests/scoping/array.test.ts b/packages/arbor-store/tests/scoping/array.test.ts
index 446c2a6f..f7b97312 100644
--- a/packages/arbor-store/tests/scoping/array.test.ts
+++ b/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([])
+  })
 })