From eb4b0e7802002dbcfa07969b96469d2348f0e499 Mon Sep 17 00:00:00 2001
From: hasyed-akamai <hasyed@akamai.com>
Date: Thu, 21 Nov 2024 16:28:54 +0530
Subject: [PATCH] test: [M3-8542] - Add unit tests for `CopyableTextField`
 component (#11268)

* test: [M3-8542] - Add unit tests for CopyableTextField component

* Added changeset: unit test cases for `CopyableTextField` component

* Add `renderWithTheme` directly in each test case for consistency
---
 .../pr-11268-added-1731665724499.md           |  5 ++
 .../CopyableTextField.test.tsx                | 87 +++++++++++++++++++
 .../CopyableTextField/CopyableTextField.tsx   |  2 +-
 3 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 packages/manager/.changeset/pr-11268-added-1731665724499.md
 create mode 100644 packages/manager/src/components/CopyableTextField/CopyableTextField.test.tsx

diff --git a/packages/manager/.changeset/pr-11268-added-1731665724499.md b/packages/manager/.changeset/pr-11268-added-1731665724499.md
new file mode 100644
index 00000000000..ce947fc48c3
--- /dev/null
+++ b/packages/manager/.changeset/pr-11268-added-1731665724499.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+unit test cases for `CopyableTextField` component ([#11268](https://github.com/linode/manager/pull/11268))
diff --git a/packages/manager/src/components/CopyableTextField/CopyableTextField.test.tsx b/packages/manager/src/components/CopyableTextField/CopyableTextField.test.tsx
new file mode 100644
index 00000000000..0c849c41cbb
--- /dev/null
+++ b/packages/manager/src/components/CopyableTextField/CopyableTextField.test.tsx
@@ -0,0 +1,87 @@
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { downloadFile } from 'src/utilities/downloadFile';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { CopyableTextField } from './CopyableTextField';
+
+import type { CopyableTextFieldProps } from './CopyableTextField';
+
+vi.mock('src/utilities/downloadFile', () => ({
+  downloadFile: vi.fn(),
+}));
+
+const mockLabel = 'label';
+const mockValue = 'Text to Copy';
+const defaultProps: CopyableTextFieldProps = {
+  label: mockLabel,
+  value: mockValue,
+};
+
+describe('CopyableTextField', () => {
+  it('should render label and CopyableText', () => {
+    const { getByRole } = renderWithTheme(
+      <CopyableTextField {...defaultProps} />
+    );
+
+    const textbox = getByRole('textbox', { name: mockLabel });
+
+    expect(textbox).toBeVisible();
+    expect(textbox).toHaveAttribute(
+      'value',
+      expect.stringContaining(mockValue)
+    );
+  });
+
+  it('should render the copy icon button and tooltip and allow user to copy the Text', async () => {
+    const { findByRole, getByRole } = renderWithTheme(
+      <CopyableTextField {...defaultProps} />
+    );
+
+    const copyIcon = getByRole('button', {
+      name: `Copy ${mockValue} to clipboard`,
+    });
+
+    await userEvent.hover(copyIcon);
+    const copyTooltip = await findByRole('tooltip');
+    expect(copyTooltip).toBeInTheDocument();
+    expect(copyTooltip).toHaveTextContent('Copy');
+
+    await userEvent.click(copyIcon);
+    expect(copyIcon.getAttribute('data-qa-tooltip')).toBe('Copied!');
+  });
+
+  it('should render the download icon button and tooltip and allow user to download the Text File', async () => {
+    const { findByRole, getByRole } = renderWithTheme(
+      <CopyableTextField showDownloadIcon {...defaultProps} />
+    );
+
+    const downloadIcon = getByRole('button', { name: `Download ${mockValue}` });
+
+    await userEvent.hover(downloadIcon);
+    const copyTooltip = await findByRole('tooltip');
+    expect(copyTooltip).toBeInTheDocument();
+    expect(copyTooltip).toHaveTextContent('Download');
+
+    await userEvent.click(downloadIcon);
+    expect(downloadFile).toHaveBeenCalledTimes(1);
+    expect(downloadFile).toHaveBeenCalledWith(`${mockLabel}.txt`, mockValue);
+  });
+
+  it('should not render any icon when hideIcons is true', () => {
+    const { queryByRole } = renderWithTheme(
+      <CopyableTextField hideIcons {...defaultProps} />
+    );
+
+    const copyIcon = queryByRole('button', {
+      name: `Copy ${mockValue} to clipboard`,
+    });
+    const downloadIcon = queryByRole('button', {
+      name: `Download ${mockValue}`,
+    });
+
+    expect(copyIcon).not.toBeInTheDocument();
+    expect(downloadIcon).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
index 7d3f057975f..e09302c54aa 100644
--- a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
+++ b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
@@ -10,7 +10,7 @@ import { DownloadTooltip } from '../DownloadTooltip';
 import type { CopyTooltipProps } from 'src/components/CopyTooltip/CopyTooltip';
 import type { TextFieldProps } from 'src/components/TextField';
 
-interface CopyableTextFieldProps extends TextFieldProps {
+export interface CopyableTextFieldProps extends TextFieldProps {
   /**
    * Optional props that are passed to the underlying CopyTooltip component
    */