From 0297ba5da7155cbffbd6672585131cb8f53067eb Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Thu, 28 Nov 2024 15:55:08 +0530 Subject: [PATCH 1/4] test: [M3-8546] - Add unit tests for DialogTitle component --- .../DialogTitle/DialogTitle.test.tsx | 54 +++++++++++++++++++ .../components/DialogTitle/DialogTitle.tsx | 2 +- 2 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 packages/manager/src/components/DialogTitle/DialogTitle.test.tsx diff --git a/packages/manager/src/components/DialogTitle/DialogTitle.test.tsx b/packages/manager/src/components/DialogTitle/DialogTitle.test.tsx new file mode 100644 index 00000000000..c04a801b173 --- /dev/null +++ b/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( + + ); + 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( + + ); + expect(queryByText(mockTitle)).not.toBeInTheDocument(); + }); + + it('should close the dialog Box when clciked on close Button', async () => { + const onCloseMock = vi.fn(); + const { getByRole } = renderWithTheme( + + ); + const closeButton = getByRole('button', { + name: 'Close', + }); + expect(closeButton).toBeInTheDocument(); + await userEvent.click(closeButton); + expect(onCloseMock).toHaveBeenCalledTimes(1); + expect(onCloseMock).toHaveBeenCalledWith({}, 'escapeKeyDown'); + }); +}); diff --git a/packages/manager/src/components/DialogTitle/DialogTitle.tsx b/packages/manager/src/components/DialogTitle/DialogTitle.tsx index 62b7272aaaa..9134a6e94b8 100644 --- a/packages/manager/src/components/DialogTitle/DialogTitle.tsx +++ b/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; From 604368169daf0fac99d75e59e8d9827a62b2b83f Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Thu, 28 Nov 2024 16:01:51 +0530 Subject: [PATCH 2/4] Added changeset: unit test cases for `DialogTitle` component --- packages/manager/.changeset/pr-11340-added-1732789911285.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-11340-added-1732789911285.md diff --git a/packages/manager/.changeset/pr-11340-added-1732789911285.md b/packages/manager/.changeset/pr-11340-added-1732789911285.md new file mode 100644 index 00000000000..3f33a9a395f --- /dev/null +++ b/packages/manager/.changeset/pr-11340-added-1732789911285.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +unit test cases for `DialogTitle` component ([#11340](https://github.com/linode/manager/pull/11340)) From d05a9ec16667846d3f2bd36a291f7667fe44e615 Mon Sep 17 00:00:00 2001 From: hasyed-akamai Date: Tue, 3 Dec 2024 14:31:33 +0530 Subject: [PATCH 3/4] Fix capitalization nitpicks in test file --- .../src/components/DialogTitle/DialogTitle.test.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/manager/src/components/DialogTitle/DialogTitle.test.tsx b/packages/manager/src/components/DialogTitle/DialogTitle.test.tsx index c04a801b173..247d4739f81 100644 --- a/packages/manager/src/components/DialogTitle/DialogTitle.test.tsx +++ b/packages/manager/src/components/DialogTitle/DialogTitle.test.tsx @@ -8,22 +8,22 @@ import { DialogTitle } from './DialogTitle'; import type { DialogTitleProps } from './DialogTitle'; const mockId = '1'; -const mockSubTitle = 'This a basic dialog'; +const mockSubtitle = 'This a basic dialog'; const mockTitle = 'This is a Dialog'; const defaultProps: DialogTitleProps = { id: mockId, - subtitle: mockSubTitle, + subtitle: mockSubtitle, title: mockTitle, }; describe('DialogTitle', () => { - it('should render title, subtitle and Id', () => { + it('should render title, subtitle and id', () => { const { getByRole, getByText } = renderWithTheme( ); expect(getByText(mockTitle)).toBeVisible(); - expect(getByText(mockSubTitle)).toBeVisible(); + expect(getByText(mockSubtitle)).toBeVisible(); const titleElement = getByRole('heading'); expect(titleElement).toHaveAttribute('id', mockId); }); @@ -35,7 +35,7 @@ describe('DialogTitle', () => { expect(queryByText(mockTitle)).not.toBeInTheDocument(); }); - it('should close the dialog Box when clciked on close Button', async () => { + it('should close the dialog Box if the close button is clicked', async () => { const onCloseMock = vi.fn(); const { getByRole } = renderWithTheme( Date: Tue, 3 Dec 2024 14:34:16 +0530 Subject: [PATCH 4/4] update changeset `Type` and `Description` --- packages/manager/.changeset/pr-11340-added-1732789911285.md | 5 ----- packages/manager/.changeset/pr-11340-tests-1732789911285.md | 5 +++++ 2 files changed, 5 insertions(+), 5 deletions(-) delete mode 100644 packages/manager/.changeset/pr-11340-added-1732789911285.md create mode 100644 packages/manager/.changeset/pr-11340-tests-1732789911285.md diff --git a/packages/manager/.changeset/pr-11340-added-1732789911285.md b/packages/manager/.changeset/pr-11340-added-1732789911285.md deleted file mode 100644 index 3f33a9a395f..00000000000 --- a/packages/manager/.changeset/pr-11340-added-1732789911285.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@linode/manager": Added ---- - -unit test cases for `DialogTitle` component ([#11340](https://github.com/linode/manager/pull/11340)) diff --git a/packages/manager/.changeset/pr-11340-tests-1732789911285.md b/packages/manager/.changeset/pr-11340-tests-1732789911285.md new file mode 100644 index 00000000000..06220b0c3c9 --- /dev/null +++ b/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))