-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix swatch attribute preview when selecting image (#5226)
* Handle swatch preview * Handle swatch preview * Handle swatch preview * Translations * Translations * Translations * Fix list * Fix list
- Loading branch information
1 parent
dc54164
commit e269b46
Showing
10 changed files
with
273 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "saleor-dashboard": patch | ||
| --- | ||
|
|
||
| Now, swatch presents the preview of the selected image. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
src/attributes/components/AttributeSwatchField/useColorProcessing.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { AttributeValueEditDialogFormData } from "@dashboard/attributes/utils/data"; | ||
|
|
||
| export const useColorProcessing = ({ | ||
| set, | ||
| }: { | ||
| set: (data: Partial<AttributeValueEditDialogFormData>) => void; | ||
| }) => { | ||
| const handleColorChange = (hex: string) => | ||
| set({ value: hex, fileUrl: undefined, contentType: undefined }); | ||
|
|
||
| return { handleColorChange }; | ||
| }; |
106 changes: 106 additions & 0 deletions
106
src/attributes/components/AttributeSwatchField/useFileProcessing.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import { useFileUploadMutation } from "@dashboard/graphql"; | ||
| import { act, renderHook } from "@testing-library/react-hooks"; | ||
| import React from "react"; | ||
|
|
||
| import { useFileProcessing } from "./useFileProcessing"; | ||
|
|
||
| jest.mock("@dashboard/graphql", () => ({ | ||
| useFileUploadMutation: jest.fn(), | ||
| })); | ||
|
|
||
| jest.mock("react-intl", () => ({ | ||
| useIntl: jest.fn(() => ({ | ||
| formatMessage: jest.fn(x => x.defaultMessage), | ||
| })), | ||
| defineMessages: (x: unknown) => x, | ||
| FormattedMessage: ({ defaultMessage }: { defaultMessage: string }) => <>{defaultMessage}</>, | ||
| })); | ||
|
|
||
| jest.mock("@dashboard/intl", () => ({ | ||
| errorMessages: { | ||
| imgageUploadErrorTitle: "Image upload error title", | ||
| imageUploadErrorText: "Image upload error text", | ||
| }, | ||
| })); | ||
|
|
||
| jest.mock("@dashboard/hooks/useNotifier", () => () => jest.fn()); | ||
|
|
||
| describe("useFileProcessing", () => { | ||
| const mockUploadFile = jest.fn(); | ||
| const setMock = jest.fn(); | ||
|
|
||
| beforeEach(() => { | ||
| (useFileUploadMutation as jest.Mock).mockReturnValue([mockUploadFile]); | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| it("should handle file upload successfully", async () => { | ||
| // Arrange | ||
| const { result } = renderHook(() => useFileProcessing({ set: setMock })); | ||
| const file = new File(["dummy content"], "example.png", { type: "image/png" }); | ||
|
|
||
| mockUploadFile.mockResolvedValueOnce({ | ||
| data: { | ||
| fileUpload: { | ||
| errors: [], | ||
| uploadedFile: { | ||
| url: "http://example.com/example.png", | ||
| contentType: "image/png", | ||
| }, | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| // Act | ||
| await act(() => result.current.handleFileUpload(file)); | ||
| await act(() => result.current.handleOnload()); | ||
|
|
||
| expect(mockUploadFile).toHaveBeenCalledWith({ variables: { file } }); | ||
| expect(setMock).toHaveBeenCalledWith({ | ||
| fileUrl: "http://example.com/example.png", | ||
| contentType: "image/png", | ||
| value: undefined, | ||
| }); | ||
| expect(result.current.processing).toBe(false); | ||
| }); | ||
|
|
||
| it("should handle file upload error", async () => { | ||
| // Arrange | ||
| const { result } = renderHook(() => useFileProcessing({ set: setMock })); | ||
| const file = new File(["dummy content"], "example.png", { type: "image/png" }); | ||
|
|
||
| mockUploadFile.mockResolvedValueOnce({ | ||
| data: { | ||
| fileUpload: { | ||
| errors: [{ message: "Upload error" }], | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| // Act | ||
| await act(() => result.current.handleFileUpload(file)); | ||
| await act(() => result.current.handleOnload()); | ||
|
|
||
| // Assert | ||
| expect(mockUploadFile).toHaveBeenCalledWith({ variables: { file } }); | ||
| expect(setMock).not.toHaveBeenCalled(); | ||
| expect(result.current.processing).toBe(false); | ||
| }); | ||
|
|
||
| it("should handle file deletion", () => { | ||
| // Arrange | ||
| const { result } = renderHook(() => useFileProcessing({ set: setMock })); | ||
|
|
||
| // Act | ||
| act(() => { | ||
| result.current.handleFileDelete(); | ||
| }); | ||
|
|
||
| // Assert | ||
| expect(setMock).toHaveBeenCalledWith({ | ||
| fileUrl: undefined, | ||
| contentType: undefined, | ||
| value: undefined, | ||
| }); | ||
| }); | ||
| }); |
57 changes: 57 additions & 0 deletions
57
src/attributes/components/AttributeSwatchField/useFileProcessing.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { AttributeValueEditDialogFormData } from "@dashboard/attributes/utils/data"; | ||
| import { useFileUploadMutation } from "@dashboard/graphql"; | ||
| import useNotifier from "@dashboard/hooks/useNotifier"; | ||
| import { errorMessages } from "@dashboard/intl"; | ||
| import { useState } from "react"; | ||
| import { useIntl } from "react-intl"; | ||
|
|
||
| export const useFileProcessing = ({ | ||
| set, | ||
| }: { | ||
| set: (data: Partial<AttributeValueEditDialogFormData>) => void; | ||
| }) => { | ||
| const notify = useNotifier(); | ||
| const intl = useIntl(); | ||
| const [processing, setProcessing] = useState(false); | ||
|
|
||
| const [uploadFile] = useFileUploadMutation({}); | ||
|
|
||
| const handleFileUpload = async (file: File) => { | ||
| setProcessing(true); | ||
|
|
||
| const { data } = await uploadFile({ variables: { file } }); | ||
|
|
||
| if (data?.fileUpload?.errors?.length) { | ||
| notify({ | ||
| status: "error", | ||
| title: intl.formatMessage(errorMessages.imgageUploadErrorTitle), | ||
| text: intl.formatMessage(errorMessages.imageUploadErrorText), | ||
| }); | ||
| } else { | ||
| set({ | ||
| fileUrl: data?.fileUpload?.uploadedFile?.url, | ||
| contentType: data?.fileUpload?.uploadedFile?.contentType ?? "", | ||
| value: undefined, | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| const handleFileDelete = () => { | ||
| set({ | ||
| fileUrl: undefined, | ||
| contentType: undefined, | ||
| value: undefined, | ||
| }); | ||
| }; | ||
|
|
||
| const handleOnload = () => { | ||
| setProcessing(false); | ||
| }; | ||
|
|
||
| return { | ||
| processing, | ||
| handleFileUpload, | ||
| handleFileDelete, | ||
| handleOnload, | ||
| }; | ||
| }; |
Oops, something went wrong.