test: update tests

openedx · Oct 8, 2024 · 620153b · 620153b
1 parent 6dc113e
commit 620153b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 18 deletions.
diff --git a/src/Modal/tests/ModalDialog.test.jsx → src/Modal/tests/ModalDialog.test.tsx b/src/Modal/tests/ModalDialog.test.jsx → 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 (
-    <modal-layer {...otherProps}>
-      {children}
-    </modal-layer>
-  );
-});
-
 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(
+      <ModalDialog
+        title="My dialog"
+        onClose={onClose}
+      >
+        <ModalDialog.Header><ModalDialog.Title>The title</ModalDialog.Title></ModalDialog.Header>
+        <ModalDialog.Body><p>The hidden content</p></ModalDialog.Body>
+        <ModalDialog.Footer><ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton></ModalDialog.Footer>
+      </ModalDialog>,
+    );
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
 });
 
 describe('ModalDialog with Hero', () => {

diff --git a/src/Modal/tests/ModalLayer.test.jsx → src/Modal/tests/ModalLayer.test.tsx b/src/Modal/tests/ModalLayer.test.jsx → src/Modal/tests/ModalLayer.test.tsx
@@ -6,19 +6,19 @@ 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 (
-    <paragon-portal {...otherProps}>
-      {children}
-    </paragon-portal>
+    // @ts-ignore this fake element. (Property 'paragon-portal' does not exist on type 'JSX.IntrinsicElements')
+    <paragon-portal {...otherProps}>{children}</paragon-portal>
   );
 });
 
 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')
       <focus-on data-testid="focus-on" {...otherProps}>{children}</focus-on>
     );
   }),
@@ -117,7 +117,7 @@ describe('<ModalLayer />', () => {
       );
       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 → src/Modal/tests/Portal.test.tsx b/src/Modal/tests/Portal.test.jsx → src/Modal/tests/Portal.test.tsx
@@ -21,7 +21,7 @@ describe('<Portal />', () => {
 
     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('<Portal />', () => {
 
     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');
   });
 });