gw-svelte/src/lib/components/TestimonialsSection.test.ts

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

const expectedMappedSlides = [
  { reviewer: 'Kate', src: '/images/archie-auckland-dog-walking-review.png' },
  { reviewer: 'Estelle', src: '/images/monty-auckland-dog-walking-review.png' },
  { reviewer: 'Ross', src: '/images/otis-auckland-dog-walking-review.png' },
  { reviewer: 'Nina', src: '/images/wallace-auckland-dog-walking-review.png' }
];

function getActiveSlide(container: HTMLElement) {
  return container.querySelector('.testimonial-slide-active') as HTMLElement;
}

function getActiveReviewer(container: HTMLElement) {
  return getActiveSlide(container).querySelector('.testimonial-author-name')?.textContent;
}

function getActiveImage(container: HTMLElement) {
  return getActiveSlide(container).querySelector('img') as HTMLImageElement;
}

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

  it('maps all known testimonial images to the local PNG assets', async () => {
    const { container } = render(TestimonialsSection, {
      testimonials: homepageContent.testimonials
    });

    const nextButton = screen.getByRole('button', { name: /next testimonial/i });

    for (const [index, slide] of expectedMappedSlides.entries()) {
      expect(getActiveReviewer(container)).toBe(slide.reviewer);
      expect(getActiveImage(container).getAttribute('src')).toBe(slide.src);

      if (index < expectedMappedSlides.length - 1) {
        await fireEvent.click(nextButton);
      }
    }
  });

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

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

    const nextButton = screen.getByRole('button', { name: /next testimonial/i });

    expect(getActiveReviewer(container)).toBe('Kate');

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

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

  it('wraps to the last testimonial when navigating backwards from the first slide', async () => {
    const { container } = render(TestimonialsSection, {
      testimonials: homepageContent.testimonials
    });

    const previousButton = screen.getByRole('button', { name: /previous testimonial/i });

    expect(getActiveReviewer(container)).toBe('Kate');

    await fireEvent.click(previousButton);

    expect(getActiveReviewer(container)).toBe('Nina');
    expect(getActiveImage(container).getAttribute('src')).toBe(
      '/images/wallace-auckland-dog-walking-review.png'
    );
  });

  it('keeps custom testimonial images and filters out testimonials with no image', async () => {
    const customTestimonials: TestimonialContent[] = [
      ...homepageContent.testimonials,
      {
        reviewer: 'Casey',
        detail: "Poppy's mum",
        quote: 'Thoughtful updates and a very happy dog after every walk.',
        imageUrl: '/images/custom-casey-review.png'
      },
      {
        reviewer: 'Jordan',
        detail: "Scout's dad",
        quote: 'Should be hidden because there is no image.'
      }
    ];

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

    const nextButton = screen.getByRole('button', { name: /next testimonial/i });

    expect(container.querySelectorAll('.testimonial-slide')).toHaveLength(5);

    for (let step = 0; step < 4; step += 1) {
      await fireEvent.click(nextButton);
    }

    expect(getActiveReviewer(container)).toBe('Casey');
    expect(getActiveImage(container).getAttribute('src')).toBe('/images/custom-casey-review.png');
    expect(screen.queryByText('Jordan')).not.toBeInTheDocument();
  });
});