diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-smoke-empty-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-smoke-empty-light-chromium-linux.png new file mode 100644 index 0000000000..fe0fcc261e Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-smoke-empty-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-smoke-inside-error-placement-tooltip-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-smoke-inside-error-placement-tooltip-light-chromium-linux.png new file mode 100644 index 0000000000..f178952b52 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-smoke-inside-error-placement-tooltip-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-smoke-with-error-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-smoke-with-error-light-chromium-linux.png new file mode 100644 index 0000000000..9b7563ac71 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-smoke-with-error-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-smoke-with-value-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-smoke-with-value-light-chromium-linux.png new file mode 100644 index 0000000000..2a3b40f619 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-smoke-with-value-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__tests__/TextInput.visual.test.tsx b/src/components/controls/TextInput/__tests__/TextInput.visual.test.tsx new file mode 100644 index 0000000000..050b4a7b33 --- /dev/null +++ b/src/components/controls/TextInput/__tests__/TextInput.visual.test.tsx @@ -0,0 +1,152 @@ +import {expect} from '@playwright/experimental-ct-react'; + +import {smokeTest, test} from '~playwright/core'; + +import {createSmokeScenarios} from '../../../../stories/tests-factory/create-smoke-scenarios'; +import {CONTROL_ERROR_ICON_QA} from '../../utils'; +import type {TextInputProps} from '../TextInput'; +import {TextInput} from '../TextInput'; + +import { + disabledCases, + endContentCases, + errorPlacementCases, + hasClearCases, + labelCases, + noteCases, + pinCases, + sizeCases, + startContentCases, + validationStateCases, + viewCases, +} from './cases'; + +test.describe('TextInput', {tag: '@TextInput'}, () => { + const defaultProps: TextInputProps = { + placeholder: 'Placeholder', + }; + + const commonPropCases = { + pin: pinCases, + size: sizeCases, + view: viewCases, + note: noteCases, + validationState: validationStateCases, + startContent: startContentCases, + endContent: endContentCases, + disabled: disabledCases, + hasClear: hasClearCases, + label: labelCases, + } as const; + + smokeTest('empty', async ({mount, expectScreenshot}) => { + const smokeScenarios = createSmokeScenarios( + { + ...defaultProps, + }, + commonPropCases, + ); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+ +
+
+ ))} +
, + ); + + await expectScreenshot({ + themes: ['light'], + }); + }); + + smokeTest('with value', async ({mount, expectScreenshot}) => { + const smokeScenarios = createSmokeScenarios( + { + ...defaultProps, + value: 'Text', + }, + commonPropCases, + ); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+ +
+
+ ))} +
, + ); + + await expectScreenshot({ + themes: ['light'], + }); + }); + + smokeTest('with error', async ({mount, expectScreenshot}) => { + const smokeScenarios = createSmokeScenarios( + { + ...defaultProps, + value: 'Text', + validationState: 'invalid', + errorMessage: 'Test error message', + } as const, + { + errorPlacement: errorPlacementCases, + }, + ); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+ +
+
+ ))} +
, + ); + + await expectScreenshot({ + themes: ['light'], + }); + }); + + smokeTest('inside error placement tooltip', async ({mount, page, expectScreenshot}) => { + const props: TextInputProps = { + ...defaultProps, + value: 'Text', + validationState: 'invalid', + errorMessage: 'Test error message', + errorPlacement: 'inside', + }; + + const root = await mount( +
+ +
, + { + width: 500, + }, + ); + + await root.getByTestId(CONTROL_ERROR_ICON_QA).hover(); + + await expect(page.locator('.g-popup')).toBeVisible(); + + await expectScreenshot({ + themes: ['light'], + }); + }); +}); diff --git a/src/components/controls/TextInput/__tests__/cases.tsx b/src/components/controls/TextInput/__tests__/cases.tsx new file mode 100644 index 0000000000..d05d3434c9 --- /dev/null +++ b/src/components/controls/TextInput/__tests__/cases.tsx @@ -0,0 +1,40 @@ +import type {Cases, CasesWithName} from '../../../../stories/tests-factory/models'; +import type {TextInputProps} from '../TextInput'; + +/* eslint-disable react/jsx-key */ + +export const disabledCases: Array = [true]; + +export const hasClearCases: Array = [true]; + +export const pinCases: Cases = [ + 'round-round', + 'brick-brick', + 'clear-clear', + 'round-brick', + 'brick-round', + 'round-clear', + 'clear-round', + 'brick-clear', + 'clear-brick', +]; + +export const validationStateCases: Cases = ['invalid']; + +export const sizeCases: Cases = ['s', 'm', 'l', 'xl']; + +export const viewCases: Cases = ['normal', 'clear']; + +export const errorPlacementCases: Cases = ['outside', 'inside']; + +export const startContentCases: CasesWithName = [ + ['',
start
], +]; + +export const endContentCases: CasesWithName = [['',
end
]]; + +export const noteCases: CasesWithName = [['',
note
]]; + +export const labelCases: CasesWithName = [['', 'label']]; + +/* eslint-enable react/jsx-key */