-
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.
Add clarity to order cancel dialog (#4673)
* Improve order cancel dialog * Add tests * Extract messages * Add changeset * Trigger deployment * Simplify test * Improve test
- Loading branch information
Showing
5 changed files
with
153 additions
and
53 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 | ||
| --- | ||
|
|
||
| Add clarity to order cancel dialog |
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
68 changes: 68 additions & 0 deletions
68
src/orders/components/OrderCancelDialog/OrderCancelDialog.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,68 @@ | ||
| import { OrderErrorCode, OrderErrorFragment } from "@dashboard/graphql"; | ||
| import { render, screen } from "@testing-library/react"; | ||
| import React from "react"; | ||
| import { FormattedMessage } from "react-intl"; | ||
|
|
||
| import { OrderCancelDialog } from "./OrderCancelDialog"; | ||
|
|
||
| jest.mock("react-intl", () => ({ | ||
| useIntl: jest.fn(() => ({ | ||
| formatMessage: jest.fn(x => x.defaultMessage), | ||
| })), | ||
| defineMessages: jest.fn(x => x), | ||
| FormattedMessage: jest.fn(() => <></>), | ||
| })); | ||
|
|
||
| const defaultProps = { | ||
| confirmButtonState: "default" as const, | ||
| errors: [], | ||
| open: true, | ||
| onClose: jest.fn(), | ||
| onSubmit: jest.fn(), | ||
| number: "123", | ||
| }; | ||
|
|
||
| describe("OrderCancelDialog", () => { | ||
| it("displays order number in the dialog title", () => { | ||
| // Arrange | ||
| const orderNumber = "456"; | ||
|
|
||
| // Act | ||
| render(<OrderCancelDialog {...defaultProps} number={orderNumber} />); | ||
|
|
||
| // Assert | ||
| expect(FormattedMessage).toHaveBeenCalledWith( | ||
| { | ||
| defaultMessage: "Cancel order #{orderNumber}", | ||
| description: "dialog header", | ||
| id: "wmeRVH", | ||
| values: { orderNumber: "456" }, | ||
| }, | ||
| {}, | ||
| ); | ||
| }); | ||
|
|
||
| it("displays error messages when provided", () => { | ||
| // Arrange | ||
| const errors = [ | ||
| { code: OrderErrorCode.CANNOT_CANCEL_ORDER }, | ||
| { code: OrderErrorCode.GRAPHQL_ERROR }, | ||
| ] as unknown as OrderErrorFragment[]; | ||
|
|
||
| // Act | ||
| render(<OrderCancelDialog {...defaultProps} errors={errors} />); | ||
|
|
||
| // Assert | ||
| const errorMessages = screen.getAllByTestId("dialog-error"); | ||
| expect(errorMessages).toHaveLength(errors.length); | ||
| }); | ||
|
|
||
| it("does not display error messages when none are provided", () => { | ||
| // Act | ||
| render(<OrderCancelDialog {...defaultProps} errors={[]} />); | ||
|
|
||
| // Assert | ||
| const errorMessages = screen.queryAllByTestId("dialog-error"); | ||
| expect(errorMessages).toHaveLength(0); | ||
| }); | ||
| }); |
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,25 @@ | ||
| import { defineMessages } from "react-intl"; | ||
|
|
||
| export const cancelOrderDialogMessages = defineMessages({ | ||
| dialogTitle: { | ||
| id: "wmeRVH", | ||
| defaultMessage: "Cancel order #{orderNumber}", | ||
| description: "dialog header", | ||
| }, | ||
| dialogContent: { | ||
| id: "NWA+MK", | ||
| defaultMessage: | ||
| "<b>Important:</b> Refunds need to be issued <b>manually</b> after order cancelation.", | ||
| description: "dialog content", | ||
| }, | ||
| buttonKeepOrder: { | ||
| id: "p6ugX0", | ||
| defaultMessage: "Keep order", | ||
| description: "button to keep order", | ||
| }, | ||
| buttonCancelOrder: { | ||
| id: "bKTEnb", | ||
| defaultMessage: "Cancel order", | ||
| description: "button to cancel order", | ||
| }, | ||
| }); |