diff --git a/e2e/components/FileUploader/FileUploader-test.avt.e2e.js b/e2e/components/FileUploader/FileUploader-test.avt.e2e.js new file mode 100644 index 000000000000..de7c998576ed --- /dev/null +++ b/e2e/components/FileUploader/FileUploader-test.avt.e2e.js @@ -0,0 +1,84 @@ +/** + * Copyright IBM Corp. 2016, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const { expect, test } = require('@playwright/test'); +const { visitStory } = require('../../test-utils/storybook'); +const path = require('path'); + +test.describe('FileUploader @avt', () => { + test('accessibility-checker default state', async ({ page }) => { + await visitStory(page, { + component: 'FileUploader', + id: 'components-fileuploader--default', + globals: { + theme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('FileUploader default state'); + }); + test('accessibility-checker default state with upload', async ({ page }) => { + await visitStory(page, { + component: 'FileUploader', + id: 'components-fileuploader--playground', + globals: { + theme: 'white', + }, + }); + await page + .getByLabel('Add file') + .setInputFiles(path.join(__dirname, 'test-file-for-uploading.png')); + await expect(page).toHaveNoACViolations( + 'FileUploader default state with upload' + ); + }); + test('accessibility-checker invalid state', async ({ page }) => { + await visitStory(page, { + component: 'FileUploader', + id: 'components-fileuploader--file-uploader-item', + globals: { + theme: 'white', + }, + args: { + invalid: true, + }, + }); + + await expect(page).toHaveNoACViolations('FileUploader invalid state'); + }); + + test('accessibility-checker complete state', async ({ page }) => { + await visitStory(page, { + component: 'FileUploader', + id: 'components-fileuploader--file-uploader-item', + globals: { + theme: 'white', + }, + args: { + status: 'complete', + }, + }); + + await expect(page).toHaveNoACViolations('FileUploader complete state'); + }); + + test('accessibility-checker uploading state', async ({ page }) => { + await visitStory(page, { + component: 'FileUploader', + id: 'components-fileuploader--file-uploader-item', + globals: { + theme: 'white', + }, + args: { + status: 'uploading', + }, + }); + + await expect(page).toHaveNoACViolations('FileUploader uploading state'); + }); +}); diff --git a/e2e/components/FileUploader/test-file-for-uploading.png b/e2e/components/FileUploader/test-file-for-uploading.png new file mode 100644 index 000000000000..b30690c5f057 Binary files /dev/null and b/e2e/components/FileUploader/test-file-for-uploading.png differ diff --git a/packages/react/src/components/FileUploader/FileUploader.stories.js b/packages/react/src/components/FileUploader/FileUploader.stories.js index 2adaf71c3f9e..2881fd7e5c06 100644 --- a/packages/react/src/components/FileUploader/FileUploader.stories.js +++ b/packages/react/src/components/FileUploader/FileUploader.stories.js @@ -51,7 +51,7 @@ export const Default = () => { ); }; -export const _FileUploaderItem = () => { +export const _FileUploaderItem = (args) => { return ( { name="README.md" status="edit" size="md" + {...args} /> ); }; +_FileUploaderItem.argTypes = { + errorBody: { + control: 'text', + description: 'Error message body for an invalid file upload', + }, + errorSubject: { + control: 'text', + description: 'Error message subject for an invalid file upload', + }, + iconDescription: { control: 'text' }, + invalid: { + control: 'boolean', + description: 'Specify if the currently uploaded file is invalid', + }, + name: { control: 'text', description: 'Name of the uploaded file' }, + onDelete: { action: 'onDelete' }, + size: { control: 'select', options: ['sm', 'md', 'lg'] }, + status: { + control: 'inline-radio', + options: ['uploading', 'edit', 'complete'], + description: 'Status of the file upload', + }, + uuid: { + control: 'text', + description: 'Unique identifier for the file object', + }, + + // Remove all the props that don't apply to FileUploaderItem + accept: { + table: { disable: true }, + }, + buttonKind: { + table: { disable: true }, + }, + buttonLabel: { + table: { disable: true }, + }, + className: { + table: { disable: true }, + }, + disabled: { + table: { disable: true }, + }, + labelDescription: { + table: { disable: true }, + }, + labelTitle: { + table: { disable: true }, + }, + multiple: { + table: { disable: true }, + }, + onChange: { + table: { disable: true }, + }, + onClick: { + table: { disable: true }, + }, + filenameStatus: { + table: { disable: true }, + }, +}; export const _FileUploaderDropContainer = () => (