[test][tooltip] Tests with icon buttons

packages/mui-material/src/Tooltip/Tooltip.test.js

@@ -13,6 +13,8 @@ import {
 } from '@mui/internal-test-utils';
 import { camelCase } from 'es-toolkit/string';
 import Tooltip, { tooltipClasses as classes } from '@mui/material/Tooltip';
+import IconButton from '@mui/material/IconButton';
+import SaveIcon from '@mui/icons-material/Save';
 import { testReset } from './Tooltip';
 import describeConformance from '../../test/describeConformance';
 
@@ -1492,4 +1494,75 @@ describe('<Tooltip />', () => {
       expect(screen.getByTestId('popper')).to.have.class('my-class');
     });
   });
+
+  describe('IconButton trigger', () => {
+    it('uncontrolled mode', async () => {
+      render(
+        <Tooltip enterDelay={0} title="Save" TransitionProps={{ timeout: 0 }}>
+          <IconButton>
+            <SaveIcon />
+          </IconButton>
+        </Tooltip>,
+      );
+      expect(screen.queryByRole('tooltip')).to.equal(null);
+
+      fireEvent.mouseOver(screen.getByRole('button'));
+      clock.tick(0);
+
+      expect(screen.getByRole('tooltip')).toBeVisible();
+
+      fireEvent.mouseLeave(screen.getByRole('button'));
+      // Tooltip schedules timeout even with no delay
+      clock.tick(0);
+      clock.tick(0);
+
+      expect(screen.queryByRole('tooltip')).to.equal(null);
+    });
+
+    it('controlled mode', async () => {
+      function App() {
+        const [open, setOpen] = React.useState(false);
+
+        const handleClose = () => {
+          setOpen(false);
+        };
+
+        const handleOpen = () => {
+          setOpen(true);
+        };
+
+        return (
+          <Tooltip
+            open={open}
+            onClose={handleClose}
+            onOpen={handleOpen}
+            title="Save"
+            enterDelay={0}
+            TransitionProps={{ timeout: 0 }}
+          >
+            <IconButton>
+              <SaveIcon />
+            </IconButton>
+          </Tooltip>
+        );
+      }
+
+      await render(<App />);
+
+      const trigger = screen.getByRole('button');
+
+      expect(screen.queryByRole('tooltip')).to.equal(null);
+
+      fireEvent.mouseOver(trigger);
+
+      expect(screen.getByRole('tooltip')).toBeVisible();
+
+      fireEvent.mouseLeave(screen.getByRole('button'));
+
+      clock.tick(0); // enterDelay
+      clock.tick(0); // TransitionProps.timeout
+
+      expect(screen.queryByRole('tooltip')).to.equal(null);
+    });
+  });
 });

test/e2e/fixtures/Tooltip/ControlledTooltip.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import SaveIcon from '@mui/icons-material/Save';
+
+export default function ControlledTooltips() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <Tooltip open={open} onClose={handleClose} onOpen={handleOpen} title="Save">
+      <IconButton>
+        <SaveIcon />
+      </IconButton>
+    </Tooltip>
+  );
+}

test/e2e/index.test.ts

@@ -264,4 +264,19 @@ describe('e2e', () => {
       await errorSelector.waitFor();
     });
   });
+
+  describe('<Tooltip />', () => {
+    it('icon button trigger', async () => {
+      await renderFixture('Tooltip/ControlledTooltip');
+
+      const tooltip = page.getByRole('tooltip');
+      await expect(tooltip).toBeHidden();
+
+      await page.mouse.move(20, 20);
+      await expect(tooltip).toBeVisible();
+
+      await page.mouse.move(99, 99);
+      await expect(tooltip).toBeHidden();
+    });
+  });
 });