@axeptio/design-system/src/Core/Typography/Title/title.spec.jsx

Design System for Axeptio

// @ts-check
import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import Title 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.describe('Title Viewport SM', () => {
  const args = {
    level: 'h1',
    color: '#212121',
    children: 'Hello World',
    decoration: '',
    serif: false
  };

  test.use({
    viewport: {
      width: axeptio['breakpoints'].small,
      height: axeptio['breakpoints'].small
    }
  });

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

  test('Font Family Title h1 serif', async ({ mount }) => {
    const h1Serif = await mount(withThemeProvider(<Title {...args} serif={true} />));
    await expect(h1Serif).toHaveCSS('font-family', '"Source Serif 4", serif');
  });

  test('Font Family Title h2', async ({ mount }) => {
    const h2 = await mount(withThemeProvider(<Title {...args} level={'h2'} />));
    await expect(h2).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
  });

  test('Font Family Title h2 serif', async ({ mount }) => {
    const h2Serif = await mount(withThemeProvider(<Title {...args} level={'h2'} serif={true} />));
    await expect(h2Serif).toHaveCSS('font-family', '"Source Serif 4", serif');
  });

  test('Font Family Title h3', async ({ mount }) => {
    const h3 = await mount(withThemeProvider(<Title {...args} level={'h3'} />));
    await expect(h3).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
  });

  test('Font Family Title h4', async ({ mount }) => {
    const h4 = await mount(withThemeProvider(<Title {...args} level={'h4'} />));
    await expect(h4).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
  });

  test('Font Family Title h5', async ({ mount }) => {
    const h5 = await mount(withThemeProvider(<Title {...args} level={'h5'} />));
    await expect(h5).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
  });

  test('Font Family Title h6', async ({ mount }) => {
    const h6 = await mount(withThemeProvider(<Title {...args} level={'h6'} />));
    await expect(h6).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
  });

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

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

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

  test('Size Title H1', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Title {...args} />));
    await expect(component).toHaveCSS('font-size', '40px');
  });

  test('Size Title H2', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Title {...args} level={'h2'} />));
    await expect(component).toHaveCSS('font-size', '36px');
  });

  test('Size Title H3', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Title {...args} level={'h3'} />));
    await expect(component).toHaveCSS('font-size', '32px');
  });

  test('Size Title H4', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Title {...args} level={'h4'} />));
    await expect(component).toHaveCSS('font-size', '28px');
  });

  test('Size Title H5', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Title {...args} level={'h5'} />));
    await expect(component).toHaveCSS('font-size', '22px');
  });

  test('Size Title H6', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Title {...args} level={'h6'} />));
    await expect(component).toHaveCSS('font-size', '20px');
  });
});

test.describe('Title Viewport LG', () => {
  const args = {
    level: 'h1',
    color: '#212121',
    children: 'Hello World',
    decoration: '',
    serif: false
  };

  test.use({
    viewport: {
      width: axeptio['breakpoints'].xxxlarge,
      height: axeptio['breakpoints'].xxxlarge
    }
  });

  test('Size Title H1', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Title {...args} />));
    await expect(component).toHaveCSS('font-size', '82px');
  });

  test('Size Title H2', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Title {...args} level={'h2'} />));
    await expect(component).toHaveCSS('font-size', '54px');
  });

  test('Size Title H3', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Title {...args} level={'h3'} />));
    await expect(component).toHaveCSS('font-size', '42px');
  });

  test('Size Title H4', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Title {...args} level={'h4'} />));
    await expect(component).toHaveCSS('font-size', '38px');
  });

  test('Size Title H5', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Title {...args} level={'h5'} />));
    await expect(component).toHaveCSS('font-size', '32px');
  });

  test('Size Title H6', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Title {...args} level={'h6'} />));
    await expect(component).toHaveCSS('font-size', '24px');
  });
});