refactor hasNativeDialogSupport

sumup-oss · Dec 18, 2024 · b13d78d · b13d78d
1 parent b9ad6ab
commit b13d78d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 28 deletions.
diff --git a/packages/circuit-ui/components/Modal/Modal.spec.tsx b/packages/circuit-ui/components/Modal/Modal.spec.tsx
@@ -13,15 +13,7 @@
  * limitations under the License.
  */
 
-import {
-  beforeEach,
-  afterEach,
-  describe,
-  expect,
-  it,
-  vi,
-  type Mock,
-} from 'vitest';
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
 import { createRef } from 'react';
 
 import {
@@ -34,15 +26,6 @@ import {
 } from '../../util/test-utils.js';
 
 import { ANIMATION_DURATION, Modal } from './Modal.js';
-import { hasNativeDialogSupport } from './ModalService.js';
-
-vi.mock('./ModalService.js', async (importOriginal) => {
-  const module = await importOriginal<typeof import('./ModalService.js')>();
-  return {
-    ...module,
-    hasNativeDialogSupport: vi.fn().mockReturnValue(true),
-  };
-});
 
 describe('Modal', () => {
   const props = {
@@ -53,16 +36,21 @@ describe('Modal', () => {
       <div data-testid="children">Modal dialog content</div>
     )),
   };
+  let originalHTMLDialogElement: typeof window.HTMLDialogElement;
 
   beforeEach(() => {
+    originalHTMLDialogElement = window.HTMLDialogElement;
     vi.useFakeTimers({ shouldAdvanceTime: true });
-    (hasNativeDialogSupport as Mock).mockReturnValue(true);
   });
 
   afterEach(() => {
     vi.runOnlyPendingTimers();
     vi.useRealTimers();
     vi.clearAllMocks();
+    Object.defineProperty(window, 'HTMLDialogElement', {
+      writable: true,
+      value: originalHTMLDialogElement,
+    });
   });
 
   it('should forward a ref', () => {
@@ -185,7 +173,11 @@ describe('Modal', () => {
     });
 
     it('should remove animation classes when closed when polyfill is used', async () => {
-      (hasNativeDialogSupport as Mock).mockReturnValue(false);
+      Object.defineProperty(window, 'HTMLDialogElement', {
+        writable: true,
+        value: undefined,
+      });
+
       render(<Modal {...props} open />);
       const dialog = screen.getByRole('dialog', { hidden: true });
 

diff --git a/packages/circuit-ui/components/Modal/Modal.tsx b/packages/circuit-ui/components/Modal/Modal.tsx
@@ -37,10 +37,7 @@ import type { Locale } from '../../util/i18n.js';
 import { useScrollLock } from '../../hooks/useScrollLock/useScrollLock.js';
 
 import classes from './Modal.module.css';
-import {
-  getFirstFocusableElement,
-  hasNativeDialogSupport,
-} from './ModalService.js';
+import { getFirstFocusableElement } from './ModalService.js';
 import { translations } from './translations/index.js';
 
 type DataAttribute = `data-${string}`;
@@ -122,7 +119,8 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>((props, ref) => {
     }
   }
 
-  const hasNativeDialog = hasNativeDialogSupport();
+  // eslint-disable-next-line compat/compat
+  const hasNativeDialog = window.HTMLDialogElement !== undefined;
 
   useScrollLock(open);
 

diff --git a/packages/circuit-ui/components/Modal/ModalService.ts b/packages/circuit-ui/components/Modal/ModalService.ts
@@ -52,6 +52,3 @@ export function getFirstFocusableElement(
     ? focusableElements[0]
     : focusableElements[1];
 }
-
-export const hasNativeDialogSupport = (): boolean =>
-  'HTMLDialogElement' in window;