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

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))

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();
+  });
+});

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
    */