Allow ErrorModal to set Error props (#22)

* Allow ErrorModal to set Error props * Made heading optional in ErrorModalProps * Added snapshot test for ErrorModal with heading and children
openstax · Oct 18, 2023 · 5d7b4c0 · 5d7b4c0
1 parent 37f0f76
commit 5d7b4c0
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 3 deletions.
diff --git a/src/components/ErrorModal.spec.tsx b/src/components/ErrorModal.spec.tsx
@@ -8,4 +8,14 @@ describe('Modal', () => {
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it('matches snapshot when heading and children are set', () => {
+    const tree = renderer.create(
+      <ErrorModal heading='Scores not sent' onModalClose={jest.fn()} show={true}>
+        There was an issue syncing your scores. Please try again in a few minutes. If the issue persists, visit our
+        <a href="https://openstax.secure.force.com/help" target="_blank" rel="noreferrer">Support Center</a>.
+      </ErrorModal>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/components/ErrorModal.tsx b/src/components/ErrorModal.tsx
@@ -2,11 +2,15 @@ import { Button } from "./Button";
 import { Modal, ModalFooter, ModalPropTypes } from "./Modal";
 import { Error } from "./Error";
 
-type ErrorModalProps = React.PropsWithChildren<Omit<ModalPropTypes, 'variant' | 'heading'>>;
+type ErrorModalProps = React.PropsWithChildren<Omit<ModalPropTypes, 'heading' | 'variant'> & { heading?: string }>;
 
 export const ErrorModal = (props: ErrorModalProps) => {
-  return <Modal {...props} variant='error' heading='Error'>
-    <Error />
+  const { children, heading, ...modalProps } = props;
+
+  return <Modal {...modalProps} variant='error' heading='Error'>
+    <Error heading={heading}>
+      {children}
+    </Error>
     <ModalFooter><Button onClick={props.onModalClose}>OK</Button></ModalFooter>
   </Modal>;
 };
diff --git a/src/components/__snapshots__/ErrorModal.spec.tsx.snap b/src/components/__snapshots__/ErrorModal.spec.tsx.snap
@@ -93,3 +93,98 @@ exports[`Modal matches snapshot 1`] = `
   />
 </div>
 `;
+
+exports[`Modal matches snapshot when heading and children are set 1`] = `
+<div
+  className="sc-jqUVSM gdnNrV"
+>
+  <div
+    className="sc-kDDrLX kcRDJd"
+  >
+    <div
+      className="sc-eCYdqJ kjjlDI"
+    >
+      <header
+        className="sc-jSMfEi klYGKb"
+      >
+        <h1
+          className="sc-gKXOVf czyrNV"
+        >
+          Error
+        </h1>
+        <button
+          aria-label="Close"
+          className="sc-hKMtZM hEOiqB"
+          onClick={[MockFunction]}
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            height="15px"
+            version="1.1"
+            viewBox="0 0 15 15"
+            width="15px"
+          >
+            <g
+              fill="none"
+              fillRule="evenodd"
+              stroke="none"
+              strokeWidth="1"
+            >
+              <g
+                fill="currentColor"
+                transform="translate(-302.000000, -18.000000)"
+              >
+                <g
+                  transform="translate(302.000000, 18.000000)"
+                >
+                  <path
+                    d="M7.5,5.41522791 L12.0331524,0.579865364 C12.3077536,0.286957429 12.7165503,0.24816296 12.946282,0.493210121 L13.9861449,1.60239723 C14.2158766,1.84744439 14.1795068,2.28349422 13.9049056,2.57640216 L9.37175324,7.41176471 L13.9049056,12.2471273 C14.1795068,12.5400352 14.2158766,12.976085 13.9861449,13.2211322 L12.946282,14.3303193 C12.7165503,14.5753665 12.3077536,14.536572 12.0331524,14.243664 L7.5,9.4083015 L2.96684761,14.243664 C2.69224642,14.536572 2.2834497,14.5753665 2.05371799,14.3303193 L1.01385508,13.2211322 C0.784123363,12.976085 0.820493178,12.5400352 1.09509437,12.2471273 L5.62824676,7.41176471 L1.09509437,2.57640216 C0.820493178,2.28349422 0.784123363,1.84744439 1.01385508,1.60239723 L2.05371799,0.493210121 C2.2834497,0.24816296 2.69224642,0.286957429 2.96684761,0.579865364 L7.5,5.41522791 Z"
+                  />
+                </g>
+              </g>
+            </g>
+          </svg>
+        </button>
+      </header>
+      <div
+        className="sc-ftvSup dDFSJu"
+        data-testid="error"
+      >
+        <h3
+          className="sc-iBkjds jzXZzg"
+        >
+          Scores not sent
+        </h3>
+        There was an issue syncing your scores. Please try again in a few minutes. If the issue persists, visit our
+        <a
+          href="https://openstax.secure.force.com/help"
+          rel="noreferrer"
+          target="_blank"
+        >
+          Support Center
+        </a>
+        .
+        <div
+          className="sc-crXcEl gaTpxy"
+          data-testid="event-id"
+        />
+      </div>
+      <div
+        className="sc-iqcoie cqUGeK"
+      >
+        <button
+          className="sc-bczRLJ cJphOo"
+          onClick={[MockFunction]}
+        >
+          OK
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    className="sc-papXJ dLOChU"
+  />
+</div>
+`;