@ncds/ui-admin 1.8.16 → 1.8.18

package/dist/esm/src/components/forms-and-input/date-picker/__tests__/DatePicker.test.js

@@ -123,4 +123,414 @@ describe('#3 onValidationError.previousDate', () => {
     expect(arg.previousDate?.getDate()).toBe(LAST_VALID_DAY); // 직전 유효 날짜 (≠ 위반 날짜)
     expect(arg.previousDate?.getTime()).not.toBe(arg.date.getTime());
   });
+});
+describe('#5 blur 동기화 — flatpickr가 통지하지 않은 값 보정 (#410)', () => {
+  const getInstance = container => {
+    const input = container.querySelector('input');
+    expect(input._flatpickr).toBeTruthy();
+    return {
+      input,
+      instance: input._flatpickr
+    };
+  };
+  /** blur 동기화는 한 틱 뒤에 실행되므로 매크로태스크를 한 번 흘려보낸다 */
+  const flushBlurSync = async () => {
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+  };
+  it('onChange 없이 값만 반영된 채 blur 되면 onChangeDate 로 통지한다', async () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2024-03-01',
+      onChangeDate,
+      datePickerOptions: {
+        allowInput: true
+      }
+    });
+    const {
+      input,
+      instance
+    } = getInstance(container);
+    // flatpickr documentClick 이 하는 것과 동일하게, onChange 를 발화시키지 않고 값만 반영한다
+    act(() => {
+      instance.setDate('2024-03-20', false);
+    });
+    onChangeDate.mockClear();
+    act(() => {
+      input.dispatchEvent(new Event('blur'));
+    });
+    await flushBlurSync();
+    expect(onChangeDate).toHaveBeenCalledWith('2024-03-20');
+  });
+  it('flatpickr가 이미 onChange 로 통지했으면 blur 가 중복 통지하지 않는다', async () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2024-03-01',
+      onChangeDate,
+      datePickerOptions: {
+        allowInput: true
+      }
+    });
+    const {
+      input,
+      instance
+    } = getInstance(container);
+    act(() => {
+      instance.setDate('2024-03-20', true);
+    });
+    expect(onChangeDate).toHaveBeenCalledTimes(1);
+    act(() => {
+      input.dispatchEvent(new Event('blur'));
+    });
+    await flushBlurSync();
+    expect(onChangeDate).toHaveBeenCalledTimes(1);
+  });
+  it('min/max 위반 값은 blur 로도 통지하지 않고 onValidationError 로 보고한다', async () => {
+    const onChangeDate = vi.fn();
+    const onValidationError = vi.fn();
+    const container = mount({
+      currentDate: '2024-03-15',
+      onChangeDate,
+      onValidationError,
+      datePickerOptions: {
+        minDate: '2024-03-10',
+        maxDate: '2024-03-25',
+        allowInput: true
+      }
+    });
+    const {
+      input,
+      instance
+    } = getInstance(container);
+    // 범위 밖 날짜가 onChange 없이 값만 반영된 상태 (마우스로 캘린더 밖 클릭 시 flatpickr 동작)
+    act(() => {
+      instance.setDate('2024-04-30', false);
+    });
+    onChangeDate.mockClear();
+    onValidationError.mockClear();
+    act(() => {
+      input.dispatchEvent(new Event('blur'));
+    });
+    await flushBlurSync();
+    expect(onChangeDate).not.toHaveBeenCalled();
+    expect(onValidationError).toHaveBeenCalledTimes(1);
+    expect(onValidationError.mock.calls[0][0].violations).toContain('maxDate');
+  });
+  it('enableTime 모드에서 값 변경 없이 blur 해도 통지하지 않는다', async () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2024-03-20',
+      onChangeDate,
+      datePickerOptions: {
+        enableTime: true,
+        dateFormat: 'Y-m-d H:i',
+        allowInput: true
+      }
+    });
+    const {
+      input
+    } = getInstance(container);
+    onChangeDate.mockClear();
+    act(() => {
+      input.dispatchEvent(new Event('blur'));
+    });
+    await flushBlurSync();
+    expect(onChangeDate).not.toHaveBeenCalled();
+  });
+  it('noCalendar(시간 전용) 모드에서 값 변경 없이 blur 해도 통지하지 않는다', async () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '',
+      onChangeDate,
+      datePickerOptions: {
+        enableTime: true,
+        noCalendar: true,
+        dateFormat: 'H:i',
+        allowInput: true
+      }
+    });
+    const {
+      input
+    } = getInstance(container);
+    onChangeDate.mockClear();
+    act(() => {
+      input.dispatchEvent(new Event('blur'));
+    });
+    await flushBlurSync();
+    expect(onChangeDate).not.toHaveBeenCalled();
+  });
+  it('noCalendar(시간 전용) 모드에서 통지 없이 시간만 바뀐 채 blur 되면 통지한다', async () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '',
+      onChangeDate,
+      datePickerOptions: {
+        enableTime: true,
+        noCalendar: true,
+        dateFormat: 'H:i',
+        allowInput: true
+      }
+    });
+    const {
+      input,
+      instance
+    } = getInstance(container);
+    act(() => {
+      instance.setDate('14:30', false);
+    });
+    onChangeDate.mockClear();
+    act(() => {
+      input.dispatchEvent(new Event('blur'));
+    });
+    await flushBlurSync();
+    expect(onChangeDate).toHaveBeenCalledWith('14:30');
+  });
+  it('portal 모드에서도 통지 없이 값만 반영된 채 blur 되면 통지한다', async () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2024-03-01',
+      onChangeDate,
+      portal: true,
+      datePickerOptions: {
+        allowInput: true
+      }
+    });
+    const {
+      input,
+      instance
+    } = getInstance(container);
+    act(() => {
+      instance.setDate('2024-03-20', false);
+    });
+    onChangeDate.mockClear();
+    act(() => {
+      input.dispatchEvent(new Event('blur'));
+    });
+    await flushBlurSync();
+    expect(onChangeDate).toHaveBeenCalledWith('2024-03-20');
+  });
+  it('값이 바뀌지 않았으면 blur 만으로는 통지하지 않는다', async () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2024-03-01',
+      onChangeDate,
+      datePickerOptions: {
+        allowInput: true
+      }
+    });
+    const {
+      input
+    } = getInstance(container);
+    onChangeDate.mockClear();
+    act(() => {
+      input.dispatchEvent(new Event('blur'));
+    });
+    await flushBlurSync();
+    expect(onChangeDate).not.toHaveBeenCalled();
+  });
+});
+describe('#7 타이핑 즉시 통지 — blur 를 기다리지 않는다 (#410)', () => {
+  const getInput = container => container.querySelector('input.flatpickr-input');
+  /** 사용자가 한 글자씩 타이핑하는 것과 동일하게 input 이벤트를 발생시킨다 */
+  const typeInto = (input, text) => {
+    input.value = '';
+    for (const char of text) {
+      act(() => {
+        input.value = `${input.value}${char}`;
+        input.dispatchEvent(new Event('input', {
+          bubbles: true
+        }));
+      });
+    }
+  };
+  const flushBlurSync = async () => {
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+  };
+  it('완성된 유효 날짜를 타이핑하면 blur 전에 통지한다', () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2024-03-01',
+      onChangeDate,
+      datePickerOptions: {
+        allowInput: true
+      }
+    });
+    typeInto(getInput(container), '2024-03-20');
+    expect(onChangeDate).toHaveBeenCalledWith('2024-03-20');
+  });
+  it('구분자 없이 8자리 숫자만 타이핑해도 통지한다', () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2024-03-01',
+      onChangeDate,
+      datePickerOptions: {
+        allowInput: true
+      }
+    });
+    // 8자리를 다 치는 순간 핸들러가 값을 '2024-03-20' 으로 다시 쓴다.
+    // 그 뒤로는 브라우저가 input 이벤트를 더 주지 않으므로 이 시점에 통지해야 한다.
+    typeInto(getInput(container), '20240320');
+    expect(onChangeDate).toHaveBeenCalledWith('2024-03-20');
+  });
+  it('아직 완성되지 않은 입력은 통지하지 않는다', () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2024-03-01',
+      onChangeDate,
+      datePickerOptions: {
+        allowInput: true
+      }
+    });
+    typeInto(getInput(container), '2024-03-');
+    expect(onChangeDate).not.toHaveBeenCalled();
+  });
+  it('타이핑으로 이미 통지했으면 blur 가 중복 통지하지 않는다', async () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2024-03-01',
+      onChangeDate,
+      datePickerOptions: {
+        allowInput: true
+      }
+    });
+    const input = getInput(container);
+    typeInto(input, '2024-03-20');
+    expect(onChangeDate).toHaveBeenCalledTimes(1);
+    act(() => {
+      input.dispatchEvent(new Event('blur'));
+    });
+    await flushBlurSync();
+    expect(onChangeDate).toHaveBeenCalledTimes(1);
+  });
+  it('min/max 범위 밖 날짜는 타이핑 중에 통지하지 않는다 (blur 시점에 한 번만 보고)', () => {
+    const onChangeDate = vi.fn();
+    const onValidationError = vi.fn();
+    const container = mount({
+      currentDate: '2024-03-15',
+      onChangeDate,
+      onValidationError,
+      datePickerOptions: {
+        minDate: '2024-03-10',
+        maxDate: '2024-03-25',
+        allowInput: true
+      }
+    });
+    typeInto(getInput(container), '2024-04-30');
+    expect(onChangeDate).not.toHaveBeenCalled();
+    expect(onValidationError).not.toHaveBeenCalled();
+  });
+  it('같은 값은 경로가 달라도 두 번 통지하지 않는다', () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2024-03-01',
+      onChangeDate,
+      datePickerOptions: {
+        allowInput: true
+      }
+    });
+    const input = getInput(container);
+    // 타이핑으로 통지한 뒤, 캘린더가 같은 날짜로 onChange 를 다시 발화시키는 상황
+    typeInto(input, '2024-03-20');
+    act(() => {
+      input._flatpickr.setDate('2024-03-20', true);
+    });
+    expect(onChangeDate).toHaveBeenCalledTimes(1);
+  });
+  it('enableTime 모드에서 날짜만 입력한 상태는 타이핑 중에 통지하지 않는다', () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2024-03-01 00:00',
+      onChangeDate,
+      datePickerOptions: {
+        enableTime: true,
+        dateFormat: 'Y-m-d H:i',
+        allowInput: true
+      }
+    });
+    // '2024-03-20' 은 최종 표기('2024-03-20 00:00')와 다르다.
+    // 여기서 통지하면 setDate 가 input 을 다시 써서 타이핑 중 커서가 튄다.
+    typeInto(getInput(container), '2024-03-20');
+    expect(onChangeDate).not.toHaveBeenCalled();
+  });
+});
+describe('#8 완성 판정·파싱을 dateFormat 기준으로 한다', () => {
+  const getInput = container => container.querySelector('input.flatpickr-input');
+  const typeInto = (input, text) => {
+    input.value = '';
+    for (const char of text) {
+      act(() => {
+        input.value = `${input.value}${char}`;
+        input.dispatchEvent(new Event('input', {
+          bubbles: true
+        }));
+      });
+    }
+  };
+  it('enableTime 에서 한 글자씩 쳐도 입력이 유지되고 통지된다', () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2026-03-20 23:59',
+      onChangeDate,
+      datePickerOptions: {
+        allowInput: true,
+        enableTime: true,
+        dateFormat: 'Y-m-d H:i'
+      }
+    });
+    const input = getInput(container);
+    // 완성 길이를 10 으로 고정하면 '2026-03-01 0' 을 완성으로 오판해
+    // moment 검증에 걸리고, 입력이 이전 값('2026-03-20 23:59')으로 되돌아갔다
+    typeInto(input, '2026-03-01 00:00');
+    expect(input.value).toBe('2026-03-01 00:00');
+    expect(onChangeDate).toHaveBeenCalledWith('2026-03-01 00:00');
+  });
+  it('enableTime 에서 시간을 아직 안 친 중간 상태는 통지하지 않는다', () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2026-03-20 23:59',
+      onChangeDate,
+      datePickerOptions: {
+        allowInput: true,
+        enableTime: true,
+        dateFormat: 'Y-m-d H:i'
+      }
+    });
+    typeInto(getInput(container), '2026-03-01 00');
+    expect(onChangeDate).not.toHaveBeenCalled();
+  });
+  it('시간 전용(noCalendar) 모드에서 타이핑한 값이 되돌려지지 않는다', () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '23:59',
+      onChangeDate,
+      datePickerOptions: {
+        allowInput: true,
+        enableTime: true,
+        noCalendar: true,
+        dateFormat: 'H:i'
+      }
+    });
+    const input = getInput(container);
+    // 포맷 없이 moment('14:30') 으로 파싱하면 invalid 라 이전 값으로 복원됐다
+    typeInto(input, '14:30');
+    expect(input.value).toBe('14:30');
+    expect(onChangeDate).toHaveBeenCalledWith('14:30');
+  });
+  it('완성 길이에 도달했지만 실재하지 않는 날짜는 이전 값으로 복원한다', () => {
+    const onChangeDate = vi.fn();
+    const container = mount({
+      currentDate: '2026-03-20',
+      onChangeDate,
+      datePickerOptions: {
+        allowInput: true
+      }
+    });
+    const input = getInput(container);
+    typeInto(input, '2026-13-45');
+    expect(input.value).not.toBe('2026-13-45');
+    expect(onChangeDate).not.toHaveBeenCalledWith('2026-13-45');
+  });
 });

