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

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

@@ -0,0 +1,206 @@
+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

@@ -0,0 +1,165 @@
+import { transformApiResult } 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: {
+    cheapest_price: 2500,
+    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, cheapest_price: 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, cheapest_price: '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');
+  });
+});