@axeptio/design-system/src/Core/RadioGroup/radioGroup.spec.jsx

Design System for Axeptio

// @ts-check
import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import RadioGroup 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 list = [
  {
    name: 'Marketing',
    background: 'rgb(255, 150, 115)'
  },
  {
    name: 'Developer',
    background: 'rgb(80, 186, 190)'
  },
  {
    name: 'DPO',
    background: 'rgb(76, 116, 193)'
  }
];

test('List elements', async ({ mount }) => {
  const component = await mount(
    withThemeProvider(<RadioGroup list={list} currentCategory="" handleCategoryChange={undefined} />)
  );
  await expect(component.locator('input#Marketing')).toBeEnabled();
  await expect(component.locator('input#Developer')).toBeEnabled();
  await expect(component.locator('input#DPO')).toBeEnabled();
});

test('List elements checked', async ({ mount }) => {
  const component = await mount(
    withThemeProvider(<RadioGroup list={list} currentCategory="Developer" handleCategoryChange={undefined} />)
  );
  await expect(component.locator('input#Marketing')).toBeEnabled();
  await expect(component.locator('input#Developer')).toBeChecked();
  await expect(component.locator('input#DPO')).toBeEnabled();
});

test('Background Color selected', async ({ mount }) => {
  const component = await mount(
    withThemeProvider(<RadioGroup list={list} currentCategory="Marketing" handleCategoryChange={undefined} />)
  );
  await expect(component.locator('span[for=Marketing]')).toHaveCSS('background-color', 'rgb(255, 150, 115)');
  await expect(component.locator('span[for=Marketing]')).toHaveCSS('color', 'rgb(255, 255, 255)');
  await expect(component.locator('span[for=Marketing]')).toHaveCSS('border-radius', '1000px');
  await expect(component.locator('span[for=Developer]')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
  await expect(component.locator('span[for=Developer]')).toHaveCSS('color', 'rgb(33, 33, 33)');
  await expect(component.locator('span[for=DPO]')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
  await expect(component.locator('span[for=DPO]')).toHaveCSS('color', 'rgb(33, 33, 33)');
});

test('Cursor pointer', async ({ mount }) => {
  const component = await mount(
    withThemeProvider(<RadioGroup list={list} currentCategory="Marketing" handleCategoryChange={undefined} />)
  );
  await expect(component.locator('span[for=Marketing]')).toHaveCSS('cursor', 'pointer');
  await expect(component.locator('span[for=Developer]')).toHaveCSS('cursor', 'pointer');
  await expect(component.locator('span[for=DPO]')).toHaveCSS('cursor', 'pointer');
});

test('Cursor pointer disable', async ({ mount }) => {
  const listDisabled = [
    {
      name: 'Marketing',
      background: 'rgb(255, 150, 115)'
    },
    {
      name: 'Developer',
      background: 'rgb(80, 186, 190)'
    },
    {
      name: 'DPO',
      background: 'rgb(76, 116, 193)',
      disabled: true
    }
  ];
  const component = await mount(
    withThemeProvider(<RadioGroup list={listDisabled} currentCategory="Marketing" handleCategoryChange={undefined} />)
  );
  await expect(component.locator('span[for=Marketing]')).toHaveCSS('cursor', 'pointer');
  await expect(component.locator('span[for=Developer]')).toHaveCSS('cursor', 'pointer');
  await expect(component.locator('input#DPO')).toBeDisabled();
  await expect(component.locator('span[for=DPO]')).toHaveCSS('cursor', 'not-allowed');
});

test('Verify Text', async ({ mount }) => {
  const component = await mount(
    withThemeProvider(<RadioGroup list={list} currentCategory="" handleCategoryChange={undefined} />)
  );
  await expect(component.locator('span[for=Marketing]')).toContainText('Marketing');
  await expect(component.locator('span[for=Developer]')).toContainText('Developer');
  await expect(component.locator('span[for=DPO]')).toContainText('DPO');
  await expect(component.locator('span[for=Marketing]')).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
  await expect(component.locator('span[for=Developer]')).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
  await expect(component.locator('span[for=DPO]')).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
});

test('CSS Container', async ({ mount }) => {
  const component = await mount(
    withThemeProvider(<RadioGroup list={list} currentCategory="" handleCategoryChange={undefined} />)
  );
  await expect(component).toHaveCSS('background-color', 'rgb(244, 246, 251)');
  await expect(component).toHaveCSS('border-radius', '1000px');
  await expect(component).toHaveCSS('display', 'inline-flex');
  await expect(component).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
  await expect(component).toHaveCSS('padding', '4px');
});