@times-components/ts-components 1.146.2-0f9388fe36c532b90db3f35d17847fc17a611f1e.44 → 1.146.2-784617dc4a33959b8795da1d7f425c9929322fae.24

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

@@ -1,550 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { TripCards } from '../index';
-import { TripCardsElement } from '../types';
-import * as mockDataModule from '../mockData';
-
-global.fetch = jest.fn();
-
-// Mock ResizeObserver
-global.ResizeObserver = class ResizeObserver {
-  public observe(): void {
-    // Mock implementation
-  }
-  public unobserve(): void {
-    // Mock implementation
-  }
-  public disconnect(): void {
-    // Mock implementation
-  }
-};
-
-describe('TripCards', () => {
-  const mockCards = [
-    {
-      cruise_id: '1',
-      image: 'image1.jpg',
-      headline: 'Mock Cruise 1',
-      date: 'Jan 2024',
-      duration: '7 nights',
-      route: 'Route 1',
-      ship: 'Ship 1',
-      price: '£1000',
-      original_price: undefined,
-      logo: 'logo1.png',
-      logo_url: 'https://example.com',
-      cta_url: 'link1',
-      cta_text: 'View'
-    },
-    {
-      cruise_id: '2',
-      image: 'image2.jpg',
-      headline: 'Mock Cruise 2',
-      date: 'Feb 2024',
-      duration: '14 nights',
-      route: 'Route 2',
-      ship: 'Ship 2',
-      price: '£2000',
-      original_price: undefined,
-      logo: 'logo2.png',
-      logo_url: 'https://example.com',
-      cta_url: 'link2',
-      cta_text: 'View'
-    },
-    {
-      cruise_id: '3',
-      image: 'image3.jpg',
-      headline: 'Mock Cruise 3',
-      date: 'Mar 2024',
-      duration: '10 nights',
-      route: 'Route 3',
-      ship: 'Ship 3',
-      price: '£1500',
-      original_price: undefined,
-      logo: 'logo3.png',
-      logo_url: 'https://example.com',
-      cta_url: 'link3',
-      cta_text: 'View'
-    }
-  ];
-
-  const mockElement: TripCardsElement = {
-    title: 'Test Cruises',
-    description: 'Test Description',
-    tripcards: btoa(JSON.stringify([1, 2, 3])),
-    titleurl: 'https://example.com'
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-
-    // 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()
-      }))
-    });
-
-    jest
-      .spyOn(mockDataModule, 'getMockTripCards')
-      .mockImplementation((count?: number) => {
-        return count ? mockCards.slice(0, count) : mockCards;
-      });
-    Object.defineProperty(window, 'innerWidth', {
-      writable: true,
-      configurable: true,
-      value: 1024
-    });
-  });
-
-  describe('Mock Data Mode', () => {
-    it('renders cards when useMockData is true', async () => {
-      render(<TripCards element={mockElement} useMockData={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByText('Mock Cruise 1')).toBeInTheDocument();
-        expect(screen.getByText('Mock Cruise 2')).toBeInTheDocument();
-      });
-    });
-
-    it('renders title and description', async () => {
-      render(<TripCards element={mockElement} useMockData={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByText('Test Cruises')).toBeInTheDocument();
-        expect(screen.getByText('Test Description')).toBeInTheDocument();
-      });
-    });
-
-    it('respects the number of IDs', async () => {
-      render(<TripCards element={mockElement} useMockData={true} />);
-
-      await waitFor(() => {
-        expect(mockDataModule.getMockTripCards).toHaveBeenCalledWith(3);
-      });
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('returns null when no IDs are provided', async () => {
-      const emptyElement: TripCardsElement = {
-        title: 'Test',
-        description: 'Test',
-        tripcards: '',
-        titleurl: undefined
-      };
-
-      const { container } = render(<TripCards element={emptyElement} />);
-
-      await waitFor(() => {
-        expect(container.firstChild).toBeNull();
-      });
-    });
-
-    it('returns null when fetch fails', async () => {
-      (global.fetch as jest.Mock).mockRejectedValue(new Error('Network error'));
-
-      const { container } = render(<TripCards element={mockElement} />);
-
-      await waitFor(() => {
-        expect(container.firstChild).toBeNull();
-      });
-    });
-
-    it('returns null when response is not ok', async () => {
-      (global.fetch as jest.Mock).mockResolvedValue({
-        ok: false,
-        status: 404
-      });
-
-      const { container } = render(<TripCards element={mockElement} />);
-
-      await waitFor(() => {
-        expect(container.firstChild).toBeNull();
-      });
-    });
-
-    it('returns null when API response format is invalid', async () => {
-      (global.fetch as jest.Mock).mockResolvedValue({
-        ok: true,
-        json: async () => ({ invalid: 'data' })
-      });
-
-      const { container } = render(<TripCards element={mockElement} />);
-
-      await waitFor(() => {
-        expect(container.firstChild).toBeNull();
-      });
-    });
-  });
-
-  describe('API Data Fetching', () => {
-    it('fetches and displays cruise data from API', async () => {
-      const mockApiResponse = {
-        results: [
-          {
-            post_id: 1,
-            cruise_id: 1,
-            cruise_title: 'API Cruise 1',
-            cruise_line: {
-              name: 'API Line',
-              link: 'http://line.com',
-              logo: 'logo.png'
-            },
-            ship: {
-              name: 'API Ship',
-              link: 'http://ship.com',
-              image: 'api-image1.jpg'
-            },
-            departs: '2026-03-01',
-            ends: '2026-03-11',
-            date_label: 'March 2024',
-            destination: ['Port 1', 'Port 3'],
-            duration: 10,
-            itinerary: ['Port 1', 'Port 2', 'Port 3'],
-            prices: {
-              cheapest_price: 1500,
-              inside: 1500,
-              outside: 1800,
-              balcony: 2000,
-              suite: 2500
-            },
-            was_prices: {
-              inside: 2000,
-              outside: 2200,
-              balcony: 2500,
-              suite: 3000
-            },
-            link: 'api-link',
-            campaigns: ['Special'],
-            extras: {
-              date: 'March 2024',
-              duration: '10 nights',
-              destination: 'Mediterranean',
-              info: 'Additional info'
-            }
-          },
-          {
-            post_id: 2,
-            cruise_id: 2,
-            cruise_title: 'API Cruise 2',
-            cruise_line: {
-              name: 'API Line',
-              link: 'http://line.com',
-              logo: 'logo.png'
-            },
-            ship: {
-              name: 'API Ship 2',
-              link: 'http://ship.com',
-              image: 'api-image2.jpg'
-            },
-            departs: '2026-04-01',
-            ends: '2026-04-11',
-            date_label: 'April 2024',
-            destination: ['Port 2', 'Port 4'],
-            duration: 10,
-            itinerary: ['Port 2', 'Port 3', 'Port 4'],
-            prices: {
-              cheapest_price: 1600,
-              inside: 1600,
-              outside: 1900,
-              balcony: 2100,
-              suite: 2600
-            },
-            was_prices: {
-              inside: 0,
-              outside: 0,
-              balcony: 0,
-              suite: 0
-            },
-            link: 'api-link2',
-            campaigns: [],
-            extras: {
-              date: 'April 2024',
-              duration: '10 nights',
-              destination: 'Caribbean',
-              info: 'Additional info'
-            }
-          },
-          {
-            post_id: 3,
-            cruise_id: 3,
-            cruise_title: 'API Cruise 3',
-            cruise_line: {
-              name: 'API Line',
-              link: 'http://line.com',
-              logo: 'logo.png'
-            },
-            ship: {
-              name: 'API Ship 3',
-              link: 'http://ship.com',
-              image: 'api-image3.jpg'
-            },
-            departs: '2026-05-01',
-            ends: '2026-05-11',
-            date_label: 'May 2024',
-            destination: ['Port 3', 'Port 5'],
-            duration: 10,
-            itinerary: ['Port 3', 'Port 4', 'Port 5'],
-            prices: {
-              cheapest_price: 1700,
-              inside: 1700,
-              outside: 2000,
-              balcony: 2200,
-              suite: 2700
-            },
-            was_prices: {
-              inside: 2100,
-              outside: 2400,
-              balcony: 2600,
-              suite: 3100
-            },
-            link: 'api-link3',
-            campaigns: [],
-            extras: {
-              date: 'May 2024',
-              duration: '10 nights',
-              destination: 'Alaska',
-              info: 'Additional info'
-            }
-          }
-        ]
-      };
-
-      (global.fetch as jest.Mock).mockResolvedValue({
-        ok: true,
-        json: async () => mockApiResponse
-      });
-
-      render(<TripCards element={mockElement} />);
-
-      await waitFor(() => {
-        expect(screen.getByText('API Cruise 1')).toBeInTheDocument();
-      });
-    });
-
-    it('sends correct request to API', async () => {
-      const mockApiResponse = {
-        results: mockCards.map((card, index) => ({
-          post_id: index + 1,
-          cruise_id: parseInt(card.cruise_id, 10),
-          cruise_title: card.headline,
-          cruise_line: {
-            name: 'Test Line',
-            link: card.logo_url,
-            logo: card.logo
-          },
-          ship: {
-            name: card.ship,
-            link: 'http://ship.com',
-            image: card.image
-          },
-          departs: '2026-01-01',
-          ends: '2026-01-11',
-          date_label: card.date,
-          destination: ['Test Port'],
-          duration: 10,
-          itinerary: ['Port 1', 'Port 2', 'Port 3'],
-          prices: {
-            cheapest_price: 1500,
-            inside: 1500,
-            outside: 1800,
-            balcony: 2000,
-            suite: 2500
-          },
-          was_prices: {
-            inside: 0,
-            outside: 0,
-            balcony: 0,
-            suite: 0
-          },
-          link: card.cta_url,
-          campaigns: [],
-          extras: {
-            date: card.date,
-            duration: card.duration,
-            destination: 'Test',
-            info: 'Info'
-          }
-        }))
-      };
-
-      (global.fetch as jest.Mock).mockResolvedValue({
-        ok: true,
-        json: async () => mockApiResponse
-      });
-
-      render(<TripCards element={mockElement} />);
-
-      await waitFor(() => {
-        expect(global.fetch).toHaveBeenCalledWith(
-          'https://www.staging-thetimes.com/holidays/wp-admin/admin-ajax.php',
-          expect.objectContaining({
-            method: 'POST',
-            body: expect.any(FormData)
-          })
-        );
-      });
-    });
-  });
-
-  describe('Layout', () => {
-    it('uses static grid for exactly 2 cards', async () => {
-      const twoCardElement: TripCardsElement = {
-        ...mockElement,
-        tripcards: btoa(JSON.stringify([1, 2]))
-      };
-
-      render(<TripCards element={twoCardElement} useMockData={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByText('Mock Cruise 1')).toBeInTheDocument();
-      });
-
-      expect(screen.queryByLabelText('Previous items')).not.toBeInTheDocument();
-    });
-
-    it('uses carousel for more than 2 cards', async () => {
-      const threeCards = [
-        ...mockCards,
-        {
-          cruise_id: '3',
-          image: 'image3.jpg',
-          headline: 'Mock Cruise 3',
-          date: 'Mar 2024',
-          duration: '21 nights',
-          route: 'Route 3',
-          ship: 'Ship 3',
-          price: '£3000',
-          original_price: undefined,
-          logo: 'logo3.png',
-          logo_url: 'https://example.com',
-          cta_url: 'link3',
-          cta_text: 'View'
-        }
-      ];
-
-      jest
-        .spyOn(mockDataModule, 'getMockTripCards')
-        .mockReturnValue(threeCards);
-
-      render(<TripCards element={mockElement} useMockData={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByText('Mock Cruise 1')).toBeInTheDocument();
-        expect(screen.getByLabelText('Previous items')).toBeInTheDocument();
-        expect(screen.getByLabelText('Next items')).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Responsive Behavior', () => {
-    it('uses matchMedia for responsive breakpoint detection', () => {
-      const mockMediaQuery = {
-        matches: false,
-        media: '(max-width: 767px)',
-        onchange: null,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-        dispatchEvent: jest.fn()
-      };
-
-      const matchMediaSpy = jest
-        .spyOn(window, 'matchMedia')
-        .mockReturnValue(mockMediaQuery as any);
-
-      const { unmount } = render(
-        <TripCards element={mockElement} useMockData={true} />
-      );
-
-      // Verify matchMedia was called with the correct query
-      expect(matchMediaSpy).toHaveBeenCalledWith('(max-width: 767px)');
-
-      // Verify addEventListener was called on the media query
-      expect(mockMediaQuery.addEventListener).toHaveBeenCalledWith(
-        'change',
-        expect.any(Function)
-      );
-
-      unmount();
-
-      // Verify removeEventListener was called on cleanup
-      expect(mockMediaQuery.removeEventListener).toHaveBeenCalledWith(
-        'change',
-        expect.any(Function)
-      );
-
-      matchMediaSpy.mockRestore();
-    });
-  });
-
-  describe('Props', () => {
-    it('renders empty title when not provided', async () => {
-      const elementWithoutTitle: TripCardsElement = {
-        ...mockElement,
-        title: undefined
-      };
-
-      render(<TripCards element={elementWithoutTitle} useMockData={true} />);
-
-      await waitFor(() => {
-        const titleElement = screen.getByTestId('trip-cards-title');
-        expect(titleElement).toBeInTheDocument();
-        expect(titleElement).toBeEmptyDOMElement();
-      });
-    });
-
-    it('renders empty description when not provided', async () => {
-      const elementWithoutDesc: TripCardsElement = {
-        ...mockElement,
-        description: undefined
-      };
-
-      render(<TripCards element={elementWithoutDesc} useMockData={true} />);
-
-      await waitFor(() => {
-        const descElement = screen.getByTestId('trip-cards-subtitle');
-        expect(descElement).toBeInTheDocument();
-        expect(descElement).toBeEmptyDOMElement();
-      });
-    });
-
-    it('renders title link when provided', async () => {
-      render(<TripCards element={mockElement} useMockData={true} />);
-
-      await waitFor(() => {
-        const link = screen.getByTestId('title-link');
-        expect(link).toHaveAttribute('href', 'https://example.com');
-        expect(link).toHaveAttribute('target', '_blank');
-      });
-    });
-
-    it('does not render title link when not provided', async () => {
-      const elementWithoutLink: TripCardsElement = {
-        ...mockElement,
-        titleurl: undefined
-      };
-
-      render(<TripCards element={elementWithoutLink} useMockData={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByText('Mock Cruise 1')).toBeInTheDocument();
-      });
-
-      const links = screen.getAllByRole('link');
-      expect(links.length).toBeGreaterThan(0);
-    });
-  });
-});

