import { render, screen } from '@testing-library/react';
import { expect, test } from 'vitest';
import { ProtocolTag } from './ProtocolTag';

test.each([
  ['GB32960', 'GB/T 32960', 'semi-tag-blue-light'],
  ['JT808', 'JT/T 808', 'semi-tag-cyan-light'],
  ['YUTONG_MQTT', '宇通 MQTT', 'semi-tag-violet-light']
])('renders %s with its shared display label and source color', (protocol, label, colorClass) => {
  const view = render(<ProtocolTag protocol={protocol} />);
  const tag = view.container.querySelector('.v2-protocol-tag.semi-tag');

  expect(screen.getByText(label)).toBeInTheDocument();
  expect(tag).toHaveClass(colorClass);
});

test('renders a neutral fallback for a missing protocol', () => {
  const view = render(<ProtocolTag />);

  expect(screen.getByText('未知来源')).toBeInTheDocument();
  expect(view.container.querySelector('.v2-protocol-tag.semi-tag')).toHaveClass('semi-tag-grey-light');
});
