fix: React 17 fix - replace react-transition-group in draft-modal (#1301

)

* fix: React 17 fix - replace react-transition-group

react-transition-group is not actively maintained and is not fully
compatible with React 17

* Added tests to Confirmation modal

* Reformat - fix linting errors

* Fix typo

* Add some tests for GenericModal

* Add some tests for InformationModal

* Add some tests for InputEditModal

* Add some tests for RoadblockModal

Co-authored-by: actuallyacat <[email protected]>

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"
         }

draft-packages/modal/KaizenDraft/Modal/Presets/ConfirmationModal.spec.tsx

@@ -0,0 +1,115 @@
+import { cleanup, render, fireEvent } from "@testing-library/react"
+import * as React from "react"
+import ConfirmationModal, { ConfirmationModalProps } from "./ConfirmationModal"
+
+afterEach(cleanup)
+
+const ConfirmationModalWrapper = (props: Partial<ConfirmationModalProps>) => (
+  <ConfirmationModal
+    type="informative"
+    isOpen={true}
+    title="Example Modal Title"
+    onDismiss={() => undefined}
+    onConfirm={() => undefined}
+    children="Example Modal body"
+    {...props}
+  />
+)
+
+describe("<ConfirmationModal />", () => {
+  it("renders an open modal with the provided content", () => {
+    const { getByText } = render(
+      <ConfirmationModalWrapper>Example modal body</ConfirmationModalWrapper>
+    )
+    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(
+      <ConfirmationModalWrapper
+        confirmWorking={{
+          label: "Submitting",
+          labelHidden: false,
+        }}
+      >
+        Example modal body
+      </ConfirmationModalWrapper>
+    )
+    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("supports a dismiss action when escape key is pressed", () => {
+    const handleConfirm = jest.fn()
+    const handleDismiss = jest.fn()
+    const document = render(
+      <ConfirmationModalWrapper
+        onDismiss={handleDismiss}
+        onConfirm={handleConfirm}
+      >
+        Example modal body
+      </ConfirmationModalWrapper>
+    )
+    fireEvent.keyUp(document.container, { key: "Escape", code: "Escape" })
+    expect(handleDismiss).toHaveBeenCalledTimes(1)
+    expect(handleConfirm).toHaveBeenCalledTimes(0)
+  })
+
+  it("supports a dismiss action when dismiss button is pressed", () => {
+    const handleConfirm = jest.fn()
+    const handleDismiss = jest.fn()
+    const { getByTitle } = render(
+      <ConfirmationModalWrapper
+        onConfirm={handleConfirm}
+        onDismiss={handleDismiss}
+      >
+        Example modal body
+      </ConfirmationModalWrapper>
+    )
+    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(
+      <ConfirmationModalWrapper
+        onDismiss={handleDismiss}
+        onConfirm={handleConfirm}
+      >
+        Example modal body
+      </ConfirmationModalWrapper>
+    )
+    fireEvent.click(getByText(/Cancel/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(
+      <ConfirmationModalWrapper
+        onDismiss={handleDismiss}
+        onConfirm={handleConfirm}
+      >
+        Example modal body
+      </ConfirmationModalWrapper>
+    )
+    fireEvent.click(getByText(/Confirm/i))
+    expect(handleConfirm).toHaveBeenCalledTimes(1)
+    expect(handleDismiss).toHaveBeenCalledTimes(0)
+  })
+})

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<InformationModalProps>) => (
+  <InformationModal
+    isOpen={true}
+    title="Example modal title"
+    onConfirm={() => undefined}
+    onDismiss={() => undefined}
+    children="Example modal body"
+    secondaryLabel="Example secondary"
+    onSecondaryAction={() => undefined}
+    {...props}
+  />
+)
+
+describe("<InformationModal />", () => {
+  it("renders an open modal with the provided content", () => {
+    const { getByText } = render(
+      <InformationModalWrapper>Example modal body</InformationModalWrapper>
+    )
+    expect(getByText("Example modal body")).toBeTruthy()
+  })
+
+  it("supports a dismiss action when escape key is pressed", () => {
+    const handleDismiss = jest.fn()
+    const document = render(
+      <InformationModalWrapper onDismiss={handleDismiss}>
+        Example modal body
+      </InformationModalWrapper>
+    )
+    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(
+      <InformationModalWrapper
+        onConfirm={handleConfirm}
+        onDismiss={handleDismiss}
+      >
+        Example modal body
+      </InformationModalWrapper>
+    )
+    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(
+      <InformationModalWrapper
+        onConfirm={handleConfirm}
+        onDismiss={handleDismiss}
+      >
+        Example modal body
+      </InformationModalWrapper>
+    )
+    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(
+      <InformationModalWrapper
+        onConfirm={handleConfirm}
+        onDismiss={handleDismiss}
+        onSecondaryAction={handleSecondary}
+      >
+        Example modal body
+      </InformationModalWrapper>
+    )
+    fireEvent.click(getByText(/Example secondary/i))
+    expect(handleSecondary).toHaveBeenCalledTimes(1)
+    expect(handleConfirm).toHaveBeenCalledTimes(0)
+    expect(handleDismiss).toHaveBeenCalledTimes(0)
+  })
+})

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<InputEditModalProps>) => (
+  <InputEditModal
+    isOpen={true}
+    type="positive"
+    title="Example modal title"
+    onSubmit={() => undefined}
+    onDismiss={() => undefined}
+    children="Example modal body"
+    {...props}
+  />
+)
+
+describe("<InputEditModal />", () => {
+  it("renders an open modal with the provided content", () => {
+    const { getByText } = render(
+      <InputEditModalWrapper>Example modal body</InputEditModalWrapper>
+    )
+    expect(getByText("Example modal body")).toBeTruthy()
+  })
+
+  it("supports a dismiss action when escape key is pressed", () => {
+    const handleDismiss = jest.fn()
+    const document = render(
+      <InputEditModalWrapper onDismiss={handleDismiss}>
+        Example modal body
+      </InputEditModalWrapper>
+    )
+    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(
+      <InputEditModalWrapper onSubmit={handleSubmit} onDismiss={handleDismiss}>
+        Example modal body
+      </InputEditModalWrapper>
+    )
+    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(
+      <InputEditModalWrapper onSubmit={handleSubmit} onDismiss={handleDismiss}>
+        Example modal body
+      </InputEditModalWrapper>
+    )
+    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(
+      <InputEditModalWrapper onSubmit={handleSubmit} onDismiss={handleDismiss}>
+        Example modal body
+      </InputEditModalWrapper>
+    )
+    fireEvent.click(getByText(/Submit/i))
+    expect(handleSubmit).toHaveBeenCalledTimes(1)
+    expect(handleDismiss).toHaveBeenCalledTimes(0)
+  })
+})

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<RoadblockModalProps>) => (
+  <RoadblockModal
+    isOpen={true}
+    title="Example modal title"
+    onDismiss={() => undefined}
+    children="Example modal body"
+    {...props}
+  />
+)
+
+describe("<RoadblockModal />", () => {
+  it("renders an open modal with the provided content", () => {
+    const { getByText } = render(
+      <RoadblockModalWrapper>Example modal body</RoadblockModalWrapper>
+    )
+    expect(getByText("Example modal body")).toBeTruthy()
+  })
+
+  it("supports a dismiss action when escape key is pressed", () => {
+    const handleDismiss = jest.fn()
+    const document = render(
+      <RoadblockModalWrapper onDismiss={handleDismiss}>
+        Example modal body
+      </RoadblockModalWrapper>
+    )
+    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(
+      <RoadblockModalWrapper onDismiss={handleDismiss}>
+        Example modal body
+      </RoadblockModalWrapper>
+    )
+    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(
+      <RoadblockModalWrapper onDismiss={handleDismiss}>
+        Example modal body
+      </RoadblockModalWrapper>
+    )
+    fireEvent.click(getByText(/Back/i))
+    expect(handleDismiss).toHaveBeenCalledTimes(1)
+  })
+})

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 {
+.animatingLeave,
+.animatingElmLeave {
+  transition-duration: $ca-duration-rapid;
+
   .backdropLayer {
     @include ca-animation-fade(
       $duration: $ca-duration-rapid,