WellNuo/__tests__/components/SetupProgressIndicator.test.tsx

import React from 'react';
import { render } from '@testing-library/react-native';
import {
  SetupProgressIndicator,
  SetupStep,
} from '@/components/SetupProgressIndicator';

describe('SetupProgressIndicator', () => {
  describe('Component rendering', () => {
    it('renders without crashing', () => {
      const { root } = render(<SetupProgressIndicator currentStep="name" />);
      expect(root).toBeDefined();
    });

    it('renders with default variant', () => {
      const { root } = render(<SetupProgressIndicator currentStep="name" />);
      expect(root).toBeDefined();
    });

    it('renders with compact variant', () => {
      const { root } = render(
        <SetupProgressIndicator currentStep="name" variant="compact" />
      );
      expect(root).toBeDefined();
    });
  });

  describe('Step progression', () => {
    const steps: SetupStep[] = ['name', 'beneficiary', 'purchase', 'activate'];

    it.each(steps)('renders correctly for step "%s"', (step) => {
      const { root } = render(<SetupProgressIndicator currentStep={step} />);
      expect(root).toBeDefined();
    });

    it('shows "Step 1 of 4" for name step', () => {
      const { getByText } = render(<SetupProgressIndicator currentStep="name" />);
      expect(getByText(/Step 1 of 4/)).toBeDefined();
    });

    it('shows "Step 2 of 4" for beneficiary step', () => {
      const { getByText } = render(
        <SetupProgressIndicator currentStep="beneficiary" />
      );
      expect(getByText(/Step 2 of 4/)).toBeDefined();
    });

    it('shows "Step 3 of 4" for purchase step', () => {
      const { getByText } = render(
        <SetupProgressIndicator currentStep="purchase" />
      );
      expect(getByText(/Step 3 of 4/)).toBeDefined();
    });

    it('shows "Step 4 of 4" for activate step', () => {
      const { getByText } = render(
        <SetupProgressIndicator currentStep="activate" />
      );
      expect(getByText(/Step 4 of 4/)).toBeDefined();
    });
  });

  describe('Step labels', () => {
    it('shows step label for name step', () => {
      const { getByText } = render(<SetupProgressIndicator currentStep="name" />);
      expect(getByText(/Your Name/)).toBeDefined();
    });

    it('shows step label for beneficiary step', () => {
      const { getByText } = render(
        <SetupProgressIndicator currentStep="beneficiary" />
      );
      expect(getByText(/Add Loved One/)).toBeDefined();
    });

    it('shows step label for purchase step', () => {
      const { getByText } = render(
        <SetupProgressIndicator currentStep="purchase" />
      );
      expect(getByText(/Get Equipment/)).toBeDefined();
    });

    it('shows step label for activate step', () => {
      const { getAllByText } = render(
        <SetupProgressIndicator currentStep="activate" />
      );
      // "Connect" appears as both the short label and in "Step 4 of 4: Connect"
      expect(getAllByText(/Connect/).length).toBeGreaterThan(0);
    });
  });

  describe('Progress visualization', () => {
    it('renders all 4 step circles', () => {
      const { getAllByTestId, root } = render(
        <SetupProgressIndicator currentStep="name" />
      );
      // Should have 4 step wrappers rendered
      expect(root).toBeDefined();
    });

    it('displays short labels in default variant', () => {
      const { getByText } = render(
        <SetupProgressIndicator currentStep="beneficiary" />
      );
      // Short labels: Name, Person, Equipment, Connect
      expect(getByText('Name')).toBeDefined();
      expect(getByText('Person')).toBeDefined();
      expect(getByText('Equipment')).toBeDefined();
      expect(getByText('Connect')).toBeDefined();
    });
  });

  describe('Variant differences', () => {
    it('default variant shows step labels', () => {
      const { getByText } = render(<SetupProgressIndicator currentStep="name" />);
      expect(getByText('Name')).toBeDefined();
    });

    it('compact variant does not show step labels', () => {
      const { queryByText } = render(
        <SetupProgressIndicator currentStep="name" variant="compact" />
      );
      // In compact mode, short labels should not be rendered
      // The component conditionally renders labels based on !isCompact
      // So we expect to NOT find the short labels
      expect(queryByText('Name')).toBeNull();
    });
  });

  describe('Edge cases', () => {
    it('handles first step correctly', () => {
      const { getByText } = render(<SetupProgressIndicator currentStep="name" />);
      expect(getByText(/Step 1 of 4/)).toBeDefined();
    });

    it('handles last step correctly', () => {
      const { getByText } = render(
        <SetupProgressIndicator currentStep="activate" />
      );
      expect(getByText(/Step 4 of 4/)).toBeDefined();
    });

    it('handles middle steps correctly', () => {
      const { getByText: getByText1 } = render(
        <SetupProgressIndicator currentStep="beneficiary" />
      );
      expect(getByText1(/Step 2 of 4/)).toBeDefined();

      const { getByText: getByText2 } = render(
        <SetupProgressIndicator currentStep="purchase" />
      );
      expect(getByText2(/Step 3 of 4/)).toBeDefined();
    });
  });

  describe('Accessibility', () => {
    it('renders with accessible text content', () => {
      const { getByText } = render(<SetupProgressIndicator currentStep="name" />);
      // Should have readable step information
      expect(getByText(/Step 1 of 4: Your Name/)).toBeDefined();
    });

    it('shows meaningful progress information', () => {
      const { getByText } = render(
        <SetupProgressIndicator currentStep="purchase" />
      );
      expect(getByText(/Step 3 of 4: Get Equipment/)).toBeDefined();
    });
  });
});