Unit tests

mui · Jan 23, 2025 · b35c49d · b35c49d
1 parent 199bf89
commit b35c49d
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 0 deletions.
diff --git a/packages/react/src/menu/backdrop/MenuBackdrop.test.tsx b/packages/react/src/menu/backdrop/MenuBackdrop.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Menu } from '@base-ui-components/react/menu';
 import { createRenderer, describeConformance } from '#test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
 
 describe('<Menu.Backdrop />', () => {
   const { render } = createRenderer();
@@ -11,4 +12,27 @@ describe('<Menu.Backdrop />', () => {
       return render(<Menu.Root open>{node}</Menu.Root>);
     },
   }));
+
+  it('sets `pointer-events: none` style on backdrop if opened by hover', async () => {
+    const { user } = await render(
+      <Menu.Root delay={0} openOnHover>
+        <Menu.Trigger>Open</Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Backdrop data-testid="backdrop" />
+          <Menu.Positioner>
+            <Menu.Popup />
+          </Menu.Positioner>
+        </Menu.Portal>
+      </Menu.Root>,
+    );
+
+    fireEvent.click(screen.getByText('Open'));
+
+    expect(screen.getByTestId('backdrop').style.pointerEvents).not.to.equal('none');
+
+    fireEvent.click(screen.getByText('Open'));
+    await user.hover(screen.getByText('Open'));
+
+    expect(screen.getByTestId('backdrop').style.pointerEvents).to.equal('none');
+  });
 });
diff --git a/packages/react/src/popover/backdrop/PopoverBackdrop.test.tsx b/packages/react/src/popover/backdrop/PopoverBackdrop.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Popover } from '@base-ui-components/react/popover';
 import { createRenderer, describeConformance } from '#test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
 
 describe('<Popover.Backdrop />', () => {
   const { render } = createRenderer();
@@ -11,4 +12,27 @@ describe('<Popover.Backdrop />', () => {
       return render(<Popover.Root open>{node}</Popover.Root>);
     },
   }));
+
+  it.only('sets `pointer-events: none` style on backdrop if opened by hover', async () => {
+    const { user } = await render(
+      <Popover.Root delay={0} closeDelay={0} openOnHover>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Backdrop data-testid="backdrop" />
+          <Popover.Positioner>
+            <Popover.Popup />
+          </Popover.Positioner>
+        </Popover.Portal>
+      </Popover.Root>,
+    );
+
+    fireEvent.click(screen.getByText('Open'));
+
+    expect(screen.getByTestId('backdrop').style.pointerEvents).not.to.equal('none');
+
+    fireEvent.click(screen.getByText('Open'));
+    await user.hover(screen.getByText('Open'));
+
+    expect(screen.getByTestId('backdrop').style.pointerEvents).to.equal('none');
+  });
 });
diff --git a/packages/react/src/preview-card/backdrop/PreviewCardBackdrop.test.tsx b/packages/react/src/preview-card/backdrop/PreviewCardBackdrop.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { PreviewCard } from '@base-ui-components/react/preview-card';
+import { screen } from '@mui/internal-test-utils';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<PreviewCard.Backdrop />', () => {
@@ -11,4 +12,22 @@ describe('<PreviewCard.Backdrop />', () => {
       return render(<PreviewCard.Root open>{node}</PreviewCard.Root>);
     },
   }));
+
+  it('sets `pointer-events: none` style', async () => {
+    const { user } = await render(
+      <PreviewCard.Root delay={0} closeDelay={0}>
+        <PreviewCard.Trigger>Open</PreviewCard.Trigger>
+        <PreviewCard.Portal>
+          <PreviewCard.Backdrop data-testid="backdrop" />
+          <PreviewCard.Positioner>
+            <PreviewCard.Popup />
+          </PreviewCard.Positioner>
+        </PreviewCard.Portal>
+      </PreviewCard.Root>,
+    );
+
+    await user.hover(screen.getByText('Open'));
+
+    expect(screen.getByTestId('backdrop').style.pointerEvents).to.equal('none');
+  });
 });