test: [M3-8546] - Add unit tests for DialogTitle component

packages/manager/.changeset/pr-11340-tests-1732789911285.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add unit test cases for `DialogTitle` component ([#11340](https://github.com/linode/manager/pull/11340))

packages/manager/src/components/DialogTitle/DialogTitle.test.tsx

@@ -0,0 +1,54 @@
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { DialogTitle } from './DialogTitle';
+
+import type { DialogTitleProps } from './DialogTitle';
+
+const mockId = '1';
+const mockSubtitle = 'This a basic dialog';
+const mockTitle = 'This is a Dialog';
+
+const defaultProps: DialogTitleProps = {
+  id: mockId,
+  subtitle: mockSubtitle,
+  title: mockTitle,
+};
+
+describe('DialogTitle', () => {
+  it('should render title, subtitle and id', () => {
+    const { getByRole, getByText } = renderWithTheme(
+      <DialogTitle {...defaultProps} />
+    );
+    expect(getByText(mockTitle)).toBeVisible();
+    expect(getByText(mockSubtitle)).toBeVisible();
+    const titleElement = getByRole('heading');
+    expect(titleElement).toHaveAttribute('id', mockId);
+  });
+
+  it('should not render title when isFetching is true', () => {
+    const { queryByText } = renderWithTheme(
+      <DialogTitle isFetching {...defaultProps} />
+    );
+    expect(queryByText(mockTitle)).not.toBeInTheDocument();
+  });
+
+  it('should close the dialog Box if the close button is clicked', async () => {
+    const onCloseMock = vi.fn();
+    const { getByRole } = renderWithTheme(
+      <DialogTitle
+        onClose={onCloseMock({}, 'escapeKeyDown')}
+        {...defaultProps}
+      />
+    );
+    const closeButton = getByRole('button', {
+      name: 'Close',
+    });
+    expect(closeButton).toBeInTheDocument();
+    await userEvent.click(closeButton);
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+    expect(onCloseMock).toHaveBeenCalledWith({}, 'escapeKeyDown');
+  });
+});

packages/manager/src/components/DialogTitle/DialogTitle.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 
 import type { SxProps, Theme } from '@mui/material';
 
-interface DialogTitleProps {
+export interface DialogTitleProps {
   className?: string;
   id?: string;
   isFetching?: boolean;