// @ts-check
import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import Loader 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 } });

test('Loader class', async ({ mount }) => {
  const component = await mount(withThemeProvider(<Loader size="small" />));
  const div = await component.locator('div.lds-ring');
  await expect(div).toHaveClass('lds-ring');
});

test('Loader size small', async ({ mount }) => {
  const component = await mount(withThemeProvider(<Loader size="small" />));
  const div = await component.locator('div.lds-ring');
  await expect(div).toHaveCSS('width', '20px');
  await expect(div).toHaveCSS('height', '20px');
});

test('Loader size medium', async ({ mount }) => {
  const component = await mount(withThemeProvider(<Loader size="medium" />));
  const div = await component.locator('div.lds-ring');
  await expect(div).toHaveCSS('width', '30px');
  await expect(div).toHaveCSS('height', '30px');
});

test('Loader size large', async ({ mount }) => {
  const component = await mount(withThemeProvider(<Loader size="large" />));
  const div = await component.locator('div.lds-ring');
  await expect(div).toHaveCSS('width', '50px');
  await expect(div).toHaveCSS('height', '50px');
});