import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import Paragraph from './index.jsx';
import { axeptio } from '../../../Presets';
import { Provider } from '../../../DesignSystem';

/**
 * Custom test utility function that wraps a test component with ThemeProvider
 * This function cannot be imported from another file because it breaks the tests
 * https://github.com/microsoft/playwright/issues/15620
 * @param {JSX.Element} component
 */
function withThemeProvider(component) {
  return (
    /* @ts-expect-error Server Component */
    <Provider theme={axeptio}>{component}</Provider>
  );
}

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

const args = {
  color: '#212121',
  children: 'Hello World',
  decoration: 'underline'
};

test('Fonts Paragraph', async ({ mount }) => {
  const component = await mount(withThemeProvider(<Paragraph {...args} />));
  await expect(component).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
});

test('Color Paragraph', async ({ mount }) => {
  const component = await mount(withThemeProvider(<Paragraph {...args} />));
  await expect(component).toHaveCSS('color', 'rgb(33, 33, 33)');
});

test('Text Paragraph', async ({ mount }) => {
  const component = await mount(withThemeProvider(<Paragraph {...args} />));
  await expect(component).toContainText('Hello World');
});

test('Decoration Paragraph', async ({ mount }) => {
  const _args = { ...args, decoration: 'underline' };
  const component = await mount(withThemeProvider(<Paragraph {..._args} />));
  await expect(component).toHaveCSS('text-decoration', 'underline solid rgb(33, 33, 33)');
});