diff --git a/frontend/src/components/posts/PostThumbnailPreview.test.tsx b/frontend/src/components/posts/PostThumbnailPreview.test.tsx
index 0ff9070..bb9a17e 100644
--- a/frontend/src/components/posts/PostThumbnailPreview.test.tsx
+++ b/frontend/src/components/posts/PostThumbnailPreview.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import PostThumbnailPreview from '@/components/posts/PostThumbnailPreview'
@@ -9,4 +9,28 @@ describe ('PostThumbnailPreview', () => {
expect (screen.getByRole ('img')).toHaveAttribute ('src', 'blob:preview')
})
+
+ it ('renders an empty thumbnail frame without text when the URL is empty', () => {
+ const { container } = render (
+ )
+
+ expect (screen.queryByRole ('img')).toBeNull ()
+ expect (screen.queryByText ('サムネールを表示できません')).toBeNull ()
+ expect (screen.queryByText ('なし')).toBeNull ()
+ expect (container.querySelector ('div.rounded.border.bg-muted')).not.toBeNull ()
+ expect (container.textContent).toBe ('')
+ })
+
+ it ('renders an empty thumbnail frame without text when image loading fails', () => {
+ const { container } = render (
+ )
+
+ fireEvent.error (screen.getByRole ('img'))
+
+ expect (screen.queryByRole ('img')).toBeNull ()
+ expect (screen.queryByText ('サムネールを表示できません')).toBeNull ()
+ expect (screen.queryByText ('なし')).toBeNull ()
+ expect (container.querySelector ('div.rounded.border.bg-muted')).not.toBeNull ()
+ expect (container.textContent).toBe ('')
+ })
})
diff --git a/frontend/src/components/posts/PostThumbnailPreview.tsx b/frontend/src/components/posts/PostThumbnailPreview.tsx
index 099ef2c..6b2a990 100644
--- a/frontend/src/components/posts/PostThumbnailPreview.tsx
+++ b/frontend/src/components/posts/PostThumbnailPreview.tsx
@@ -19,30 +19,13 @@ const PostThumbnailPreview: FC = (
setFailed (false)
}, [url])
- if (!(url))
+ if (!(url) || failed)
{
return (
- なし
-
)
- }
-
- if (failed)
- {
- return (
-
- サムネールを表示できません
-
)
+ 'rounded border border-border bg-muted')}/>)
}
return (
diff --git a/frontend/src/components/posts/import/PostImportThumbnailPreview.test.tsx b/frontend/src/components/posts/import/PostImportThumbnailPreview.test.tsx
index 21cdd0c..16a3ed4 100644
--- a/frontend/src/components/posts/import/PostImportThumbnailPreview.test.tsx
+++ b/frontend/src/components/posts/import/PostImportThumbnailPreview.test.tsx
@@ -38,12 +38,18 @@ describe ('PostImportThumbnailPreview', () => {
it ('does not render the unsafe URL directly when preview fetching fails', async () => {
api.apiGet.mockRejectedValueOnce (new Error ('unsafe'))
- render (
+ const { container } = render (
)
- expect (await screen.findByText ('サムネールを表示できません')).toBeInTheDocument ()
+ await waitFor (() => {
+ expect (screen.queryByRole ('img')).toBeNull ()
+ })
+ expect (screen.queryByText ('サムネールを表示できません')).toBeNull ()
+ expect (screen.queryByText ('なし')).toBeNull ()
+ expect (container.querySelector ('div.rounded.border.bg-muted')).not.toBeNull ()
+ expect (container.textContent).toBe ('')
expect (screen.queryByRole ('img')).toBeNull ()
})
diff --git a/frontend/src/components/posts/import/PostImportThumbnailPreview.tsx b/frontend/src/components/posts/import/PostImportThumbnailPreview.tsx
index 23bb13d..b692c92 100644
--- a/frontend/src/components/posts/import/PostImportThumbnailPreview.tsx
+++ b/frontend/src/components/posts/import/PostImportThumbnailPreview.tsx
@@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from 'react'
import PostThumbnailPreview from '@/components/posts/PostThumbnailPreview'
import { apiGet } from '@/lib/api'
-import { cn } from '@/lib/utils'
import type { FC } from 'react'
@@ -18,7 +17,6 @@ const PostImportThumbnailPreview: FC = (
className = 'h-16 w-16' },
) => {
const [previewUrl, setPreviewUrl] = useState ('')
- const [unavailable, setUnavailable] = useState (false)
const previewUrlRef = useRef ('')
useEffect (() => {
@@ -28,7 +26,6 @@ const PostImportThumbnailPreview: FC = (
previewUrlRef.current = ''
}
setPreviewUrl ('')
- setUnavailable (false)
if (!(url))
return
@@ -51,7 +48,7 @@ const PostImportThumbnailPreview: FC = (
catch
{
if (active)
- setUnavailable (true)
+ setPreviewUrl ('')
}
}
@@ -67,20 +64,6 @@ const PostImportThumbnailPreview: FC = (
}
}, [url])
- if (unavailable)
- {
- return (
-
- サムネールを表示できません
-
)
- }
-
return (