feat: Test cases for chaosHub views (#4249)

* added test cases for chaosHub views

Signed-off-by: freedisch <[email protected]>

* fix failing tests

Signed-off-by: freedisch <[email protected]>

* Update chaoscenter/web/src/views/ChaosFault/__tests__/ChaosFault.test.tsx

Co-authored-by: Sayan Mondal <[email protected]>
Signed-off-by: Magnim BATALE <[email protected]>

* updated tests to use TestWrapper

Signed-off-by: freedisch <[email protected]>

---------

Signed-off-by: freedisch <[email protected]>
Signed-off-by: Magnim BATALE <[email protected]>
Co-authored-by: Sayan Mondal <[email protected]>

chaoscenter/web/src/views/ChaosFault/__tests__/ChaosFault.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/';
+import type { FaultDetails } from '@api/core';
+import type { PredefinedExperiment } from '@api/entities';
+import { TestWrapper } from 'utils/testUtils';
+import DefaultLayoutTemplate from '@components/DefaultLayout';
+import ChaosFaultView from '../ChaosFault';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ hubID: '123', faultName: 'faultTest' }),
+  useSearchParams: () => new URLSearchParams('hubName=testHub&isDefault=true')
+}));
+
+beforeAll(() =>
+  window.history.pushState(
+    {},
+    'Chaos Fault',
+    '/chaos-hubs/6f39cea9-6264-4951-83a8-29976b614289/fault/aws/ecs-instance-stop'
+  )
+);
+describe('<ChaosFaultView />', () => {
+  interface ChaosFaultViewProps {
+    faultDetails: FaultDetails | undefined;
+    chartName: string;
+    loading: {
+      getHubFaults: boolean;
+      getHubExperiment: boolean;
+    };
+    experiments: Array<PredefinedExperiment>;
+  }
+  const defaultProps: ChaosFaultViewProps = {
+    faultDetails: undefined,
+    chartName: 'TestChart',
+    loading: { getHubFaults: true, getHubExperiment: true },
+    experiments: []
+  };
+  const breadcrumbs = [
+    {
+      label: 'ChaosHub',
+      url: '/chaoshub'
+    },
+    {
+      label: 'Faults',
+      url: '/faults'
+    }
+  ];
+  const renderComponent = (props = defaultProps) =>
+    render(
+      <TestWrapper>
+        <DefaultLayoutTemplate title={'Chaos Fault'} breadcrumbs={breadcrumbs}>
+          <ChaosFaultView {...props} />
+        </DefaultLayoutTemplate>
+      </TestWrapper>
+    );
+
+  test('displays error when no fault details', () => {
+    const errorProps = {
+      ...defaultProps,
+      faultDetails: undefined,
+      loading: { getHubFaults: false, getHubExperiment: false }
+    };
+    renderComponent(errorProps);
+    expect(screen.getByText('genericResourceNotFoundError')).toBeInTheDocument();
+  });
+});

