@times-components/ts-components 1.145.1-9176eda9ce171a0f5596bdc9d385a1fc60b23ea1.12 → 1.145.1-b504636a05999d83c7874b53febd7e86130e9cea.3

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

@@ -1,206 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import {
-  BoatIcon,
-  CalendarIcon,
-  ChevronRightIcon,
-  LocationIcon,
-  MoonIcon
-} from '../assets';
-
-describe('Trip Cards Assets', () => {
-  describe('BoatIcon', () => {
-    it('renders correctly', () => {
-      const { container } = render(<BoatIcon />);
-      const svg = container.querySelector('svg');
-      expect(svg).toBeInTheDocument();
-    });
-
-    it('has correct viewBox', () => {
-      const { container } = render(<BoatIcon />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('viewBox');
-    });
-
-    it('accepts custom props', () => {
-      const { container } = render(<BoatIcon className="custom-class" />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveClass('custom-class');
-    });
-
-    it('has fill attribute', () => {
-      const { container } = render(<BoatIcon />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('fill');
-    });
-  });
-
-  describe('CalendarIcon', () => {
-    it('renders correctly', () => {
-      const { container } = render(<CalendarIcon />);
-      const svg = container.querySelector('svg');
-      expect(svg).toBeInTheDocument();
-    });
-
-    it('has correct viewBox', () => {
-      const { container } = render(<CalendarIcon />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('viewBox');
-    });
-
-    it('accepts custom props', () => {
-      const { container } = render(<CalendarIcon data-testid="calendar" />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('data-testid', 'calendar');
-    });
-
-    it('renders path elements', () => {
-      const { container } = render(<CalendarIcon />);
-      const paths = container.querySelectorAll('path');
-      expect(paths.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('ChevronRightIcon', () => {
-    it('renders correctly', () => {
-      const { container } = render(<ChevronRightIcon />);
-      const svg = container.querySelector('svg');
-      expect(svg).toBeInTheDocument();
-    });
-
-    it('has correct dimensions', () => {
-      const { container } = render(<ChevronRightIcon />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('width', '16');
-      expect(svg).toHaveAttribute('height', '16');
-    });
-
-    it('has correct viewBox', () => {
-      const { container } = render(<ChevronRightIcon />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('viewBox', '0 0 16 16');
-    });
-
-    it('renders with currentColor stroke', () => {
-      const { container } = render(<ChevronRightIcon />);
-      const path = container.querySelector('path');
-      expect(path).toHaveAttribute('stroke', 'currentColor');
-    });
-
-    it('accepts custom props', () => {
-      const { container } = render(
-        <ChevronRightIcon style={{ color: 'red' }} />
-      );
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveStyle({ color: 'red' });
-    });
-  });
-
-  describe('LocationIcon', () => {
-    it('renders correctly', () => {
-      const { container } = render(<LocationIcon />);
-      const svg = container.querySelector('svg');
-      expect(svg).toBeInTheDocument();
-    });
-
-    it('has correct viewBox', () => {
-      const { container } = render(<LocationIcon />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('viewBox');
-    });
-
-    it('accepts custom props', () => {
-      const { container } = render(<LocationIcon aria-label="location" />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('aria-label', 'location');
-    });
-
-    it('renders path elements', () => {
-      const { container } = render(<LocationIcon />);
-      const path = container.querySelector('path');
-      expect(path).toBeInTheDocument();
-    });
-  });
-
-  describe('MoonIcon', () => {
-    it('renders correctly', () => {
-      const { container } = render(<MoonIcon />);
-      const svg = container.querySelector('svg');
-      expect(svg).toBeInTheDocument();
-    });
-
-    it('has correct viewBox', () => {
-      const { container } = render(<MoonIcon />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('viewBox');
-    });
-
-    it('has correct dimensions', () => {
-      const { container } = render(<MoonIcon />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('width');
-      expect(svg).toHaveAttribute('height');
-    });
-
-    it('accepts custom props', () => {
-      const { container } = render(<MoonIcon id="moon-icon" />);
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('id', 'moon-icon');
-    });
-
-    it('renders path with fill color', () => {
-      const { container } = render(<MoonIcon />);
-      const path = container.querySelector('path');
-      expect(path).toHaveAttribute('fill');
-    });
-  });
-
-  describe('Icons Integration', () => {
-    it('all icons render without errors', () => {
-      const { container } = render(
-        <div>
-          <BoatIcon />
-          <CalendarIcon />
-          <ChevronRightIcon />
-          <LocationIcon />
-          <MoonIcon />
-        </div>
-      );
-
-      const svgs = container.querySelectorAll('svg');
-      expect(svgs.length).toBe(5);
-    });
-
-    it('icons can be styled with className', () => {
-      const { container } = render(
-        <div>
-          <BoatIcon className="icon-style" />
-          <CalendarIcon className="icon-style" />
-          <LocationIcon className="icon-style" />
-        </div>
-      );
-
-      const svgs = container.querySelectorAll('.icon-style');
-      expect(svgs.length).toBe(3);
-    });
-
-    it('icons maintain SVG structure', () => {
-      const icons = [
-        <BoatIcon key="boat" />,
-        <CalendarIcon key="calendar" />,
-        <ChevronRightIcon key="chevron" />,
-        <LocationIcon key="location" />,
-        <MoonIcon key="moon" />
-      ];
-
-      icons.forEach(icon => {
-        const { container } = render(icon);
-        const svg = container.querySelector('svg');
-        if (svg) {
-          expect(svg.tagName).toBe('svg');
-        }
-      });
-    });
-  });
-});

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

@@ -1,264 +0,0 @@
-import { transformApiResult, fetchCruiseCards } from '../helpers';
-import { ApiCruiseResult } from '../types';
-
-const mockApiResult: ApiCruiseResult = {
-  post_id: 34246,
-  cruise_id: 2074350,
-  cruise_title: 'Mediterranean from Barcelona',
-  cruise_line: {
-    name: 'MSC Cruises',
-    link: 'https://example.com/cruise-lines/msc-cruises/',
-    logo: 'https://example.com/msc-logo.png'
-  },
-  ship: {
-    name: 'MSC Seaside',
-    link: 'https://example.com/ships/msc-seaside/',
-    image: 'https://example.com/ship-image.jpg'
-  },
-  departs: '2025-10-21',
-  ends: '2025-10-28',
-  date_label: 'Oct 21 - Oct 28, 2025',
-  destination: ['Mediterranean'],
-  duration: 7,
-  itinerary: ['Barcelona', 'Naples', 'Rome', 'Marseille'],
-  prices: {
-    cheapest_price: 2000,
-    inside: 'Enquire now',
-    outside: 'Enquire now',
-    balcony: '2000',
-    suite: 'Enquire now'
-  },
-  was_prices: {
-    inside: 0,
-    outside: 0,
-    balcony: 2500,
-    suite: 0
-  },
-  link: 'https://example.com/cruises/mediterranean-from-barcelona',
-  campaigns: ['Special Offer'],
-  extras: {
-    date: 'Oct 2025 - Oct 2025',
-    duration: 'Seven Days',
-    destination: 'Mediterranean',
-    info: 'Seven nights onboard a four-star ship'
-  }
-};
-
-describe('transformApiResult', () => {
-  it('transforms API result to TripCardApiData format', () => {
-    const result = transformApiResult(mockApiResult);
-
-    expect(result).toEqual({
-      cruise_id: '2074350',
-      image: 'https://example.com/ship-image.jpg',
-      offer_label: 'Special Offer',
-      headline: 'Mediterranean from Barcelona',
-      date: 'Oct 2025 - Oct 2025',
-      duration: 'Seven Days',
-      route: 'Barcelona → Marseille',
-      ship: 'MSC Seaside',
-      original_price: '£2500',
-      price: '£2000',
-      logo: 'https://example.com/msc-logo.png',
-      logo_url: 'https://example.com/cruise-lines/msc-cruises/',
-      cta_url: 'https://example.com/cruises/mediterranean-from-barcelona',
-      cta_text: 'View Itinerary'
-    });
-  });
-
-  it('formats price as "Enquire now" when price is 0', () => {
-    const resultWithZeroPrice = {
-      ...mockApiResult,
-      prices: { ...mockApiResult.prices, cheapest_price: 0 }
-    };
-
-    const result = transformApiResult(resultWithZeroPrice);
-
-    expect(result.price).toBe('Enquire now');
-  });
-
-  it('formats price as "Enquire now" when price is "Enquire now"', () => {
-    const resultWithEnquire = {
-      ...mockApiResult,
-      prices: { ...mockApiResult.prices, cheapest_price: 'Enquire now' }
-    };
-
-    const result = transformApiResult(resultWithEnquire);
-
-    expect(result.price).toBe('Enquire now');
-  });
-
-  it('formats numeric price with £ symbol', () => {
-    const result = transformApiResult(mockApiResult);
-
-    expect(result.price).toBe('£2000');
-  });
-
-  it('returns undefined original_price when was_price is 0', () => {
-    const resultWithZeroWasPrice = {
-      ...mockApiResult,
-      was_prices: { ...mockApiResult.was_prices, balcony: 0 }
-    };
-
-    const result = transformApiResult(resultWithZeroWasPrice);
-
-    expect(result.original_price).toBeUndefined();
-  });
-
-  it('returns undefined original_price when was_price is "Enquire now"', () => {
-    const resultWithEnquireWasPrice = {
-      ...mockApiResult,
-      was_prices: { ...mockApiResult.was_prices, balcony: 0 },
-      prices: {
-        ...mockApiResult.prices,
-        cheapest_price: 'Enquire now',
-        balcony: 'Enquire now'
-      }
-    };
-
-    const result = transformApiResult(resultWithEnquireWasPrice);
-
-    expect(result.original_price).toBeUndefined();
-  });
-
-  it('formats route with start and end for long itineraries', () => {
-    const result = transformApiResult(mockApiResult);
-
-    expect(result.route).toBe('Barcelona → Marseille');
-  });
-
-  it('formats route with all stops for short itineraries', () => {
-    const resultWithShortItinerary = {
-      ...mockApiResult,
-      itinerary: ['Barcelona', 'Rome']
-    };
-
-    const result = transformApiResult(resultWithShortItinerary);
-
-    expect(result.route).toBe('Barcelona → Rome');
-  });
-
-  it('returns undefined offer_label when no campaigns', () => {
-    const resultWithNoCampaigns = {
-      ...mockApiResult,
-      campaigns: []
-    };
-
-    const result = transformApiResult(resultWithNoCampaigns);
-
-    expect(result.offer_label).toBeUndefined();
-  });
-
-  it('uses data from extras object', () => {
-    const result = transformApiResult(mockApiResult);
-
-    expect(result.date).toBe('Oct 2025 - Oct 2025');
-    expect(result.duration).toBe('Seven Days');
-  });
-
-  it('handles string prices correctly', () => {
-    const resultWithStringPrice = {
-      ...mockApiResult,
-      prices: { ...mockApiResult.prices, cheapest_price: '£1500pp' }
-    };
-
-    const result = transformApiResult(resultWithStringPrice);
-
-    expect(result.price).toBe('£1500pp');
-  });
-});
-
-describe('fetchCruiseCards', () => {
-  beforeEach(() => {
-    global.fetch = jest.fn();
-  });
-
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
-  it('filters out offers with past departure dates', async () => {
-    const validOffer: ApiCruiseResult = {
-      ...mockApiResult,
-      cruise_id: 1,
-      departs: '2026-12-25' // Future date
-    };
-
-    const pastOffer: ApiCruiseResult = {
-      ...mockApiResult,
-      cruise_id: 2,
-      departs: '2024-01-01' // Past date
-    };
-
-    const mockResponse = {
-      results: [validOffer, pastOffer]
-    };
-
-    (global.fetch as jest.Mock).mockResolvedValueOnce({
-      ok: true,
-      json: async () => mockResponse
-    });
-
-    const result = await fetchCruiseCards([1, 2]);
-
-    // Should only include the valid offer with future date
-    expect(result).toHaveLength(1);
-    expect(result[0]).toBeDefined();
-    expect(result[0].cruise_id).toBe('1');
-  });
-
-  it('filters out offers with invalid date format', async () => {
-    const validOffer: ApiCruiseResult = {
-      ...mockApiResult,
-      cruise_id: 1,
-      departs: '2026-12-25'
-    };
-
-    const invalidDateOffer: ApiCruiseResult = {
-      ...mockApiResult,
-      cruise_id: 2,
-      departs: 'invalid-date'
-    };
-
-    const mockResponse = {
-      results: [validOffer, invalidDateOffer]
-    };
-
-    (global.fetch as jest.Mock).mockResolvedValueOnce({
-      ok: true,
-      json: async () => mockResponse
-    });
-
-    const result = await fetchCruiseCards([1, 2]);
-
-    expect(result).toHaveLength(1);
-    expect(result[0]).toBeDefined();
-    expect(result[0].cruise_id).toBe('1');
-  });
-
-  it('includes offers departing today', async () => {
-    const today = new Date();
-    const todayString = today.toISOString().split('T')[0];
-
-    const todayOffer: ApiCruiseResult = {
-      ...mockApiResult,
-      cruise_id: 1,
-      departs: todayString
-    };
-
-    const mockResponse = {
-      results: [todayOffer]
-    };
-
-    (global.fetch as jest.Mock).mockResolvedValueOnce({
-      ok: true,
-      json: async () => mockResponse
-    });
-
-    const result = await fetchCruiseCards([1]);
-
-    expect(result).toHaveLength(1);
-    expect(result[0]).toBeDefined();
-    expect(result[0].cruise_id).toBe('1');
-  });
-});