Skip to content

Commit

Permalink
test(Button): improve button tests (#1756)
Browse files Browse the repository at this point in the history
  • Loading branch information
itwillwork authored Aug 23, 2024
1 parent 4d28d89 commit 442ce85
Show file tree
Hide file tree
Showing 179 changed files with 67 additions and 46 deletions.
9 changes: 5 additions & 4 deletions playwright/core/expectScreenshotFixture.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const expectScreenshotFixture: PlaywrightFixture<ExpectScreenshotFixture>
) => {
const expectScreenshot: ExpectScreenshotFixture = async ({
component,
screenshotName,
nameSuffix,
...pageScreenshotOptions
} = {}) => {
const captureScreenshot = async (theme: string) => {
Expand All @@ -25,14 +25,15 @@ export const expectScreenshotFixture: PlaywrightFixture<ExpectScreenshotFixture>
});
};

const nameScreenshot = testInfo.titlePath.slice(1).join(' ');
const nameScreenshot =
testInfo.titlePath.slice(1).join(' ') + (nameSuffix ? ` ${nameSuffix}` : '');

expect(await captureScreenshot('dark')).toMatchSnapshot({
name: `${screenshotName || nameScreenshot} dark.png`,
name: `${nameScreenshot} dark.png`,
});

expect(await captureScreenshot('light')).toMatchSnapshot({
name: `${screenshotName || nameScreenshot} light.png`,
name: `${nameScreenshot} light.png`,
});
};

Expand Down
2 changes: 2 additions & 0 deletions playwright/core/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,5 @@ export const test = base.extend<Fixtures>({
mount: mountFixture,
expectScreenshot: expectScreenshotFixture,
});

export {expect} from '@playwright/experimental-ct-react';
2 changes: 1 addition & 1 deletion playwright/core/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,6 @@ export interface ExpectScreenshotFixture {
}

interface CaptureScreenshotParams extends PageScreenshotOptions {
screenshotName?: string;
nameSuffix?: string;
component?: Locator;
}
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.
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.
40 changes: 28 additions & 12 deletions src/components/Button/__tests__/Button.visual.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import React from 'react';
import {test} from '~playwright/core';

import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
import type {ButtonProps} from '../Button';
import {Button} from '../Button';

