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

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

		component App() {
			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');
	});
});