diff --git a/src/Modal/tests/ModalDialog.test.jsx b/src/Modal/tests/ModalDialog.test.tsx
similarity index 80%
rename from src/Modal/tests/ModalDialog.test.jsx
rename to src/Modal/tests/ModalDialog.test.tsx
index 6ca06dbdcc..93759521eb 100644
--- a/src/Modal/tests/ModalDialog.test.jsx
+++ b/src/Modal/tests/ModalDialog.test.tsx
@@ -3,16 +3,6 @@ import { render, screen } from '@testing-library/react';
import ModalDialog from '../ModalDialog';
-jest.mock('../ModalLayer', () => function ModalLayerMock(props) {
- // eslint-disable-next-line react/prop-types
- const { children, ...otherProps } = props;
- return (
-
- {children}
-
- );
-});
-
describe('ModalDialog', () => {
it('renders a dialog with aria-label and content', () => {
const onClose = jest.fn();
@@ -45,6 +35,22 @@ describe('ModalDialog', () => {
expect(dialogNode).toHaveAttribute('aria-label', 'My dialog');
expect(screen.getByText('The content')).toBeInTheDocument();
});
+
+ it('is hidden by default', () => {
+ const onClose = jest.fn();
+ render(
+
+ The title
+ The hidden content
+ Cancel
+ ,
+ );
+
+ expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+ });
});
describe('ModalDialog with Hero', () => {
diff --git a/src/Modal/tests/ModalLayer.test.jsx b/src/Modal/tests/ModalLayer.test.tsx
similarity index 90%
rename from src/Modal/tests/ModalLayer.test.jsx
rename to src/Modal/tests/ModalLayer.test.tsx
index bc93b66013..f316086cea 100644
--- a/src/Modal/tests/ModalLayer.test.jsx
+++ b/src/Modal/tests/ModalLayer.test.tsx
@@ -6,12 +6,11 @@ import userEvent from '@testing-library/user-event';
import ModalLayer from '../ModalLayer';
/* eslint-disable react/prop-types */
-jest.mock('../Portal', () => function PortalMock(props) {
+jest.mock('../Portal', () => function PortalMock(props: any) {
const { children, ...otherProps } = props;
return (
-
- {children}
-
+ // @ts-ignore this fake element. (Property 'paragon-portal' does not exist on type 'JSX.IntrinsicElements')
+ {children}
);
});
@@ -19,6 +18,7 @@ jest.mock('react-focus-on', () => ({
FocusOn: jest.fn().mockImplementation((props) => {
const { children, ...otherProps } = props;
return (
+ // @ts-ignore this fake element. (Property 'focus-on' does not exist on type 'JSX.IntrinsicElements')
{children}
);
}),
@@ -117,7 +117,7 @@ describe('', () => {
);
expect(FocusOn).toHaveBeenCalledWith(
expect.objectContaining({
- onEscapeKey: null,
+ onEscapeKey: undefined,
}),
// note: this 2nd function argument represents the
// `refOrContext` (in this case, the context value
diff --git a/src/Modal/tests/Portal.test.jsx b/src/Modal/tests/Portal.test.tsx
similarity index 83%
rename from src/Modal/tests/Portal.test.jsx
rename to src/Modal/tests/Portal.test.tsx
index 0f3ec32d70..7cda3ac9e0 100644
--- a/src/Modal/tests/Portal.test.jsx
+++ b/src/Modal/tests/Portal.test.tsx
@@ -21,7 +21,7 @@ describe('', () => {
const portalRoot = getPortalRoot();
expect(portalRoot).not.toBeNull();
- expect(portalRoot.children[0].id).toBe('portal-content-a');
+ expect(portalRoot!.children[0].id).toBe('portal-content-a');
});
it('renders both contents in a single #paragon-portal-root div', () => {
@@ -38,7 +38,7 @@ describe('', () => {
const portalRoot = getPortalRoot();
expect(portalRoot).not.toBeNull();
- expect(portalRoot.children[0].id).toBe('portal-content-a');
- expect(portalRoot.children[1].id).toBe('portal-content-b');
+ expect(portalRoot!.children[0].id).toBe('portal-content-a');
+ expect(portalRoot!.children[1].id).toBe('portal-content-b');
});
});