@axeptio/design-system/build/src/Core/Controls/Button/button.spec.jsx

Design System for Axeptio

// @ts-check
import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import Button 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.describe('Button Component Tests', () => {
  test('Event click should work', async ({ mount }) => {
    let clicked = false;

    const component = await mount(
      withThemeProvider(
        <Button label="Submit" onClick={() => (clicked = true)}>
          Submit
        </Button>
      )
    );

    await expect(component).toContainText('Submit');
    await component.click();
    expect(clicked).toBeTruthy();
  });

  test('Primary background', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button primary label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('background-color', 'rgb(255, 206, 67)');
  });

  test('Primary background Hover', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button primary label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await component.hover();
    await expect(component).toHaveCSS('background-color', 'rgb(33, 33, 33)');
  });

  test('Primary color', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button primary label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('color', 'rgb(33, 33, 33)');
  });

  test('Active Primary Box Shadow', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button active primary label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('box-shadow', 'rgba(255, 206, 67, 0.35) 0px 0px 0px 2px');
  });

  test('Secondary background', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button secondary label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('background-color', 'rgb(33, 33, 33)');
  });

  test('Secondary background Hover', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button secondary label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await component.hover();
    await expect(component).toHaveCSS('background-color', 'rgb(0, 0, 0)');
  });

  test('Secondary color', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button secondary label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('color', 'rgb(255, 255, 255)');
  });

  test('Default background', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('background-color', 'rgb(233, 236, 241)');
  });

  test('Large', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button size={'large'} label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('height', '70px');
  });

  test('Medium', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button size={'medium'} label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('height', '58px');
  });

  test('Small', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button size={'small'} label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('height', '46px');
  });

  test('Font', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button size={'small'} label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
  });

  test('Cursor', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button size={'small'} label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('cursor', 'pointer');
  });

  test('Disabled Cursor', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button disabled size={'small'} label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('cursor', 'not-allowed');
  });

  test('Disabled', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button disabled label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toBeDisabled();
  });

  test('Full Width', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button fullWidth label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('width', '484px');
  });

  test('Button xsmall', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button size={'xsmall'} label="Submit" onClick={() => console.log('clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('height', '17px');
  });

  test('Button link', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button link label="Submit" onClick={() => console.log('link clicked')}>
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
    await expect(component).toHaveCSS('text-decoration', 'underline solid rgb(138, 142, 148)');
  });

  test('Button link no underline', async ({ mount }) => {
    const component = await mount(
      withThemeProvider(
        <Button linkNoUnderline label="Submit">
          Submit
        </Button>
      )
    );
    await expect(component).toHaveCSS('background-color', 'rgb(233, 236, 241)');
    await expect(component).toHaveCSS('text-decoration', 'none solid rgb(33, 33, 33)');
  });
});