Add test for almost all the components

Author: gpailler

src/App.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import { HelmetProvider } from '@dr.pogodin/react-helmet';
+import { describe, expect, it, vi } from 'vitest';
+import App from './App';
+
+// Mock child components to simplify testing
+vi.mock('./components/Root', () => ({
+  default: () => <div data-testid="root">Root Layout</div>,
+}));
+
+vi.mock('./components/Home', () => ({
+  default: () => <div data-testid="home">Home Page</div>,
+}));
+
+vi.mock('./components/Search', () => ({
+  default: () => <div data-testid="search">Search Page</div>,
+}));
+
+vi.mock('./components/Buckets', () => ({
+  default: () => <div data-testid="buckets">Buckets Page</div>,
+}));
+
+describe('App', () => {
+  it('renders the application with Helmet', () => {
+    render(
+      <HelmetProvider>
+        <App />
+      </HelmetProvider>
+    );
+
+    // The Root component should be rendered
+    expect(screen.getByTestId('root')).toBeInTheDocument();
+  });
+});

src/components/BucketTypeIcon.test.tsx

@@ -0,0 +1,91 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import BucketTypeIcon from './BucketTypeIcon';
+
+describe('BucketTypeIcon', () => {
+  describe('icon type', () => {
+    it('renders official bucket icon (verified) for official bucket', () => {
+      const { container } = render(<BucketTypeIcon official={true} />);
+
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+      expect(svg).toHaveAttribute('color', '#2E86C1');
+    });
+
+    it('renders popular community bucket icon for community bucket with 50+ stars', () => {
+      const { container } = render(<BucketTypeIcon official={false} stars={50} />);
+
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+      expect(svg).toHaveAttribute('color', '#6B9DBF');
+    });
+
+    it('renders regular community bucket icon for community bucket with less than 50 stars', () => {
+      const { container } = render(<BucketTypeIcon official={false} stars={25} />);
+
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+      expect(svg).toHaveAttribute('color', '#CCCCCC');
+    });
+
+    it('renders regular community bucket icon when stars is 0', () => {
+      const { container } = render(<BucketTypeIcon official={false} stars={0} />);
+
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+      expect(svg).toHaveAttribute('color', '#CCCCCC');
+    });
+
+    it('renders regular community bucket icon when stars is not provided', () => {
+      const { container } = render(<BucketTypeIcon official={false} />);
+
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+      expect(svg).toHaveAttribute('color', '#CCCCCC');
+    });
+  });
+
+  describe('tooltip configuration', () => {
+    it('renders with tooltip wrapper by default', () => {
+      const { container } = render(<BucketTypeIcon official={true} />);
+
+      // The component wraps the icon in an OverlayTrigger span
+      const spanWrapper = container.querySelector('span');
+      expect(spanWrapper).toBeInTheDocument();
+    });
+
+    it('renders without tooltip content when showTooltip is false', () => {
+      const { container } = render(<BucketTypeIcon official={true} showTooltip={false} />);
+
+      // Icon should still render
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('renders icon when stars is provided', () => {
+      const { container } = render(<BucketTypeIcon official={false} stars={100} />);
+
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('renders icon when stars is not provided', () => {
+      const { container } = render(<BucketTypeIcon official={true} />);
+
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+  });
+
+  describe('props spreading', () => {
+    it('passes additional props to the icon', () => {
+      const { container } = render(
+        <BucketTypeIcon official={true} data-testid="bucket-icon" className="custom-class" />
+      );
+
+      const svg = container.querySelector('svg');
+      expect(svg).toHaveAttribute('data-testid', 'bucket-icon');
+      expect(svg).toHaveClass('custom-class');
+    });
+  });
+});

src/components/Buckets.test.tsx

@@ -0,0 +1,194 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { HelmetProvider } from '@dr.pogodin/react-helmet';
+import Buckets from './Buckets';
+import { server, SEARCH_API_URL } from '../__tests__/server';
+
+// Mock bucket data response
+const mockOfficialBucketsResponse = {
+  '@odata.count': 2,
+  '@search.facets': {
+    'Metadata/Repository': [
+      { value: 'ScoopInstaller/Main', count: 1234 },
+      { value: 'ScoopInstaller/Extras', count: 890 },
+    ],
+  },
+  value: [],
+};
+
+const mockCommunityBucketsResponse = {
+  '@odata.count': 1,
+  '@search.facets': {
+    'Metadata/Repository': [
+      { value: 'user/community-bucket', count: 456 },
+    ],
+  },
+  value: [],
+};
+
+describe('Buckets', () => {
+  const renderBuckets = () => {
+    return render(
+      <HelmetProvider>
+        <MemoryRouter>
+          <Buckets />
+        </MemoryRouter>
+      </HelmetProvider>
+    );
+  };
+
+  beforeEach(() => {
+    // Setup MSW handlers for bucket fetching
+    server.use(
+      http.post(`${SEARCH_API_URL}/search`, async ({ request }) => {
+        const body = (await request.json()) as { filter?: string };
+
+        // Return official buckets for official filter
+        if (body.filter?.includes('1')) {
+          return HttpResponse.json(mockOfficialBucketsResponse);
+        }
+
+        // Return community buckets for non-official filter
+        return HttpResponse.json(mockCommunityBucketsResponse);
+      })
+    );
+  });
+
+  describe('rendering', () => {
+    it('shows loading state initially', () => {
+      renderBuckets();
+
+      expect(screen.getByText(/Searching for buckets/)).toBeInTheDocument();
+    });
+
+    it('displays bucket results after loading', async () => {
+      renderBuckets();
+
+      await waitFor(() => {
+        expect(screen.getByText(/Found 3 buckets/)).toBeInTheDocument();
+      });
+
+      // Check that bucket names are displayed
+      expect(screen.getByText('ScoopInstaller/Main')).toBeInTheDocument();
+      expect(screen.getByText('ScoopInstaller/Extras')).toBeInTheDocument();
+      expect(screen.getByText('user/community-bucket')).toBeInTheDocument();
+    });
+
+    it('displays manifest counts', async () => {
+      renderBuckets();
+
+      await waitFor(() => {
+        expect(screen.getByText('1234')).toBeInTheDocument();
+      });
+
+      expect(screen.getByText('890')).toBeInTheDocument();
+      expect(screen.getByText('456')).toBeInTheDocument();
+    });
+
+    it('renders table headers', async () => {
+      renderBuckets();
+
+      await waitFor(() => {
+        expect(screen.getByRole('columnheader', { name: 'Bucket' })).toBeInTheDocument();
+      });
+
+      expect(screen.getByRole('columnheader', { name: 'Manifests' })).toBeInTheDocument();
+    });
+  });
+
+  describe('sorting', () => {
+    it('renders sort dropdown with options', async () => {
+      renderBuckets();
+
+      await waitFor(() => {
+        expect(screen.getByText(/Found 3 buckets/)).toBeInTheDocument();
+      });
+
+      const select = screen.getByRole('combobox');
+      expect(select).toBeInTheDocument();
+      // Check that the options exist
+      expect(screen.getByRole('option', { name: 'Default' })).toBeInTheDocument();
+      expect(screen.getByRole('option', { name: 'Name' })).toBeInTheDocument();
+      expect(screen.getByRole('option', { name: 'Manifests' })).toBeInTheDocument();
+    });
+
+    it('sorts by name when Name option is selected', async () => {
+      const user = userEvent.setup();
+      renderBuckets();
+
+      await waitFor(() => {
+        expect(screen.getByText(/Found 3 buckets/)).toBeInTheDocument();
+      });
+
+      const select = screen.getByRole('combobox');
+      await user.selectOptions(select, 'Name');
+
+      // After sorting by name, check order
+      const rows = screen.getAllByRole('row');
+      expect(rows.length).toBeGreaterThan(1);
+    });
+
+    it('sorts by manifests when Manifests option is selected', async () => {
+      const user = userEvent.setup();
+      renderBuckets();
+
+      await waitFor(() => {
+        expect(screen.getByText(/Found 3 buckets/)).toBeInTheDocument();
+      });
+
+      const select = screen.getByRole('combobox');
+      await user.selectOptions(select, 'Manifests');
+
+      // After sorting by manifests, check that items are rendered
+      const rows = screen.getAllByRole('row');
+      expect(rows.length).toBeGreaterThan(1);
+    });
+  });
+
+  describe('error handling', () => {
+    it('handles API errors gracefully', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      server.use(
+        http.post(`${SEARCH_API_URL}/search`, () => {
+          return HttpResponse.error();
+        })
+      );
+
+      renderBuckets();
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalled();
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('links', () => {
+    it('creates correct link for official buckets', async () => {
+      renderBuckets();
+
+      await waitFor(() => {
+        expect(screen.getByText('ScoopInstaller/Main')).toBeInTheDocument();
+      });
+
+      const link = screen.getByRole('link', { name: /ScoopInstaller\/Main/i });
+      expect(link).toHaveAttribute('href', expect.stringContaining('/apps'));
+    });
+
+    it('creates correct link for community buckets with o=false param', async () => {
+      renderBuckets();
+
+      await waitFor(() => {
+        expect(screen.getByText('user/community-bucket')).toBeInTheDocument();
+      });
+
+      const link = screen.getByRole('link', { name: /user\/community-bucket/i });
+      expect(link).toHaveAttribute('href', expect.stringContaining('o=false'));
+    });
+  });
+});

src/components/CopyToClipboardButton.test.tsx

@@ -0,0 +1,55 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import type { ComponentProps } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import CopyToClipboardButton from './CopyToClipboardButton';
+
+describe('CopyToClipboardButton', () => {
+  const renderButton = (overrides: Partial<ComponentProps<typeof CopyToClipboardButton>> = {}) => {
+    const props = {
+      title: 'Copy command',
+      variant: 'outline-primary',
+      className: 'copy-button',
+      onClick: vi.fn(),
+      ...overrides,
+    };
+
+    return {
+      ...render(<CopyToClipboardButton {...props} />),
+      props,
+    };
+  };
+
+  it('invokes the provided onClick and disables itself temporarily', () => {
+    vi.useFakeTimers();
+    const { props } = renderButton();
+    const button = screen.getByRole('button', { name: /copy command/i });
+
+    fireEvent.click(button);
+
+    expect(props.onClick).toHaveBeenCalledTimes(1);
+    expect(button).toBeDisabled();
+
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+
+    expect(button).not.toBeDisabled();
+    vi.useRealTimers();
+  });
+
+  it('allows subsequent copies after the notification delay', () => {
+    vi.useFakeTimers();
+    const { props } = renderButton();
+    const button = screen.getByRole('button', { name: /copy command/i });
+
+    fireEvent.click(button);
+
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+
+    fireEvent.click(button);
+    expect(props.onClick).toHaveBeenCalledTimes(2);
+    vi.useRealTimers();
+  });
+});