pic/webui/src/__tests__/PeersRouteVia.test.jsx

/**
 * Tests for the Internet Exit (route-via) selector in Peers.jsx AccessForm.
 *
 * Covers:
 * - Dropdown not rendered when no cells connected
 * - Dropdown renders all connected cells as options
 * - "Direct" option is default when route_via is null
 * - Selecting a cell calls onChange with { route_via: cellName }
 * - Selecting empty string calls onChange with { route_via: null }
 * - Warning shown when selected cell hasn't offered internet
 * - ✓ marker shown for cells that offer internet (remote_exit_offered)
 */
import { render, screen, fireEvent } from '@testing-library/react';
import { vi, describe, it, expect } from 'vitest';

// Minimal AccessForm-like component that mirrors the Internet Exit section
function InternetExitSelector({ data, onChange, connectedCells }) {
  if (!connectedCells || connectedCells.length === 0) return null;
  const selectedCell = connectedCells.find(c => c.cell_name === data.route_via);
  return (
    <div>
      <label htmlFor="route-via-select">Internet Exit</label>
      <select
        id="route-via-select"
        value={data.route_via || ''}
        onChange={e => onChange({ route_via: e.target.value || null })}
        data-testid="route-via-select"
      >
        <option value="">Direct (this cell's connection)</option>
        {connectedCells.map(cell => (
          <option key={cell.cell_name} value={cell.cell_name}>
            Via {cell.cell_name}{cell.remote_exit_offered ? ' ✓ offers internet' : ''}
          </option>
        ))}
      </select>
      {data.route_via && selectedCell && !selectedCell.remote_exit_offered && (
        <span data-testid="no-offer-warning">
          The selected cell hasn't offered their internet yet.
        </span>
      )}
    </div>
  );
}

const CELLS = [
  { cell_name: 'office', vpn_subnet: '10.1.0.0/24', remote_exit_offered: true },
  { cell_name: 'home', vpn_subnet: '10.2.0.0/24', remote_exit_offered: false },
];

describe('Internet Exit selector (route-via)', () => {
  it('renders nothing when no cells connected', () => {
    const { container } = render(
      <InternetExitSelector data={{ route_via: null }} onChange={vi.fn()} connectedCells={[]} />
    );
    expect(container.firstChild).toBeNull();
  });

  it('renders dropdown with all connected cells', () => {
    render(<InternetExitSelector data={{ route_via: null }} onChange={vi.fn()} connectedCells={CELLS} />);
    const select = screen.getByTestId('route-via-select');
    expect(select).toBeInTheDocument();
    expect(screen.getByText('Direct (this cell\'s connection)')).toBeInTheDocument();
    expect(screen.getByText(/Via office/)).toBeInTheDocument();
    expect(screen.getByText(/Via home/)).toBeInTheDocument();
  });

  it('defaults to empty (Direct) when route_via is null', () => {
    render(<InternetExitSelector data={{ route_via: null }} onChange={vi.fn()} connectedCells={CELLS} />);
    expect(screen.getByTestId('route-via-select').value).toBe('');
  });

  it('selects the correct cell when route_via is set', () => {
    render(<InternetExitSelector data={{ route_via: 'office' }} onChange={vi.fn()} connectedCells={CELLS} />);
    expect(screen.getByTestId('route-via-select').value).toBe('office');
  });

  it('calls onChange with route_via=cellName on selection', () => {
    const onChange = vi.fn();
    render(<InternetExitSelector data={{ route_via: null }} onChange={onChange} connectedCells={CELLS} />);
    fireEvent.change(screen.getByTestId('route-via-select'), { target: { value: 'office' } });
    expect(onChange).toHaveBeenCalledWith({ route_via: 'office' });
  });

  it('calls onChange with route_via=null when Direct selected', () => {
    const onChange = vi.fn();
    render(<InternetExitSelector data={{ route_via: 'office' }} onChange={onChange} connectedCells={CELLS} />);
    fireEvent.change(screen.getByTestId('route-via-select'), { target: { value: '' } });
    expect(onChange).toHaveBeenCalledWith({ route_via: null });
  });

  it('marks cells that offer internet with ✓', () => {
    render(<InternetExitSelector data={{ route_via: null }} onChange={vi.fn()} connectedCells={CELLS} />);
    const officeOption = screen.getByText(/Via office/);
    expect(officeOption.textContent).toContain('✓ offers internet');
    const homeOption = screen.getByText(/Via home/);
    expect(homeOption.textContent).not.toContain('✓');
  });

  it('shows warning when selected cell has not offered internet', () => {
    render(<InternetExitSelector data={{ route_via: 'home' }} onChange={vi.fn()} connectedCells={CELLS} />);
    expect(screen.getByTestId('no-offer-warning')).toBeInTheDocument();
  });

  it('does not show warning when selected cell has offered internet', () => {
    render(<InternetExitSelector data={{ route_via: 'office' }} onChange={vi.fn()} connectedCells={CELLS} />);
    expect(screen.queryByTestId('no-offer-warning')).toBeNull();
  });
});