fix(InputFile): inputの挙動に寄せる

packages/smarthr-ui/src/components/InputFile/InputFile.test.tsx

@@ -0,0 +1,132 @@
+import { render, screen } from '@testing-library/react'
+import { userEvent } from 'storybook/test'
+
+import { IntlProvider } from '../../intl'
+import { FormControl } from '../FormControl'
+
+import { InputFile } from './InputFile'
+
+describe('InputFile', () => {
+  const file1 = new File(['foo'], 'foo.txt', { type: 'text/plain' })
+  const file2 = new File(['bar'], 'bar.txt', { type: 'text/plain' })
+
+  it('ファイル選択時にonChangeが発火すること', async () => {
+    const onChange = vi.fn()
+    await render(
+      <IntlProvider locale="ja">
+        <form>
+          <FormControl title="input file">
+            <InputFile name="test" label="input file" onChange={onChange} />
+          </FormControl>
+        </form>
+      </IntlProvider>,
+    )
+    const input = screen.getByLabelText('input file')
+    await userEvent.upload(input, file1)
+    expect(onChange).toHaveBeenCalledOnce()
+    expect(onChange).toHaveBeenCalledWith([file1])
+  })
+
+  it('multipleでファイル選択時にonChangeが発火すること', async () => {
+    const onChange = vi.fn()
+    await render(
+      <IntlProvider locale="ja">
+        <form>
+          <FormControl title="input file">
+            <InputFile name="test" label="input file" multiple onChange={onChange} />
+          </FormControl>
+        </form>
+      </IntlProvider>,
+    )
+    const input = screen.getByLabelText('input file')
+    await userEvent.upload(input, [file1, file2])
+    expect(onChange).toHaveBeenCalledOnce()
+    expect(onChange).toHaveBeenCalledWith([file1, file2])
+  })
+
+  it('multiplyAppendableでファイル選択時にonChangeが発火すること', async () => {
+    const onChange = vi.fn()
+    await render(
+      <IntlProvider locale="ja">
+        <form>
+          <FormControl title="input file">
+            <InputFile name="test" label="input file" multiplyAppendable onChange={onChange} />
+          </FormControl>
+        </form>
+      </IntlProvider>,
+    )
+    const input = screen.getByLabelText('input file')
+    await userEvent.upload(input, file1)
+    expect(onChange).toHaveBeenCalledOnce()
+    expect(onChange).toHaveBeenCalledWith([file1])
+  })
+
+  it('ファイル選択後、ファイルリストが表示されること', async () => {
+    await render(
+      <IntlProvider locale="ja">
+        <form>
+          <FormControl title="input file">
+            <InputFile name="test" label="input file" />
+          </FormControl>
+        </form>
+      </IntlProvider>,
+    )
+    const input = screen.getByLabelText('input file')
+    await userEvent.upload(input, file1)
+    expect(screen.getByText(file1.name)).toBeInTheDocument()
+  })
+
+  it('ファイル選択後、削除するとinputのvalueには存在しないこと', async () => {
+    await render(
+      <IntlProvider locale="ja">
+        <form>
+          <FormControl title="input file">
+            <InputFile name="test" label="input file" />
+          </FormControl>
+        </form>
+      </IntlProvider>,
+    )
+    const input = screen.getByLabelText('input file')
+    await userEvent.upload(input, file1)
+    expect(input.files).toHaveLength(1)
+    const deleteButton = screen.getByRole('button', { name: '削除' })
+    await userEvent.click(deleteButton)
+    expect(input.files).toHaveLength(0)
+  })
+
+  it('multipleで複数ファイル選択後、1つ削除すると削除したもののみinputのvalueには存在しないこと', async () => {
+    await render(
+      <IntlProvider locale="ja">
+        <form>
+          <FormControl title="input file">
+            <InputFile name="test" label="input file" multiple />
+          </FormControl>
+        </form>
+      </IntlProvider>,
+    )
+    const input = screen.getByLabelText('input file')
+    await userEvent.upload(input, [file1, file2])
+    expect(input.files).toHaveLength(2)
+    const deleteButton = screen.getByRole('button', { name: '削除' })
+    await userEvent.click(deleteButton)
+    expect(input.files).toHaveLength(1)
+  })
+
+  it('ファイル削除後、ファイルリストに存在しないこと', async () => {
+    await render(
+      <IntlProvider locale="ja">
+        <form>
+          <FormControl title="input file">
+            <InputFile name="test" label="input file" />
+          </FormControl>
+        </form>
+      </IntlProvider>,
+    )
+    const input = screen.getByLabelText('input file')
+    await userEvent.upload(input, file1)
+    expect(screen.getByText(file1.name)).toBeInTheDocument()
+    const deleteButton = screen.getByRole('button', { name: '削除' })
+    await userEvent.click(deleteButton)
+    expect(screen.queryByText(file1.name)).not.toBeInTheDocument()
+  })
+})

