diff --git a/web/app/components/datasets/common/image-previewer/__tests__/index.spec.tsx b/web/app/components/datasets/common/image-previewer/__tests__/index.spec.tsx index ce76a269ad2..29fdb2a9cfa 100644 --- a/web/app/components/datasets/common/image-previewer/__tests__/index.spec.tsx +++ b/web/app/components/datasets/common/image-previewer/__tests__/index.spec.tsx @@ -32,15 +32,11 @@ const images = [ const successfulResponse = () => new Response(new Blob(['test'], { type: 'image/png' })) -const getPreviewButtons = () => { - const [closeButton, previousButton, nextButton] = screen.getAllByRole('button') - - expect(closeButton).toBeInTheDocument() - expect(previousButton).toBeInTheDocument() - expect(nextButton).toBeInTheDocument() - - return { closeButton: closeButton!, previousButton: previousButton!, nextButton: nextButton! } -} +const getPreviewButtons = () => ({ + closeButton: screen.getByRole('button', { name: 'common.operation.close' }), + previousButton: screen.getByRole('button', { name: 'common.pagination.previous' }), + nextButton: screen.getByRole('button', { name: 'common.pagination.next' }), +}) describe('ImagePreviewer', () => { beforeEach(() => { @@ -137,10 +133,9 @@ describe('ImagePreviewer', () => { render() expect(await screen.findByText(/Failed to load image/)).toHaveTextContent(images[0]!.url) - const [, retryButton] = screen.getAllByRole('button') - expect(retryButton).toBeInTheDocument() + const retryButton = screen.getByRole('button', { name: 'common.operation.retry' }) - await user.click(retryButton!) + await user.click(retryButton) expect(await screen.findByRole('img', { name: 'image1.png' })).toBeInTheDocument() expect(mockFetch).toHaveBeenCalledTimes(4) diff --git a/web/app/components/datasets/common/image-previewer/index.tsx b/web/app/components/datasets/common/image-previewer/index.tsx index a334a8a1fe5..597d8e65e08 100644 --- a/web/app/components/datasets/common/image-previewer/index.tsx +++ b/web/app/components/datasets/common/image-previewer/index.tsx @@ -4,6 +4,7 @@ import { Kbd } from '@langgenius/dify-ui/kbd' import { RiArrowLeftLine, RiArrowRightLine, RiCloseLine, RiRefreshLine } from '@remixicon/react' import { formatForDisplay, useHotkey } from '@tanstack/react-hotkeys' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { useTranslation } from 'react-i18next' import Loading from '@/app/components/base/loading' import { formatFileSize } from '@/utils/format' @@ -29,6 +30,7 @@ type ImagePreviewerProps = { } const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerProps) => { + const { t } = useTranslation() const [currentIndex, setCurrentIndex] = useState(initialIndex) const [cachedImages, setCachedImages] = useState>(() => { return images.reduce( @@ -159,6 +161,7 @@ const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerPro $['operation.close'], { ns: 'common' })} onClick={onClose} className="size-9 rounded-[10px] p-0" size="large" @@ -173,6 +176,7 @@ const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerPro {`Failed to load image: ${currentImage!.url}. Please try again.`} $['operation.retry'], { ns: 'common' })} onClick={() => retryImage(currentImage!)} className="size-9 rounded-full p-0" size="large" @@ -199,6 +203,7 @@ const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerPro )} $['pagination.previous'], { ns: 'common' })} onClick={prevImage} className="absolute top-1/2 left-8 z-10 size-9 -translate-y-1/2 rounded-full p-0" disabled={currentIndex === 0} @@ -208,6 +213,7 @@ const ImagePreviewer = ({ images, initialIndex = 0, onClose }: ImagePreviewerPro $['pagination.next'], { ns: 'common' })} onClick={nextImage} className="absolute top-1/2 right-8 z-10 size-9 -translate-y-1/2 rounded-full p-0" disabled={currentIndex === images.length - 1}