フォームのバリデーションとニコ連携の画面変更 (#090) (#355)

Reviewed-on: #355
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/pages/materials/MaterialNewPage.test.tsx

@@ -1,11 +1,13 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import MaterialNewPage from '@/pages/materials/MaterialNewPage'
 import { renderWithProviders } from '@/test/render'
 
 const api = vi.hoisted (() => ({
-  apiPost: vi.fn (),
+  apiGet:     vi.fn (),
+  apiPost:    vi.fn (),
+  isApiError: vi.fn (),
 }))
 
 const toastApi = vi.hoisted (() => ({
@@ -16,6 +18,12 @@ vi.mock ('@/lib/api', () => api)
 vi.mock ('@/components/ui/use-toast', () => toastApi)
 
 describe ('MaterialNewPage', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    api.apiGet.mockResolvedValue ([])
+    api.isApiError.mockReturnValue (false)
+  })
+
   it ('initializes tag from query and submits form data', async () => {
     api.apiPost.mockResolvedValueOnce ({})
 
@@ -35,4 +43,30 @@ describe ('MaterialNewPage', () => {
     expect (formData.get ('url')).toBe ('https://example.com/ref')
     expect (toastApi.toast).toHaveBeenCalledWith ({ title: '送信成功!' })
   })
+
+  it ('shows validation errors for file and url fields', async () => {
+    api.isApiError.mockReturnValue (true)
+    api.apiPost.mockRejectedValueOnce ({
+      response: {
+        status: 422,
+        data:   {
+          type:        'validation_error',
+          message:     '入力内容を確認してください．',
+          errors:      {
+            file: ['ファイルまたは URL は必須です．'],
+            url:  ['ファイルまたは URL は必須です．'],
+          },
+          base_errors: [],
+        },
+      },
+    })
+
+    renderWithProviders (<MaterialNewPage/>)
+
+    fireEvent.change (screen.getAllByRole ('textbox')[0], { target: { value: '虹夏' } })
+    fireEvent.click (screen.getByRole ('button', { name: '追加' }))
+
+    expect (await screen.findAllByText ('ファイルまたは URL は必須です．')).toHaveLength (2)
+    expect (screen.getAllByRole ('textbox')[1]).toHaveAttribute ('aria-invalid', 'true')
+  })
 })