4.0.1 - fixes

src/lib/components/TestimonialsSection.test.ts

@@ -1,21 +1,48 @@
-import { fireEvent, render } from '@testing-library/svelte';
+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('uses the mapped local image assets for known testimonials', () => {
+  it('maps all known testimonial images to the local PNG assets', async () => {
     const { container } = render(TestimonialsSection, {
       testimonials: homepageContent.testimonials
     });
 
-    const activeImage = container.querySelector('.testimonial-slide-active img') as HTMLImageElement;
+    const nextButton = screen.getByRole('button', { name: /next testimonial/i });
 
-    expect(activeImage.getAttribute('src')).toBe('/images/archie-auckland-dog-walking-review.jpg');
+    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 () => {
@@ -25,16 +52,64 @@ describe('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;
+    const nextButton = screen.getByRole('button', { name: /next testimonial/i });
 
-    expect(activeReviewer()).toBe('Kate');
+    expect(getActiveReviewer(container)).toBe('Kate');
 
     await fireEvent.click(nextButton);
-    expect(activeReviewer()).toBe('Estelle');
+    expect(getActiveReviewer(container)).toBe('Estelle');
 
     await vi.advanceTimersByTimeAsync(5000);
-    expect(activeReviewer()).toBe('Ross');
+    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();
   });
 });