@times-components/ts-components 1.145.1-82bc6796129e892c1eb22c6257c5e3809c159767.3 → 1.145.1-cfea81c4084e6f91221ea00fec9fc730d5b933cb.4

package/src/components/trip-cards/__tests__/TripCardsLayout.test.tsx

@@ -0,0 +1,532 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { TripCardsLayout } from '../TripCardsLayout';
+import { TripCardApiData } from '../types';
+
+const mockElement = {
+  class: 'trip-cards',
+  tripcards: btoa(JSON.stringify([1, 2])),
+  title: 'Test Cruises',
+  titleUrl: 'https://example.com',
+  description: 'Test Description'
+};
+
+const MockCard = ({ card }: { card?: TripCardApiData }) => (
+  <div data-testid="mock-card">
+    {card ? card.headline || 'Mock Card' : 'Mock Card'}
+  </div>
+);
+
+describe('TripCardsLayout', () => {
+  beforeEach(() => {
+    Element.prototype.scrollTo = jest.fn();
+  });
+
+  describe('Rendering', () => {
+    it('renders with title and description', () => {
+      const items = [
+        { id: '1', data: undefined },
+        { id: '2', data: undefined }
+      ];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      expect(screen.getByText('Test Cruises')).toBeInTheDocument();
+      expect(screen.getByText('Test Description')).toBeInTheDocument();
+    });
+
+    it('renders empty title when not provided', () => {
+      const elementWithoutTitle = {
+        ...mockElement,
+        title: undefined
+      };
+
+      const items = [{ id: '1', data: undefined }];
+
+      const { container } = render(
+        <TripCardsLayout
+          element={elementWithoutTitle}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const title = container.querySelector('h2');
+      expect(title).toBeInTheDocument();
+      expect(title).toBeEmptyDOMElement();
+    });
+
+    it('renders empty description when not provided', () => {
+      const elementWithoutDesc = {
+        ...mockElement,
+        description: undefined
+      };
+
+      const items = [{ id: '1', data: undefined }];
+
+      const { container } = render(
+        <TripCardsLayout
+          element={elementWithoutDesc}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const description = container.querySelector('p');
+      expect(description).toBeInTheDocument();
+      expect(description).toBeEmptyDOMElement();
+    });
+
+    it('renders title link when provided', () => {
+      const items = [{ id: '1', data: undefined }];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('href', 'https://example.com');
+      expect(link).toHaveAttribute('target', '_blank');
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+
+    it('does not render title link when not provided', () => {
+      const elementWithoutLink = {
+        ...mockElement,
+        titleUrl: undefined
+      };
+
+      const items = [{ id: '1', data: undefined }];
+
+      render(
+        <TripCardsLayout
+          element={elementWithoutLink}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const links = screen.queryAllByRole('link');
+      expect(links.length).toBe(0);
+    });
+
+    it('renders ChevronRightIcon in title link', () => {
+      const items = [{ id: '1', data: undefined }];
+
+      const { container } = render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+  });
+
+  describe('Static Grid Layout', () => {
+    it('renders static grid for exactly 2 items', () => {
+      const items = [
+        { id: '1', data: undefined },
+        { id: '2', data: undefined }
+      ];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const staticGrid = screen.getByTestId('static-cards-grid');
+      expect(staticGrid).toBeInTheDocument();
+    });
+
+    it('renders correct number of cards in static grid', () => {
+      const items = [
+        { id: '1', data: undefined },
+        { id: '2', data: undefined }
+      ];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const cards = screen.getAllByTestId('mock-card');
+      expect(cards.length).toBe(2);
+    });
+
+    it('passes correct props to CardComponent in static grid', () => {
+      const mockData: TripCardApiData = {
+        cruise_id: '1',
+        image: 'test.jpg',
+        headline: 'Test Cruise',
+        date: 'Jan 2024',
+        duration: '7 nights',
+        route: 'Test Route',
+        ship: 'Test Ship',
+        price: '£1000',
+        logo: 'logo.png',
+        logo_url: 'https://example.com',
+        cta_url: 'https://example.com',
+        cta_text: 'View'
+      };
+
+      const items = [{ id: '1', data: mockData }, { id: '2', data: undefined }];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      expect(screen.getByText('Test Cruise')).toBeInTheDocument();
+    });
+  });
+
+  describe('Carousel Layout', () => {
+    it('renders carousel for more than 2 items', () => {
+      const items = [
+        { id: '1', data: undefined },
+        { id: '2', data: undefined },
+        { id: '3', data: undefined }
+      ];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const cards = screen.getAllByTestId('mock-card');
+      expect(cards.length).toBe(3);
+    });
+
+    it('renders navigation arrows in carousel', () => {
+      const items = [
+        { id: '1', data: undefined },
+        { id: '2', data: undefined },
+        { id: '3', data: undefined }
+      ];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      expect(screen.getByLabelText('Previous items')).toBeInTheDocument();
+      expect(screen.getByLabelText('Next items')).toBeInTheDocument();
+    });
+
+    it('renders page dots in carousel', () => {
+      const items = [
+        { id: '1', data: undefined },
+        { id: '2', data: undefined },
+        { id: '3', data: undefined },
+        { id: '4', data: undefined }
+      ];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      expect(screen.getByLabelText('Previous items')).toBeInTheDocument();
+      expect(screen.getByLabelText('Next items')).toBeInTheDocument();
+
+      // With 4 items and 2 per page, we have 2 pages, so we should have 2 dot buttons
+      const pageDots = screen.getAllByLabelText(/Go to page/i);
+      expect(pageDots.length).toBe(2);
+    });
+
+    it('renders carousel for 1 item', () => {
+      const items = [{ id: '1', data: undefined }];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const cards = screen.getAllByTestId('mock-card');
+      expect(cards.length).toBe(1);
+    });
+
+    it('wraps cards in CarouselItem with correct widthConfig', () => {
+      const items = [
+        { id: '1', data: undefined },
+        { id: '2', data: undefined },
+        { id: '3', data: undefined }
+      ];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      // Verify carousel is rendering by checking for cards
+      const cards = screen.getAllByTestId('mock-card');
+      expect(cards.length).toBe(3);
+    });
+  });
+
+  describe('Card Rendering', () => {
+    it('renders each item with unique key', () => {
+      const items = [
+        { id: 'card-1', data: undefined },
+        { id: 'card-2', data: undefined }
+      ];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const cards = screen.getAllByTestId('mock-card');
+      expect(cards.length).toBe(2);
+    });
+
+    it('passes data to CardComponent', () => {
+      const mockData: TripCardApiData = {
+        cruise_id: '123',
+        image: 'image.jpg',
+        headline: 'Specific Cruise',
+        date: 'Feb 2024',
+        duration: '10 nights',
+        route: 'Route A',
+        ship: 'Ship X',
+        price: '£2000',
+        logo: 'logo.png',
+        logo_url: 'https://example.com',
+        cta_url: 'https://example.com',
+        cta_text: 'Book'
+      };
+
+      const items = [
+        { id: '1', data: mockData },
+        { id: '2', data: undefined },
+        { id: '3', data: undefined }
+      ];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      expect(screen.getByText('Specific Cruise')).toBeInTheDocument();
+    });
+
+    it('handles empty items array', () => {
+      const { container } = render(
+        <TripCardsLayout
+          element={mockElement}
+          items={[]}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      expect(container.firstChild).toBeInTheDocument();
+      const cards = screen.queryAllByTestId('mock-card');
+      expect(cards.length).toBe(0);
+    });
+  });
+
+  describe('Container Structure', () => {
+    it('renders main container', () => {
+      const items = [{ id: '1', data: undefined }];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const mainContainer = screen.getByTestId('trip-cards-container');
+      expect(mainContainer).toBeInTheDocument();
+    });
+
+    it('renders title section', () => {
+      const items = [{ id: '1', data: undefined }];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const titleSection = screen.getByTestId('title-section');
+      expect(titleSection).toBeInTheDocument();
+    });
+
+    it('renders title bar with content', () => {
+      const items = [{ id: '1', data: undefined }];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const titleBar = screen.getByTestId('title-bar');
+      const titleContent = screen.getByTestId('title-content');
+
+      expect(titleBar).toBeInTheDocument();
+      expect(titleContent).toBeInTheDocument();
+    });
+  });
+
+  describe('ItemsPerPage', () => {
+    it('respects itemsPerPage prop', () => {
+      const items = Array.from({ length: 6 }, (_, i) => ({
+        id: `${i}`,
+        data: undefined
+      }));
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={3}
+        />
+      );
+
+      const cards = screen.getAllByTestId('mock-card');
+      expect(cards.length).toBe(6);
+    });
+
+    it('handles itemsPerPage of 1', () => {
+      const items = [
+        { id: '1', data: undefined },
+        { id: '2', data: undefined }
+      ];
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={1}
+        />
+      );
+
+      const cards = screen.getAllByTestId('mock-card');
+      expect(cards.length).toBe(2);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles large number of items', () => {
+      const items = Array.from({ length: 50 }, (_, i) => ({
+        id: `${i}`,
+        data: undefined
+      }));
+
+      render(
+        <TripCardsLayout
+          element={mockElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const cards = screen.getAllByTestId('mock-card');
+      expect(cards.length).toBe(50);
+    });
+
+    it('handles empty title and description', () => {
+      const emptyElement = {
+        ...mockElement,
+        title: '',
+        description: ''
+      };
+
+      const items = [{ id: '1', data: undefined }];
+
+      const { container } = render(
+        <TripCardsLayout
+          element={emptyElement}
+          items={items}
+          CardComponent={MockCard}
+          itemsPerPage={2}
+        />
+      );
+
+      const title = container.querySelector('h2');
+      const description = container.querySelector('p');
+
+      expect(title).toBeInTheDocument();
+      expect(description).toBeInTheDocument();
+      if (title && description) {
+        expect(title.textContent).toBe('');
+        expect(description.textContent).toBe('');
+      }
+    });
+  });
+});