/* @vitest-environment jsdom */

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

import { PlatformQuantityBadge } from './PlatformQuantityBadge';

test('renders a dark bottom-right quantity badge by default', () => {
  render(<PlatformQuantityBadge>3</PlatformQuantityBadge>);

  const badge = screen.getByText('3');

  expect(badge.className).toContain('absolute');
  expect(badge.className).toContain('bottom-1');
  expect(badge.className).toContain('right-1');
  expect(badge.className).toContain('bg-black/70');
  expect(badge.className).toContain('text-[10px]');
});

test('supports custom class names', () => {
  render(
    <PlatformQuantityBadge className="custom-quantity">
      12
    </PlatformQuantityBadge>,
  );

  const badge = screen.getByText('12');

  expect(badge.className).toContain('rounded-full');
  expect(badge.className).toContain('custom-quantity');
});