Skip to content

Refactoring/miscellaneous jest to playwright #636

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 9, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions src/components/Badge/__tests__/Badge.spec.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import React from 'react';
import {
expect,
test,
} from '@playwright/experimental-ct-react';
import {
mixPropTests,
propTests,
} from '../../../../tests/playwright';
import { BadgeForTest } from './Badge.story';
import { labelPropTest } from './_propTests/labelPropTest';
import { priorityPropTest } from './_propTests/priorityPropTest';

test.describe('Badge', () => {
test.describe('visual', () => {
[
...propTests.defaultComponentPropTest,
...labelPropTest,
...mixPropTests([
[
...propTests.feedbackColorPropTest,
...propTests.neutralColorPropTest,
],
priorityPropTest,
]),
].forEach(({
name,
onBeforeTest,
onBeforeSnapshot,
props,
}) => {
test(name, async ({
mount,
page,
}) => {
if (onBeforeTest) {
await onBeforeTest(page);
}

const component = await mount(
<BadgeForTest
{...props}
/>,
);

if (onBeforeSnapshot) {
await onBeforeSnapshot(page, component);
}

const screenshot = await component.screenshot();
expect(screenshot).toMatchSnapshot();
});
});
});

test.describe('non-visual', () => {
test('id', async ({ mount }) => {
const component = await mount(
<BadgeForTest
id="test-id"
/>,
);

await expect(component).toHaveAttribute('id', 'test-id');
});
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions src/components/Badge/__tests__/Badge.story.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';
import type { HTMLAttributes } from 'react';
import { Badge } from '..';

// Types for story component will be improved when we have full TypeScript support
type BadgeForTestProps = HTMLAttributes<HTMLDivElement>;

export const BadgeForTest = ({
...props
}: BadgeForTestProps) => (
<Badge label="Badge label" {...props} />
);
40 changes: 0 additions & 40 deletions src/components/Badge/__tests__/Badge.test.jsx

This file was deleted.

6 changes: 6 additions & 0 deletions src/components/Badge/__tests__/_propTests/labelPropTest.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { propTests } from '../../../../../tests/playwright';
import type { PropTests } from '../../../../../tests/playwright/types';

export const labelPropTest: PropTests = [
...propTests.labelPropTest.filter((test) => typeof test.props?.label === 'string'),
];
10 changes: 10 additions & 0 deletions src/components/Badge/__tests__/_propTests/priorityPropTest.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { propTests } from '../../../../../tests/playwright';
import type { PropTests } from '../../../../../tests/playwright/types';

const subsetOfValues = [
'filled',
'outline',
];

export const priorityPropTest: PropTests = propTests.priorityPropTest
.filter(({ props }) => subsetOfValues.includes(props.priority as string));
142 changes: 142 additions & 0 deletions src/components/Card/__tests__/Card.spec.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
import React from 'react';
import {
expect,
test,
} from '@playwright/experimental-ct-react';
import {
mixPropTests,
propTests,
} from '../../../../tests/playwright';
import {
CadForTest,
CadWithScrollableForTest,
CardOnlyWithBodyForTest,
} from './Card.story';
import { densePropTest } from './_propTests/densePropTest';

test.describe('Card', () => {
test.describe('visual', () => {
[
...propTests.defaultComponentPropTest,
...densePropTest,
...mixPropTests([
propTests.disabledPropTest,
propTests.feedbackColorPropTest,
]),
...propTests.raisedPropTest,
].forEach(({
name,
onBeforeTest,
onBeforeSnapshot,
props,
}) => {
test(name, async ({
mount,
page,
}) => {
if (onBeforeTest) {
await onBeforeTest(page);
}

const component = await mount(
<CadForTest
{...props}
/>,
);

if (onBeforeSnapshot) {
await onBeforeSnapshot(page, component);
}

const screenshot = await component.screenshot();
expect(screenshot).toMatchSnapshot();
});
});

test.describe('composition', () => {
/**
* Card with body and footer is omitted from composition section, because
* it is included in base visual tests.
*/
test.describe('onlyBody', () => {
[
...propTests.defaultComponentPropTest,
].forEach(({
name,
onBeforeTest,
onBeforeSnapshot,
props,
}) => {
test(name, async ({
mount,
page,
}) => {
if (onBeforeTest) {
await onBeforeTest(page);
}

const component = await mount(
<CardOnlyWithBodyForTest
{...props}
/>,
);

if (onBeforeSnapshot) {
await onBeforeSnapshot(page, component);
}

const screenshot = await component.screenshot({ animations: 'disabled' });
expect(screenshot).toMatchSnapshot();
});
});
});

test.describe('scrollView', () => {
[
...propTests.defaultComponentPropTest,
].forEach(({
name,
onBeforeTest,
onBeforeSnapshot,
props,
}) => {
test(name, async ({
mount,
page,
}) => {
if (onBeforeTest) {
await onBeforeTest(page);
}

const component = await mount(
<CadWithScrollableForTest
{...props}
/>,
);

if (onBeforeSnapshot) {
await onBeforeSnapshot(page, component);
}

const screenshot = await component.screenshot({ animations: 'disabled' });
expect(screenshot).toMatchSnapshot();
});
});
});
});
});

test.describe('non-visual', () => {
test('id', async ({ mount }) => {
const id = 'test-id';

const component = await mount(
<CadForTest
id={id}
/>,
);

await expect(component.locator(`div[id=${id}]`)).toHaveAttribute('id', id);
});
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
83 changes: 83 additions & 0 deletions src/components/Card/__tests__/Card.story.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import React from 'react';
import type { HTMLAttributes } from 'react';
import {
Card,
CardBody,
CardFooter,
} from '..';
import { TextLink } from '../../TextLink';
import { Button } from '../../Button';
import { ScrollView } from '../../ScrollView';

// Types for story component will be improved when we have full TypeScript support
type CardForTestProps = HTMLAttributes<HTMLDivElement>;

export const CadForTest = ({
...props
}: CardForTestProps) => (
<div style={{ padding: '20px' }}>
<Card {...props}>
<CardBody>
This is a card body.
<TextLink href="/" label="This is a link" />
</CardBody>
<CardFooter>
<Button label="Footer button" />
</CardFooter>
</Card>
</div>
);

export const CadWithScrollableForTest = ({
...props
}: CardForTestProps) => (
<div
style={{
display: 'flex',
height: '400px',
padding: '20px',
width: '500px',
}}
>
<Card {...props}>
<ScrollView arrows>
<CardBody id="card-body">
Hello! I&apos;m scrollable card.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
<TextLink href="/" label="This is a link" />
</CardBody>
</ScrollView>
<CardFooter>
<Button label="Footer button" />
</CardFooter>
</Card>
</div>
);

export const CardOnlyWithBodyForTest = ({
...props
}: CardForTestProps) => (
<div style={{ padding: '20px' }}>
<Card {...props}>
<CardBody>
This is a card body.
<TextLink href="/" label="This is a link" />
</CardBody>
</Card>
</div>
);
Loading