import { describe, expect, it } from 'vitest';
import { flushSync, track } from 'ripple';

describe('lazy array destructuring', () => {
	it('updates unknown lazy array bindings through tracked values', () => {
		function Child({ tr: &[count, tr] }) {
			return <>
				<button
					onClick={() => {
						count++;
						tr[0]++;
					}}
				>
					{count}
				</button>
			</>;
		}

		function App() {
			return <>
				let tracked = track(0);
				<Child tr={tracked} />
			</>;
		}

		render(App);

		const button = container.querySelector('button');
		expect(button?.textContent).toBe('0');

		flushSync(() => {
			button?.click();
		});

		expect(button?.textContent).toBe('2');
	});
});