// @vitest-environment jsdom
/**
 * Smoke test: proves the jsdom + Testing Library stack actually runs in this
 * environment (render → query → jest-dom matchers → user-event → cleanup).
 * If this passes, component tests are viable here. Delete-able once real
 * component tests exist, but kept as a guard for the test infrastructure.
 */
import './dom-setup';
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useState } from 'react';

function Counter({ label }: { label: string }) {
  const [n, setN] = useState(0);
  return (
    <div>
      <h1>{label}</h1>
      <p data-testid="count">count: {n}</p>
      <button onClick={() => setN((v) => v + 1)}>increment</button>
    </div>
  );
}

describe('DOM test infrastructure smoke', () => {
  it('renders a component and matches jest-dom matchers', () => {
    render(<Counter label="hello" />);
    expect(screen.getByRole('heading', { name: 'hello' })).toBeInTheDocument();
    expect(screen.getByTestId('count')).toHaveTextContent('count: 0');
  });

  it('handles user-event interaction and re-render', async () => {
    const user = userEvent.setup();
    render(<Counter label="x" />);
    await user.click(screen.getByRole('button', { name: 'increment' }));
    await user.click(screen.getByRole('button', { name: 'increment' }));
    expect(screen.getByTestId('count')).toHaveTextContent('count: 2');
  });

  it('cleanup unmounts between tests (no leaked DOM)', () => {
    // Previous tests' DOM must be gone thanks to afterEach(cleanup).
    expect(screen.queryByRole('button', { name: 'increment' })).toBeNull();
    render(<Counter label="fresh" />);
    expect(screen.getAllByRole('heading')).toHaveLength(1);
  });
});
