Add test

Author: bernardobelchior

packages/x-charts-pro/src/Heatmap/Heatmap.test.tsx

@@ -1,6 +1,10 @@
-import { createRenderer, screen } from '@mui/internal-test-utils';
+import { page, userEvent } from 'vitest/browser';
+import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
 import { clearLicenseStatusCache, LicenseInfo } from '@mui/x-license';
+import { vi } from 'vitest';
+import { isJSDOM } from 'test/utils/skipIf';
 import { Heatmap } from './Heatmap';
+import { heatmapClasses } from './heatmapClasses';
 
 describe('<Heatmap /> - License', () => {
   const { render } = createRenderer();
@@ -69,3 +73,48 @@ describe('<Heatmap /> - License', () => {
     });
   });
 });
+
+describe('Heatmap - onItemClick', () => {
+  const { render } = createRenderer();
+
+  const config = {
+    series: [
+      {
+        id: '0',
+        data: [
+          [0, 0, 1],
+          [0, 1, 2],
+          [0, 2, 3],
+          [1, 0, 4],
+          [1, 1, 5],
+          [1, 2, 6],
+        ],
+      },
+    ],
+    xAxis: [{ position: 'none' }],
+    yAxis: [{ position: 'none' }],
+    width: 300,
+    height: 300,
+    margin: { top: 0, left: 0, bottom: 0, right: 0 },
+  } as const;
+
+  it.skipIf(isJSDOM)('should provide the right context as second argument', async () => {
+    const onItemClick = vi.fn();
+    const { container } = render(<Heatmap {...config} onItemClick={onItemClick} />);
+
+    const cells = container.querySelectorAll<HTMLElement>(`.${heatmapClasses.cell}`);
+
+    // The userEvent is not from React Testing Library, it's from Vitest, so we need to wrap it in act
+    // I tried using React Testing Library's userEvent, but it didn't work because it doesn't set the clientX/Y properties
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      await userEvent.click(cells[5]);
+    });
+
+    expect(onItemClick).toHaveBeenLastCalledWith(expect.anything(), {
+      type: 'heatmap',
+      seriesId: '0',
+      dataIndex: 5,
+    });
+  });
+});