#399

frontend/src/components/posts/import/PostImportRowForm.test.tsx

@@ -135,7 +135,7 @@ describe ('PostImportRowForm', () => {
   })
 
   it (
-      'shows the shared creation field order without duration and without file upload UI',
+      'shows upload input only when the thumbnail URL is blank',
       async () => {
     let actions: DialogueFormAction[] = []
     const controls: DialogueFormControls = {
@@ -164,7 +164,9 @@ describe ('PostImportRowForm', () => {
       'オリジナルの作成日時',
       'タグ',
       '親投稿'])
-    expect (container.querySelector ('input[type="file"]')).toBeNull ()
+    expect (container.querySelector ('input[type="file"]')).toHaveAttribute (
+	'accept',
+	'image/*')
     expect (screen.queryByPlaceholderText ('例: 2 / 2.5 / 1:23')).not.toBeInTheDocument ()
     expect (screen.getByDisplayValue ('tag1')).toBeInTheDocument ()
 

frontend/src/components/posts/import/PostImportThumbnailPreview.test.tsx

@@ -1,14 +1,8 @@
-import { render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import PostImportThumbnailPreview from '@/components/posts/import/PostImportThumbnailPreview'
 
-const api = vi.hoisted (() => ({
-  apiGet: vi.fn (),
-}))
-
-vi.mock ('@/lib/api', () => api)
-
 describe ('PostImportThumbnailPreview', () => {
   beforeEach (() => {
     vi.clearAllMocks ()
@@ -16,69 +10,50 @@ describe ('PostImportThumbnailPreview', () => {
     globalThis.URL.revokeObjectURL = vi.fn ()
   })
 
-  it ('uses a backend-fetched blob URL instead of the external thumbnail URL directly', async () => {
-    api.apiGet.mockResolvedValueOnce (new Blob (['img'], { type: 'image/png' }))
-
+  it ('renders the remote URL directly without a backend proxy', () => {
     render (
-        <PostImportThumbnailPreview
-            url="https://example.com/thumbnail.jpg"
-            className="h-10 w-10"/>)
+	<PostImportThumbnailPreview
+	    url="https://example.com/thumbnail.jpg"
+	    className="h-10 w-10"/>)
 
-    await waitFor (() => {
-      expect (screen.getByRole ('img')).toHaveAttribute ('src', 'blob:preview')
-    })
-    expect (screen.getByRole ('img')).not.toHaveAttribute (
-        'src',
-        'https://example.com/thumbnail.jpg')
-    expect (api.apiGet).toHaveBeenCalledWith ('/preview/thumbnail', {
-      params: { url: 'https://example.com/thumbnail.jpg' },
-      responseType: 'blob' })
+    expect (screen.getByRole ('img')).toHaveAttribute (
+	'src',
+	'https://example.com/thumbnail.jpg')
+    expect (screen.getByRole ('img')).toHaveAttribute (
+	'referrerpolicy',
+	'no-referrer')
   })
 
-  it ('does not render the unsafe URL directly when preview fetching fails', async () => {
-    api.apiGet.mockRejectedValueOnce (new Error ('unsafe'))
-
+  it ('shows the empty frame after the remote image fails', () => {
     const { container } = render (
-        <PostImportThumbnailPreview
-            url="http://127.0.0.1/private.png"
-            className="h-10 w-10"/>)
+	<PostImportThumbnailPreview
+	    url="https://example.com/missing.jpg"
+	    className="h-10 w-10"/>)
 
-    await waitFor (() => {
-      expect (screen.queryByRole ('img')).toBeNull ()
-    })
-    expect (screen.queryByText ('サムネールを表示できません')).toBeNull ()
-    expect (screen.queryByText ('なし')).toBeNull ()
+    fireEvent.error (screen.getByRole ('img'))
+
+    expect (screen.queryByRole ('img')).toBeNull ()
     expect (container.querySelector ('div.rounded.border.bg-muted')).not.toBeNull ()
     expect (container.textContent).toBe ('')
-    expect (screen.queryByRole ('img')).toBeNull ()
   })
 
-  it ('revokes the old object URL when the source URL changes', async () => {
-    const createObjectUrlMock =
-        globalThis.URL.createObjectURL as unknown as ReturnType<typeof vi.fn>
-    createObjectUrlMock
-        .mockReturnValueOnce ('blob:first')
-        .mockReturnValueOnce ('blob:second')
-    api.apiGet
-        .mockResolvedValueOnce (new Blob (['first'], { type: 'image/png' }))
-        .mockResolvedValueOnce (new Blob (['second'], { type: 'image/png' }))
+  it ('uses and revokes an object URL only when the remote URL is blank', () => {
+    const file = new File (['image'], 'thumbnail.png', { type: 'image/png' })
+    const { rerender, unmount } = render (
+	<PostImportThumbnailPreview url="" file={file} className="h-10 w-10"/>)
 
-    const { rerender } = render (
-        <PostImportThumbnailPreview
-            url="https://example.com/first.jpg"
-            className="h-10 w-10"/>)
-    await waitFor (() => {
-      expect (screen.getByRole ('img')).toHaveAttribute ('src', 'blob:first')
-    })
+    expect (screen.getByRole ('img')).toHaveAttribute ('src', 'blob:preview')
 
     rerender (
-        <PostImportThumbnailPreview
-            url="https://example.com/second.jpg"
-            className="h-10 w-10"/>)
+	<PostImportThumbnailPreview
+	    url="https://example.com/remote.jpg"
+	    file={file}
+	    className="h-10 w-10"/>)
+    expect (screen.getByRole ('img')).toHaveAttribute (
+	'src',
+	'https://example.com/remote.jpg')
 
-    await waitFor (() => {
-      expect (screen.getByRole ('img')).toHaveAttribute ('src', 'blob:second')
-    })
-    expect (globalThis.URL.revokeObjectURL).toHaveBeenCalledWith ('blob:first')
+    unmount ()
+    expect (globalThis.URL.revokeObjectURL).toHaveBeenCalledWith ('blob:preview')
   })
 })

frontend/src/components/posts/import/postImportRowStatus.test.ts

@@ -16,14 +16,14 @@ describe ('displayPostImportStatus', () => {
       skipReason: 'manual' }))).toBe ('skipped')
   })
 
-  it ('does not expose validation, failure, or created states as badges', () => {
+  it ('distinguishes validation, failure, and created states', () => {
     expect (displayPostImportStatus (buildPostImportRow ({
       status: 'error',
-      validationErrors: { title: ['invalid'] } }))).toBeNull ()
+      validationErrors: { title: ['invalid'] } }))).toBe ('error')
     expect (displayPostImportStatus (buildPostImportRow ({
-      importStatus: 'failed' }))).toBeNull ()
+      importStatus: 'failed' }))).toBe ('failed')
     expect (displayPostImportStatus (buildPostImportRow ({
       importStatus: 'created',
-      createdPostId: 3 }))).toBeNull ()
+      createdPostId: 3 }))).toBe ('created')
   })
 })