chore(kubernetes): Migrate Helm Templates View to React R8S-239 (#587)

app/react/kubernetes/helm/HelmTemplates/HelmTemplatesSelectedItem.test.tsx

@@ -0,0 +1,148 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MutationOptions } from '@tanstack/react-query';
+import { vi } from 'vitest';
+
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
+import { withTestRouter } from '@/react/test-utils/withRouter';
+import { UserViewModel } from '@/portainer/models/user';
+
+import { Chart } from '../types';
+
+import { HelmTemplatesSelectedItem } from './HelmTemplatesSelectedItem';
+
+const mockMutate = vi.fn();
+const mockNotifySuccess = vi.fn();
+
+// Mock dependencies
+vi.mock('@/portainer/services/notifications', () => ({
+  notifySuccess: (title: string, text: string) =>
+    mockNotifySuccess(title, text),
+}));
+
+vi.mock('./queries/useHelmChartValues', () => ({
+  useHelmChartValues: vi.fn().mockReturnValue({
+    data: { values: 'test-values' },
+    isLoading: false,
+  }),
+}));
+
+vi.mock('./queries/useHelmChartInstall', () => ({
+  useHelmChartInstall: vi.fn().mockReturnValue({
+    mutate: (params: Record<string, string>, options?: MutationOptions) =>
+      mockMutate(params, options),
+    isLoading: false,
+  }),
+}));
+
+vi.mock('@/react/hooks/useAnalytics', () => ({
+  useAnalytics: vi.fn().mockReturnValue({
+    trackEvent: vi.fn(),
+  }),
+}));
+
+// Sample test data
+const mockChart: Chart = {
+  name: 'test-chart',
+  description: 'Test Chart Description',
+  repo: 'https://example.com',
+  icon: 'test-icon-url',
+  annotations: {
+    category: 'database',
+  },
+};
+
+const clearHelmChartMock = vi.fn();
+const mockRouterStateService = {
+  go: vi.fn(),
+};
+
+function renderComponent({
+  selectedChart = mockChart,
+  clearHelmChart = clearHelmChartMock,
+  namespace = 'test-namespace',
+  name = 'test-name',
+} = {}) {
+  const user = new UserViewModel({ Username: 'user' });
+
+  const Wrapped = withTestQueryProvider(
+    withUserProvider(
+      withTestRouter(() => (
+        <HelmTemplatesSelectedItem
+          selectedChart={selectedChart}
+          clearHelmChart={clearHelmChart}
+          namespace={namespace}
+          name={name}
+        />
+      )),
+      user
+    )
+  );
+
+  return {
+    ...render(<Wrapped />),
+    user,
+    mockRouterStateService,
+  };
+}
+
+describe('HelmTemplatesSelectedItem', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should display selected chart information', () => {
+    renderComponent();
+
+    // Check for chart details
+    expect(screen.getByText('test-chart')).toBeInTheDocument();
+    expect(screen.getByText('Test Chart Description')).toBeInTheDocument();
+    expect(screen.getByText('Clear selection')).toBeInTheDocument();
+    expect(screen.getByText('Helm')).toBeInTheDocument();
+  });
+
+  it('should toggle custom values editor', async () => {
+    renderComponent();
+    const user = userEvent.setup();
+
+    // First show the editor
+    await user.click(await screen.findByText('Custom values'));
+
+    // Verify editor is visible
+    expect(screen.getByTestId('helm-app-creation-editor')).toBeInTheDocument();
+
+    // Now hide the editor
+    await user.click(await screen.findByText('Custom values'));
+
+    // Editor should be hidden
+    expect(
+      screen.queryByTestId('helm-app-creation-editor')
+    ).not.toBeInTheDocument();
+  });
+
+  it('should install helm chart and navigate when install button is clicked', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    // Click install button
+    await user.click(screen.getByText('Install'));
+
+    // Check mutate was called with correct values
+    expect(mockMutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        Name: 'test-name',
+        Repo: 'https://example.com',
+        Chart: 'test-chart',
+        Values: 'test-values',
+        Namespace: 'test-namespace',
+      }),
+      expect.objectContaining({ onSuccess: expect.any(Function) })
+    );
+  });
+
+  it('should disable install button when namespace or name is undefined', () => {
+    renderComponent({ namespace: '' });
+    expect(screen.getByText('Install')).toBeDisabled();
+  });
+});