import {
defaultProps,
disabledCases,
loadingCases,
pinsCases,
Expand Down Expand Up @@ -89,20 +89,36 @@ test.describe('Button', {tag: '@Button'}, () => {
await expectScreenshot();
});

const smokeScenarios = createSmokeScenarios(defaultProps, {
size: sizeCases,
selected: selectedCases,
disabled: disabledCases,
loading: loadingCases,
view: viewsCases,
pin: pinsCases,
});

smokeScenarios.forEach(([title, details, props]) => {
const qa = 'test-button';

createSmokeScenarios<ButtonProps>(
{
children: 'Text',
qa,
},
{
size: sizeCases,
selected: selectedCases,
disabled: disabledCases,
loading: loadingCases,
view: viewsCases,
pin: pinsCases,
},
).forEach(([title, details, props]) => {
test(title, details, async ({mount, expectScreenshot}) => {
await mount(<Button {...props} />);
const root = await mount(<Button {...props} />);

await expectScreenshot();

if (props.disabled || props.loading) {
return;
}

await root.getByTestId(qa).hover();

await expectScreenshot({
nameSuffix: 'hovered',
});
});
});
});
4 changes: 0 additions & 4 deletions src/components/Button/__tests__/cases.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import type {CasesWithName} from '../../../stories/tests-factory/models';
import type {ButtonProps} from '../Button';

export const defaultProps: ButtonProps = {
children: 'Text',
};

export const sizeCases: CasesWithName<ButtonProps['size']> = [
['xs', 'xs'],
['s', 's'],
Expand Down
36 changes: 18 additions & 18 deletions src/stories/tests-factory/create-smoke-scenarios.test.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {createSmokeScenarios} from './create-smoke-scenarios';

test('regular', () => {
const smokeScenarious = createSmokeScenarios(
const smokeScenarios = createSmokeScenarios(
{
theme: 'theme-1',
label: 'label-1',
Expand All @@ -12,41 +12,41 @@ test('regular', () => {
},
);

expect(smokeScenarious).toEqual([
expect(smokeScenarios).toEqual([
[
'smoke',
'smoke [default]',
{tag: ['@smoke']},
{
label: 'label-1',
theme: 'theme-1',
},
],
[
'smoke-theme-theme-2',
'smoke [theme: theme-2]',
{tag: ['@smoke']},
{
label: 'label-1',
theme: 'theme-2',
},
],
[
'smoke-theme-theme-3',
'smoke [theme: theme-3]',
{tag: ['@smoke']},
{
label: 'label-1',
theme: 'theme-3',
},
],
[
'smoke-label-label-2',
'smoke [label: label-2]',
{tag: ['@smoke']},
{
label: 'label-2',
theme: 'theme-1',
},
],
[
'smoke-label-label-3',
'smoke [label: label-3]',
{tag: ['@smoke']},
{
label: 'label-3',
Expand All @@ -57,7 +57,7 @@ test('regular', () => {
});

test('with scenario name', () => {
const smokeScenarious = createSmokeScenarios(
const smokeScenarios = createSmokeScenarios(
{
theme: 'theme-1',
label: 'label-1',
Expand All @@ -74,41 +74,41 @@ test('with scenario name', () => {
},
);

expect(smokeScenarious).toEqual([
expect(smokeScenarios).toEqual([
[
'smoke',
'smoke [default]',
{tag: ['@smoke']},
{
label: 'label-1',
theme: 'theme-1',
},
],
[
'smoke-theme-name-theme-2',
'smoke [theme: name-theme-2]',
{tag: ['@smoke']},
{
label: 'label-1',
theme: 'theme-2',
},
],
[
'smoke-theme-name-theme-3',
'smoke [theme: name-theme-3]',
{tag: ['@smoke']},
{
label: 'label-1',
theme: 'theme-3',
},
],
[
'smoke-label-name-label-2',
'smoke [label: name-label-2]',
{tag: ['@smoke']},
{
label: 'label-2',
theme: 'theme-1',
},
],
[
'smoke-label-name-label-3',
'smoke [label: name-label-3]',
{tag: ['@smoke']},
{
label: 'label-3',
Expand All @@ -119,7 +119,7 @@ test('with scenario name', () => {
});

test('with additionalTags option', () => {
const smokeScenarious = createSmokeScenarios(
const smokeScenarios = createSmokeScenarios(
{
theme: 'theme-1',
},
Expand All @@ -131,8 +131,8 @@ test('with additionalTags option', () => {
},
);

expect(smokeScenarious).toEqual([
['smoke', {tag: ['@smoke', '@custom-tag-1']}, {theme: 'theme-1'}],
['smoke-theme-name-theme-2', {tag: ['@smoke', '@custom-tag-1']}, {theme: 'theme-2'}],
expect(smokeScenarios).toEqual([
['smoke [default]', {tag: ['@smoke', '@custom-tag-1']}, {theme: 'theme-1'}],
['smoke [theme: name-theme-2]', {tag: ['@smoke', '@custom-tag-1']}, {theme: 'theme-2'}],
]);
});
20 changes: 13 additions & 7 deletions src/stories/tests-factory/create-smoke-scenarios.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type {Cases, CasesWithName, Scenario, ScenarioDetails} from './models';
import type {Cases, CasesWithName, Scenario, ScenarioDetails, ScenarioName} from './models';

interface Options {
scenarioName?: string;
additionalTags?: Array<string>;
}

Expand All @@ -11,18 +12,20 @@ function checkIsCasesWithName<T>(cases: CasesWithName<T> | Cases<T>): cases is C

export const createSmokeScenarios = <Props extends {}>(
baseProps: Props,
propsCases: {
[K in Partial<keyof Props>]: CasesWithName<Props[K]> | Cases<Props[K]>;
},
propsCases: Partial<{
[K in keyof Props]: CasesWithName<Props[K]> | Cases<Props[K]>;
}>,
options?: Options,
) => {
const scenarioDetails: ScenarioDetails = {
tag: ['@smoke', ...(options?.additionalTags || [])],
};

const scenarioName: ScenarioName = `smoke${options?.scenarioName ? ` ${options?.scenarioName}` : ''}`;

const scenarios: Array<Scenario<Props>> = [
[
'smoke',
`${scenarioName} [default]`,
scenarioDetails,
{
...baseProps,
Expand All @@ -33,13 +36,16 @@ export const createSmokeScenarios = <Props extends {}>(
const propNames = Object.keys(propsCases) as Array<keyof Props>;
propNames.forEach((propName) => {
const propCases = propsCases[propName];
if (!propCases) {
return;
}

if (checkIsCasesWithName(propCases)) {
propCases.forEach((propCase) => {
const [caseName, caseProps] = propCase;

scenarios.push([
`smoke-${propName as string}-${caseName}`,
`${scenarioName} [${propName as string}: ${caseName}]`,
scenarioDetails,
{
...baseProps,
Expand All @@ -57,7 +63,7 @@ export const createSmokeScenarios = <Props extends {}>(
}

scenarios.push([
`smoke-${propName as string}-${(propCase as any)?.toString()}`,
`${scenarioName} [${propName as string}: ${(propCase as any)?.toString()}]`,
scenarioDetails,
{
...baseProps,
Expand Down

0 comments on commit 442ce85

Please sign in to comment.