goodgo-platform/apps/web/components/ui/__tests__/dialog.spec.tsx

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '../dialog';

describe('Dialog', () => {
  it('renders nothing when open is false', () => {
    render(
      <Dialog open={false} onOpenChange={() => {}}>
        <DialogContent>
          <DialogTitle>Hidden</DialogTitle>
        </DialogContent>
      </Dialog>,
    );
    expect(screen.queryByText('Hidden')).not.toBeInTheDocument();
  });

  it('renders content when open is true', () => {
    render(
      <Dialog open={true} onOpenChange={() => {}}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Test Dialog</DialogTitle>
            <DialogDescription>Dialog description</DialogDescription>
          </DialogHeader>
          <p>Body content</p>
          <DialogFooter>
            <button>OK</button>
          </DialogFooter>
        </DialogContent>
      </Dialog>,
    );

    expect(screen.getByText('Test Dialog')).toBeInTheDocument();
    expect(screen.getByText('Dialog description')).toBeInTheDocument();
    expect(screen.getByText('Body content')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'OK' })).toBeInTheDocument();
  });

  it('calls onOpenChange when backdrop is clicked', async () => {
    const onOpenChange = vi.fn();
    render(
      <Dialog open={true} onOpenChange={onOpenChange}>
        <DialogContent>
          <DialogTitle>Closeable</DialogTitle>
        </DialogContent>
      </Dialog>,
    );

    // Click the backdrop (the overlay div)
    const backdrop = document.querySelector('.bg-black\\/80');
    if (backdrop) {
      await userEvent.click(backdrop);
    }
    expect(onOpenChange).toHaveBeenCalledWith(false);
  });

  it('does not close when clicking inside content', async () => {
    const onOpenChange = vi.fn();
    render(
      <Dialog open={true} onOpenChange={onOpenChange}>
        <DialogContent>
          <DialogTitle>Stay Open</DialogTitle>
        </DialogContent>
      </Dialog>,
    );

    await userEvent.click(screen.getByText('Stay Open'));
    expect(onOpenChange).not.toHaveBeenCalled();
  });

  describe('a11y: DialogContext auto-labelling', () => {
    it('renders DialogContent with role="dialog" and aria-modal', () => {
      render(
        <Dialog open={true} onOpenChange={() => {}}>
          <DialogContent>
            <DialogTitle>A11y Title</DialogTitle>
          </DialogContent>
        </Dialog>,
      );

      const dialog = screen.getByRole('dialog');
      expect(dialog).toHaveAttribute('aria-modal', 'true');
    });

    it('auto-wires aria-labelledby from DialogTitle id', () => {
      render(
        <Dialog open={true} onOpenChange={() => {}}>
          <DialogContent>
            <DialogTitle>Auto Label</DialogTitle>
            <DialogDescription>Auto Desc</DialogDescription>
          </DialogContent>
        </Dialog>,
      );

      const dialog = screen.getByRole('dialog');
      const titleId = dialog.getAttribute('aria-labelledby');
      const descId = dialog.getAttribute('aria-describedby');

      expect(titleId).toBeTruthy();
      expect(descId).toBeTruthy();

      // The title element should carry the matching id
      expect(screen.getByText('Auto Label')).toHaveAttribute('id', titleId);
      expect(screen.getByText('Auto Desc')).toHaveAttribute('id', descId);
    });

    it('allows explicit id override on DialogTitle', () => {
      render(
        <Dialog open={true} onOpenChange={() => {}}>
          <DialogContent>
            <DialogTitle id="custom-title">Custom</DialogTitle>
          </DialogContent>
        </Dialog>,
      );

      expect(screen.getByText('Custom')).toHaveAttribute('id', 'custom-title');
    });
  });
});