carmanagement/apps/homepage/tests/unit/pricing-section.test.tsx

import { PricingSection } from '@/components/homepage/sections/PricingSection';
import enHomepage from '@/content/locales/en/homepage.json';
import enShell from '@/content/locales/en/shell.json';
import { buildHomepageContent } from '@/content/homepage-model';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { beforeEach, describe, expect, it } from 'vitest';

describe('PricingSection', () => {
  beforeEach(() => {
    document.documentElement.dataset.theme = 'light';
  });

  it('changes the recommended plan when the fleet band changes', async () => {
    const user = userEvent.setup();
    const content = buildHomepageContent(enHomepage, enShell).pricing;
    const { container } = render(
      <PricingSection
        content={content}
        locale="en"
        themePreference="light"
        homePath="/en/system"
        demoSubmissionEnabled
      />,
    );

    expect(container.querySelector('[data-plan="launch"]')).toHaveAttribute(
      'data-recommended',
      'true',
    );

    await user.click(screen.getByLabelText('26–75 vehicles'));

    expect(container.querySelector('[data-plan="growth"]')).toHaveAttribute(
      'data-recommended',
      'true',
    );
    expect(container.querySelector('[data-plan="launch"]')).not.toHaveAttribute('data-recommended');

    await user.click(screen.getByLabelText('76–150 vehicles'));

    expect(container.querySelector('[data-plan="pro"]')).toHaveAttribute(
      'data-recommended',
      'true',
    );
    expect(container.querySelector('[data-plan="growth"]')).not.toHaveAttribute('data-recommended');
  });

  it('renders approved public prices except for Enterprise custom pricing', async () => {
    const user = userEvent.setup();
    const content = buildHomepageContent(enHomepage, enShell).pricing;
    render(
      <PricingSection
        content={content}
        locale="en"
        themePreference="light"
        homePath="/en/system"
        demoSubmissionEnabled
      />,
    );

    expect(screen.queryByText('Starting price pending approval')).not.toBeInTheDocument();
    expect(screen.getByText(/149/)).toBeInTheDocument();
    expect(screen.getByText(/299/)).toBeInTheDocument();
    expect(screen.getByText(/399/)).toBeInTheDocument();
    expect(screen.getByText('Custom pricing')).toBeInTheDocument();

    await user.click(screen.getByLabelText(/Annual/));

    expect(screen.getByText(/Save 20%/)).toBeInTheDocument();
    expect(screen.getByText(/1,430/)).toBeInTheDocument();
    expect(screen.getAllByText('/ year')).toHaveLength(3);
    expect(screen.getAllByText('billed annually after full-payment discount')).toHaveLength(3);
  });

  it('links self-serve plan CTAs to account creation and opens a pricing form for Enterprise', () => {
    const content = buildHomepageContent(enHomepage, enShell).pricing;
    render(
      <PricingSection
        content={content}
        locale="en"
        themePreference="dark"
        homePath="/en/system"
        demoSubmissionEnabled
      />,
    );

    expect(screen.getByRole('link', { name: 'Estimate Launch pricing' })).toHaveAttribute(
      'href',
      '/dashboard/sign-up?lang=en&theme=dark&plan=STARTER',
    );
    expect(screen.getByRole('link', { name: 'Book a Growth demo' })).toHaveAttribute(
      'href',
      '/dashboard/sign-up?lang=en&theme=dark&plan=GROWTH',
    );
    expect(screen.getByRole('link', { name: 'Book a Pro demo' })).toHaveAttribute(
      'href',
      '/dashboard/sign-up?lang=en&theme=dark&plan=PRO',
    );
    expect(screen.getByRole('button', { name: 'Talk to sales' })).toHaveAttribute(
      'data-demo-source',
      'pricing',
    );
    expect(screen.queryByRole('link', { name: 'Talk to sales' })).not.toBeInTheDocument();
  });
});