import { fireEvent, render } from '@testing-library/svelte';
import { afterEach, describe, expect, it, vi } from 'vitest';
import TestimonialsSection from './TestimonialsSection.svelte';
import { homepageContent } from '$lib/content/homepage';

describe('TestimonialsSection', () => {
  afterEach(() => {
    vi.useRealTimers();
  });

  it('uses the mapped local image assets for known testimonials', () => {
    const { container } = render(TestimonialsSection, {
      testimonials: homepageContent.testimonials
    });

    const activeImage = container.querySelector('.testimonial-slide-active img') as HTMLImageElement;

    expect(activeImage.getAttribute('src')).toBe('/images/archie-auckland-dog-walking-review.jpg');
  });

  it('moves to the next testimonial on arrow click and auto-rotation', async () => {
    vi.useFakeTimers();

    const { container } = render(TestimonialsSection, {
      testimonials: homepageContent.testimonials
    });

    const nextButton = container.querySelector('.testimonial-arrow-right') as HTMLButtonElement;
    const activeReviewer = () =>
      (container.querySelector('.testimonial-slide-active h6 strong') as HTMLElement).textContent;

    expect(activeReviewer()).toBe('Kate');

    await fireEvent.click(nextButton);
    expect(activeReviewer()).toBe('Estelle');

    await vi.advanceTimersByTimeAsync(5000);
    expect(activeReviewer()).toBe('Ross');
  });
});
