import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { AdminSubtitleProvider } from '@/Contexts/AdminSubtitleContext';
import StoriesTableRow from '@/Components/Table/StoriesTableRow';
import type { TableStoryItem } from '@/types/table-story';

const story: TableStoryItem = {
  id: 1,
  title: 'The Quiet Harbour',
  genre: 'Fiction',
  grades: '3-5',
  access: false,
  thumbnail: '/img/quiet-harbour.jpg',
  slug: 'the-quiet-harbour',
};

function renderRow(overrides: Partial<React.ComponentProps<typeof StoriesTableRow>> = {}) {
  return render(
    <AdminSubtitleProvider>
      <StoriesTableRow story={story} index={0} onAccessToggle={vi.fn()} {...overrides} />
    </AdminSubtitleProvider>
  );
}

describe('StoriesTableRow', () => {
  // Regression for READINGFUL-0V-F. React 18's enter/leave plugin substitutes the
  // `window` object for a missing `to` target, so a pointer leaving the thumbnail
  // for anything outside the React tree delivers relatedTarget = window — which
  // Node.contains() rejects with a TypeError.
  it('treats a leave whose relatedTarget is the window as leaving the row', () => {
    const onMouseLeave = vi.fn();
    renderRow({ onMouseLeave });

    const thumbnail = screen.getByRole('presentation', { hidden: true });
    fireEvent.mouseOut(thumbnail, { relatedTarget: null });

    expect(onMouseLeave).toHaveBeenCalledTimes(1);
  });
});