@ersbeth/picoflow 1.0.1 → 1.1.1

package/test/collections/flowArray.scalars.test.ts

@@ -0,0 +1,1129 @@
+import { describe, expect, it, vi } from "vitest";
+import { array, effect, state } from "#package";
+
+describe("FlowArray", () => {
+	describe("unit", () => {
+		describe("initialization", () => {
+			it("should initialize with provided values", async () => {
+				const $array = array([1, 2, 3]);
+
+				expect(await $array.pick()).toEqual([1, 2, 3]);
+			});
+
+			it("should initialize with empty array when no value provided", async () => {
+				const $array = array<number>();
+
+				expect(await $array.pick()).toEqual([]);
+			});
+		});
+
+		describe("disposal", () => {
+			it("should have disposed property set to false initially and true after disposal", () => {
+				const $array = array([1, 2, 3]);
+				expect($array.disposed).toBe(false);
+				$array.dispose();
+				expect($array.disposed).toBe(true);
+			});
+
+			it("should throw error when disposed twice", () => {
+				const $array = array([1, 2, 3]);
+				$array.dispose();
+				expect(() => $array.dispose()).toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should throw when pick is called after disposal", async () => {
+				const $array = array([1, 2, 3]);
+				$array.dispose();
+				await expect($array.pick()).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should throw when set is called after disposal", async () => {
+				const $array = array([1, 2, 3]);
+				$array.dispose();
+				await expect($array.set([1])).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should throw when setItem is called after disposal", async () => {
+				const $array = array([1, 2, 3]);
+				$array.dispose();
+				await expect($array.update(0, 3)).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should throw when push is called after disposal", async () => {
+				const $array = array([1, 2, 3]);
+				$array.dispose();
+				await expect($array.push(3)).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should throw when pop is called after disposal", async () => {
+				const $array = array([1, 2, 3]);
+				$array.dispose();
+				await expect($array.pop()).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should throw when unshift is called after disposal", async () => {
+				const $array = array([1, 2, 3]);
+				$array.dispose();
+				await expect($array.unshift(3)).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should throw when shift is called after disposal", async () => {
+				const $array = array([1, 2, 3]);
+				$array.dispose();
+				await expect($array.shift()).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should throw when splice is called after disposal", async () => {
+				const $array = array<number>([0, 1, 2, 3, 4]);
+				$array.dispose();
+				await expect($array.splice(1, 2)).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should throw when clear is called after disposal", async () => {
+				const $array = array<number>([0, 1, 2, 3, 4]);
+				$array.dispose();
+				await expect($array.clear()).rejects.toThrow(
+					"[PicoFlow] Primitive is disposed",
+				);
+			});
+
+			it("should dispose items when FlowArray is disposed", () => {
+				const $item1 = state(1);
+				const $item2 = state(2);
+				const $item3 = state(3);
+				const $array = array([$item1, $item2, $item3]);
+
+				expect($item1.disposed).toBe(false);
+				expect($item2.disposed).toBe(false);
+				expect($item3.disposed).toBe(false);
+
+				$array.dispose();
+
+				expect($item1.disposed).toBe(true);
+				expect($item2.disposed).toBe(true);
+				expect($item3.disposed).toBe(true);
+			});
+
+			it("should dispose items with provided options when FlowArray is disposed", () => {
+				const $item1 = state(1);
+				const $item2 = state(2);
+				const $array = array([$item1, $item2]);
+
+				const $effect = effect((t) => {
+					$item1.get(t);
+				});
+
+				expect($effect.disposed).toBe(false);
+
+				$array.dispose({ self: true });
+
+				expect($item1.disposed).toBe(true);
+				expect($item2.disposed).toBe(true);
+				expect($effect.disposed).toBe(false);
+			});
+		});
+
+		describe("length", () => {
+			it("should return correct length", () => {
+				const $array = array([1, 2, 3]);
+				expect($array.length).toBe(3);
+			});
+
+			it("should return zero for empty array", () => {
+				const $array = array<number>([]);
+				expect($array.length).toBe(0);
+			});
+
+			it("should throw when length is accessed after disposal", () => {
+				const $array = array([1, 2, 3]);
+				$array.dispose();
+				expect(() => $array.length).toThrow("[PicoFlow] Primitive is disposed");
+			});
+
+			it("should update length when array is modified", async () => {
+				const $array = array<number>([]);
+				expect($array.length).toBe(0);
+
+				$array.push(1);
+				expect($array.length).toBe(1);
+
+				$array.push(2);
+				expect($array.length).toBe(2);
+
+				$array.pop();
+				expect($array.length).toBe(1);
+
+				$array.unshift(0);
+				expect($array.length).toBe(2);
+
+				$array.shift();
+				expect($array.length).toBe(1);
+
+				$array.clear();
+				expect($array.length).toBe(0);
+			});
+		});
+
+		describe("set", () => {
+			it("should update array when set is called", async () => {
+				const $array = array([0, 1, 2]);
+				expect(await $array.pick()).toEqual([0, 1, 2]);
+
+				await $array.set([1, 2, 3]);
+				expect(await $array.pick()).toEqual([1, 2, 3]);
+			});
+
+			it("should dispose items when set replaces array", () => {
+				const $oldItem1 = state(1);
+				const $oldItem2 = state(2);
+				const $array = array([$oldItem1, $oldItem2]);
+
+				expect($oldItem1.disposed).toBe(false);
+				expect($oldItem2.disposed).toBe(false);
+
+				$array.set([state(3), state(4)]);
+
+				expect($oldItem1.disposed).toBe(true);
+				expect($oldItem2.disposed).toBe(true);
+			});
+
+			it("should dispose items with self option when set replaces array", async () => {
+				const $oldItem = state(1);
+				const $array = array([$oldItem]);
+
+				const $effect = effect((t) => {
+					$oldItem.get(t);
+				});
+
+				expect($effect.disposed).toBe(false);
+
+				await $array.set([state(2)]);
+
+				expect($oldItem.disposed).toBe(true);
+				expect($effect.disposed).toBe(false);
+			});
+		});
+
+		describe("setItem", () => {
+			it("should update item at specific index", async () => {
+				const $array = array([0, 1, 2]);
+				expect(await $array.pick()).toEqual([0, 1, 2]);
+
+				$array.update(0, 1);
+				expect(await $array.pick()).toEqual([1, 1, 2]);
+
+				$array.update(1, 2);
+				expect(await $array.pick()).toEqual([1, 2, 2]);
+
+				$array.update(2, 3);
+				expect(await $array.pick()).toEqual([1, 2, 3]);
+			});
+
+			it("should throw when setItem is called with negative index", async () => {
+				const $array = array([1, 2, 3]);
+				await expect($array.update(-1, 0)).rejects.toThrow(
+					"[PicoFlow] Index out of bounds",
+				);
+			});
+
+			it("should throw when setItem is called with index >= length", async () => {
+				const $array = array([1, 2, 3]);
+				await expect($array.update(3, 0)).rejects.toThrow(
+					"[PicoFlow] Index out of bounds",
+				);
+				await expect($array.update(10, 0)).rejects.toThrow(
+					"[PicoFlow] Index out of bounds",
+				);
+			});
+
+			it("should handle boundary indices correctly", async () => {
+				const $array = array([0, 1, 2]);
+				$array.update(0, 10);
+				expect(await $array.pick()).toEqual([10, 1, 2]);
+
+				$array.update(2, 20);
+				expect(await $array.pick()).toEqual([10, 1, 20]);
+			});
+		});
+
+		describe("push", () => {
+			it("should append item to end of array", async () => {
+				const $array = array<number>([]);
+				expect(await $array.pick()).toEqual([]);
+
+				$array.push(0);
+				expect(await $array.pick()).toEqual([0]);
+
+				$array.push(1);
+				expect(await $array.pick()).toEqual([0, 1]);
+
+				$array.push(2);
+				expect(await $array.pick()).toEqual([0, 1, 2]);
+			});
+
+			it("should handle operations on empty array", () => {
+				const $array = array<number>([]);
+				expect($array.length).toBe(0);
+				$array.push(1);
+				expect($array.length).toBe(1);
+			});
+		});
+
+		describe("pop", () => {
+			it("should remove last item from array", async () => {
+				const $array = array([0, 1, 2]);
+				expect(await $array.pick()).toEqual([0, 1, 2]);
+
+				$array.pop();
+				expect(await $array.pick()).toEqual([0, 1]);
+
+				$array.pop();
+				expect(await $array.pick()).toEqual([0]);
+
+				$array.pop();
+				expect(await $array.pick()).toEqual([]);
+			});
+
+			it("should dispose item when pop removes it", () => {
+				const $item = state(1);
+				const $array = array([$item]);
+
+				expect($item.disposed).toBe(false);
+
+				$array.pop();
+
+				expect($item.disposed).toBe(true);
+			});
+
+			it("should dispose item with self option when pop removes it", async () => {
+				const $item = state(1);
+				const $array = array([$item]);
+
+				const $effect = effect((t) => {
+					$item.get(t);
+				});
+
+				expect($effect.disposed).toBe(false);
+
+				await $array.pop();
+
+				expect($item.disposed).toBe(true);
+				expect($effect.disposed).toBe(false);
+			});
+
+			it("should handle operations on empty array", () => {
+				const $array = array<number>([]);
+				expect($array.length).toBe(0);
+				$array.pop();
+				expect($array.length).toBe(0);
+			});
+		});
+
+		describe("unshift", () => {
+			it("should insert item at beginning of array", async () => {
+				const $array = array<number>([]);
+				expect(await $array.pick()).toEqual([]);
+
+				$array.unshift(0);
+				expect(await $array.pick()).toEqual([0]);
+
+				$array.unshift(1);
+				expect(await $array.pick()).toEqual([1, 0]);
+
+				$array.unshift(2);
+				expect(await $array.pick()).toEqual([2, 1, 0]);
+			});
+		});
+
+		describe("shift", () => {
+			it("should remove first item from array", async () => {
+				const $array = array([0, 1, 2]);
+				expect(await $array.pick()).toEqual([0, 1, 2]);
+
+				$array.shift();
+				expect(await $array.pick()).toEqual([1, 2]);
+
+				$array.shift();
+				expect(await $array.pick()).toEqual([2]);
+
+				$array.shift();
+				expect(await $array.pick()).toEqual([]);
+			});
+
+			it("should dispose item when shift removes it", () => {
+				const $item = state(1);
+				const $array = array([$item, state(2)]);
+
+				expect($item.disposed).toBe(false);
+
+				$array.shift();
+
+				expect($item.disposed).toBe(true);
+			});
+
+			it("should dispose item with self option when shift removes it", async () => {
+				const $item = state(1);
+				const $array = array([$item, state(2)]);
+
+				const $effect = effect((t) => {
+					$item.get(t);
+				});
+
+				expect($effect.disposed).toBe(false);
+
+				await $array.shift();
+
+				expect($item.disposed).toBe(true);
+				expect($effect.disposed).toBe(false);
+			});
+
+			it("should handle operations on empty array", () => {
+				const $array = array<number>([]);
+				expect($array.length).toBe(0);
+				$array.shift();
+				expect($array.length).toBe(0);
+			});
+		});
+
+		describe("splice", () => {
+			it("should remove items from array", async () => {
+				const $array = array<number>([0, 1, 2, 3, 4]);
+				expect(await $array.pick()).toEqual([0, 1, 2, 3, 4]);
+
+				$array.splice(1, 2);
+				expect(await $array.pick()).toEqual([0, 3, 4]);
+			});
+
+			it("should insert items into array", async () => {
+				const $array = array<number>([0, 1, 2, 3, 4]);
+				$array.splice(1, 0, 10, 11);
+				expect(await $array.pick()).toEqual([0, 10, 11, 1, 2, 3, 4]);
+			});
+
+			it("should replace items in array", async () => {
+				const $array = array<number>([0, 1, 2, 3, 4]);
+				$array.splice(1, 2, 10, 11);
+				expect(await $array.pick()).toEqual([0, 10, 11, 3, 4]);
+			});
+
+			it("should dispose items when splice removes them", () => {
+				const $item1 = state(1);
+				const $item2 = state(2);
+				const $array = array([state(0), $item1, $item2, state(3)]);
+
+				expect($item1.disposed).toBe(false);
+				expect($item2.disposed).toBe(false);
+
+				$array.splice(1, 2);
+
+				expect($item1.disposed).toBe(true);
+				expect($item2.disposed).toBe(true);
+			});
+
+			it("should dispose items with self option when splice removes them", async () => {
+				const $item = state(1);
+				const $array = array([state(0), $item, state(2)]);
+
+				const $effect = effect((t) => {
+					$item.get(t);
+				});
+
+				expect($effect.disposed).toBe(false);
+
+				await $array.splice(1, 1);
+
+				expect($item.disposed).toBe(true);
+				expect($effect.disposed).toBe(false);
+			});
+		});
+
+		describe("clear", () => {
+			it("should remove all items from array", async () => {
+				const $array = array<number>([0, 1, 2, 3, 4]);
+				expect(await $array.pick()).toEqual([0, 1, 2, 3, 4]);
+
+				$array.clear();
+				expect(await $array.pick()).toEqual([]);
+			});
+
+			it("should dispose all items when clear is called", () => {
+				const $item1 = state(1);
+				const $item2 = state(2);
+				const $item3 = state(3);
+				const $array = array([$item1, $item2, $item3]);
+
+				expect($item1.disposed).toBe(false);
+				expect($item2.disposed).toBe(false);
+				expect($item3.disposed).toBe(false);
+
+				$array.clear();
+
+				expect($item1.disposed).toBe(true);
+				expect($item2.disposed).toBe(true);
+				expect($item3.disposed).toBe(true);
+			});
+
+			it("should dispose items with self option when clear is called", async () => {
+				const $item = state(1);
+				const $array = array([$item, state(2)]);
+
+				const $effect = effect((t) => {
+					$item.get(t);
+				});
+
+				expect($effect.disposed).toBe(false);
+
+				await $array.clear();
+
+				expect($item.disposed).toBe(true);
+				expect($effect.disposed).toBe(false);
+			});
+		});
+
+		describe("$lastAction", () => {
+			describe("set action", () => {
+				it("should initialize $lastAction with set action on creation", async () => {
+					const $array = array([1, 2, 3]);
+					const action = await $array.$lastAction.pick();
+					expect(action).toEqual({
+						type: "set",
+						items: [1, 2, 3],
+					});
+				});
+
+				it("should update $lastAction with set action when set is called", async () => {
+					const $array = array([0, 1, 2]);
+					await $array.set([1, 2, 3]);
+					const action = await $array.$lastAction.pick();
+					expect(action).toEqual({
+						type: "set",
+						items: [1, 2, 3],
+					});
+				});
+
+				it("should have correct structure for set action (items array)", async () => {
+					const $array = array([1, 2, 3]);
+					const action = await $array.$lastAction.pick();
+					expect(action).toHaveProperty("type", "set");
+					if (action.type === "set") {
+						expect(action).toHaveProperty("items");
+						expect(Array.isArray(action.items)).toBe(true);
+						expect(action.items).toEqual([1, 2, 3]);
+					}
+				});
+			});
+
+			describe("update action", () => {
+				it("should update $lastAction with setItem action when setItem is called", async () => {
+					const $array = array([0, 1, 2]);
+					$array.update(1, 10);
+					const action = await $array.$lastAction.pick();
+					expect(action).toEqual({
+						type: "update",
+						index: 1,
+						item: 10,
+					});
+				});
+
+				it("should have correct structure for setItem action (index and item)", async () => {
+					const $array = array([1, 2, 3]);
+					$array.update(0, 10);
+					const action = await $array.$lastAction.pick();
+					expect(action).toHaveProperty("type", "update");
+					if (action.type === "update") {
+						expect(action).toHaveProperty("index");
+						expect(action).toHaveProperty("item");
+						expect(action.index).toBe(0);
+						expect(action.item).toBe(10);
+					}
+				});
+			});
+
+			describe("push action", () => {
+				it("should update $lastAction with push action when push is called", async () => {
+					const $array = array<number>([]);
+					$array.push(42);
+					const action = await $array.$lastAction.pick();
+					expect(action).toEqual({
+						type: "push",
+						item: 42,
+					});
+				});
+
+				it("should have correct structure for push action (item)", async () => {
+					const $array = array<number>([]);
+					$array.push(100);
+					const action = await $array.$lastAction.pick();
+					expect(action).toHaveProperty("type", "push");
+					if (action.type === "push") {
+						expect(action).toHaveProperty("item");
+						expect(action.item).toBe(100);
+					}
+				});
+			});
+
+			describe("pop action", () => {
+				it("should update $lastAction with pop action when pop is called", async () => {
+					const $array = array([1, 2, 3]);
+					$array.pop();
+					const action = await $array.$lastAction.pick();
+					expect(action).toEqual({
+						type: "pop",
+					});
+				});
+
+				it("should have correct structure for pop action (no additional fields)", async () => {
+					const $array = array([1, 2, 3]);
+					$array.pop();
+					const action = await $array.$lastAction.pick();
+					expect(action).toHaveProperty("type", "pop");
+					if (action.type === "pop") {
+						expect(action).not.toHaveProperty("item");
+						expect(action).not.toHaveProperty("index");
+						expect(action).not.toHaveProperty("items");
+					}
+				});
+			});
+
+			describe("unshift action", () => {
+				it("should update $lastAction with unshift action when unshift is called", async () => {
+					const $array = array<number>([]);
+					$array.unshift(42);
+					const action = await $array.$lastAction.pick();
+					expect(action).toEqual({
+						type: "unshift",
+						item: 42,
+					});
+				});
+
+				it("should have correct structure for unshift action (item)", async () => {
+					const $array = array<number>([]);
+					$array.unshift(200);
+					const action = await $array.$lastAction.pick();
+					expect(action).toHaveProperty("type", "unshift");
+					if (action.type === "unshift") {
+						expect(action).toHaveProperty("item");
+						expect(action.item).toBe(200);
+					}
+				});
+			});
+
+			describe("shift action", () => {
+				it("should update $lastAction with shift action when shift is called", async () => {
+					const $array = array([1, 2, 3]);
+					$array.shift();
+					const action = await $array.$lastAction.pick();
+					expect(action).toEqual({
+						type: "shift",
+					});
+				});
+
+				it("should have correct structure for shift action (no additional fields)", async () => {
+					const $array = array([1, 2, 3]);
+					$array.shift();
+					const action = await $array.$lastAction.pick();
+					expect(action).toHaveProperty("type", "shift");
+					if (action.type === "shift") {
+						expect(action).not.toHaveProperty("item");
+						expect(action).not.toHaveProperty("index");
+						expect(action).not.toHaveProperty("items");
+					}
+				});
+			});
+
+			describe("splice action", () => {
+				it("should update $lastAction with splice action when splice is called", async () => {
+					const $array = array<number>([0, 1, 2, 3, 4]);
+					$array.splice(1, 2, 10, 11);
+					const action = await $array.$lastAction.pick();
+					expect(action).toEqual({
+						type: "splice",
+						start: 1,
+						deleteCount: 2,
+						items: [10, 11],
+					});
+				});
+
+				it("should have correct structure for splice action (start, deleteCount, items)", async () => {
+					const $array = array<number>([0, 1, 2]);
+					$array.splice(1, 1, 100);
+					const action = await $array.$lastAction.pick();
+					expect(action).toHaveProperty("type", "splice");
+					if (action.type === "splice") {
+						expect(action).toHaveProperty("start");
+						expect(action).toHaveProperty("deleteCount");
+						expect(action).toHaveProperty("items");
+						expect(action.start).toBe(1);
+						expect(action.deleteCount).toBe(1);
+						expect(Array.isArray(action.items)).toBe(true);
+						expect(action.items).toEqual([100]);
+					}
+				});
+			});
+
+			describe("clear action", () => {
+				it("should update $lastAction with clear action when clear is called", async () => {
+					const $array = array<number>([0, 1, 2, 3, 4]);
+					$array.clear();
+					const action = await $array.$lastAction.pick();
+					expect(action).toEqual({
+						type: "clear",
+					});
+				});
+
+				it("should have correct structure for clear action (no additional fields)", async () => {
+					const $array = array<number>([1, 2, 3]);
+					$array.clear();
+					const action = await $array.$lastAction.pick();
+					expect(action).toHaveProperty("type", "clear");
+					if (action.type === "clear") {
+						expect(action).not.toHaveProperty("item");
+						expect(action).not.toHaveProperty("index");
+						expect(action).not.toHaveProperty("items");
+					}
+				});
+			});
+		});
+
+		describe("edge cases", () => {
+			it("should handle multiple rapid operations", async () => {
+				const $array = array<number>([]);
+				$array.push(1);
+				$array.push(2);
+				$array.push(3);
+				$array.pop();
+				$array.shift();
+				$array.unshift(0);
+				expect(await $array.pick()).toEqual([0, 2]);
+			});
+
+			it("should handle boundary indices correctly", async () => {
+				const $array = array([0, 1, 2]);
+				$array.update(0, 10);
+				$array.update(2, 20);
+				expect(await $array.pick()).toEqual([10, 1, 20]);
+			});
+		});
+	});
+
+	describe("integration", () => {
+		describe("with effects", () => {
+			describe("reactivity", () => {
+				it("should call effect when initialized", async () => {
+					const $array = array([1, 2, 3]);
+					const effectFn = vi.fn();
+					effect((t) => effectFn($array.get(t)));
+
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+					expect(effectFn).toHaveBeenLastCalledWith([1, 2, 3]);
+				});
+
+				it("should call effect when updated with set", async () => {
+					const $array = array<number>([0, 1, 2]);
+					const effectFn = vi.fn();
+					effect((t) => effectFn($array.get(t)));
+
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+					expect(effectFn).toHaveBeenLastCalledWith([0, 1, 2]);
+
+					await $array.set([1, 2, 3]);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+					expect(effectFn).toHaveBeenLastCalledWith([1, 2, 3]);
+				});
+
+				it("should call effect when updated with push/pop", async () => {
+					const $array = array<number>();
+					const effectFn = vi.fn();
+					effect((t) => effectFn($array.get(t)));
+
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+					expect(effectFn).toHaveBeenLastCalledWith([]);
+
+					$array.push(0);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+					expect(effectFn).toHaveBeenLastCalledWith([0]);
+
+					$array.push(1);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+					expect(effectFn).toHaveBeenLastCalledWith([0, 1]);
+
+					$array.push(2);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(4));
+					expect(effectFn).toHaveBeenLastCalledWith([0, 1, 2]);
+
+					$array.pop();
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(5));
+					expect(effectFn).toHaveBeenLastCalledWith([0, 1]);
+
+					$array.pop();
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(6));
+					expect(effectFn).toHaveBeenLastCalledWith([0]);
+
+					$array.pop();
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(7));
+					expect(effectFn).toHaveBeenLastCalledWith([]);
+				});
+
+				it("should call effect when updated with unshift/shift", async () => {
+					const $array = array<number>();
+					const effectFn = vi.fn();
+					effect((t) => effectFn($array.get(t)));
+
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+					expect(effectFn).toHaveBeenLastCalledWith([]);
+
+					$array.unshift(0);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+					expect(effectFn).toHaveBeenLastCalledWith([0]);
+
+					$array.unshift(1);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+					expect(effectFn).toHaveBeenLastCalledWith([1, 0]);
+
+					$array.unshift(2);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(4));
+					expect(effectFn).toHaveBeenLastCalledWith([2, 1, 0]);
+
+					$array.shift();
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(5));
+					expect(effectFn).toHaveBeenLastCalledWith([1, 0]);
+
+					$array.shift();
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(6));
+					expect(effectFn).toHaveBeenLastCalledWith([0]);
+
+					$array.shift();
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(7));
+					expect(effectFn).toHaveBeenLastCalledWith([]);
+				});
+
+				it("should call effect when updated with splice", async () => {
+					const $array = array<number>([0, 1, 2, 3, 4]);
+					const effectFn = vi.fn();
+					effect((t) => effectFn($array.get(t)));
+
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+					expect(effectFn).toHaveBeenLastCalledWith([0, 1, 2, 3, 4]);
+
+					$array.splice(1, 2);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+					expect(effectFn).toHaveBeenLastCalledWith([0, 3, 4]);
+
+					$array.splice(1, 0, 1, 2);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+					expect(effectFn).toHaveBeenLastCalledWith([0, 1, 2, 3, 4]);
+				});
+
+				it("should call effect when updated with clear", async () => {
+					const $array = array<number>([0, 1, 2, 3, 4]);
+					const effectFn = vi.fn();
+					effect((t) => effectFn($array.get(t)));
+
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+					expect(effectFn).toHaveBeenLastCalledWith([0, 1, 2, 3, 4]);
+
+					$array.clear();
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+					expect(effectFn).toHaveBeenLastCalledWith([]);
+				});
+			});
+
+			describe("item reactivity", () => {
+				it("should call effect when item is updated", async () => {
+					const $array = array<number>([0, 1, 2]);
+					const effectFn = vi.fn();
+					const effect0Fn = vi.fn();
+					const effect1Fn = vi.fn();
+					const effect2Fn = vi.fn();
+
+					effect((t) => effectFn($array.get(t)));
+					effect((t) => effect0Fn($array.get(t)[0]));
+					effect((t) => effect1Fn($array.get(t)[1]));
+					effect((t) => effect2Fn($array.get(t)[2]));
+
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+					expect(effectFn).toHaveBeenLastCalledWith([0, 1, 2]);
+					await vi.waitFor(() => expect(effect0Fn).toHaveBeenCalledTimes(1));
+					expect(effect0Fn).toHaveBeenLastCalledWith(0);
+					await vi.waitFor(() => expect(effect1Fn).toHaveBeenCalledTimes(1));
+					expect(effect1Fn).toHaveBeenLastCalledWith(1);
+					await vi.waitFor(() => expect(effect2Fn).toHaveBeenCalledTimes(1));
+					expect(effect2Fn).toHaveBeenLastCalledWith(2);
+
+					$array.update(0, 1);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+					expect(effectFn).toHaveBeenLastCalledWith([1, 1, 2]);
+					await vi.waitFor(() => expect(effect0Fn).toHaveBeenCalledTimes(2));
+					expect(effect0Fn).toHaveBeenLastCalledWith(1);
+					await vi.waitFor(() => expect(effect1Fn).toHaveBeenCalledTimes(2));
+					expect(effect1Fn).toHaveBeenLastCalledWith(1);
+					await vi.waitFor(() => expect(effect2Fn).toHaveBeenCalledTimes(2));
+					expect(effect2Fn).toHaveBeenLastCalledWith(2);
+
+					$array.update(1, 2);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+					expect(effectFn).toHaveBeenLastCalledWith([1, 2, 2]);
+					await vi.waitFor(() => expect(effect0Fn).toHaveBeenCalledTimes(3));
+					expect(effect0Fn).toHaveBeenLastCalledWith(1);
+					await vi.waitFor(() => expect(effect1Fn).toHaveBeenCalledTimes(3));
+					expect(effect1Fn).toHaveBeenLastCalledWith(2);
+					await vi.waitFor(() => expect(effect2Fn).toHaveBeenCalledTimes(3));
+					expect(effect2Fn).toHaveBeenLastCalledWith(2);
+
+					$array.update(2, 3);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(4));
+					expect(effectFn).toHaveBeenLastCalledWith([1, 2, 3]);
+					await vi.waitFor(() => expect(effect0Fn).toHaveBeenCalledTimes(4));
+					expect(effect0Fn).toHaveBeenLastCalledWith(1);
+					await vi.waitFor(() => expect(effect1Fn).toHaveBeenCalledTimes(4));
+					expect(effect1Fn).toHaveBeenLastCalledWith(2);
+					await vi.waitFor(() => expect(effect2Fn).toHaveBeenCalledTimes(4));
+					expect(effect2Fn).toHaveBeenLastCalledWith(3);
+				});
+
+				it("should call effect when item is replaced", async () => {
+					const $array = array<number>([0, 1, 2]);
+					const effectFn = vi.fn();
+					const effect0Fn = vi.fn();
+
+					effect((t) => effectFn($array.get(t)));
+					effect((t) => effect0Fn($array.get(t)[0]));
+
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+					expect(effectFn).toHaveBeenLastCalledWith([0, 1, 2]);
+					await vi.waitFor(() => expect(effect0Fn).toHaveBeenCalledTimes(1));
+					expect(effect0Fn).toHaveBeenLastCalledWith(0);
+
+					$array.update(0, 3);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+					expect(effectFn).toHaveBeenLastCalledWith([3, 1, 2]);
+					await vi.waitFor(() => expect(effect0Fn).toHaveBeenCalledTimes(2));
+					expect(effect0Fn).toHaveBeenLastCalledWith(3);
+
+					$array.shift();
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+					expect(effectFn).toHaveBeenLastCalledWith([1, 2]);
+					await vi.waitFor(() => expect(effect0Fn).toHaveBeenCalledTimes(3));
+					expect(effect0Fn).toHaveBeenLastCalledWith(1);
+
+					$array.unshift(4);
+					await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(4));
+					expect(effectFn).toHaveBeenLastCalledWith([4, 1, 2]);
+					await vi.waitFor(() => expect(effect0Fn).toHaveBeenCalledTimes(4));
+					expect(effect0Fn).toHaveBeenLastCalledWith(4);
+				});
+			});
+
+			describe("lastAction reactivity", () => {
+				describe("set action", () => {
+					it("should call effect when $lastAction is updated with set action", async () => {
+						const $array = array([0, 1, 2]);
+						const effectFn = vi.fn();
+						effect((t) => effectFn($array.$lastAction.get(t)));
+
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "set",
+							items: [0, 1, 2],
+						});
+
+						await $array.set([1, 2, 3]);
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "set",
+							items: [1, 2, 3],
+						});
+					});
+				});
+
+				describe("setItem action", () => {
+					it("should call effect when $lastAction is updated with setItem action", async () => {
+						const $array = array([0, 1, 2]);
+						const effectFn = vi.fn();
+						effect((t) => effectFn($array.$lastAction.get(t)));
+
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+
+						$array.update(1, 10);
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "update",
+							index: 1,
+							item: 10,
+						});
+					});
+				});
+
+				describe("push action", () => {
+					it("should call effect when $lastAction is updated with push action", async () => {
+						const $array = array<number>();
+						const effectFn = vi.fn();
+						effect((t) => effectFn($array.$lastAction.get(t)));
+
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "set",
+							items: [],
+						});
+
+						$array.push(0);
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "push",
+							item: 0,
+						});
+
+						$array.push(1);
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "push",
+							item: 1,
+						});
+					});
+				});
+
+				describe("pop action", () => {
+					it("should call effect when $lastAction is updated with pop action", async () => {
+						const $array = array<number>([0, 1, 2]);
+						const effectFn = vi.fn();
+						effect((t) => effectFn($array.$lastAction.get(t)));
+
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+
+						$array.pop();
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "pop",
+						});
+
+						$array.pop();
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "pop",
+						});
+					});
+				});
+
+				describe("unshift action", () => {
+					it("should call effect when $lastAction is updated with unshift action", async () => {
+						const $array = array<number>();
+						const effectFn = vi.fn();
+						effect((t) => effectFn($array.$lastAction.get(t)));
+
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "set",
+							items: [],
+						});
+
+						$array.unshift(0);
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "unshift",
+							item: 0,
+						});
+
+						$array.unshift(1);
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "unshift",
+							item: 1,
+						});
+					});
+				});
+
+				describe("shift action", () => {
+					it("should call effect when $lastAction is updated with shift action", async () => {
+						const $array = array<number>([0, 1, 2]);
+						const effectFn = vi.fn();
+						effect((t) => effectFn($array.$lastAction.get(t)));
+
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+
+						$array.shift();
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "shift",
+						});
+
+						$array.shift();
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "shift",
+						});
+					});
+				});
+
+				describe("splice action", () => {
+					it("should call effect when $lastAction is updated with splice action", async () => {
+						const $array = array<number>([0, 1, 2, 3, 4]);
+						const effectFn = vi.fn();
+						effect((t) => effectFn($array.$lastAction.get(t)));
+
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "set",
+							items: [0, 1, 2, 3, 4],
+						});
+
+						$array.splice(1, 2);
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "splice",
+							start: 1,
+							deleteCount: 2,
+							items: [],
+						});
+
+						$array.splice(1, 0, 1, 2);
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(3));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "splice",
+							start: 1,
+							deleteCount: 0,
+							items: [1, 2],
+						});
+					});
+				});
+
+				describe("clear action", () => {
+					it("should call effect when $lastAction is updated with clear action", async () => {
+						const $array = array<number>([0, 1, 2, 3, 4]);
+						const effectFn = vi.fn();
+						effect((t) => effectFn($array.$lastAction.get(t)));
+
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(1));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "set",
+							items: [0, 1, 2, 3, 4],
+						});
+
+						$array.clear();
+						await vi.waitFor(() => expect(effectFn).toHaveBeenCalledTimes(2));
+						expect(effectFn).toHaveBeenLastCalledWith({
+							type: "clear",
+						});
+					});
+				});
+			});
+		});
+	});
+});