diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx b/src/components/FileInputField/__tests__/FileInputField.spec.tsx new file mode 100644 index 000000000..f37b1f0b9 --- /dev/null +++ b/src/components/FileInputField/__tests__/FileInputField.spec.tsx @@ -0,0 +1,329 @@ +import React from 'react'; +import { + expect, + test, +} from '@playwright/experimental-ct-react'; +import { + mixPropTests, + propTests, +} from '../../../../tests/playwright'; +import type { FileInputFieldForFormLayoutTestsProps } from './FileInputField.story'; +import { + FileInputFieldForFormLayoutTests, + FileInputFieldForRefTest, + FileInputFieldForTest, + FileInputFieldWithResetButtonForTest, +} from './FileInputField.story'; +import { fileSelectedPropTest } from './_propTests/fileSelectedPropTest'; + +test.describe('FileInputField', () => { + test.describe('base', () => { + test.describe('visual', () => { + [ + ...propTests.defaultComponentPropTest, + ...mixPropTests([ + propTests.disabledPropTest, + propTests.validationStatePropTest, + ]), + ...fileSelectedPropTest, + ...mixPropTests([ + propTests.fullWidthPropTest, + propTests.layoutPropTest, + ]), + ...propTests.helpTextAndValidationTextPropType, + ...propTests.helpTextPropTest, + ...propTests.isLabelVisiblePropTest, + ...propTests.labelPropTest, + ...propTests.requiredPropTest, + ...propTests.sizePropTest, + ...propTests.validationTextPropTest, + ].forEach(({ + name, + onBeforeTest, + onBeforeSnapshot, + props, + }) => { + test(name, async ({ + mount, + page, + }) => { + if (onBeforeTest) { + await onBeforeTest(page); + } + + const component = await mount( + , + ); + + if (onBeforeSnapshot) { + await onBeforeSnapshot(page, component); + } + + const screenshot = await component.screenshot(); + expect(screenshot).toMatchSnapshot(); + }); + }); + }); + + test.describe('non-visual', () => { + test('id', async ({ mount }) => { + const testId = 'testId'; + const testLabel = 'testLabel'; + const helpText = 'helpText'; + const validationText = 'validationText'; + + const component = await mount( + , + ); + + expect(component.locator(`div[id="${testId}__root"]`)).toBeDefined(); + await expect(component.getByText(testLabel)).toHaveAttribute('id', `${testId}__labelText`); + await expect(component.locator('input[type="file"]')).toHaveAttribute('id', testId); + await expect(component.getByText(helpText)).toHaveAttribute('id', `${testId}__helpText`); + await expect(component.getByText(validationText)).toHaveAttribute('id', `${testId}__validationText`); + }); + + test('ref', async ({ mount }) => { + const component = await mount( + , + ); + + await expect(component.locator('input[type="file"]')).toHaveAttribute('test-ref', 'test-ref-value'); + }); + }); + + test.describe('functionality', () => { + test('Call onFilesChanged callback when file upload.', async ({ mount }) => { + let called = false; + + const component = await mount( + { + called = true; + }} + />, + ); + + const virtualFile = { + buffer: Buffer.from('This is test file.'), + mimeType: 'text/plain', + name: 'testfile.txt', + }; + + const inputField = component.locator('input[type="file"]'); + await inputField.setInputFiles(virtualFile); + + expect(called).toBe(true); + }); + + test('Call onFilesChanged callback when file drag and drop into field.', async ({ + mount, + page, + }) => { + const id = 'dropzoneId'; + let called = false; + + const component = await mount( + { + called = true; + }} + />, + ); + + const fileName = 'newFile.txt'; + const fileContent = 'This is a test file'; + + const dataTransfer = await page.evaluateHandle(({ + name, + content, + }) => { + const dt = new DataTransfer(); + const file = new File( + [content], + name, + { type: 'text/plain' }, + ); + dt.items.add(file); + return dt; + }, { + content: fileContent, + name: fileName, + }); + + const dropZone = component.locator(`div[id="${id}__root"]`); + + await dropZone.dispatchEvent('dragenter', { dataTransfer }); + await dropZone.dispatchEvent('drop', { dataTransfer }); + + expect(called).toBe(true); + }); + + test('Can upload multiple files.', async ({ mount }) => { + let listLength = 0; + + const component = await mount( + { + listLength = Object.keys(files).length; + }} + />, + ); + + const virtualFile1 = { + buffer: Buffer.from('This is test file.'), + mimeType: 'text/plain', + name: 'testfile.txt', + }; + + const virtualFile2 = { + buffer: Buffer.from('This is another test file.'), + mimeType: 'text/plain', + name: 'testfile.txt', + }; + + const inputField = component.locator('input[type="file"]'); + await inputField.setInputFiles([ + virtualFile1, + virtualFile2, + ]); + + expect(listLength).toBe(2); + }); + + test('Can upload multiple files via drag and drop.', async ({ + mount, + page, + }) => { + const id = 'dropzoneId'; + let numberOfCalls = 0; + + const component = await mount( + { + numberOfCalls += 1; + }} + />, + ); + + const fileName1 = 'newFile1.txt'; + const fileContent1 = 'This is a test file'; + + const dataTransfer1 = await page.evaluateHandle(({ + name, + content, + }) => { + const dt = new DataTransfer(); + const file = new File([content], name, { type: 'text/plain' }); + dt.items.add(file); + return dt; + }, { + content: fileContent1, + name: fileName1, + }); + + const fileName2 = 'newFile2.txt'; + const fileContent2 = 'This another is a test file'; + + const dataTransfer2 = await page.evaluateHandle(({ + name, + content, + }) => { + const dt = new DataTransfer(); + const file = new File([content], name, { type: 'text/plain' }); + dt.items.add(file); + return dt; + }, { + content: fileContent2, + name: fileName2, + }); + + const dropZone = component.locator(`div[id="${id}__root"]`); + + await dropZone.dispatchEvent('dragenter', { dataTransfer: dataTransfer1 }); + await dropZone.dispatchEvent('drop', { dataTransfer: dataTransfer1 }); + await page.waitForTimeout(1000); + await dropZone.dispatchEvent('dragenter', { dataTransfer: dataTransfer2 }); + await dropZone.dispatchEvent('drop', { dataTransfer: dataTransfer2 }); + + expect(numberOfCalls).toBe(2); + }); + + test('Able to reset selected file.', async ({ mount }) => { + let keyLength; + + const component = await mount( + { + keyLength = Object.keys(files).length; + }} + />, + ); + + const virtualFile = { + buffer: Buffer.from('This is test file.'), + mimeType: 'text/plain', + name: 'testfile.txt', + }; + + const inputField = component.locator('input[type="file"]'); + const resetButton = component.getByText('Reset'); + + await inputField.setInputFiles(virtualFile); + expect(keyLength).toBe(1); + + await resetButton.click(); + expect(keyLength).toBe(0); + }); + }); + }); + + test.describe('formLayout', () => { + test.describe('visual', () => { + [ + ...propTests.layoutPropTest, + ].forEach(({ + name, + onBeforeTest, + onBeforeSnapshot, + props, + }) => { + test(name, async ({ + mount, + page, + }) => { + if (onBeforeTest) { + await onBeforeTest(page); + } + + const component = await mount( + , + ); + + if (onBeforeSnapshot) { + await onBeforeSnapshot(page, component); + } + + const screenshot = await component.screenshot(); + expect(screenshot).toMatchSnapshot(); + }); + }); + }); + }); +}); diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-defaultComponentProps-object-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-defaultComponentProps-object-1-chromium-linux.png new file mode 100644 index 000000000..deab6f856 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-defaultComponentProps-object-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..5cc4a78a5 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-invalid-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..2c3f3faaf Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-valid-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..21f238a6c Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-warning-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-undefined-1-chromium-linux.png new file mode 100644 index 000000000..deab6f856 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-undefined-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..9a0d44b57 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-invalid-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..216b40457 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-valid-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..e7fb77aa3 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-warning-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-undefined-1-chromium-linux.png new file mode 100644 index 000000000..c47c9d220 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-undefined-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-1-chromium-linux.png new file mode 100644 index 000000000..f55dfeb6d Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-invalid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..0822b7e8c Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-invalid-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-valid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..cae9911cb Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-valid-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-warning-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..58114b207 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-warning-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-undefined-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-undefined-1-chromium-linux.png new file mode 100644 index 000000000..f55dfeb6d Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-undefined-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png new file mode 100644 index 000000000..1a539f2fa Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-fullWidth-boolean-false-layout-string-horizontal-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png new file mode 100644 index 000000000..d3435414f Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-fullWidth-boolean-false-layout-string-vertical-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png new file mode 100644 index 000000000..be0bec88d Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-fullWidth-boolean-true-layout-string-horizontal-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png new file mode 100644 index 000000000..5d63b6be4 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-fullWidth-boolean-true-layout-string-vertical-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-node-normal-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-node-normal-1-chromium-linux.png new file mode 100644 index 000000000..b9386efbf Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-node-normal-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-string-long-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-string-long-1-chromium-linux.png new file mode 100644 index 000000000..2c58168c4 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-string-long-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-string-normal-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-string-normal-1-chromium-linux.png new file mode 100644 index 000000000..185e541cd Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-string-normal-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-string-validationText-string-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-string-validationText-string-1-chromium-linux.png new file mode 100644 index 000000000..b67adc912 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-string-validationText-string-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png new file mode 100644 index 000000000..185e541cd Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-string-validationText-undefined-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png new file mode 100644 index 000000000..38fddbc0d Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-helpText-undefined-validationText-string-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png new file mode 100644 index 000000000..c0b53e4bd Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-isLabelVisible-boolean-false-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png new file mode 100644 index 000000000..deab6f856 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-isLabelVisible-boolean-true-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-label-node-normal-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-label-node-normal-1-chromium-linux.png new file mode 100644 index 000000000..1761ed682 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-label-node-normal-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-label-string-long-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-label-string-long-1-chromium-linux.png new file mode 100644 index 000000000..2ed641bb4 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-label-string-long-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-required-boolean-false-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-required-boolean-false-1-chromium-linux.png new file mode 100644 index 000000000..deab6f856 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-required-boolean-false-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-required-boolean-true-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-required-boolean-true-1-chromium-linux.png new file mode 100644 index 000000000..2855471f0 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-required-boolean-true-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-size-string-large-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-size-string-large-1-chromium-linux.png new file mode 100644 index 000000000..5eb5cc372 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-size-string-large-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-size-string-medium-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-size-string-medium-1-chromium-linux.png new file mode 100644 index 000000000..deab6f856 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-size-string-medium-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-size-string-small-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-size-string-small-1-chromium-linux.png new file mode 100644 index 000000000..ceb9d6a36 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-size-string-small-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-validationText-node-normal-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-validationText-node-normal-1-chromium-linux.png new file mode 100644 index 000000000..a21fc1fb1 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-validationText-node-normal-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-validationText-string-long-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-validationText-string-long-1-chromium-linux.png new file mode 100644 index 000000000..95ae51688 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-validationText-string-long-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-validationText-string-normal-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-validationText-string-normal-1-chromium-linux.png new file mode 100644 index 000000000..38fddbc0d Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-validationText-string-normal-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png new file mode 100644 index 000000000..14840a835 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-formLayout-visual-layout-string-horizontal-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-formLayout-visual-layout-string-vertical-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-formLayout-visual-layout-string-vertical-1-chromium-linux.png new file mode 100644 index 000000000..376f44ded Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-formLayout-visual-layout-string-vertical-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.story.tsx b/src/components/FileInputField/__tests__/FileInputField.story.tsx new file mode 100644 index 000000000..62fa17ea4 --- /dev/null +++ b/src/components/FileInputField/__tests__/FileInputField.story.tsx @@ -0,0 +1,128 @@ +import React, { + useEffect, + useMemo, + useRef, +} from 'react'; +import type { HTMLAttributes } from 'react'; +import { FileInputField } from '..'; +import { FormLayoutContext } from '../../FormLayout'; + +// Types for story component will be improved when we have full TypeScript support +type FileInputFieldForTestProps = HTMLAttributes; +type FileInputFieldForRefTestProps = FileInputFieldForTestProps & { + testRefAttrName: string; + testRefAttrValue: string; +}; +export type FileInputFieldForFormLayoutTestsProps = FileInputFieldForTestProps & { + layout: 'vertical' | 'horizontal' +}; + +const InputWrapper = ({ + children, + ...props +}: FileInputFieldForTestProps) => { + const style = Object.keys(props).includes('fullWidth') + ? { padding: '10px' } + : { + padding: '10px', + width: 'fit-content', + }; + + return ( +
+ {children} +
+ ); +}; + +export const FileInputFieldForTest = ({ + ...props +}: FileInputFieldForTestProps) => ( + + {}} + {...props} + /> + +); + +export const FileInputFieldWithResetButtonForTest = ({ + ...props +}: FileInputFieldForTestProps) => { + const ref = useRef<{ resetState:() => void }>(undefined); + + return ( + <> + {}} + {...props} + ref={ref} + /> + + + ); +}; + +export const FileInputFieldForRefTest = ({ + testRefAttrName, + testRefAttrValue, + ...props +}: FileInputFieldForRefTestProps) => { + const ref = useRef(undefined); + + useEffect(() => { + ref.current?.setAttribute(testRefAttrName, testRefAttrValue); + }, [testRefAttrName, testRefAttrValue]); + + return ( + {}} + ref={ref} + /> + ); +}; + +export const FileInputFieldForFormLayoutTests = ({ + layout, + ...props +}: FileInputFieldForFormLayoutTestsProps) => { + const values = useMemo(() => ({ layout }), [layout]); + + return ( + + + {}} + {...props} + /> + {}} + {...props} + /> + + + ); +}; diff --git a/src/components/FileInputField/__tests__/FileInputField.test.jsx b/src/components/FileInputField/__tests__/FileInputField.test.jsx deleted file mode 100644 index cd6d8a555..000000000 --- a/src/components/FileInputField/__tests__/FileInputField.test.jsx +++ /dev/null @@ -1,83 +0,0 @@ -import React from 'react'; -import { - render, - screen, - within, -} from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import { disabledPropTest } from '../../../../tests/jest/propTests/disabledPropTest'; -import { refPropTest } from '../../../../tests/jest/propTests/refPropTest'; -import { fullWidthPropTest } from '../../../../tests/jest/propTests/fullWidthPropTest'; -import { helpTextPropTest } from '../../../../tests/jest/propTests/helpTextPropTest'; -import { formLayoutProviderTest } from '../../../../tests/jest/providerTests/formLayoutProviderTest'; -import { isLabelVisibleTest } from '../../../../tests/jest/propTests/isLabelVisibleTest'; -import { labelPropTest } from '../../../../tests/jest/propTests/labelPropTest'; -import { layoutPropTest } from '../../../../tests/jest/propTests/layoutPropTest'; -import { requiredPropTest } from '../../../../tests/jest/propTests/requiredPropTest'; -import { sizePropTest } from '../../../../tests/jest/propTests/sizePropTest'; -import { validationStatePropTest } from '../../../../tests/jest/propTests/validationStatePropTest'; -import { validationTextPropTest } from '../../../../tests/jest/propTests/validationTextPropTest'; -import { FileInputField } from '../FileInputField'; - -const mandatoryProps = { - id: 'id', - label: 'label', - onFilesChanged: () => {}, -}; - -describe('rendering', () => { - formLayoutProviderTest(); - - it.each([ - ...disabledPropTest, - ...refPropTest(React.createRef()), - ...fullWidthPropTest, - ...helpTextPropTest, - [ - { - helpText: 'help text', - validationText: 'validation text', - }, - (rootElement) => { - expect(within(rootElement).getByTestId('id')); - expect(within(rootElement).getByText('label')).toHaveAttribute('id', 'id__labelText'); - expect(within(rootElement).getByText('help text')).toHaveAttribute('id', 'id__helpText'); - expect(within(rootElement).getByText('validation text')).toHaveAttribute('id', 'id__validationText'); - expect(rootElement).toHaveAttribute('id', 'id__root'); - }, - ], - ...isLabelVisibleTest(), - ...labelPropTest(), - ...layoutPropTest, - ...requiredPropTest, - ...sizePropTest, - ...validationStatePropTest, - ...validationTextPropTest, - ])('renders with props: "%s"', (testedProps, assert) => { - const dom = render(( - - )); - - assert(dom.container.firstChild); - }); -}); - -describe('functionality', () => { - it('calls synthetic event onChange()', async () => { - const spy = jest.fn(); - render(( - - )); - - const file = new File(['hello'], 'hello.png', { type: 'image/png' }); - await userEvent.upload(screen.getByTestId('id'), file); - expect(spy).toHaveBeenCalled(); - }); -}); diff --git a/src/components/FileInputField/__tests__/_propTests/fileSelectedPropTest.ts b/src/components/FileInputField/__tests__/_propTests/fileSelectedPropTest.ts new file mode 100644 index 000000000..988bc4cac --- /dev/null +++ b/src/components/FileInputField/__tests__/_propTests/fileSelectedPropTest.ts @@ -0,0 +1,33 @@ +import type { Page } from 'playwright/test'; +import type { MountResult } from '@playwright/experimental-ct-react'; +import { propTests } from '../../../../../tests/playwright'; +import type { PropTests } from '../../../../../tests/playwright/types'; + +const onBeforeSnapshot = async (page: Page, component: MountResult) => { + const virtualFile = { + buffer: Buffer.from('This is test file.'), + mimeType: 'text/plain', + name: 'testfile.txt', + }; + + const inputField = component.locator('input[type="file"]'); + await inputField.setInputFiles(virtualFile); +}; + +export const fileSelectedPropTest: PropTests = [ + ...propTests.defaultComponentPropTest.map(({ + props, + }) => ({ + name: 'filledInputField:object', + onBeforeSnapshot, + props, + })), + ...propTests.validationStatePropTest.map(({ + name, + props, + }) => ({ + name: `filledInputField:object ${name}`, + onBeforeSnapshot, + props, + })), +]; diff --git a/src/components/TextField/__tests__/TextField.spec.tsx b/src/components/TextField/__tests__/TextField.spec.tsx index 1bffdfda7..80092990d 100644 --- a/src/components/TextField/__tests__/TextField.spec.tsx +++ b/src/components/TextField/__tests__/TextField.spec.tsx @@ -21,30 +21,30 @@ test.describe('TextField', () => { test.describe('visual', () => { [ ...propTests.defaultComponentPropTest, - ...propTests.labelPropTest, - ...propTests.isLabelVisiblePropTest, - ...propTests.sizePropTest, - ...propTests.requiredPropTest, - ...propTests.helpTextAndValidationTextPropType, - ...inputSizePropTest, - ...typePropTest, ...mixPropTests([ - propTests.fullWidthPropTest, - propTests.layoutPropTest, + propTests.disabledPropTest, + propTests.validationStatePropTest, + propTests.variantPropTest, ]), ...mixPropTests([ - propTests.requiredPropTest, - propTests.validationStatePropTest, + propTests.fullWidthPropTest, + propTests.layoutPropTest, ]), + ...propTests.helpTextAndValidationTextPropType, + ...inputSizePropTest, + ...propTests.isLabelVisiblePropTest, + ...propTests.labelPropTest, + ...propTests.requiredPropTest, ...mixPropTests([ propTests.renderAsRequiredPropTest, propTests.validationStatePropTest, ]), ...mixPropTests([ - propTests.disabledPropTest, + propTests.requiredPropTest, propTests.validationStatePropTest, - propTests.variantPropTest, ]), + ...propTests.sizePropTest, + ...typePropTest, ].forEach(({ name, onBeforeTest,