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

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

frontend/src/pages/deerjikists/DeerjikistDetailPage.test.tsx

@@ -0,0 +1,72 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { Route, Routes } from 'react-router-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import DeerjikistDetailPage from '@/pages/deerjikists/DeerjikistDetailPage'
+import { buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const tagsApi = vi.hoisted (() => ({
+  fetchDeerjikistsByTag: vi.fn (),
+}))
+
+const api = vi.hoisted (() => ({
+  apiPut:     vi.fn (),
+  isApiError: vi.fn (),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/tags', () => tagsApi)
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+
+const renderPage = () =>
+  renderWithProviders (
+      <Routes>
+        <Route path="/tags/:id/deerjikists" element={<DeerjikistDetailPage/>}/>
+      </Routes>,
+      { route: '/tags/7/deerjikists' },
+  )
+
+describe ('DeerjikistDetailPage', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    api.isApiError.mockReturnValue (false)
+  })
+
+  it ('shows indexed validation errors returned for deerjikist rows', async () => {
+    tagsApi.fetchDeerjikistsByTag.mockResolvedValueOnce ({
+      tag:         buildTag ({ id: 7, name: 'deerjika', category: 'deerjikist' }),
+      deerjikists: [{ platform: null, code: 'abc' }],
+    })
+    api.isApiError.mockReturnValue (true)
+    api.apiPut.mockRejectedValueOnce ({
+      response: {
+        status: 422,
+        data:   {
+          type:        'validation_error',
+          message:     '入力内容を確認してください．',
+          errors:      { 'deerjikists.0.platform': ['プラットフォームを入力してください．'] },
+          base_errors: [],
+        },
+      },
+    })
+
+    renderPage ()
+
+    await screen.findByDisplayValue ('abc')
+    fireEvent.submit (screen.getByRole ('button', { name: '更新' }).closest ('form')!)
+
+    await waitFor (() => {
+      expect (api.apiPut).toHaveBeenCalledWith (
+          '/tags/7/deerjikists',
+          [{ platform: null, code: 'abc' }],
+      )
+    })
+    expect (await screen.findByText ('プラットフォームを入力してください．')).toBeInTheDocument ()
+    expect (screen.getByRole ('combobox')).toHaveAttribute ('aria-invalid', 'true')
+  })
+})