add more tests

packages/circuit-ui/components/Dialog/Dialog.spec.tsx

@@ -27,7 +27,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  beforeEach,
+  afterEach,
+  describe,
+  expect,
+  it,
+  vi,
+  type Mock,
+} from 'vitest';
 import { createRef } from 'react';
 
 import {
@@ -39,7 +47,16 @@ import {
   act,
 } from '../../util/test-utils.js';
 
-import { animationDuration, Dialog } from './Dialog.js';
+import { animationDuration, Dialog, type DialogProps } from './Dialog.js';
+import { hasNativeDialogSupport } from './DialogService.js';
+
+vi.mock('./DialogService.js', async (importOriginal) => {
+  const module = await importOriginal<typeof import('./DialogService.js')>();
+  return {
+    ...module,
+    hasNativaDialogSupport: vi.fn().mockReturnValue(true),
+  };
+});
 
 describe('Dialog', () => {
   const props = {
@@ -51,6 +68,7 @@ describe('Dialog', () => {
 
   beforeEach(() => {
     vi.useFakeTimers({ shouldAdvanceTime: true });
+    (hasNativeDialogSupport as Mock).mockReturnValue(true);
   });
 
   afterEach(() => {
@@ -75,6 +93,19 @@ describe('Dialog', () => {
     expect(dialog?.className).toContain(className);
   });
 
+  it('should throw accessibility error when the field is not sufficiently labelled', () => {
+    const dialogProps = {
+      ...props,
+      closeButtonLabel: undefined,
+    } as unknown as DialogProps;
+    // Silence the console.error output and switch to development mode to throw the error
+    vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    process.env.NODE_ENV = 'development';
+    expect(() => render(<Dialog {...dialogProps} />)).toThrow();
+    process.env.NODE_ENV = 'test';
+    vi.restoreAllMocks();
+  });
+
   it('should render in closed state by default', () => {
     const { container } = render(<Dialog {...props} />);
     // eslint-disable-next-line testing-library/no-container
@@ -155,7 +186,7 @@ describe('Dialog', () => {
       expect(dialog.className).toContain('immersive');
     });
 
-    it('should close the dialog when modal and pressing the backdrop', async () => {
+    it('should close the dialog and pressing the backdrop', async () => {
       render(<Dialog {...props} open />);
       await userEvent.click(screen.getByRole('dialog', { hidden: true }));
       act(() => {
@@ -172,6 +203,21 @@ describe('Dialog', () => {
       });
       expect(props.onClose).toHaveBeenCalledOnce();
     });
+
+    it('should remove animation classes when closed when polyfill is used', async () => {
+      (hasNativeDialogSupport as Mock).mockReturnValue(false);
+      render(<Dialog {...props} open />);
+
+      const backdrop = document.getElementsByClassName('backdrop')[0];
+      expect(backdrop.classList.toString()).toContain('backdrop-visible');
+      await userEvent.click(screen.getByRole('button', { name: 'Close' }));
+      expect(backdrop.classList.toString()).not.toContain('backdrop-visible');
+      act(() => {
+        vi.advanceTimersByTime(animationDuration);
+      });
+
+      expect(props.onClose).toHaveBeenCalledOnce();
+    });
   });
 
   describe('accessibility', () => {

packages/circuit-ui/components/Dialog/Dialog.tsx

@@ -39,7 +39,10 @@ import { isEscape } from '../../util/key-codes.js';
 
 import classes from './Dialog.module.css';
 import { createUseModalDialog } from './createUseModalDialog.js';
-import { getFirstFocusableElement } from './DialogService.js';
+import {
+  getFirstFocusableElement,
+  hasNativeDialogSupport,
+} from './DialogService.js';
 
 export interface DialogProps
   extends Omit<HTMLAttributes<HTMLDialogElement>, 'children'> {
@@ -104,7 +107,7 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
         );
       }
     }
-    const hasNativeDialog = 'HTMLDialogElement' in window;
+    const hasNativeDialog = hasNativeDialogSupport();
 
     useEffect(() => {
       const dialogElement = dialogRef.current;

packages/circuit-ui/components/Dialog/DialogService.ts

@@ -33,3 +33,6 @@ export const getFirstFocusableElement = (
     ? focusableElements[0]
     : focusableElements[1];
 };
+
+export const hasNativeDialogSupport = (): boolean =>
+  'HTMLDialogElement' in window;