From 6c713a7cde6f7058b0316644a417410201f3b9fe Mon Sep 17 00:00:00 2001 From: Li Juen Chang Date: Mon, 22 Mar 2021 16:30:00 +1100 Subject: [PATCH 1/8] fix: React 17 fix - replace react-transition-group react-transition-group is not actively maintained and is not fully compatible with React 17 --- .../modal/KaizenDraft/Modal/Modal.elm | 4 +- .../Modal/Primitives/GenericModal.scss | 11 ++-- .../Modal/Primitives/GenericModal.spec.tsx | 14 +++++ .../Modal/Primitives/GenericModal.tsx | 58 +++++++++---------- draft-packages/modal/package.json | 2 +- yarn.lock | 5 ++ 6 files changed, 56 insertions(+), 38 deletions(-) create mode 100644 draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx diff --git a/draft-packages/modal/KaizenDraft/Modal/Modal.elm b/draft-packages/modal/KaizenDraft/Modal/Modal.elm index b44a48928f4..6696c9b27c0 100644 --- a/draft-packages/modal/KaizenDraft/Modal/Modal.elm +++ b/draft-packages/modal/KaizenDraft/Modal/Modal.elm @@ -241,7 +241,7 @@ viewContent (Config modalConfig) = [ ( .animatingElmEnter, True ) ] Closing_ -> - [ ( .animatingElmExit, True ) ] + [ ( .animatingElmLeave, True ) ] _ -> [] @@ -505,7 +505,7 @@ styles = { backdropLayer = "backdropLayer" , animatingElmEnter = "animatingElmEnter" , elmUnscrollable = "elmUnscrollable" - , animatingElmExit = "animatingElmExit" + , animatingElmLeave = "animatingElmLeave" , elmGenericModal = "elmGenericModal" , hide = "hide" } diff --git a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.scss b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.scss index 5af7ec713e7..b6a083b1e2b 100644 --- a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.scss +++ b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.scss @@ -66,9 +66,10 @@ z-index: $ca-z-index-modal + 1; } -:global(.animating-enter), -:global(.animating-appear), +.animatingEnter, .animatingElmEnter { + transition-duration: $ca-duration-fast; + .backdropLayer { @include ca-animation-fade( $duration: $ca-duration-rapid, @@ -86,8 +87,10 @@ } } -:global(.animating-exit), -.animatingElmExit { +.aniamtingLeave, +.animatingElmLeave { + transition-duration: $ca-duration-rapid; + .backdropLayer { @include ca-animation-fade( $duration: $ca-duration-rapid, diff --git a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx new file mode 100644 index 00000000000..4b76dbbe112 --- /dev/null +++ b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx @@ -0,0 +1,14 @@ +import { cleanup, render } from "@testing-library/react" +import * as React from "react" +import GenericModal from "./GenericModal" + +afterEach(cleanup) + +describe("", () => { + it("renders the provided content", () => { + const { getByText } = render( + Example + ) + expect(() => getByText("Example")).not.toThrow() + }) +}) diff --git a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.tsx b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.tsx index e44ca0d91ad..787da475d8c 100644 --- a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.tsx +++ b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.tsx @@ -3,13 +3,13 @@ import { createPortal } from "react-dom" import FocusLock from "react-focus-lock" import uuid from "uuid/v4" import { warn } from "@kaizen/component-library/util/console" +import { Transition } from "@headlessui/react" import { ModalAccessibleContext, ModalAccessibleContextType, } from "./ModalAccessibleContext" import styles from "./GenericModal.scss" -const { CSSTransition } = require("react-transition-group") export interface GenericModalContainerProps { readonly isOpen: boolean @@ -167,42 +167,38 @@ class GenericModal extends React.Component { } = this.props return createPortal( - - {/* This is not an unused div. It will receive `animating-` classes from react-transition-group */} -
- +
+
(this.scrollLayer = scrollLayer)} + onClick={ + this.props.onOutsideModalClick && this.outsideModalClickHandler + } > -
(this.scrollLayer = scrollLayer)} - onClick={ - this.props.onOutsideModalClick && this.outsideModalClickHandler - } + role="dialog" + aria-labelledby={this.props.labelledByID} + aria-describedby={this.props.describedByID} + className={styles.modalLayer} + ref={modalLayer => (this.modalLayer = modalLayer)} + data-automation-id={automationId} > -
(this.modalLayer = modalLayer)} - data-automation-id={automationId} - > - {children} -
+ {children}
- -
- , +
+ + , document.body ) } diff --git a/draft-packages/modal/package.json b/draft-packages/modal/package.json index f2cc3712408..dd6b191d9a2 100644 --- a/draft-packages/modal/package.json +++ b/draft-packages/modal/package.json @@ -33,6 +33,7 @@ "license": "MIT", "dependencies": { "@kaizen/component-library": "^9.5.3", + "@headlessui/react": "^0.3.1", "@kaizen/deprecated-component-library-helpers": "^2.1.2", "@kaizen/draft-button": "^3.2.15", "@kaizen/draft-divider": "^1.4.1", @@ -42,7 +43,6 @@ "classnames": "^2.2.6", "react-dom": "^16.13.1", "react-focus-lock": "1.19.1", - "react-transition-group": "^4.4.1", "uuid": "^3.3.2" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 71bd09bc0bc..419904a9a99 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1443,6 +1443,11 @@ dependencies: "@hapi/hoek" "^9.0.0" +"@headlessui/react@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-0.3.1.tgz#62d8df3b49f7e212f81f7fa4ba3cefb8945720ec" + integrity sha512-GnAVXCLmDs3CFvmvYo4Iu/LqAWVIoS+bGo+eMADnbWgF8BeMX13sWMyb8eOdj7N9nqY9QA2AsMzqYdAIbbsRIw== + "@icons/material@^0.2.4": version "0.2.4" resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8" From d00d178cbfc9f2b29fa627bab9773ec17d096daf Mon Sep 17 00:00:00 2001 From: actuallyacat Date: Wed, 24 Mar 2021 10:01:13 +1100 Subject: [PATCH 2/8] Added tests to Confirmation modal --- .../Modal/Presets/ConfirmationModal.spec.tsx | 97 +++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.spec.tsx diff --git a/draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.spec.tsx b/draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.spec.tsx new file mode 100644 index 00000000000..00185d282af --- /dev/null +++ b/draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.spec.tsx @@ -0,0 +1,97 @@ +import { cleanup, render, fireEvent } from "@testing-library/react" +import * as React from "react" +import ConfirmationModal, { ConfirmationModalProps } from "./ConfirmationModal" + +afterEach(cleanup) + +const ConfirmationModalWrapper = (props: Partial) => ( + undefined} + onConfirm={() => undefined} + children="Example Modal body" + {...props} + /> +) + +describe("", () => { + it("renders an open modal with the provided content", () => { + const { getByText } = render( + + Example modal body + + ) + expect(getByText("Example modal body")).toBeTruthy() + + // Confirm/Cancel are modal footer CTAs + expect(getByText("Confirm")).toBeTruthy() + expect(getByText("Cancel")).toBeTruthy() + }) + + it("renders a modal in a \"working\" state", () => { + const { getByText, queryByText } = render( + + Example modal body + + ) + expect(getByText("Example modal body")).toBeTruthy() + + // Replaced by the user-submitted prop + expect(getByText("Submitting")).toBeTruthy() + expect(getByText("Cancel")).toBeTruthy() + + // default "confirm" CTA should not be replaced by the above working state label + expect(queryByText("Confirm")).toBeNull() + }) + + it("closes the modal when escape key pressed", () => { + const handleConfirm = jest.fn() + const handleDismiss = jest.fn() + const document = render( + + Example modal body + + ) + fireEvent.keyUp(document.container, { key: "Escape", code: "Escape" }) + expect(handleDismiss).toHaveBeenCalledTimes(1) + expect(handleConfirm).toHaveBeenCalledTimes(0) + }) + + it("closes the modal when cancel button is pressed", () => { + const handleConfirm = jest.fn() + const handleDismiss = jest.fn() + const { getByText } = render( + + Example modal body + + ) + fireEvent.click(getByText(/Cancel/i)) + expect(handleConfirm).toHaveBeenCalledTimes(0) + expect(handleDismiss).toHaveBeenCalledTimes(1) + }) + + it("closes the modal when confirm button is pressed", () => { + const handleConfirm = jest.fn() + const handleDismiss = jest.fn() + const { getByText } = render( + + Example modal body + + ) + fireEvent.click(getByText(/Confirm/i)) + expect(handleConfirm).toHaveBeenCalledTimes(1) + expect(handleDismiss).toHaveBeenCalledTimes(0) + }) +}) From 33ece6a4f029478eeb3b4af579cc902a9a75a694 Mon Sep 17 00:00:00 2001 From: Li Juen Chang Date: Thu, 1 Apr 2021 10:48:58 +1100 Subject: [PATCH 3/8] Reformat - fix linting errors --- .../Modal/Presets/ConfirmationModal.spec.tsx | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.spec.tsx b/draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.spec.tsx index 00185d282af..10729014e8a 100644 --- a/draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.spec.tsx +++ b/draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.spec.tsx @@ -19,9 +19,7 @@ const ConfirmationModalWrapper = (props: Partial) => ( describe("", () => { it("renders an open modal with the provided content", () => { const { getByText } = render( - - Example modal body - + Example modal body ) expect(getByText("Example modal body")).toBeTruthy() @@ -30,14 +28,15 @@ describe("", () => { expect(getByText("Cancel")).toBeTruthy() }) - it("renders a modal in a \"working\" state", () => { + it('renders a modal in a "working" state', () => { const { getByText, queryByText } = render( - Example modal body + labelHidden: false, + }} + > + Example modal body ) expect(getByText("Example modal body")).toBeTruthy() @@ -56,8 +55,9 @@ describe("", () => { const document = render( - Example modal body + onConfirm={handleConfirm} + > + Example modal body ) fireEvent.keyUp(document.container, { key: "Escape", code: "Escape" }) @@ -71,8 +71,9 @@ describe("", () => { const { getByText } = render( - Example modal body + onConfirm={handleConfirm} + > + Example modal body ) fireEvent.click(getByText(/Cancel/i)) @@ -86,8 +87,9 @@ describe("", () => { const { getByText } = render( - Example modal body + onConfirm={handleConfirm} + > + Example modal body ) fireEvent.click(getByText(/Confirm/i)) From 5793b31368c7db9c64b2b0043c46a25fcd21bb94 Mon Sep 17 00:00:00 2001 From: Li Juen Chang Date: Thu, 1 Apr 2021 10:54:38 +1100 Subject: [PATCH 4/8] Fix typo --- .../modal/KaizenDraft/Modal/Primitives/GenericModal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.scss b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.scss index b6a083b1e2b..335c340eaed 100644 --- a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.scss +++ b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.scss @@ -87,7 +87,7 @@ } } -.aniamtingLeave, +.animatingLeave, .animatingElmLeave { transition-duration: $ca-duration-rapid; From 7c8142f0bd4504ab2a6a36cc3d899f3cd28727aa Mon Sep 17 00:00:00 2001 From: Li Juen Chang Date: Tue, 6 Apr 2021 13:27:16 +1000 Subject: [PATCH 5/8] Add some tests for GenericModal --- .../Modal/Primitives/GenericModal.spec.tsx | 41 +++++++++++++++++-- .../Modal/Primitives/GenericModal.tsx | 1 + 2 files changed, 39 insertions(+), 3 deletions(-) diff --git a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx index 4b76dbbe112..3dc08c0f5d0 100644 --- a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx +++ b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx @@ -1,14 +1,49 @@ -import { cleanup, render } from "@testing-library/react" +import { cleanup, render, fireEvent, configure } from "@testing-library/react" import * as React from "react" import GenericModal from "./GenericModal" +configure({ testIdAttribute: "data-automation-id" }) + afterEach(cleanup) describe("", () => { - it("renders the provided content", () => { + it("renders an open modal with the provided content", () => { const { getByText } = render( Example ) - expect(() => getByText("Example")).not.toThrow() + expect(getByText("Example")).toBeTruthy() + }) + + it("does not render a closed modal with the provided content", () => { + const { getByText } = render( + Example + ) + expect(() => getByText("Example")).toThrow() + }) + + it("closes the modal when the escape key is pressed", () => { + const handleDismiss = jest.fn() + const document = render( + + Example + + ) + fireEvent.keyUp(document.container, { key: "Escape", code: "Escape" }) + expect(handleDismiss).toHaveBeenCalledTimes(1) + }) + + it("closes the modal when a click is outside of the modal content", () => { + const handleDismiss = jest.fn() + const { getByTestId } = render( + + Example + + ) + fireEvent.click(getByTestId("GenericModalAutomationId-scrollLayer")) + expect(handleDismiss).toHaveBeenCalledTimes(1) }) }) diff --git a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.tsx b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.tsx index 787da475d8c..46684c54d88 100644 --- a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.tsx +++ b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.tsx @@ -185,6 +185,7 @@ class GenericModal extends React.Component { onClick={ this.props.onOutsideModalClick && this.outsideModalClickHandler } + data-automation-id={`${automationId}-scrollLayer`} >
Date: Tue, 6 Apr 2021 17:05:07 +1000 Subject: [PATCH 6/8] Add some tests for InformationModal --- .../Modal/Presets/ConfirmationModal.spec.tsx | 22 ++++- .../Modal/Presets/InformationModal.spec.tsx | 89 +++++++++++++++++++ .../Modal/Primitives/GenericModal.spec.tsx | 2 +- 3 files changed, 109 insertions(+), 4 deletions(-) create mode 100644 draft-packages/modal/KaizenDraft/Modal/Presets/InformationModal.spec.tsx diff --git a/draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.spec.tsx b/draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.spec.tsx index 10729014e8a..5e48add727b 100644 --- a/draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.spec.tsx +++ b/draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.spec.tsx @@ -49,7 +49,7 @@ describe("", () => { expect(queryByText("Confirm")).toBeNull() }) - it("closes the modal when escape key pressed", () => { + it("supports a dismiss action when escape key is pressed", () => { const handleConfirm = jest.fn() const handleDismiss = jest.fn() const document = render( @@ -65,7 +65,23 @@ describe("", () => { expect(handleConfirm).toHaveBeenCalledTimes(0) }) - it("closes the modal when cancel button is pressed", () => { + it("supports a dismiss action when dismiss button is pressed", () => { + const handleConfirm = jest.fn() + const handleDismiss = jest.fn() + const { getByTitle } = render( + + Example modal body + + ) + fireEvent.click(getByTitle(/Dismiss/i)) + expect(handleConfirm).toHaveBeenCalledTimes(0) + expect(handleDismiss).toHaveBeenCalledTimes(1) + }) + + it("supports a dismiss action when cancel button is pressed", () => { const handleConfirm = jest.fn() const handleDismiss = jest.fn() const { getByText } = render( @@ -81,7 +97,7 @@ describe("", () => { expect(handleDismiss).toHaveBeenCalledTimes(1) }) - it("closes the modal when confirm button is pressed", () => { + it("supports a confirm action when confirm button is pressed", () => { const handleConfirm = jest.fn() const handleDismiss = jest.fn() const { getByText } = render( diff --git a/draft-packages/modal/KaizenDraft/Modal/Presets/InformationModal.spec.tsx b/draft-packages/modal/KaizenDraft/Modal/Presets/InformationModal.spec.tsx new file mode 100644 index 00000000000..93a9846bc22 --- /dev/null +++ b/draft-packages/modal/KaizenDraft/Modal/Presets/InformationModal.spec.tsx @@ -0,0 +1,89 @@ +import { cleanup, render, fireEvent } from "@testing-library/react" +import * as React from "react" +import InformationModal, { InformationModalProps } from "./InformationModal" + +afterEach(cleanup) + +const InformationModalWrapper = (props: Partial) => ( + undefined} + onDismiss={() => undefined} + children="Example modal body" + secondaryLabel="Example secondary" + onSecondaryAction={() => undefined} + {...props} + /> +) + +describe("", () => { + it("renders an open modal with the provided content", () => { + const { getByText } = render( + Example modal body + ) + expect(getByText("Example modal body")).toBeTruthy() + }) + + it("supports a dismiss action when escape key is pressed", () => { + const handleDismiss = jest.fn() + const document = render( + + Example modal body + + ) + fireEvent.keyUp(document.container, { key: "Escape", code: "Escape" }) + expect(handleDismiss).toHaveBeenCalledTimes(1) + }) + + it("supports a dismiss action when dismiss button is pressed", () => { + const handleConfirm = jest.fn() + const handleDismiss = jest.fn() + const { getByTitle } = render( + + Example modal body + + ) + fireEvent.click(getByTitle(/Dismiss/i)) + expect(handleConfirm).toHaveBeenCalledTimes(0) + expect(handleDismiss).toHaveBeenCalledTimes(1) + }) + + it("supports a confirm action when confirm button is pressed", () => { + const handleConfirm = jest.fn() + const handleDismiss = jest.fn() + const { getByText } = render( + + Example modal body + + ) + fireEvent.click(getByText(/Confirm/i)) + expect(handleConfirm).toHaveBeenCalledTimes(1) + expect(handleDismiss).toHaveBeenCalledTimes(0) + }) + + it("supports a secondary action when secondary button is pressed", () => { + const handleConfirm = jest.fn() + const handleSecondary = jest.fn() + const handleDismiss = jest.fn() + const { getByText } = render( + + Example modal body + + ) + fireEvent.click(getByText(/Example secondary/i)) + expect(handleSecondary).toHaveBeenCalledTimes(1) + expect(handleConfirm).toHaveBeenCalledTimes(0) + expect(handleDismiss).toHaveBeenCalledTimes(0) + }) +}) diff --git a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx index 3dc08c0f5d0..93609d1e0bd 100644 --- a/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx +++ b/draft-packages/modal/KaizenDraft/Modal/Primitives/GenericModal.spec.tsx @@ -21,7 +21,7 @@ describe("", () => { expect(() => getByText("Example")).toThrow() }) - it("closes the modal when the escape key is pressed", () => { + it("closes the modal when escape key is pressed", () => { const handleDismiss = jest.fn() const document = render( From 874a3e29e8e1c8be385bc031413848ab65dbeea1 Mon Sep 17 00:00:00 2001 From: Li Juen Chang Date: Wed, 7 Apr 2021 10:52:16 +1000 Subject: [PATCH 7/8] Add some tests for InputEditModal --- .../Modal/Presets/InputEditModal.spec.tsx | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 draft-packages/modal/KaizenDraft/Modal/Presets/InputEditModal.spec.tsx diff --git a/draft-packages/modal/KaizenDraft/Modal/Presets/InputEditModal.spec.tsx b/draft-packages/modal/KaizenDraft/Modal/Presets/InputEditModal.spec.tsx new file mode 100644 index 00000000000..459847f695c --- /dev/null +++ b/draft-packages/modal/KaizenDraft/Modal/Presets/InputEditModal.spec.tsx @@ -0,0 +1,76 @@ +import { cleanup, render, fireEvent } from "@testing-library/react" +import * as React from "react" +import InputEditModal, { InputEditModalProps } from "./InputEditModal" + +afterEach(cleanup) + +const InputEditModalWrapper = (props: Partial) => ( + undefined} + onDismiss={() => undefined} + children="Example modal body" + {...props} + /> +) + +describe("", () => { + it("renders an open modal with the provided content", () => { + const { getByText } = render( + Example modal body + ) + expect(getByText("Example modal body")).toBeTruthy() + }) + + it("supports a dismiss action when escape key is pressed", () => { + const handleDismiss = jest.fn() + const document = render( + + Example modal body + + ) + fireEvent.keyUp(document.container, { key: "Escape", code: "Escape" }) + expect(handleDismiss).toHaveBeenCalledTimes(1) + }) + + it("supports a dismiss action when dismiss button is pressed", () => { + const handleSubmit = jest.fn() + const handleDismiss = jest.fn() + const { getByTitle } = render( + + Example modal body + + ) + fireEvent.click(getByTitle(/Dismiss/i)) + expect(handleSubmit).toHaveBeenCalledTimes(0) + expect(handleDismiss).toHaveBeenCalledTimes(1) + }) + + it("supports a dismiss action when cancel button is pressed", () => { + const handleSubmit = jest.fn() + const handleDismiss = jest.fn() + const { getByText } = render( + + Example modal body + + ) + fireEvent.click(getByText(/Cancel/i)) + expect(handleSubmit).toHaveBeenCalledTimes(0) + expect(handleDismiss).toHaveBeenCalledTimes(1) + }) + + it("supports a submit action when submit button is pressed", () => { + const handleSubmit = jest.fn() + const handleDismiss = jest.fn() + const { getByText } = render( + + Example modal body + + ) + fireEvent.click(getByText(/Submit/i)) + expect(handleSubmit).toHaveBeenCalledTimes(1) + expect(handleDismiss).toHaveBeenCalledTimes(0) + }) +}) From 8b5d0598b08e8c1b541207ab51eedadd566fb137 Mon Sep 17 00:00:00 2001 From: Li Juen Chang Date: Wed, 7 Apr 2021 10:54:05 +1000 Subject: [PATCH 8/8] Add some tests for RoadblockModal --- .../Modal/Presets/RoadblockModal.spec.tsx | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 draft-packages/modal/KaizenDraft/Modal/Presets/RoadblockModal.spec.tsx diff --git a/draft-packages/modal/KaizenDraft/Modal/Presets/RoadblockModal.spec.tsx b/draft-packages/modal/KaizenDraft/Modal/Presets/RoadblockModal.spec.tsx new file mode 100644 index 00000000000..4ee7b12d961 --- /dev/null +++ b/draft-packages/modal/KaizenDraft/Modal/Presets/RoadblockModal.spec.tsx @@ -0,0 +1,57 @@ +import { cleanup, render, fireEvent } from "@testing-library/react" +import * as React from "react" +import RoadblockModal, { RoadblockModalProps } from "./RoadblockModal" + +afterEach(cleanup) + +const RoadblockModalWrapper = (props: Partial) => ( + undefined} + children="Example modal body" + {...props} + /> +) + +describe("", () => { + it("renders an open modal with the provided content", () => { + const { getByText } = render( + Example modal body + ) + expect(getByText("Example modal body")).toBeTruthy() + }) + + it("supports a dismiss action when escape key is pressed", () => { + const handleDismiss = jest.fn() + const document = render( + + Example modal body + + ) + fireEvent.keyUp(document.container, { key: "Escape", code: "Escape" }) + expect(handleDismiss).toHaveBeenCalledTimes(1) + }) + + it("supports a dismiss action when dismiss button is pressed", () => { + const handleDismiss = jest.fn() + const { getByTitle } = render( + + Example modal body + + ) + fireEvent.click(getByTitle(/Dismiss/i)) + expect(handleDismiss).toHaveBeenCalledTimes(1) + }) + + it("supports a dismiss action when back button is pressed", () => { + const handleDismiss = jest.fn() + const { getByText } = render( + + Example modal body + + ) + fireEvent.click(getByText(/Back/i)) + expect(handleDismiss).toHaveBeenCalledTimes(1) + }) +})