chaoscenter/web/src/views/ChaosHub/__tests__/ChaosHub.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { ApolloError } from '@apollo/client';
+import { TestWrapper } from 'utils/testUtils';
+import ChaosHub from '../ChaosHub';
+
+describe('ChaosHubView Component', () => {
+  const mockApolloError = new ApolloError({
+    graphQLErrors: [],
+    clientErrors: [],
+    networkError: null,
+    errorMessage: 'mongo: no documents in result'
+  });
+
+  const mockProps = {
+    categories: {
+      predefinedCategories: new Map(),
+      faultCategories: new Map()
+    },
+    loading: {
+      listPredefinedExperiment: false,
+      listChart: false
+    },
+    listChartError: undefined
+  };
+
+  test('should render without crashing', async () => {
+    render(
+      <TestWrapper>
+        <ChaosHub {...mockProps} />
+      </TestWrapper>
+    );
+    const chaosExperimentsTab = await screen.findByRole('tab', { name: /chaosExperiments/i });
+    expect(chaosExperimentsTab).toBeInTheDocument();
+
+    const chaosExperimentsText = await screen.findByText(/chaosExperiments/i);
+    expect(chaosExperimentsText).toBeInTheDocument();
+  });
+
+  test('should handle HUB_NOT_EXIST_ERROR_MESSAGE', async () => {
+    const errorProps = {
+      ...mockProps,
+      loading: {
+        listChart: false,
+        listPredefinedExperiment: false
+      },
+      listChartError: mockApolloError
+    };
+    render(
+      <TestWrapper>
+        <ChaosHub {...errorProps} />
+      </TestWrapper>
+    );
+    const errorMessageElement = await screen.findByText(/genericResourceNotFoundError/i);
+    expect(errorMessageElement).toBeInTheDocument();
+  });
+
+  test('should switch to chaosFaults tab', async () => {
+    render(
+      <TestWrapper>
+        <ChaosHub {...mockProps} />
+      </TestWrapper>
+    );
+    const tab = await screen.findByText(/chaosFaults/i);
+    fireEvent.click(tab);
+    expect(tab).toHaveClass('bp3-tab');
+  });
+});

chaoscenter/web/src/views/ChaosHubMenu/__tests__/ChoasHubMenu.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import type { MutationFunction, ApolloQueryResult } from '@apollo/client';
+import { TestWrapper } from 'utils/testUtils';
+import type {
+  DeleteChaosHubResponse,
+  DeleteChaosHubRequest,
+  SyncChaosHubResponse,
+  SyncChaosHubRequest,
+  ListChaosHubRequest,
+  ListChaosHubResponse
+} from '@api/core';
+import { AuthType, type ChaosHub } from '@api/entities';
+import DefaultLayoutTemplate from '@components/DefaultLayout';
+import { ChaosHubMenuView } from '../ChaosHubMenu';
+
+describe('ChaosHubMenuView Tests', () => {
+  interface ChaosHubMenuViewProps {
+    chaosHub: ChaosHub;
+    hubID: React.MutableRefObject<string | null>;
+    deleteChaosHubMutation: MutationFunction<DeleteChaosHubResponse, DeleteChaosHubRequest>;
+    syncChaosHubMutation: MutationFunction<SyncChaosHubResponse, SyncChaosHubRequest>;
+    loading: {
+      deleteChaosHub: boolean;
+      syncChaosHub: boolean;
+    };
+    listChaosHubRefetch: (
+      variables?: Partial<ListChaosHubRequest> | undefined
+    ) => Promise<ApolloQueryResult<ListChaosHubResponse>>;
+    isDefault: boolean;
+  }
+
+  const defaultProps: ChaosHubMenuViewProps = {
+    chaosHub: {
+      id: '1',
+      name: 'Test Hub',
+      isDefault: false,
+      repoURL: '',
+      repoBranch: '',
+      projectID: '',
+      authType: AuthType.SSH,
+      lastSyncedAt: '',
+      isAvailable: false,
+      totalFaults: '',
+      totalExperiments: ''
+    },
+    hubID: { current: null },
+    loading: {
+      deleteChaosHub: false,
+      syncChaosHub: false
+    },
+    deleteChaosHubMutation: jest.fn(),
+    syncChaosHubMutation: jest.fn(),
+    listChaosHubRefetch: jest.fn(),
+    isDefault: false
+  };
+
+  const renderComponent = (props = {}) =>
+    render(
+      <TestWrapper>
+        <DefaultLayoutTemplate breadcrumbs={[]} title={undefined}>
+          <ChaosHubMenuView {...defaultProps} {...props} />
+        </DefaultLayoutTemplate>
+      </TestWrapper>
+    );
+
+  test('does not render edit and delete options for default hub', () => {
+    renderComponent({ isDefault: true });
+    expect(screen.queryByText('menuItems.editHub')).not.toBeInTheDocument();
+    expect(screen.queryByText('menuItems.deleteHub')).not.toBeInTheDocument();
+  });
+});