From 2d0deed0b0e17ec91b86eb7eef85977a51c02780 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Thu, 31 Aug 2023 07:14:47 -0500 Subject: [PATCH] test(fileuploader): cover complex states with avt (#14527) * test(fileuploader): cover complex states with avt * chore: cleanup comments --- .../FileUploader/FileUploader-test.avt.e2e.js | 84 ++++++++++++++++++ .../FileUploader/test-file-for-uploading.png | Bin 0 -> 4898 bytes .../FileUploader/FileUploader.stories.js | 65 +++++++++++++- 3 files changed, 148 insertions(+), 1 deletion(-) create mode 100644 e2e/components/FileUploader/FileUploader-test.avt.e2e.js create mode 100644 e2e/components/FileUploader/test-file-for-uploading.png 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 0000000000000000000000000000000000000000..b30690c5f0571bac01e2f1639ed5f09adb43937e GIT binary patch literal 4898 zcmZWr2Q*w;)V`xc7h-f_3_^(B2cwM|VWKnI=w*~B(HT8NL{FlZh~9e%LOc@DMa$?y zL=B0OD8Ib-{`cPc|GU<{d!PO7Z|}4BS?k;zi_})5AY~#20DwY69ie-rt*!)4eC_Hz z$->$N0HiHW%F0L$Wn~D`)7{<)V+R20v1!kUka{Nc{d<9%?D<@gl=+g1Fwo0LRs}`a z46z1req?wDl#Q(|AB4L>Z7;10FoHLkfqcyyq)@0 zToMITR`$)AhN{jNWXh}OFh&~M<;OMBfZvTw{&jo>PsG`G3?G+R}_l-Tzaj7LUPQ!F>KV;f#nA#3##aH75 z(^UqJM`*77{IEumIGw|OT4e#c+i93_gO;;8TdqDdCsDfac5KStlflEo+}POk{>Lxj z2WAD|J^W<_<&eA2Y}MXRYbN1K*GrgPQ0UFRS)L#-P#{eNu`l7VQblkkl8lFeN5j~t z01_&89SoL*`?hgq6LEeu(<|2a~EOd_zLt#zZEPn}RAM z;__~ku*?yCRO(XV&OaQbEg=g4ekduAGJg?`57!W)or=1*JS&86-^1ceEMjc)t4=JIBgs|&IHGACcn#J0jhr5+)uPbv#)e!8g%;tazTDU7Xrwu zB5ysvY6VRofM!I~ECcyb9x0;-tLyuVB@>ugeps0;E*6C0W(h4fi%d;w3Dig9) z%&RfY*IItmV;5x+rNe2E%=PYBLn0@KE2lxqa1v|cLh?IXy*f$husdAtoYTpIiMh%0 zyt-glut}U*pKKp#pK2c}t~!-i^OmMoQJ-e3W|3xpsv9o_A5H4LwBWSa_vNX4sXDxi zMyv+;B{QXwrM4yDau)s80+Et9J#m8{MxV>p%Xf`l=gp}p-jC<$1XJ4G{0w}C7Ujkj zW!yKJ)OV)-A=DTFD|l75UP4#cq+hAD(_ng?LPfNw)^W4pUPEC+V8h7Qwy#<~IX|!c z2>5~e$|lwz-XZSC6vafr?l3%$k9V*;Uk8oJn{} zGRLK(r)BsgpX5y>I@!9e_vQRrMCl8sip_wDTN8?+6r$-SRVLZ9HePkD&-~NfQQB%<3#jee(ym-1DKScM|hQ*c}cTgLbR-#)te5-M9I7q>pHid|3u4L6rWK zLzLAwD_Q�$JL#d9=N0#`PAFN_9Vw;wo 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 Qzdza { ); }; -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 = () => (