-
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.
Migrate gift card modals to new macaw-ui (#5114)
* migrate gift card modals to new macaw-ui * fix e2e tests * migrate export component * fix tests * update macaw-ui * fix tests * fix style * fix product test * fix text-area selector * fix e2e tests * cr fixes * cleanup * cr fixes * add tests * radiogroup cleanup * show component migration --------- Co-authored-by: Paweł Chyła <[email protected]>
- Loading branch information
Showing
27 changed files
with
347 additions
and
303 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 | ||
| --- | ||
|
|
||
| The gift card modals now use new macaw-ui components. |
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
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 was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import "@testing-library/jest-dom/extend-expect"; | ||
|
|
||
| import { fireEvent, render, screen } from "@testing-library/react"; | ||
| import React from "react"; | ||
|
|
||
| import { SimpleRadioGroupField } from "./SimpleRadioGroupField"; | ||
|
|
||
| const choices = [ | ||
| { label: "Choice 1", value: "choice1" }, | ||
| { label: "Choice 2", value: "choice2", disabled: true }, | ||
| { label: "Choice 3", value: "choice3" }, | ||
| ]; | ||
|
|
||
| describe("SimpleRadioGroupField", () => { | ||
| it("renders radio fields correctly", () => { | ||
| // Arrange & Act | ||
| render( | ||
| <SimpleRadioGroupField | ||
| name="testRadioGroup" | ||
| value="choice1" | ||
| onChange={jest.fn()} | ||
| choices={choices} | ||
| />, | ||
| ); | ||
|
|
||
| // Assert | ||
| expect(screen.getByText("Choice 1")).toBeInTheDocument(); | ||
| expect(screen.getByText("Choice 2")).toBeInTheDocument(); | ||
| expect(screen.getByText("Choice 3")).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("calls onChange when a radio button is clicked", () => { | ||
| // Arrange | ||
| const handleChange = jest.fn(); | ||
|
|
||
| render( | ||
| <SimpleRadioGroupField | ||
| name="testRadioGroup" | ||
| value="choice1" | ||
| onChange={handleChange} | ||
| choices={choices} | ||
| />, | ||
| ); | ||
|
|
||
| // Act | ||
| const radioButton = screen.getByLabelText("Choice 3"); | ||
|
|
||
| fireEvent.click(radioButton); | ||
|
|
||
| // Assert | ||
| expect(handleChange).toHaveBeenCalledWith({ | ||
| target: { value: "choice3", name: "testRadioGroup" }, | ||
| }); | ||
| }); | ||
|
|
||
| it("doesn't call onChange when `disabled` item is clicked", () => { | ||
| // Arrange | ||
| const handleChange = jest.fn(); | ||
|
|
||
| render( | ||
| <SimpleRadioGroupField | ||
| name="testRadioGroup" | ||
| value="choice1" | ||
| onChange={handleChange} | ||
| choices={choices} | ||
| />, | ||
| ); | ||
|
|
||
| // Act | ||
| const radioButton = screen.getByLabelText("Choice 2"); | ||
|
|
||
| fireEvent.click(radioButton); | ||
|
|
||
| // Assert | ||
| expect(handleChange).not.toHaveBeenCalledWith({ | ||
| target: { value: "choice2", name: "testRadioGroup" }, | ||
| }); | ||
| }); | ||
|
|
||
| it("displays the error message when provided", () => { | ||
| // Arrange & Act | ||
| const errorMessage = "Error message"; | ||
|
|
||
| render( | ||
| <SimpleRadioGroupField | ||
| name="testRadioGroup" | ||
| value="choice1" | ||
| onChange={jest.fn()} | ||
| choices={choices} | ||
| errorMessage={errorMessage} | ||
| error | ||
| />, | ||
| ); | ||
|
|
||
| // Assert | ||
| expect(screen.getByText(errorMessage)).toBeInTheDocument(); | ||
| }); | ||
| }); |
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,64 @@ | ||
| import { ChangeEvent } from "@dashboard/hooks/useForm"; | ||
| import { RadioGroup, RadioGroupRootProps, Text } from "@saleor/macaw-ui-next"; | ||
| import React from "react"; | ||
|
|
||
| type RadioGroupFieldChoice = { | ||
| label: string | React.ReactNode; | ||
| value: string; | ||
| disabled?: boolean; | ||
| }; | ||
|
|
||
| interface SimpleRadioGroupFieldProps | ||
| extends Omit<RadioGroupRootProps, "onChange" | "children" | "name"> { | ||
| name: string; | ||
| onChange: (event: ChangeEvent) => void; | ||
| choices: RadioGroupFieldChoice[]; | ||
| size?: RadioGroupRootProps["size"]; | ||
| errorMessage?: string; | ||
| } | ||
|
|
||
| // SimpleRadioGroupField is a migration of RadioGroupField "@dashboard/components/RadioGroupField" using Macaw UI | ||
| // While migrating to this component note that it doesn't have a label, hint or 'no choices' message. | ||
| export const SimpleRadioGroupField: React.FC<SimpleRadioGroupFieldProps> = ({ | ||
| name, | ||
| value, | ||
| error, | ||
| onChange, | ||
| choices, | ||
| size = "large", | ||
| errorMessage, | ||
| ...props | ||
| }) => { | ||
| return ( | ||
| <> | ||
| <RadioGroup | ||
| size={size} | ||
| value={value} | ||
| name={name} | ||
| error={error} | ||
| onValueChange={value => onChange({ target: { value, name } })} | ||
| {...props} | ||
| > | ||
| {choices.map(({ label, value, disabled }) => ( | ||
| <RadioGroup.Item | ||
| key={value} | ||
| value={value} | ||
| id={value} | ||
| disabled={disabled} | ||
| marginBottom={2} | ||
| data-test-id={value} | ||
| > | ||
| <Text | ||
| color={disabled ? "defaultDisabled" : "default1"} | ||
| style={{ verticalAlign: "middle" }} | ||
| > | ||
| {label} | ||
| </Text> | ||
| </RadioGroup.Item> | ||
| ))} | ||
| </RadioGroup> | ||
|
|
||
| {errorMessage && <Text color="critical1">{errorMessage}</Text>} | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.