@axeptio/design-system
Version:
Design System for Axeptio
60 lines (55 loc) • 2.07 kB
JSX
// @ts-check
import React from 'react';
import { test, expect } from '@playwright/experimental-ct-react';
import Card 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('Default CSS Card', async ({ mount }) => {
const component = await mount(
withThemeProvider(
<Card
title={'Consentement Marketing'}
titleAs={'h3'}
description={'Newsletters phoning partenaires...'}
textLink={'Lire la suite'}
iconLink={null}
image={
'https://images.prismic.io/axeptio/NmZlZDM3ZDMtOGM3NC00NGVjLWE5ZjQtYTgwNzZlMjNkMThj_624459a5157022899a9f0a35_wolfpack_coaching_illu.png?auto=compress,format&rect=0,0,1080,1080&w=1080&h=1080'
}
/>
)
);
await expect(component).toHaveCSS('border', '1px solid rgb(221, 221, 221)');
await expect(component).toHaveCSS('border-radius', '20px');
await expect(component).toHaveCSS('cursor', 'pointer');
});
test('Font Card', async ({ mount }) => {
const component = await mount(
withThemeProvider(
<Card
title={'Consentement Marketing'}
titleAs={'h3'}
description={'Newsletters phoning partenaires...'}
textLink={'Lire la suite'}
iconLink={null}
image={
'https://images.prismic.io/axeptio/NmZlZDM3ZDMtOGM3NC00NGVjLWE5ZjQtYTgwNzZlMjNkMThj_624459a5157022899a9f0a35_wolfpack_coaching_illu.png?auto=compress,format&rect=0,0,1080,1080&w=1080&h=1080'
}
/>
)
);
await expect(component).toHaveCSS('font-family', '"Source Sans Pro", sans-serif');
});