packages/smarthr-ui/src/components/InputFile/InputFile.tsx

@@ -138,7 +138,7 @@ export const InputFile = forwardRef<HTMLInputElement, Props & ElementProps>(
       () => inputRef.current,
     )
 
-    const updateInputValue = useCallback(
+    const updateInputFiles = useCallback(
       (newFiles: File[]) => {
         if (!inputRef.current) {
           return
@@ -160,11 +160,14 @@ export const InputFile = forwardRef<HTMLInputElement, Props & ElementProps>(
         onChange
           ? (newFiles: File[]) => {
               onChange(newFiles)
-              updateInputValue(newFiles)
+              if (multiplyAppendable) {
+                // multiplyAppendable以外ではinput要素を直接弄る必要がないので、updateInputFilesを呼ばない
+                updateInputFiles(newFiles)
+              }
               setFiles(newFiles)
             }
           : setFiles,
-      [onChange, updateInputValue],
+      [onChange, updateInputFiles, multiplyAppendable],
     )
 
     const handleChange = useCallback(
@@ -196,8 +199,11 @@ export const InputFile = forwardRef<HTMLInputElement, Props & ElementProps>(
         const newFiles = files.filter((_, i) => index !== i)
 
         updateFiles(newFiles)
+
+        // 削除後、同一ファイルを再選択可能にするためinput.valueをリセット
+        inputRef.current.value = ''
       },
-      [files, inputRef, updateFiles],
+      [files, updateFiles],
     )
 
     return (

packages/smarthr-ui/vitest-setup.js

@@ -1 +1,104 @@
 import '@testing-library/jest-dom/vitest'
+
+// DataTransferのモックを追加
+global.DataTransfer = class DataTransfer {
+  constructor() {
+    this._items = []
+    this._files = []
+    this._dropEffect = 'none'
+    this._effectAllowed = 'uninitialized'
+    this._types = []
+    this._data = new Map()
+  }
+
+  get items() {
+    return {
+      add: (data, type) => {
+        this._items.push({ data, type })
+        this._types.push(type)
+        if (data instanceof File) {
+          this._files.push(data)
+        }
+        return this._items.length - 1
+      },
+      clear: () => {
+        this._items = []
+        this._files = []
+        this._types = []
+        this._data.clear()
+      },
+      remove: (index) => {
+        if (index >= 0 && index < this._items.length) {
+          const item = this._items[index]
+          this._items.splice(index, 1)
+          this._types.splice(index, 1)
+          if (item.data instanceof File) {
+            const fileIndex = this._files.indexOf(item.data)
+            if (fileIndex > -1) {
+              this._files.splice(fileIndex, 1)
+            }
+          }
+        }
+      },
+      get length() {
+        return this._items.length
+      }
+    }
+  }
+
+  get files() {
+    return this._files
+  }
+
+  get types() {
+    return [...this._types]
+  }
+
+  get dropEffect() {
+    return this._dropEffect
+  }
+
+  set dropEffect(value) {
+    if (['none', 'copy', 'link', 'move'].includes(value)) {
+      this._dropEffect = value
+    }
+  }
+
+  get effectAllowed() {
+    return this._effectAllowed
+  }
+
+  set effectAllowed(value) {
+    if (['none', 'copy', 'copyLink', 'copyMove', 'link', 'linkMove', 'move', 'all', 'uninitialized'].includes(value)) {
+      this._effectAllowed = value
+    }
+  }
+
+  clearData(format) {
+    if (format) {
+      this._data.delete(format)
+      const index = this._types.indexOf(format)
+      if (index > -1) {
+        this._types.splice(index, 1)
+      }
+    } else {
+      this._data.clear()
+      this._types.length = 0
+    }
+  }
+
+  getData(format) {
+    return this._data.get(format) || ''
+  }
+
+  setData(format, data) {
+    this._data.set(format, data)
+    if (!this._types.includes(format)) {
+      this._types.push(format)
+    }
+  }
+
+  setDragImage(element, x, y) {
+    // モックでは何もしない
+  }
+}