Skip to content

Commit

Permalink
Disabling multiple file inputs temporarily (#1046)
Browse files Browse the repository at this point in the history
  • Loading branch information
Andrew565 authored Feb 2, 2024
1 parent 5b385ad commit 3158ae2
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 38 deletions.
18 changes: 8 additions & 10 deletions packages/storybook/stories/va-file-input-uswds.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ const defaultArgs = {
'error': '',
'enable-analytics': false,
'hint': null,
'multiple': false,
'uswds': true,
'vaChange': event =>
alert(`File change event received: ${event?.detail?.files[0]?.name}`),
Expand All @@ -37,7 +36,6 @@ const Template = ({
error,
required,
hint,
multiple,
'enable-analytics': enableAnalytics,
uswds,
vaChange,
Expand All @@ -50,7 +48,6 @@ const Template = ({
required={required}
error={error}
hint={hint}
multiple={multiple}
enable-analytics={enableAnalytics}
onVaChange={vaChange}
uswds={uswds}
Expand Down Expand Up @@ -81,13 +78,14 @@ AcceptsAnyKindOfImage.args = {
accept: 'image/*',
};

export const AcceptsMultipleFiles = Template.bind(null);
AcceptsMultipleFiles.args = {
...defaultArgs,
label: 'Input accepts multiple files',
hint: 'Select one or more files',
multiple: true,
};
// Temporarily not supporting this option
// export const AcceptsMultipleFiles = Template.bind(null);
// AcceptsMultipleFiles.args = {
// ...defaultArgs,
// label: 'Input accepts multiple files',
// hint: 'Select one or more files',
// multiple: true,
// };

export const ErrorMessage = Template.bind(null);
ErrorMessage.args = {
Expand Down
8 changes: 0 additions & 8 deletions packages/web-components/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -434,10 +434,6 @@ export namespace Components {
* The label for the file input.
*/
"label"?: string;
/**
* Optionally allow multiple files (USWDS Only)
*/
"multiple"?: boolean;
/**
* The name for the input element.
*/
Expand Down Expand Up @@ -2375,10 +2371,6 @@ declare namespace LocalJSX {
* The label for the file input.
*/
"label"?: string;
/**
* Optionally allow multiple files (USWDS Only)
*/
"multiple"?: boolean;
/**
* The name for the input element.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ const path = require('path');
describe('va-file-input', () => {
it('renders', async () => {
const page = await newE2EPage();
await page.setContent('<va-file-input label="This is the file upload label" buttonText="Upload a file" required="false" multiple="false" class="hydrated"></va-file-input>');
await page.setContent(
'<va-file-input label="This is the file upload label" buttonText="Upload a file" required="false" multiple="false" class="hydrated"></va-file-input>',
);

const element = await page.find('va-file-input');
expect(element).toEqualHtml(`
Expand All @@ -23,7 +25,9 @@ describe('va-file-input', () => {

it('displays an error message when `error` is defined', async () => {
const page = await newE2EPage();
await page.setContent(`<va-file-input error="This is an error" buttonText="Upload a file" />`);
await page.setContent(
`<va-file-input error="This is an error" buttonText="Upload a file" />`,
);

const errorSpan = await page.find('va-file-input >>> #error-message');
expect(errorSpan.innerText.includes('This is an error')).toBe(true);
Expand All @@ -48,42 +52,49 @@ describe('va-file-input', () => {

it('renders a required span', async () => {
const page = await newE2EPage();
await page.setContent(`<va-file-input required label="Example file input." buttonText="Upload a file"/>`);
await page.setContent(
`<va-file-input required label="Example file input." buttonText="Upload a file"/>`,
);

const requiredSpan = await page.find('va-file-input >>> .required');
expect(requiredSpan).not.toBeNull();
});

it('the `multiple` attributes exists if set', async () => {
// Not supporting multiple for now
it.skip('the `multiple` attributes exists if set', async () => {
const page = await newE2EPage();
await page.setContent(`<va-file-input buttonText="Upload a file" multiple="true" />`);
await page.setContent(
`<va-file-input buttonText="Upload a file" multiple="true" />`,
);

const fileInput = await page.find('va-file-input >>> input');
expect(fileInput.getAttribute('multiple')).toBeTruthy;
expect(fileInput.getAttribute('multiple')).toBeTruthy();
});

it('the `multiple` attributes does not apply if omitted', async () => {
const page = await newE2EPage();
await page.setContent(`<va-file-input buttonText="Upload a file" />`);

const fileInput = await page.find('va-file-input >>> input');
expect(fileInput.getAttribute('multiple')).toBeFalsy;
expect(fileInput.getAttribute('multiple')).toBeFalsy();
});

it('the `accept` attribute exists if set', async () => {
const page = await newE2EPage();
await page.setContent(`<va-file-input buttonText="Upload a file" accept=".png" />`);
await page.setContent(
`<va-file-input buttonText="Upload a file" accept=".png" />`,
);

const fileInput = await page.find('va-file-input >>> input');
expect(fileInput.getAttribute('accept')).toBeTruthy;
expect(fileInput.getAttribute('accept')).toBeTruthy();
});

it('the `accept` attribute does not apply if omitted', async () => {
const page = await newE2EPage();
await page.setContent(`<va-file-input buttonText="Upload a file" />`);

const fileInput = await page.find('va-file-input >>> input');
expect(fileInput.getAttribute('accept')).toBeFalsy;
expect(fileInput.getAttribute('accept')).toBeFalsy();
});

it('emits the vaChange event only once', async () => {
Expand Down Expand Up @@ -167,22 +178,23 @@ describe('va-file-input', () => {
expect(requiredSpan).not.toBeNull();
});

it('v3 the `multiple` attributes exists if set', async () => {
// Skipping temporarily while we are not supporting the multiple file upload option
it.skip('v3 the `multiple` attributes exists if set', async () => {
const page = await newE2EPage();
await page.setContent(
`<va-file-input buttonText="Upload a file" multiple="true" uswds />`,
);

const fileInput = await page.find('va-file-input >>> input');
expect(fileInput.getAttribute('multiple')).toBeTruthy;
expect(fileInput.getAttribute('multiple')).toBeTruthy();
});

it('v3 the `multiple` attributes does not apply if omitted', async () => {
const page = await newE2EPage();
await page.setContent(`<va-file-input buttonText="Upload a file" uswds />`);

const fileInput = await page.find('va-file-input >>> input');
expect(fileInput.getAttribute('multiple')).toBeFalsy;
expect(fileInput.getAttribute('multiple')).toBeFalsy();
});

it('v3 the `accept` attribute exists if set', async () => {
Expand All @@ -192,15 +204,15 @@ describe('va-file-input', () => {
);

const fileInput = await page.find('va-file-input >>> input');
expect(fileInput.getAttribute('accept')).toBeTruthy;
expect(fileInput.getAttribute('accept')).toBeTruthy();
});

it('the `accept` attribute does not apply if omitted', async () => {
const page = await newE2EPage();
await page.setContent(`<va-file-input buttonText="Upload a file" uswds />`);

const fileInput = await page.find('va-file-input >>> input');
expect(fileInput.getAttribute('accept')).toBeFalsy;
expect(fileInput.getAttribute('accept')).toBeFalsy();
});

// Skipping due to test flakiness, but this event does work in the browser
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,8 @@ const addPreviewHeading = (fileInputEl, fileNames) => {
*/

const handleChange = (e, fileInputEl, instructions, dropTarget) => {
const fileNames = e.target.files;
const multiple = fileInputEl.getAttribute('multiple'); // TODO: Double-check this works correctly when multiple is re-enabled
const fileNames = multiple ? e.target.files : [e.target.files[0]];
const inputParent = dropTarget.closest(`.${DROPZONE_CLASS}`);
const statusElement = inputParent.querySelector(`.${SR_ONLY_CLASS}`);
const fileStore = [];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export class VaFileInput {
/**
* Optionally allow multiple files (USWDS Only)
*/
@Prop() multiple?: boolean = false;
// @Prop() multiple?: boolean = false; NOTE: disabling temporarily

/**
* Emit component-library-analytics events on the file input change event.
Expand Down Expand Up @@ -144,8 +144,7 @@ export class VaFileInput {
}

render() {
const { label, name, required, accept, error, hint, multiple, uswds } =
this;
const { label, name, required, accept, error, hint, uswds } = this;

const text = this.getButtonText();

Expand Down Expand Up @@ -196,7 +195,6 @@ export class VaFileInput {
type="file"
name={name}
accept={accept}
multiple={multiple}
aria-describedby={ariaDescribedbyIds}
onChange={this.handleChange}
/>
Expand Down

0 comments on commit 3158ae2

Please sign in to comment.