@times-components/ts-components 1.146.2-be27d508c972211ad80599875cd69c63bf67d4b1.45 → 1.146.2-c9973aa4b92ab539c7e626ec928a64701390290d.3

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

@@ -1,120 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { TripCard } from '../TripCard';
-import { TripCardApiData } from '../types';
-
-const mockCard: TripCardApiData = {
-  cruise_id: '2074350',
-  image: 'https://example.com/image.jpg',
-  headline: 'Mediterranean from Barcelona',
-  date: 'Oct 2025 - Oct 2025',
-  duration: 'Seven Days',
-  route: 'Barcelona → Marseille',
-  ship: 'MSC Seaside',
-  price: '£2000',
-  logo: 'https://example.com/logo.png',
-  logo_url: 'https://example.com',
-  cta_url: 'https://example.com/cruise',
-  cta_text: 'View Itinerary'
-};
-
-describe('TripCard', () => {
-  it('renders card with all required data', () => {
-    render(<TripCard card={mockCard} />);
-
-    expect(
-      screen.getByText('Mediterranean from Barcelona')
-    ).toBeInTheDocument();
-    expect(screen.getByText('Oct 2025 - Oct 2025')).toBeInTheDocument();
-    expect(screen.getByText('Seven Days')).toBeInTheDocument();
-    expect(screen.getByText('Barcelona → Marseille')).toBeInTheDocument();
-    expect(screen.getByText('MSC Seaside')).toBeInTheDocument();
-    expect(screen.getByText('£2000')).toBeInTheDocument();
-    expect(screen.getByText('From')).toBeInTheDocument();
-    expect(screen.getByText('View Itinerary')).toBeInTheDocument();
-  });
-
-  it('renders image with correct src and alt', () => {
-    render(<TripCard card={mockCard} />);
-
-    const image = screen.getByAltText('Mediterranean from Barcelona');
-    expect(image).toHaveAttribute('src', 'https://example.com/image.jpg');
-  });
-
-  it('renders offer label when provided', () => {
-    const cardWithOffer = {
-      ...mockCard,
-      offer_label: 'Special Offer'
-    };
-
-    render(<TripCard card={cardWithOffer} />);
-
-    expect(screen.getByText('Special Offer')).toBeInTheDocument();
-  });
-
-  it('renders gift banner when provided', () => {
-    const cardWithGift = {
-      ...mockCard,
-      gift_banner: 'Free gift with purchase'
-    };
-
-    render(<TripCard card={cardWithGift} />);
-
-    expect(screen.getByText('Free gift with purchase')).toBeInTheDocument();
-  });
-
-  it('renders original price when provided', () => {
-    const cardWithOriginalPrice = {
-      ...mockCard,
-      original_price: '£2500'
-    };
-
-    render(<TripCard card={cardWithOriginalPrice} />);
-
-    expect(screen.getByText('£2500')).toBeInTheDocument();
-  });
-
-  it('does not render "From" when price is "Enquire now"', () => {
-    const cardWithEnquire = {
-      ...mockCard,
-      price: 'Enquire now'
-    };
-
-    render(<TripCard card={cardWithEnquire} />);
-
-    expect(screen.queryByText('From')).not.toBeInTheDocument();
-    expect(screen.getByText('Enquire now')).toBeInTheDocument();
-  });
-
-  it('renders all CTA links with correct href and target', () => {
-    render(<TripCard card={mockCard} />);
-
-    const links = screen.getAllByRole('link');
-    const imageLink = links[0];
-    const headlineLink = links[1];
-    const ctaButton = screen.getByText('View Itinerary').closest('a');
-
-    expect(imageLink).toHaveAttribute('href', 'https://example.com/cruise');
-    expect(imageLink).toHaveAttribute('target', '_blank');
-    expect(headlineLink).toHaveAttribute('href', 'https://example.com/cruise');
-    expect(ctaButton).toHaveAttribute('href', 'https://example.com/cruise');
-  });
-
-  it('renders logo with link when provided', () => {
-    render(<TripCard card={mockCard} />);
-    const logoLink = screen.getByRole('link', { name: /partner logo/i });
-    expect(logoLink).toHaveAttribute('href', 'https://example.com');
-    const logoImg = screen.getByAltText('Partner logo');
-    expect(logoImg).toHaveAttribute('src', 'https://example.com/logo.png');
-  });
-
-  it('shows card image after it loads', () => {
-    render(<TripCard card={mockCard} />);
-
-    const cardImage = screen.getByAltText('Mediterranean from Barcelona');
-    expect(cardImage).toHaveStyle({ display: 'none' });
-    fireEvent.load(cardImage);
-    expect(cardImage).toHaveStyle({ display: 'block' });
-  });
-});

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

@@ -1,583 +0,0 @@
-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>
-);
-
-// Mock ResizeObserver
-global.ResizeObserver = class ResizeObserver {
-  public observe(): void {
-    // Mock implementation
-  }
-  public unobserve(): void {
-    // Mock implementation
-  }
-  public disconnect(): void {
-    // Mock implementation
-  }
-};
-
-describe('TripCardsLayout', () => {
-  beforeEach(() => {
-    Element.prototype.scrollTo = jest.fn();
-
-    // Mock matchMedia for each test
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      configurable: true,
-      value: jest.fn().mockImplementation(query => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: 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.getByTestId('trip-cards-title-link');
-      expect(link).toHaveAttribute('href', 'https://example.com');
-      expect(link).toHaveAttribute('target', '_blank');
-      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-    });
-
-    it('renders two links when titleurl is provided', () => {
-      const items = [{ id: '1', data: undefined }];
-
-      render(
-        <TripCardsLayout
-          element={mockElement}
-          items={items}
-          CardComponent={MockCard}
-          itemsPerPage={2}
-        />
-      );
-
-      const links = screen.getAllByRole('link');
-      expect(links).toHaveLength(2);
-
-      const titleLink = screen.getByTestId('trip-cards-title-link');
-      const iconLink = screen.getByTestId('title-link');
-
-      expect(titleLink).toHaveAttribute('href', 'https://example.com');
-      expect(iconLink).toHaveAttribute('href', 'https://example.com');
-    });
-
-    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('');
-      }
-    });
-  });
-});