import { cleanup, render, screen } from '@testing-library/react';
import { afterEach, describe, expect, it } from 'vitest';
import {
  Dialog,
  DialogContent,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Sheet,
  SheetContent,
  SheetTitle,
} from '@/components/ui/sheet';

function findOpenOverlay() {
  return Array.from(document.querySelectorAll<HTMLElement>('[data-state="open"]'))
    .find((element) => element.classList.contains('z-[100]'));
}

describe('modal layering', () => {
  afterEach(() => {
    cleanup();
  });

  it('places dialog content above the workspace sidebar layer', () => {
    render(
      <Dialog open>
        <DialogContent>
          <DialogTitle>测试弹窗</DialogTitle>
        </DialogContent>
      </Dialog>,
    );

    expect(screen.getByRole('dialog')).toHaveClass('z-[110]');
    expect(findOpenOverlay()).toHaveClass('z-[100]');
  });

  it('places sheet content above the workspace sidebar layer', () => {
    render(
      <Sheet open>
        <SheetContent>
          <SheetTitle>测试抽屉</SheetTitle>
        </SheetContent>
      </Sheet>,
    );

    expect(screen.getByRole('dialog')).toHaveClass('z-[110]');
    expect(findOpenOverlay()).toHaveClass('z-[100]');
  });
});