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'); }); });