@axeptio/design-system
Version:
Design System for Axeptio
78 lines (74 loc) • 2.19 kB
JSX
// @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', () => {
test.use({ viewport: { width: 1300, height: 500 } });
test('Test render mobile menu', async ({ mount }) => {
const component = await mount(withThemeProvider(<Menu test menu={list} open />));
await expect(component.locator('span#Features')).toBeEnabled();
await expect(component.locator('span#Features')).toContainText('Features');
await expect(component.locator('span#Ressources')).toBeEnabled();
await expect(component.locator('span#Ressources')).toContainText('Ressources');
await expect(component.locator('a#Price')).toBeEnabled();
await expect(component.locator('a#Price')).toContainText('Price');
});
});