GrafanaUI: Added Unit Tests to Components (#105083)

* GrafanaUI: Added Unit Tests to Components

* Fixed typo

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

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { FilterPill } from './FilterPill';
+
+const onClick = jest.fn();
+
+const setup = (jsx: JSX.Element) => {
+  return {
+    user: userEvent.setup(),
+    ...render(jsx),
+  };
+};
+
+describe('FilterPill', () => {
+  it('should call onClick when clicked', async () => {
+    const { user } = setup(<FilterPill label="Test" selected={false} onClick={onClick} />);
+
+    const button = screen.getByRole('button');
+    await user.click(button);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not show icon when not selected', () => {
+    render(<FilterPill label="Test" selected={false} onClick={onClick} />);
+
+    const icon = screen.queryByTestId('filter-pill-icon');
+    expect(icon).not.toBeInTheDocument();
+  });
+
+  it('should show icon when selected', () => {
+    render(<FilterPill label="Test" selected={true} onClick={onClick} />);
+
+    const icon = screen.getByTestId('filter-pill-icon');
+    expect(icon).toBeInTheDocument();
+  });
+});

packages/grafana-ui/src/components/FilterPill/FilterPill.tsx

@@ -21,7 +21,7 @@ export const FilterPill = ({ label, selected, onClick, icon = 'check' }: FilterP
   return (
     <button type="button" className={cx(clearButton, styles.wrapper, selected && styles.selected)} onClick={onClick}>
       <span>{label}</span>
-      {selected && <Icon name={icon} className={styles.icon} />}
+      {selected && <Icon name={icon} className={styles.icon} data-testid="filter-pill-icon" />}
     </button>
   );
 };

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

@@ -11,4 +11,9 @@ describe('Pagination component', () => {
     render(<Pagination currentPage={1} numberOfPages={90} onNavigate={() => {}} showSmallVersion />);
     expect(screen.getAllByRole('button')).toHaveLength(4);
   });
+  it('should render two ellipsis when there are more than 14 page and a middle page is selected', () => {
+    render(<Pagination currentPage={8} numberOfPages={15} onNavigate={() => {}} />);
+    expect(screen.getAllByRole('button')).toHaveLength(9);
+    expect(screen.getAllByTestId('pagination-ellipsis-icon')).toHaveLength(2);
+  });
 });

packages/grafana-ui/src/components/Pagination/Pagination.tsx

@@ -83,7 +83,7 @@ export const Pagination = ({
           // Renders and ellipsis to represent condensed pages
           pagesToRender.push(
             <li key={page} className={styles.item}>
-              <Icon className={styles.ellipsis} name="ellipsis-v" />
+              <Icon className={styles.ellipsis} name="ellipsis-v" data-testid="pagination-ellipsis-icon" />
             </li>
           );
         }

packages/grafana-ui/src/components/Tabs/Tab.tsx

@@ -39,7 +39,7 @@ export const Tab = React.forwardRef<HTMLElement, TabProps>(
 
     const content = () => (
       <>
-        {icon && <Icon name={icon} />}
+        {icon && <Icon name={icon} data-testid={`tab-icon-${icon}`} />}
         {label}
         {typeof counter === 'number' && <Counter value={counter} />}
         {Suffix && <Suffix className={tabsStyles.suffix} />}

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

@@ -0,0 +1,99 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Tab } from './Tab';
+import { TabsBar } from './TabsBar';
+
+const setup = (jsx: JSX.Element) => {
+  return {
+    user: userEvent.setup(),
+    ...render(jsx),
+  };
+};
+
+const onChangeTab = jest.fn();
+
+describe('Tabs', () => {
+  it('should call onChangeTab when clicking a tab', async () => {
+    const { user } = setup(
+      <TabsBar>
+        <Tab label="Tab 1" active={false} onChangeTab={onChangeTab} />
+      </TabsBar>
+    );
+
+    const tab = screen.getByRole('tab');
+    await user.click(tab);
+
+    expect(onChangeTab).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render active tab correctly', () => {
+    render(
+      <TabsBar>
+        <Tab label="Active Tab" active={true} onChangeTab={onChangeTab} />
+        <Tab label="Inactive Tab" active={false} onChangeTab={onChangeTab} />
+      </TabsBar>
+    );
+
+    const activeTab = screen.getByRole('tab', { name: 'Active Tab' });
+    expect(activeTab).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('should render tabs with icons', () => {
+    render(
+      <TabsBar>
+        <Tab label="Tab with Icon" active={true} onChangeTab={onChangeTab} icon="star" />
+      </TabsBar>
+    );
+
+    const icon = screen.getByTestId('tab-icon-star');
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('should render tabs with counters', () => {
+    render(
+      <TabsBar>
+        <Tab label="Tab with Counter" active={true} onChangeTab={onChangeTab} counter={5} />
+      </TabsBar>
+    );
+
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('should render tabs with tooltips', async () => {
+    const { user } = setup(
+      <TabsBar>
+        <Tab label="Tab with Tooltip" active={true} onChangeTab={onChangeTab} tooltip="Tooltip content" />
+      </TabsBar>
+    );
+
+    const tab = screen.getByRole('tab');
+    await user.hover(tab);
+
+    expect(await screen.findByText('Tooltip content')).toBeInTheDocument();
+  });
+
+  it('should render tabs as links when href is provided', () => {
+    render(
+      <TabsBar>
+        <Tab label="Link Tab" active={true} onChangeTab={onChangeTab} href="/some-path" />
+      </TabsBar>
+    );
+
+    const link = screen.getByRole('tab');
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', '/some-path');
+  });
+
+  it('should render tabs with suffix content', () => {
+    const Suffix = () => <span data-testid="tab-suffix">Suffix</span>;
+
+    render(
+      <TabsBar>
+        <Tab label="Tab with Suffix" active={true} onChangeTab={onChangeTab} suffix={Suffix} />
+      </TabsBar>
+    );
+
+    expect(screen.getByTestId('tab-suffix')).toBeInTheDocument();
+  });
+});