@axeptio/design-system/build/src/Core/Toasts/toasts.spec.jsx

Design System for Axeptio

import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import Toast 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 = {
  position: 'top-middle',
  absolute: true,
  title: 'New mail !',
  description: 'Check your mailbox to see our monthly newletters ✌️',
  backgroundColor: '#212121',
  color: '#FFF',
  icon: null,
  close: undefined
};

test('CSS Toasts', async ({ mount }) => {
  const component = await mount(withThemeProvider(<Toast {...args} />));
  await expect(component).toHaveCSS('cursor', 'pointer');
  await expect(component).toHaveCSS('position', 'absolute');
  await expect(component).toHaveCSS('z-index', '2147483647');
});

test('Background Toasts', async ({ mount }) => {
  const _args = { ...args, backgroundColor: '#ff0000' };
  const component = await mount(withThemeProvider(<Toast {..._args} />));
  await expect(component).toHaveCSS('background-color', 'rgb(255, 0, 0)');
});

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

test('Title Toasts', async ({ mount }) => {
  const component = await mount(withThemeProvider(<Toast {...args} />));
  await expect(component).toContainText('New mail !');
});

test('Description Toasts', async ({ mount }) => {
  const component = await mount(withThemeProvider(<Toast {...args} />));
  await expect(component).toContainText('Check your mailbox to see our monthly newletters ✌️');
});

test('Toast Top Left', async ({ mount }) => {
  const _args = { ...args, position: 'top-left' };
  const component = await mount(withThemeProvider(<Toast {..._args} />));
  await expect(component).toHaveCSS('top', '20px');
  await expect(component).toHaveCSS('left', '20px');
});

test('Toast Top middle', async ({ mount }) => {
  const _args = { ...args, position: 'top-middle' };
  const component = await mount(withThemeProvider(<Toast {..._args} />));
  await expect(component).toHaveCSS('top', '20px');
  await expect(component).toHaveCSS('left', '250px');
});

test('Toast Top right', async ({ mount }) => {
  const _args = { ...args, position: 'top-right' };
  const component = await mount(withThemeProvider(<Toast {..._args} />));
  await expect(component).toHaveCSS('top', '20px');
  await expect(component).toHaveCSS('right', '20px');
});

test('Toast Bottom left', async ({ mount }) => {
  const _args = { ...args, position: 'bottom-left' };
  const component = await mount(withThemeProvider(<Toast {..._args} />));
  await expect(component).toHaveCSS('bottom', '20px');
  await expect(component).toHaveCSS('bottom', '20px');
});

test('Toast Bottom middle', async ({ mount }) => {
  const _args = { ...args, position: 'bottom-middle' };
  const component = await mount(withThemeProvider(<Toast {..._args} />));
  await expect(component).toHaveCSS('bottom', '20px');
  await expect(component).toHaveCSS('left', '250px');
});

test('Toast Bottom right', async ({ mount }) => {
  const _args = { ...args, position: 'bottom-right' };
  const component = await mount(withThemeProvider(<Toast {..._args} />));
  await expect(component).toHaveCSS('bottom', '20px');
  await expect(component).toHaveCSS('right', '20px');
});

test('Toats enable', async ({ mount }) => {
  const component = await mount(withThemeProvider(<Toast {...args} />));
  await expect(component).toBeEnabled();
});