import React from 'react';
import { expect, test } from '@playwright/experimental-ct-react';
import { withThemeProvider } from '../../../helpers';
import Badge from './index.js';

test.use({ viewport: { width: 500, height: 500 } });

test.describe('Badge Component Tests', () => {
  test('Badge Default', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Badge>Cookie</Badge>));
    await expect(component).toContainText('Cookie');
    await expect(component).toHaveCSS('font-size', '18px');
    await expect(component).toHaveCSS('padding', '4px 12px 4px 8px');
  });
  test('Badge Default with icon', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Badge icon="IlluCookieSolo">Cookie</Badge>));
    await expect(component).toHaveCSS('font-size', '16px');
  });
});