import { cleanup, render, screen } from '@testing-library/svelte';
import { afterEach, describe, expect, it } from 'vitest';

import FloatingContentHarness from './floating-content.test.svelte';

afterEach(cleanup);

describe('floating content primitives', () => {
  it('bounds select menus to the available viewport with an internal scroll region', async () => {
    render(FloatingContentHarness, { kind: 'select' });

    const content = await screen.findByRole('listbox');
    const viewport = content.querySelector('[data-select-viewport]');
    expect(content.className).toContain('var(--bits-select-content-available-height)');
    expect(viewport?.className).toContain('overscroll-contain');
    expect(content.closest('[data-bits-floating-content-wrapper]')?.getAttribute('dir')).toBe('rtl');
  });

  it('bounds popovers and menus to their collision-aware available height', async () => {
    const popoverView = render(FloatingContentHarness, { kind: 'popover' });
    const popover = screen.getByText('محتوای جزئیات');
    expect(popover.className).toContain('var(--bits-popover-content-available-height)');
    expect(popover.closest('[data-bits-floating-content-wrapper]')?.getAttribute('dir')).toBe('rtl');

    popoverView.unmount();

    render(FloatingContentHarness, { kind: 'menu' });
    const menu = screen.getByRole('menu');
    expect(menu.className).toContain('var(--bits-dropdown-menu-content-available-height)');
    expect(menu.className).toContain('overscroll-contain');
    expect(menu.closest('[data-bits-floating-content-wrapper]')?.getAttribute('dir')).toBe('rtl');
  });
});