package/src/components/trip-cards/__tests__/mockData.test.ts

@@ -1,67 +0,0 @@
-import { getMockTripCards, mockApiResults } from '../mockData';
-
-describe('mockData', () => {
-  describe('mockApiResults', () => {
-    it('contains 6 cruise results', () => {
-      expect(mockApiResults).toHaveLength(6);
-    });
-
-    it('each result has required fields', () => {
-      mockApiResults.forEach(result => {
-        expect(result).toHaveProperty('cruise_id');
-        expect(result).toHaveProperty('cruise_title');
-        expect(result).toHaveProperty('cruise_line');
-        expect(result).toHaveProperty('ship');
-        expect(result).toHaveProperty('prices');
-        expect(result).toHaveProperty('was_prices');
-        expect(result).toHaveProperty('extras');
-      });
-    });
-
-    it('extras object contains required fields', () => {
-      mockApiResults.forEach(result => {
-        expect(result.extras).toHaveProperty('date');
-        expect(result.extras).toHaveProperty('duration');
-        expect(result.extras).toHaveProperty('destination');
-        expect(result.extras).toHaveProperty('info');
-      });
-    });
-  });
-
-  describe('getMockTripCards', () => {
-    it('returns all transformed cards when no count specified', () => {
-      const cards = getMockTripCards();
-
-      expect(cards).toHaveLength(6);
-    });
-
-    it('returns specified number of cards', () => {
-      const cards = getMockTripCards(3);
-
-      expect(cards).toHaveLength(3);
-    });
-
-    it('returns transformed TripCardApiData objects', () => {
-      const cards = getMockTripCards(1);
-
-      expect(cards[0]).toHaveProperty('cruise_id');
-      expect(cards[0]).toHaveProperty('image');
-      expect(cards[0]).toHaveProperty('headline');
-      expect(cards[0]).toHaveProperty('date');
-      expect(cards[0]).toHaveProperty('duration');
-      expect(cards[0]).toHaveProperty('route');
-      expect(cards[0]).toHaveProperty('ship');
-      expect(cards[0]).toHaveProperty('price');
-      expect(cards[0]).toHaveProperty('logo');
-      expect(cards[0]).toHaveProperty('logo_url');
-      expect(cards[0]).toHaveProperty('cta_url');
-      expect(cards[0]).toHaveProperty('cta_text');
-    });
-
-    it('cruise_id is converted to string', () => {
-      const cards = getMockTripCards(1);
-
-      expect(typeof cards[0].cruise_id).toBe('string');
-    });
-  });
-});