@times-components/ts-components 1.146.2-0831d531868ee6854720b5b42c0a1ccdbe6a4a70.45 → 1.146.2-784617dc4a33959b8795da1d7f425c9929322fae.24

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

@@ -1,169 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { SkeletonCard } from '../SkeletonCard';
-
-describe('SkeletonCard', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<SkeletonCard />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('renders placeholder image', () => {
-    render(<SkeletonCard />);
-    const imageContainer = screen.getByTestId('skeleton-image-container');
-    expect(imageContainer).toBeInTheDocument();
-  });
-
-  it('renders skeleton headline', () => {
-    render(<SkeletonCard />);
-    const skeletonHeadline = screen.getByTestId('skeleton-headline');
-    expect(skeletonHeadline).toBeInTheDocument();
-  });
-
-  it('renders four skeleton data points in the list', () => {
-    render(<SkeletonCard />);
-    const dataPoints = [
-      screen.getByTestId('skeleton-data-point-1'),
-      screen.getByTestId('skeleton-data-point-2'),
-      screen.getByTestId('skeleton-data-point-3'),
-      screen.getByTestId('skeleton-data-point-4')
-    ];
-    expect(dataPoints.length).toBe(4);
-  });
-
-  it('renders skeleton lines for data points', () => {
-    render(<SkeletonCard />);
-    const skeletonLines = [
-      screen.getByTestId('skeleton-line-1'),
-      screen.getByTestId('skeleton-line-2'),
-      screen.getByTestId('skeleton-line-3'),
-      screen.getByTestId('skeleton-line-4'),
-      screen.getByTestId('skeleton-price-label')
-    ];
-    expect(skeletonLines.length).toBe(5);
-  });
-
-  it('renders skeleton price', () => {
-    render(<SkeletonCard />);
-    const skeletonPrice = screen.getByTestId('skeleton-price');
-    expect(skeletonPrice).toBeInTheDocument();
-  });
-
-  it('renders skeleton button', () => {
-    render(<SkeletonCard />);
-    const skeletonButton = screen.getByTestId('skeleton-button');
-    expect(skeletonButton).toBeInTheDocument();
-  });
-
-  it('has correct card structure', () => {
-    render(<SkeletonCard />);
-    const cardContainer = screen.getByTestId('skeleton-card-container');
-    const cardContent = screen.getByTestId('skeleton-card-content');
-    const topContainer = screen.getByTestId('skeleton-top-container');
-    const bottomContainer = screen.getByTestId('skeleton-bottom-container');
-
-    expect(cardContainer).toBeInTheDocument();
-    expect(cardContent).toBeInTheDocument();
-    expect(topContainer).toBeInTheDocument();
-    expect(bottomContainer).toBeInTheDocument();
-  });
-
-  it('renders price section with container', () => {
-    render(<SkeletonCard />);
-    const priceSection = screen.getByTestId('skeleton-price-section');
-    const priceContainer = screen.getByTestId('skeleton-price-container');
-
-    expect(priceSection).toBeInTheDocument();
-    expect(priceContainer).toBeInTheDocument();
-  });
-
-  it('renders data points list', () => {
-    render(<SkeletonCard />);
-    const dataPointsList = screen.getByTestId('skeleton-data-points-list');
-    expect(dataPointsList).toBeInTheDocument();
-  });
-
-  it('skeleton lines are rendered for each data point', () => {
-    render(<SkeletonCard />);
-    const skeletonLines = [
-      screen.getByTestId('skeleton-line-1'),
-      screen.getByTestId('skeleton-line-2'),
-      screen.getByTestId('skeleton-line-3'),
-      screen.getByTestId('skeleton-line-4'),
-      screen.getByTestId('skeleton-price-label')
-    ];
-    expect(skeletonLines.length).toBe(5);
-  });
-
-  it('renders with correct skeleton styling', () => {
-    render(<SkeletonCard />);
-
-    expect(screen.getByTestId('skeleton-headline')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-price')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-button')).toBeInTheDocument();
-    // Check that skeleton lines are present
-    expect(screen.getByTestId('skeleton-line-1')).toBeInTheDocument();
-  });
-
-  it('renders consistent structure', () => {
-    render(<SkeletonCard />);
-
-    expect(screen.getByTestId('skeleton-card-container')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-image-container')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-card-content')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-top-container')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-bottom-container')).toBeInTheDocument();
-  });
-
-  it('can render multiple skeleton cards', () => {
-    render(
-      <>
-        <SkeletonCard />
-        <SkeletonCard />
-        <SkeletonCard />
-      </>
-    );
-
-    const cards = screen.getAllByTestId('skeleton-card-container');
-    expect(cards.length).toBe(3);
-  });
-
-  it('renders skeleton elements in correct order', () => {
-    render(<SkeletonCard />);
-
-    const cardContent = screen.getByTestId('skeleton-card-content');
-    const topContainer = screen.getByTestId('skeleton-top-container');
-    const bottomContainer = screen.getByTestId('skeleton-bottom-container');
-
-    // Verify both containers exist as children of card content
-    expect(cardContent.contains(topContainer)).toBe(true);
-    expect(cardContent.contains(bottomContainer)).toBe(true);
-  });
-
-  it('skeleton button has correct structure', () => {
-    render(<SkeletonCard />);
-    const skeletonButton = screen.getByTestId('skeleton-button');
-
-    expect(skeletonButton.tagName.toLowerCase()).toBe('div');
-  });
-
-  it('skeleton lines have correct width props', () => {
-    render(<SkeletonCard />);
-
-    // Check that the skeleton lines are rendered
-    expect(screen.getByTestId('skeleton-line-1')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-line-2')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-line-3')).toBeInTheDocument();
-    expect(screen.getByTestId('skeleton-line-4')).toBeInTheDocument();
-  });
-
-  it('renders without any interactive elements', () => {
-    const { container } = render(<SkeletonCard />);
-    const buttons = container.querySelectorAll('button');
-    const links = container.querySelectorAll('a');
-
-    expect(buttons.length).toBe(0);
-    expect(links.length).toBe(0);
-  });
-});

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' });
-  });
-});