import { describe, it, expect } from 'vitest';
import { screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { renderRoute } from './render';

describe('Watchlists page', () => {
  it('renders page title', async () => {
    renderRoute('/watchlists');
    await waitFor(() => {
      expect(screen.getByRole('heading', { name: 'Watchlists' })).toBeInTheDocument();
    });
  });

  it('renders New Watchlist button', async () => {
    renderRoute('/watchlists');
    await waitFor(() => {
      expect(screen.getByText('New Watchlist')).toBeInTheDocument();
    });
  });

  it('shows create form on button click', async () => {
    const user = userEvent.setup();
    renderRoute('/watchlists');
    await waitFor(() => {
      expect(screen.getByText('New Watchlist')).toBeInTheDocument();
    });
    await user.click(screen.getByText('New Watchlist'));
    await waitFor(() => {
      expect(screen.getByLabelText('Watchlist name')).toBeInTheDocument();
    });
    expect(screen.getByLabelText('Watchlist description')).toBeInTheDocument();
    expect(screen.getByText('Create')).toBeInTheDocument();
    expect(screen.getByText('Cancel')).toBeInTheDocument();
  });

  it('cancel closes the create form', async () => {
    const user = userEvent.setup();
    renderRoute('/watchlists');
    await waitFor(() => {
      expect(screen.getByText('New Watchlist')).toBeInTheDocument();
    });
    await user.click(screen.getByText('New Watchlist'));
    await waitFor(() => {
      expect(screen.getByText('Cancel')).toBeInTheDocument();
    });
    await user.click(screen.getByText('Cancel'));
    await waitFor(() => {
      expect(screen.queryByLabelText('Watchlist name')).not.toBeInTheDocument();
    });
  });
});
