ripple 0.2.115 → 0.2.118

package/tests/client/array.test.ripple

@@ -1,1455 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mount, flushSync, effect, untrack, TrackedArray, track } from 'ripple';
-import { MAX_ARRAY_LENGTH } from '../../src/runtime/internal/client/constants.js';
-
-describe('TrackedArray', () => {
-	let container;
-
-	function render(component) {
-		mount(component, {
-			target: container
-		});
-	}
-
-	beforeEach(() => {
-		container = document.createElement('div');
-		document.body.appendChild(container);
-	});
-
-	afterEach(() => {
-		document.body.removeChild(container);
-		container = null;
-	});
-
-	it('handles direct assignment and length tracking', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-
-			<button onClick={() => items[items.length] = items.length + 1}>{'increment'}</button>
-
-			<Child items={items} />
-		}
-
-		component Child({ items }) {
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{items.length}</pre>
-		}
-
-			render(ArrayTest);
-
-			const button = container.querySelector('button');
-
-			button.click();
-			flushSync();
-
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
-
-			button.click();
-			flushSync();
-
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
-	});
-
-	it('handles push and pop operations with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-			let lastItem = track(() => items[items.length - 1]);
-
-			<button onClick={() => items.push(4)}>{'push'}</button>
-			<button onClick={() => items.pop()}>{'pop'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{items.length}</pre>
-			<pre>{@lastItem}</pre>
-		}
-
-    	render(ArrayTest);
-
-		const pushButton = container.querySelectorAll('button')[0];
-		const popButton = container.querySelectorAll('button')[1];
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
-
-		// Test push operation
-		pushButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('4');
-
-		// Test pop operation
-		popButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
-  });
-
-	it('handles shift and unshift operations with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(2, 3, 4);
-			let firstItem = track(() => items[0]);
-
-			<button onClick={() => items.unshift(1)}>{'unshift'}</button>
-			<button onClick={() => items.shift()}>{'shift'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{items.length}</pre>
-			<pre>{@firstItem}</pre>
-		}
-
-		render(ArrayTest);
-
-		const unshiftButton = container.querySelectorAll('button')[0];
-		const shiftButton = container.querySelectorAll('button')[1];
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,3,4]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('2');
-
-		// Test unshift operation
-		unshiftButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('1');
-
-		// Test shift operation
-		shiftButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,3,4]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('2');
-	});
-
-	it('handles splice operation with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-			let middleItem = track(() => items[2]);
-
-			<button onClick={() => items.splice(1, 2, 'a', 'b')}>{'splice'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{items.length}</pre>
-			<pre>{@middleItem}</pre>
-		}
-
-		render(ArrayTest);
-
-		const spliceButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
-
-		// Test splice operation
-		spliceButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,"a","b",4,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('b');
-	});
-
-	it('handles fill operation with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-			let secondItem = track(() => items[1]);
-
-			<button onClick={() => items.fill(0, 1, 4)}>{'fill'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@secondItem}</pre>
-		}
-
-		render(ArrayTest);
-
-		const fillButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
-
-		// Test fill operation
-		fillButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,0,0,0,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('0');
-	});
-
-	it('handles reverse operation with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-			let firstItem = track(() => items[0]);
-			let lastItem = track(() => items[4]);
-
-			<button onClick={() => items.reverse()}>{'reverse'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@firstItem}</pre>
-			<pre>{@lastItem}</pre>
-		}
-
-		render(ArrayTest);
-
-		const reverseButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('5');
-
-		// Test reverse operation
-		reverseButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[5,4,3,2,1]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('1');
-	});
-
-	it('handles sort operation with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(5, 3, 1, 4, 2);
-			let secondItem = track(() => items[1]);
-
-			<button onClick={() => items.sort()}>{'sort ascending'}</button>
-			<button onClick={() => items.sort((a, b) => b - a)}>{'sort descending'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@secondItem}</pre>
-		}
-
-		render(ArrayTest);
-
-		const sortAscButton = container.querySelectorAll('button')[0];
-		const sortDescButton = container.querySelectorAll('button')[1];
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[5,3,1,4,2]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
-
-		// Test sort ascending
-		sortAscButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
-
-		// Test sort descending
-		sortDescButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[5,4,3,2,1]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
-	});
-
-	it('handles array methods that return values (map, filter, etc.)', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-			let doubled = track(() => items.map(x => x * 2));
-			let filtered = track(() => items.filter(x => (x % 2) === 0));
-			let reduced = track(() => items.reduce((acc, val) => acc + val, 0));
-			let includes = track(() => items.includes(3));
-
-			<button onClick={() => items.push(6)}>{'add item'}</button>
-			<pre>{JSON.stringify(@doubled)}</pre>
-			<pre>{JSON.stringify(@filtered)}</pre>
-			<pre>{@reduced}</pre>
-			<pre>{@includes.toString()}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,4,6,8,10]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[2,4]');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('15');
-		expect(container.querySelectorAll('pre')[3].textContent).toBe('true');
-
-		// Test reactivity with these methods
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,4,6,8,10,12]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[2,4,6]');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('21');
-		expect(container.querySelectorAll('pre')[3].textContent).toBe('true');
-	});
-
-	it('handles array modification through forEach()', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-
-			<button onClick={() => items.forEach((item, i) => items[i] = item * 2)}>{'double all'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const doubleButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelector('pre').textContent).toBe('[1,2,3]');
-
-		// Test iteration with side effects
-		doubleButton.click();
-		flushSync();
-
-		expect(container.querySelector('pre').textContent).toBe('[2,4,6]');
-	});
-
-	it('handles entries method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray('a', 'b', 'c');
-			let entries = track(() => Array.from(items.entries()));
-
-			<button onClick={() => items.push('d')}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@entries)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c"]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[[0,"a"],[1,"b"],[2,"c"]]');
-
-		// Test adding an item
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c","d"]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[[0,"a"],[1,"b"],[2,"c"],[3,"d"]]');
-	});
-
-	it('handles concat method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-			let concatenated = track(() => items.concat([4, 5], 6, [7, 8]));
-
-			<button onClick={() => items.push(3.5)}>{'add to original'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@concatenated)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,4,5,6,7,8]');
-
-		// Test adding to original array
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,3.5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,3.5,4,5,6,7,8]');
-	});
-
-	it('handles array modification through iterator', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-
-			<button onClick={() => items.forEach((item, i) => items[i] = item * 2)}>{'double all'}</button>
-
-			for (const item of items) {
-				<pre>{item}</pre>
-			}
-		}
-
-		render(ArrayTest);
-
-		const doubleButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('1');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
-
-		// Test iteration with side effects
-		doubleButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('2');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('6');
-	});
-
-	it('handles length property for reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-			let length = track(() => items.length);
-
-			<button onClick={() => items.length = 5}>{'expand'}</button>
-			<button onClick={() => items.length = 2}>{'shrink'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@length}</pre>
-		}
-
-		render(ArrayTest);
-
-		const expandButton = container.querySelectorAll('button')[0];
-		const shrinkButton = container.querySelectorAll('button')[1];
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
-
-		// Test expand
-		expandButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,null,null]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
-
-		// Test shrink
-		shrinkButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
-	});
-
-	it('handles static methods - from and of', () => {
-		component ArrayTest() {
-			let itemsFrom = TrackedArray.from([1, 2, 3], x => x * 2);
-			let itemsOf = TrackedArray.of(4, 5, 6);
-
-			<button onClick={() => itemsFrom.push(8)}>{'add to from'}</button>
-			<button onClick={() => itemsOf.push(7)}>{'add to of'}</button>
-			<pre>{JSON.stringify(itemsFrom)}</pre>
-			<pre>{JSON.stringify(itemsOf)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addFromButton = container.querySelectorAll('button')[0];
-		const addOfButton = container.querySelectorAll('button')[1];
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,4,6]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[4,5,6]');
-
-		// Test adding to from-created array
-		addFromButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[2,4,6,8]');
-
-		// Test adding to of-created array
-		addOfButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[4,5,6,7]');
-	});
-
-	it('handles toJSON method', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-
-			<button onClick={() => items.push(4)}>{'add'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state - toJSON is implicitly called by JSON.stringify
-		expect(container.querySelector('pre').textContent).toBe('[1,2,3]');
-
-		// Test reactivity with JSON serialization
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelector('pre').textContent).toBe('[1,2,3,4]');
-	});
-
-	it('handles array index access with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(10, 20, 30);
-			let firstItem = track(() => items[0]);
-			let secondItem = track(() => items[1]);
-
-			<button onClick={() => items[0] = 100}>{'change first'}</button>
-			<pre>{@firstItem}</pre>
-			<pre>{@secondItem}</pre>
-			<pre>{items[0]}</pre>
-			<pre>{items[1]}</pre>
-		}
-
-		render(ArrayTest);
-
-		const changeButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('10');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('20');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('10');
-		expect(container.querySelectorAll('pre')[3].textContent).toBe('20');
-
-		// Test changing array element directly
-		changeButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('100');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('20');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('100');
-		expect(container.querySelectorAll('pre')[3].textContent).toBe('20');
-	});
-
-	it('handles array slice method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-			let sliced = track(() => items.slice(1, 4));
-
-			<button onClick={() => items[2] = 30}>{'change middle'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@sliced)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const changeButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[2,3,4]');
-
-		// Test reactivity with slice
-		changeButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,30,4,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[2,30,4]');
-	});
-
-	it('handles find and findIndex methods with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(5, 10, 15, 20, 25);
-			let found = track(() => items.find(x => x > 12));
-			let foundIndex = track(() => items.findIndex(x => x > 12));
-
-			<button onClick={() => {
-				items[1] = 13;
-				items[0] = 6;
-			}}>{'update values'}</button>
-			<pre>{@found}</pre>
-			<pre>{@foundIndex}</pre>
-		}
-
-		render(ArrayTest);
-
-		const updateButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('15');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
-
-		// Test reactivity with find methods
-		updateButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('13');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
-	});
-
-	// Additional tests for TrackedArray methods
-
-	it('handles findLast and findLastIndex methods with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(5, 15, 10, 20, 15);
-			let foundLast = track(() => items.findLast(x => x === 15));
-			let foundLastIndex = track(() => items.findLastIndex(x => x === 15));
-
-			<button onClick={() => {
-				items[1] = 25;
-				items[4] = 15;
-			}}>{'update values'}</button>
-			<pre>{@foundLast}</pre>
-			<pre>{@foundLastIndex}</pre>
-		}
-
-		render(ArrayTest);
-
-		const updateButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('15');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
-
-		// Test reactivity with findLast methods
-		updateButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('15');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
-	});
-
-	it('handles every method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(2, 4, 6, 8);
-			let allEven = track(() => items.every(x => x % 2 === 0));
-
-			<button onClick={() => items.push(3)}>{'add odd'}</button>
-			<button onClick={() => {
-				items.pop();
-				items.push(10);
-			}}>{'ensure all even'}</button>
-			<pre>{@allEven.toString()}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addOddButton = container.querySelectorAll('button')[0];
-		const makeEvenButton = container.querySelectorAll('button')[1];
-
-		// Initial state
-		expect(container.querySelector('pre').textContent).toBe('true');
-
-		// Test adding an odd number
-		addOddButton.click();
-		flushSync();
-		expect(container.querySelector('pre').textContent).toBe('false');
-
-		// Test fixing the array to all even
-		makeEvenButton.click();
-		flushSync();
-		expect(container.querySelector('pre').textContent).toBe('true');
-	});
-
-	it('handles flat method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray([1, 2], [3, 4], 5);
-			let flattened = track(() => items.flat());
-
-			<button onClick={() => items[0] = [6, 7, 8]}>{'change nested'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@flattened)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const changeButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[[1,2],[3,4],5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,4,5]');
-
-		// Test changing a nested array
-		changeButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[[6,7,8],[3,4],5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[6,7,8,3,4,5]');
-	});
-
-	it('handles flatMap method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-			let flatMapped = track(() => items.flatMap(x => [x, x * 2]));
-
-			<button onClick={() => items.push(4)}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@flatMapped)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,2,4,3,6]');
-
-		// Test adding an item
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,2,4,3,6,4,8]');
-	});
-
-	it('handles join method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray('apple', 'banana', 'cherry');
-			let joined = track(() => items.join(', '));
-
-			<button onClick={() => items.push('date')}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@joined}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('["apple","banana","cherry"]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('apple, banana, cherry');
-
-		// Test adding an item
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('["apple","banana","cherry","date"]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('apple, banana, cherry, date');
-	});
-
-	it('handles keys method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray('a', 'b', 'c');
-			let keys = track(() => Array.from(items.keys()));
-
-			<button onClick={() => items.push('d')}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@keys)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c"]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[0,1,2]');
-
-		// Test adding an item
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c","d"]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[0,1,2,3]');
-	});
-
-	it('handles lastIndexOf method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 2, 1);
-			let lastIndex = track(() => items.lastIndexOf(2));
-
-			<button onClick={() => {
-				items.push(2);
-			}}>{'add duplicate'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@lastIndex}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,2,1]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
-
-		// Test adding a duplicate
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,2,1,2]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
-	});
-
-	it('handles reduceRight method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray('a', 'b', 'c');
-			let reduced = track(() => items.reduceRight((acc, val) => acc + val, ''));
-
-			<button onClick={() => items.push('d')}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@reduced}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c"]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('cba');
-
-		// Test adding an item
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c","d"]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('dcba');
-	});
-
-	it('handles some method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 3, 5, 7);
-			let hasEven = track(() => items.some(x => x % 2 === 0));
-
-			<button onClick={() => items.push(2)}>{'add even'}</button>
-			<button onClick={() => {
-				items.pop();
-				items.push(9);
-			}}>{'ensure all odd'}</button>
-			<pre>{@hasEven.toString()}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addEvenButton = container.querySelectorAll('button')[0];
-		const makeOddButton = container.querySelectorAll('button')[1];
-
-		// Initial state
-		expect(container.querySelector('pre').textContent).toBe('false');
-
-		// Test adding an even number
-		addEvenButton.click();
-		flushSync();
-		expect(container.querySelector('pre').textContent).toBe('true');
-
-		// Test fixing the array to all odd
-		makeOddButton.click();
-		flushSync();
-		expect(container.querySelector('pre').textContent).toBe('false');
-	});
-
-	it('handles toLocaleString method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1000, 2000, 3000);
-			let localized = track(() => items.toLocaleString('en-US'));
-
-			<button onClick={() => {items[2] = 4000}}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@localized}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1000,2000,3000]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('1,000,2,000,3,000');
-
-		// Test adding an item
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1000,2000,4000]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('1,000,2,000,4,000');
-	});
-
-	it('handles toReversed method with reactivity', (context) => {
-		if (!('toReversed' in Array.prototype)) {
-			context.skip();
-		}
-
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4);
-			let reversed = track(() => items.toReversed());
-
-			<button onClick={() => items.push(5)}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@reversed)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[4,3,2,1]');
-
-		// Test adding an item
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[5,4,3,2,1]');
-	});
-
-	it('handles toSorted method with reactivity', (context) => {
-		if (!('toSorted' in Array.prototype)) {
-			context.skip();
-		}
-
-		component ArrayTest() {
-			let items = new TrackedArray(3, 1, 4, 2);
-			let sorted = track(() => items.toSorted());
-
-			<button onClick={() => items.push(0)}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@sorted)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[3,1,4,2]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,4]');
-
-		// Test adding an item
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[3,1,4,2,0]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[0,1,2,3,4]');
-	});
-
-	it('handles toSpliced method with reactivity', (context) => {
-		if (!('toSpliced' in Array.prototype)) {
-			context.skip();
-		}
-
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-			let spliced = track(() => items.toSpliced(1, 2, 'a', 'b'));
-
-			<button onClick={() => items[2] = 30}>{'change item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@spliced)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const changeButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,"a","b",4,5]');
-
-		// Test changing an item
-		changeButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,30,4,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,"a","b",4,5]');
-	});
-
-	it('handles toString method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-			let string = track(() => items.toString());
-
-			<button onClick={() => items.push(4)}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@string}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('1,2,3');
-
-		// Test adding an item
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('1,2,3,4');
-	});
-
-	it('handles Symbol.iterator with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3);
-			let sum = track(0);
-
-			effect(() => {
-				@sum = 0;
-				for (const item of items) {
-					untrack(() => {
-						@sum += item;
-					});
-				}
-			});
-
-			<button onClick={() => items.push(4)}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@sum}</pre>
-		}
-
-		render(ArrayTest);
-		flushSync();
-
-		const addButton = container.querySelectorAll('button')[0];
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('6');
-
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('10');
-	});
-
-	it('handles values method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray('a', 'b', 'c');
-			let values = track(() => Array.from(items.values()));
-
-			<button onClick={() => items.push('d')}>{'add item'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@values)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const addButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c"]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('["a","b","c"]');
-
-		// Test adding an item
-		addButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('["a","b","c","d"]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('["a","b","c","d"]');
-	});
-
-	it('handles with method with reactivity', (context) => {
-		if (!('with' in Array.prototype)) {
-			context.skip();
-		}
-
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4);
-			let withReplaced = track(() => items.with(2, 30));
-
-			<button onClick={() => items[2] = 50}>{'change original'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{JSON.stringify(@withReplaced)}</pre>
-		}
-
-		render(ArrayTest);
-
-		const changeButton = container.querySelector('button');
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,30,4]');
-
-		// Test changing the original array
-		changeButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,50,4]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,30,4]');
-	});
-
-	it('handles at method with reactivity', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(10, 20, 30, 40, 50);
-			let atIndex2 = track(() => items.at(2));
-			let atNegative1 = track(() => items.at(-1));
-			let atNegative2 = track(() => items.at(-2));
-
-			<button onClick={() => items[2] = 300}>{'change index 2'}</button>
-			<button onClick={() => items[items.length - 1] = 500}>{'change last'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{@atIndex2}</pre>
-			<pre>{@atNegative1}</pre>
-			<pre>{@atNegative2}</pre>
-		}
-
-		render(ArrayTest);
-
-		const changeIndex2Button = container.querySelectorAll('button')[0];
-		const changeLastButton = container.querySelectorAll('button')[1];
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,20,30,40,50]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('30');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('50');
-		expect(container.querySelectorAll('pre')[3].textContent).toBe('40');
-
-		// Test changing index 2
-		changeIndex2Button.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,20,300,40,50]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('300');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('50');
-		expect(container.querySelectorAll('pre')[3].textContent).toBe('40');
-
-		// Test changing last item
-		changeLastButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[10,20,300,40,500]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('300');
-		expect(container.querySelectorAll('pre')[2].textContent).toBe('500');
-		expect(container.querySelectorAll('pre')[3].textContent).toBe('40');
-	});
-
-	it('handles setting length property and resizing the array', () => {
-		component ArrayTest() {
-			let items = new TrackedArray(1, 2, 3, 4, 5);
-
-			<button onClick={() => items.length = 3}>{'truncate'}</button>
-			<button onClick={() => items.length = 7}>{'expand'}</button>
-			<pre>{JSON.stringify(items)}</pre>
-			<pre>{items.length}</pre>
-		}
-
-		render(ArrayTest);
-
-		const truncateButton = container.querySelectorAll('button')[0];
-		const expandButton = container.querySelectorAll('button')[1];
-
-		// Initial state
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('5');
-
-		// Test truncating
-		truncateButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
-
-		// Test expanding
-		expandButton.click();
-		flushSync();
-
-		expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,null,null,null,null]');
-		expect(container.querySelectorAll('pre')[1].textContent).toBe('7');
-	});
-
-	('fromAsync' in Array.prototype ? describe : describe.skip)('TrackedArray fromAsync', async () => {
-		it('handles static fromAsync method with reactivity', async () => {
-			component Parent() {
-				try {
-					<ArrayTest />
-				} pending {
-					<div>{'Loading placeholder...'}</div>
-				}
-			}
-
-			component ArrayTest() {
-				let items = await TrackedArray.fromAsync([1, 2, 3]);
-
-				<button onClick={() => {
-					if (items) items.push(4);
-				}}>{'add item'}</button>
-
-				<pre>{JSON.stringify(items)}</pre>
-			}
-
-			render(Parent);
-
-			await new Promise(resolve => setTimeout(resolve, 0));
-			flushSync();
-
-			const addButton = container.querySelector('button');
-
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3]');
-
-			// Test adding an item to the async-created array
-			addButton.click();
-			flushSync();
-
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('[1,2,3,4]');
-		});
-
-		it('handles static fromAsync method with mapping function', async () => {
-			component Parent() {
-				try {
-					<ArrayTest />
-				} pending {
-					<div>{'Loading placeholder...'}</div>
-				}
-			}
-
-			component ArrayTest() {
-				let items = await TrackedArray.fromAsync(
-					[1, 2, 3],
-					x => x * 2
-				);
-
-				<button onClick={() => {
-					if (items) items.push(8);
-				}}>{'add item'}</button>
-				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
-			}
-
-			render(Parent);
-
-			await new Promise(resolve => setTimeout(resolve, 0));
-			flushSync();
-
-			const addButton = container.querySelector('button');
-
-			expect(container.querySelector('pre').textContent).toBe('[2,4,6]');
-
-			addButton.click();
-			flushSync();
-
-			expect(container.querySelector('pre').textContent).toBe('[2,4,6,8]');
-		});
-
-		// TODO: Fix this test case, needs some async love around try statements being using in a not template way
-		it.skip('handles error in fromAsync method', async () => {
-			component Parent() {
-				try {
-					<ArrayTest />
-				} pending {
-					<div>{'Loading placeholder...'}</div>
-				}
-			}
-
-			component ArrayTest() {
-				let items = null;
-				let error = null;
-
-				// try {
-				// 	items = await TrackedArray.fromAsync(Promise.reject(new Error('Async error')));
-				// } catch (e) {
-				// }
-			}
-
-			component ArrayTest() {
-				let items = null;
-				let error = null;
-
-				try {
-					// items = await TrackedArray.fromAsync(Promise.reject(new Error('Async error')));
-				} catch (e) {
-					error = e.message;
-				}
-
-				<pre>{error ? 'Error: ' + error : 'No error'}</pre>
-				<pre>{items ? JSON.stringify(items) : 'No items'}</pre>
-			}
-
-			render(Parent);
-
-			await new Promise(resolve => setTimeout(resolve, 0));
-			flushSync();
-
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('Error: Async error');
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('No items');
-		});
-	});
-
-	describe('TrackedArray copyWithin', () => {
-		it('handles copyWithin operation with reactivity', () => {
-			component ArrayTest() {
-				let items = new TrackedArray(1, 2, 3, 4, 5);
-				let firstItem = track(() => items[0]);
-				let thirdItem = track(() => items[2]);
-				let fourthItem = track(() => items[3]);
-
-				<button onClick={() => items.copyWithin(0, 3)}>{'copy end to start'}</button>
-				<button onClick={() => items.copyWithin(2, 0, 2)}>{'copy start to middle'}</button>
-				<pre>{JSON.stringify(items)}</pre>
-				<pre>{@firstItem}</pre>
-				<pre>{@thirdItem}</pre>
-				<pre>{@fourthItem}</pre>
-			}
-
-			render(ArrayTest);
-
-			const copyEndToStartButton = container.querySelectorAll('button')[0];
-			const copyStartToMiddleButton = container.querySelectorAll('button')[1];
-
-			// Initial state
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
-			expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
-			expect(container.querySelectorAll('pre')[3].textContent).toBe('4');
-
-			// Test copyWithin from end to start
-			copyEndToStartButton.click();
-			flushSync();
-
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[4,5,3,4,5]');
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
-			expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
-			expect(container.querySelectorAll('pre')[3].textContent).toBe('4');
-
-			// Test copyWithin from start to middle
-			copyStartToMiddleButton.click();
-			flushSync();
-
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[4,5,4,5,5]');
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
-			expect(container.querySelectorAll('pre')[2].textContent).toBe('4');
-			expect(container.querySelectorAll('pre')[3].textContent).toBe('5');
-		});
-
-		it('handles copyWithin with negative indexes and reactivity', () => {
-			component ArrayTest() {
-				let items = new TrackedArray(1, 2, 3, 4, 5);
-				let secondItem = track(() => items[1]);
-				let thirdItem = track(() => items[2]);
-
-				<button onClick={() => items.copyWithin(-4, -2)}>{'copy with negative indexes'}</button>
-				<pre>{JSON.stringify(items)}</pre>
-				<pre>{@secondItem}</pre>
-				<pre>{@thirdItem}</pre>
-			}
-
-			render(ArrayTest);
-
-			const copyButton = container.querySelector('button');
-
-			// Initial state
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('2');
-			expect(container.querySelectorAll('pre')[2].textContent).toBe('3');
-
-			// Test copyWithin with negative indexes
-			copyButton.click();
-			flushSync();
-
-			// copyWithin(-4, -2) should copy [4,5] to positions [1,2]
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,4,5,4,5]');
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('4');
-			expect(container.querySelectorAll('pre')[2].textContent).toBe('5');
-		});
-
-		it('handles copyWithin with overlapping ranges', () => {
-			component ArrayTest() {
-				let items = new TrackedArray(1, 2, 3, 4, 5);
-				let entries = track(() => Array.from(items.entries()));
-
-				<button onClick={() => items.copyWithin(2, 1, 4)}>{'copy with overlap'}</button>
-				<pre>{JSON.stringify(items)}</pre>
-
-				for (const [i, value] of @entries) {
-					<pre>{`items[${i}]: ${value}`}</pre>
-				}
-			}
-
-			render(ArrayTest);
-
-			const copyButton = container.querySelector('button');
-
-			// Initial state
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,3,4,5]');
-
-			// Test values from reactive bindings
-			for (let i = 0; i < 5; i++) {
-				expect(container.querySelectorAll('pre')[i + 1].textContent).toBe(`items[${i}]: ${i + 1}`);
-			}
-
-			// Test copyWithin with overlapping ranges
-			copyButton.click();
-			flushSync();
-
-			// copyWithin(2, 1, 4) should copy [2,3,4] to positions [2,3,4]
-			// resulting in [1,2,2,3,4]
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[1,2,2,3,4]');
-
-			// Test that reactive bindings updated
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('items[0]: 1');
-			expect(container.querySelectorAll('pre')[2].textContent).toBe('items[1]: 2');
-			expect(container.querySelectorAll('pre')[3].textContent).toBe('items[2]: 2');
-			expect(container.querySelectorAll('pre')[4].textContent).toBe('items[3]: 3');
-			expect(container.querySelectorAll('pre')[5].textContent).toBe('items[4]: 4');
-		});
-	});
-
-	describe('Creates TrackedArray with a single element', () => {
-		it('specifies int', () => {
-			component ArrayTest() {
-				let items = new TrackedArray(3);
-				<pre>{JSON.stringify(items)}</pre>
-				<pre>{items.length}</pre>
-			}
-
-			render(ArrayTest);
-
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[null,null,null]');
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('3');
-		});
-
-		it('errors on exceeding max array size', () => {
-			component ArrayTest() {
-				let error = null;
-
-				try {
-					new TrackedArray(MAX_ARRAY_LENGTH + 1);
-				} catch (e) {
-					error = e.message;
-				}
-
-				<pre>{error}</pre>
-			}
-
-			render(ArrayTest);
-
-			expect(container.querySelector('pre').textContent).toBe('Invalid array length');
-		});
-
-		it('specifies int using static from method', () => {
-			component ArrayTest() {
-				let items = TrackedArray.from([4]);
-				<pre>{JSON.stringify(items)}</pre>
-				<pre>{items.length}</pre>
-			}
-
-			render(ArrayTest);
-
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[4]');
-			// expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
-		});
-
-		it('specifies int using static of method', () => {
-			component ArrayTest() {
-				let items = TrackedArray.of(5);
-				<pre>{JSON.stringify(items)}</pre>
-				<pre>{items.length}</pre>
-			}
-
-			render(ArrayTest);
-
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[5]');
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
-		});
-
-		('fromAsync' in Array.prototype ? it : it.skip)('specifies int using static fromAsync method', async () => {
-			component Parent() {
-				try {
-					<ArrayTest />
-				} pending {
-					<div>{'Loading placeholder...'}</div>
-				}
-			}
-
-			component ArrayTest() {
-				const items = await TrackedArray.fromAsync([6]);
-
-				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
-				<pre>{items ? items.length : ''}</pre>
-			}
-
-			render(Parent);
-
-			await new Promise(resolve => setTimeout(resolve, 0));
-			flushSync();
-
-			expect(container.querySelectorAll('pre')[0].textContent).toBe('[6]');
-			expect(container.querySelectorAll('pre')[1].textContent).toBe('1');
-		});
-	});
-});
-
-