package/dist/esm/src/components/forms-and-input/file-input/FileInput.js

@@ -2,16 +2,35 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
+import { useObjectUrl } from '../../../hooks/useObjectUrl';
 import { Button } from '../../action/button';
 import { Tag } from '../../feedback-and-status/tag/Tag';
 import { HintText, Label } from '../../shared';
+/**
+ * Thumbnail next to a file tag.
+ *
+ * Split out so the object URL can live in a hook — hooks cannot be called
+ * from inside the file list's map callback.
+ */
+const FileTagImage = _ref2 => {
+  let {
+    file
+  } = _ref2;
+  const objectUrl = useObjectUrl(file);
+  if (!objectUrl) return null;
+  return _jsx("img", {
+    className: "ncua-file-input__file-image",
+    src: objectUrl,
+    alt: file.name
+  });
+};
 export var FileInputErrorType;
 (function (FileInputErrorType) {
   FileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
   FileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
   FileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
 })(FileInputErrorType || (FileInputErrorType = {}));
-export const FileInput = /*#__PURE__*/forwardRef((_ref2, _ref) => {
+export const FileInput = /*#__PURE__*/forwardRef((_ref3, _ref) => {
   let {
     size = 'xs',
     accept,
@@ -31,8 +50,9 @@ export const FileInput = /*#__PURE__*/forwardRef((_ref2, _ref) => {
     isRequired,
     showHelpIcon,
     hintText,
+    showFileTags = true,
     ...props
-  } = _ref2;
+  } = _ref3;
   const fileInputRef = useRef(null);
   const [internalFiles, setInternalFiles] = useState([]);
   // Determine if component is controlled or uncontrolled
@@ -108,7 +128,7 @@ export const FileInput = /*#__PURE__*/forwardRef((_ref2, _ref) => {
     updateFiles(newFiles);
   };
   const renderFileTagList = () => {
-    if (files.length === 0) return null;
+    if (!showFileTags || files.length === 0) return null;
     return _jsx("div", {
       className: "ncua-file-input__file-tags",
       children: files.map((file, index) => _jsxs("div", {
@@ -118,10 +138,8 @@ export const FileInput = /*#__PURE__*/forwardRef((_ref2, _ref) => {
           size: size === 'xs' ? 'sm' : 'md',
           close: true,
           onButtonClick: () => handleRemoveFile(index)
-        }), file.type.startsWith('image/') && _jsx("img", {
-          className: "ncua-file-input__file-image",
-          src: URL.createObjectURL(file),
-          alt: file.name
+        }), file.type.startsWith('image/') && _jsx(FileTagImage, {
+          file: file
         })]
       }, `${file.name}-${index}`))
     });

package/dist/esm/src/components/forms-and-input/file-input/__tests__/FileInput.test.js

@@ -0,0 +1,165 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { FileInput } from '../FileInput';
+const originalCreateObjectURL = URL.createObjectURL;
+const originalRevokeObjectURL = URL.revokeObjectURL;
+let createObjectURL;
+let revokeObjectURL;
+beforeEach(() => {
+  let issued = 0;
+  createObjectURL = vi.fn(() => `blob:mock/${++issued}`);
+  revokeObjectURL = vi.fn();
+  URL.createObjectURL = createObjectURL;
+  URL.revokeObjectURL = revokeObjectURL;
+});
+afterEach(() => {
+  URL.createObjectURL = originalCreateObjectURL;
+  URL.revokeObjectURL = originalRevokeObjectURL;
+});
+/** 내용은 검증 대상이 아니므로 최소 크기만 채운다 */
+const DUMMY_FILE_BYTES = 4;
+const makeFile = (name, type) => new File([new Uint8Array(DUMMY_FILE_BYTES)], name, {
+  type
+});
+function mountFileInput(files) {
+  let extraProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  const render = () => {
+    act(() => {
+      root.render(/*#__PURE__*/createElement(FileInput, {
+        value: files,
+        onChange: () => undefined,
+        ...extraProps
+      }));
+    });
+  };
+  render();
+  const unmount = () => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  };
+  return {
+    container,
+    render,
+    unmount
+  };
+}
+describe('FileInput — 이미지 썸네일 object URL 해제', () => {
+  it('이미지 파일의 썸네일을 렌더한다', () => {
+    const view = mountFileInput([makeFile('a.jpg', 'image/jpeg')]);
+    const img = view.container.querySelector('.ncua-file-input__file-image');
+    expect(img).not.toBeNull();
+    expect(img?.getAttribute('src')).toBe('blob:mock/1');
+    expect(img?.getAttribute('alt')).toBe('a.jpg');
+    view.unmount();
+  });
+  it('리렌더를 반복해도 파일당 object URL을 한 번만 만든다', () => {
+    const view = mountFileInput([makeFile('a.jpg', 'image/jpeg')]);
+    view.render();
+    view.render();
+    view.render();
+    expect(createObjectURL).toHaveBeenCalledTimes(1);
+    view.unmount();
+  });
+  it('언마운트하면 만들었던 object URL을 해제한다', () => {
+    const view = mountFileInput([makeFile('a.jpg', 'image/jpeg')]);
+    expect(revokeObjectURL).not.toHaveBeenCalled();
+    view.unmount();
+    expect(revokeObjectURL).toHaveBeenCalledTimes(1);
+    expect(revokeObjectURL).toHaveBeenCalledWith('blob:mock/1');
+  });
+  it('이미지가 아닌 파일에는 object URL을 만들지 않는다', () => {
+    const view = mountFileInput([makeFile('doc.pdf', 'application/pdf')]);
+    expect(createObjectURL).not.toHaveBeenCalled();
+    expect(view.container.querySelector('.ncua-file-input__file-image')).toBeNull();
+    view.unmount();
+  });
+  it('이미지가 여러 개면 각각 하나씩만 만들고 언마운트 시 모두 해제한다', () => {
+    const view = mountFileInput([makeFile('a.jpg', 'image/jpeg'), makeFile('b.png', 'image/png')]);
+    expect(createObjectURL).toHaveBeenCalledTimes(2);
+    view.unmount();
+    expect(revokeObjectURL).toHaveBeenCalledTimes(2);
+  });
+});
+/** 숨겨진 file input 에 파일을 넣고 change 를 발생시킨다 */
+function selectFiles(container, files) {
+  const input = container.querySelector('input[type="file"]');
+  if (!input) throw new Error('file input을 찾을 수 없다');
+  Object.defineProperty(input, 'files', {
+    value: files,
+    configurable: true
+  });
+  act(() => {
+    input.dispatchEvent(new Event('change', {
+      bubbles: true
+    }));
+  });
+}
+describe('FileInput — showFileTags', () => {
+  it('기본값에서는 파일 태그 목록을 렌더한다', () => {
+    const view = mountFileInput([makeFile('doc.pdf', 'application/pdf')]);
+    expect(view.container.querySelector('.ncua-file-input__file-tags')).not.toBeNull();
+    expect(view.container.querySelector('.ncua-tag')).not.toBeNull();
+    view.unmount();
+  });
+  it('false면 파일 태그 목록을 렌더하지 않는다', () => {
+    const view = mountFileInput([makeFile('doc.pdf', 'application/pdf')], {
+      showFileTags: false
+    });
+    expect(view.container.querySelector('.ncua-file-input__file-tags')).toBeNull();
+    expect(view.container.querySelector('.ncua-tag')).toBeNull();
+    view.unmount();
+  });
+  it('false여도 파일 찾기 버튼과 안내 문구는 그대로 렌더한다', () => {
+    const view = mountFileInput([makeFile('doc.pdf', 'application/pdf')], {
+      showFileTags: false,
+      hintItems: ['파일은 5MB 이내입니다.']
+    });
+    expect(view.container.querySelector('.ncua-btn')).not.toBeNull();
+    expect(view.container.querySelector('.ncua-file-input__hint-list')?.textContent).toContain('5MB');
+    view.unmount();
+  });
+  it('false면 이미지 썸네일 object URL을 만들지 않는다', () => {
+    const view = mountFileInput([makeFile('a.jpg', 'image/jpeg')], {
+      showFileTags: false
+    });
+    expect(createObjectURL).not.toHaveBeenCalled();
+    expect(view.container.querySelector('.ncua-file-input__file-image')).toBeNull();
+    view.unmount();
+  });
+  it('false여도 선택한 파일을 onChange로 전달한다', () => {
+    const onChange = vi.fn();
+    const view = mountFileInput([], {
+      showFileTags: false,
+      onChange
+    });
+    const picked = makeFile('a.pdf', 'application/pdf');
+    selectFiles(view.container, [picked]);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith([picked]);
+    view.unmount();
+  });
+  it('false여도 이미 등록된 파일은 중복으로 걸러 onFail로 알린다', () => {
+    const already = makeFile('a.pdf', 'application/pdf');
+    const onChange = vi.fn();
+    const onFail = vi.fn();
+    const view = mountFileInput([already], {
+      showFileTags: false,
+      onChange,
+      onFail
+    });
+    selectFiles(view.container, [makeFile('a.pdf', 'application/pdf')]);
+    expect(onChange).toHaveBeenCalledWith([already]);
+    expect(onFail).toHaveBeenCalledTimes(1);
+    expect(onFail.mock.calls[0][0]).toHaveLength(1);
+    expect(onFail.mock.calls[0][0][0].errorType).toBe('ALREADY_UPLOADED');
+    view.unmount();
+  });
+});