Grafana UI: Adding Some Unit Tests (#104804)

* Grafana UI: Adding Some Unit Tests

* updates per feedback

* Updates per feedback

packages/grafana-ui/src/components/Button/Button.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Button } from './Button';
+
+const setup = (jsx: JSX.Element) => {
+  return {
+    user: userEvent.setup(),
+    ...render(jsx),
+  };
+};
+
+describe('Button', () => {
+  it('should fire onClick when not disabled', async () => {
+    const onClick = jest.fn();
+    const { user } = setup(<Button onClick={onClick}>Click me</Button>);
+
+    const button = screen.getByRole('button');
+    await user.click(button);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not fire onClick when disabled', async () => {
+    const onClick = jest.fn();
+    const { user } = setup(
+      <Button disabled onClick={onClick}>
+        Click me
+      </Button>
+    );
+
+    const button = screen.getByRole('button');
+    await user.click(button);
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('should display icon when icon prop is provided', () => {
+    setup(<Button icon="cloud">Click me</Button>);
+
+    const svgElement = document.querySelector('svg');
+    expect(svgElement).toBeInTheDocument();
+  });
+});

packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ClipboardButton } from './ClipboardButton';
+
+const setup = (jsx: JSX.Element) => {
+  return {
+    user: userEvent.setup(),
+    ...render(jsx),
+  };
+};
+
+describe('ClipboardButton', () => {
+  const originalWindow = { ...window };
+
+  beforeAll(() => {
+    Object.assign(window, {
+      isSecureContext: true,
+    });
+  });
+
+  afterAll(() => {
+    Object.assign(window, originalWindow);
+  });
+
+  it('should copy text to clipboard when clicked', async () => {
+    const textToCopy = 'Copy me!';
+    const onClipboardCopy = jest.fn();
+
+    const { user } = setup(
+      <ClipboardButton getText={() => textToCopy} onClipboardCopy={onClipboardCopy}>
+        Copy
+      </ClipboardButton>
+    );
+
+    const button = screen.getByRole('button');
+    await user.click(button);
+
+    const clipboardText = await navigator.clipboard.readText();
+
+    expect(clipboardText).toBe(textToCopy);
+    expect(onClipboardCopy).toHaveBeenCalledWith(textToCopy);
+  });
+});

packages/grafana-ui/src/components/Collapse/Collapse.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Collapse } from './Collapse';
+
+const TEST_LABEL = 'Test Collapse';
+
+const setup = (jsx: JSX.Element) => {
+  return {
+    user: userEvent.setup(),
+    ...render(jsx),
+  };
+};
+
+describe('Collapse', () => {
+  it('should not render content when isOpen is false', () => {
+    const contentText = 'Hidden content';
+
+    render(
+      <Collapse isOpen={false} label={TEST_LABEL}>
+        <div>{contentText}</div>
+      </Collapse>
+    );
+
+    expect(screen.queryByText(contentText)).not.toBeInTheDocument();
+  });
+
+  it('should render content when isOpen is true', () => {
+    const contentText = 'Visible content';
+
+    render(
+      <Collapse isOpen={true} label={TEST_LABEL}>
+        <div>{contentText}</div>
+      </Collapse>
+    );
+
+    expect(screen.getByText(contentText)).toBeInTheDocument();
+  });
+
+  it('should call onToggle when clicked', async () => {
+    const contentText = 'Toggleable content';
+    const onToggle = jest.fn();
+
+    const { user } = setup(
+      <Collapse label={TEST_LABEL} onToggle={onToggle} collapsible>
+        <div>{contentText}</div>
+      </Collapse>
+    );
+
+    const header = screen.getByRole('button');
+    await user.click(header);
+
+    expect(onToggle).toHaveBeenCalledWith(true);
+  });
+});