@axeptio/design-system/build/src/Core/Menu/Desktop/menu.spec.jsx

Design System for Axeptio

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

const list = [
  {
    name: 'Features',
    submenu: [
      {
        name: 'Cookies widget',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        img: 'https://axeptio.imgix.net/2018/12/FAQ-temps.png?w=40',
        link: '#'
      },
      {
        name: 'Consent Widget',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        img: 'https://axeptio.imgix.net/2018/12/FAQ-temps.png?w=40',
        link: '#'
      }
    ]
  },
  {
    name: 'Ressources',
    submenu: [
      {
        name: 'User documentation',
        link: '#'
      },
      {
        name: 'Developer documentation',
        link: '#'
      },
      {
        name: 'Use case',
        link: '#'
      },
      {
        name: 'Blog',
        link: '#'
      }
    ]
  },
  {
    name: 'Price',
    link: '#'
  }
];

test.describe('Desktop', () => {
  // Run tests in this describe block with portrait-like viewport.
  test.use({ viewport: { width: 1300, height: 500 } });
  test('Test render menu', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Menu test menu={list} />));
    await expect(component.locator('button#Features')).toBeEnabled();
    await expect(component.locator('button#Features')).toContainText('Features');
    await expect(component.locator('button#Ressources')).toBeEnabled();
    await expect(component.locator('button#Ressources')).toContainText('Ressources');
    await expect(component.locator('a#Price')).toBeEnabled();
    await expect(component.locator('a#Price')).toContainText('Price');
  });

  test('Test Font menu', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Menu test id={'menu_test'} menu={list} />));
    await expect(component).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
  });

  test('Test Display Desktop', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Menu test id={'menu_test'} menu={list} />));
    await expect(component).toHaveCSS('display', 'flex');
    await expect(component).toHaveCSS('justify-content', 'center');
  });
});

test.describe('Mobile', () => {
  // Run tests in this describe block with portrait-like viewport.
  test.use({ viewport: { width: 500, height: 500 } });
  test('Test Mobile not Display', async ({ mount }) => {
    const component = await mount(withThemeProvider(<Menu test id={'menu_test'} menu={list} />));
    await expect(component).toHaveCSS('display', 'none');
  });
});