From ad4ecca3815ddb119e349b3a53bbcae1e594c548 Mon Sep 17 00:00:00 2001 From: Magnim BATALE <82499435+Freedisch@users.noreply.github.com> Date: Wed, 22 Nov 2023 13:07:13 +0100 Subject: [PATCH] feat: Test cases for chaosHub views (#4249) * added test cases for chaosHub views Signed-off-by: freedisch * fix failing tests Signed-off-by: freedisch * Update chaoscenter/web/src/views/ChaosFault/__tests__/ChaosFault.test.tsx Co-authored-by: Sayan Mondal Signed-off-by: Magnim BATALE <82499435+Freedisch@users.noreply.github.com> * updated tests to use TestWrapper Signed-off-by: freedisch --------- Signed-off-by: freedisch Signed-off-by: Magnim BATALE <82499435+Freedisch@users.noreply.github.com> Co-authored-by: Sayan Mondal --- .../ChaosFault/__tests__/ChaosFault.test.tsx | 67 +++++++++++++++++ .../ChaosHub/__tests__/ChaosHub.test.tsx | 69 +++++++++++++++++ .../__tests__/ChoasHubMenu.test.tsx | 74 +++++++++++++++++++ 3 files changed, 210 insertions(+) create mode 100644 chaoscenter/web/src/views/ChaosFault/__tests__/ChaosFault.test.tsx create mode 100644 chaoscenter/web/src/views/ChaosHub/__tests__/ChaosHub.test.tsx create mode 100644 chaoscenter/web/src/views/ChaosHubMenu/__tests__/ChoasHubMenu.test.tsx diff --git a/chaoscenter/web/src/views/ChaosFault/__tests__/ChaosFault.test.tsx b/chaoscenter/web/src/views/ChaosFault/__tests__/ChaosFault.test.tsx new file mode 100644 index 00000000000..8244004f0f7 --- /dev/null +++ b/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('', () => { + interface ChaosFaultViewProps { + faultDetails: FaultDetails | undefined; + chartName: string; + loading: { + getHubFaults: boolean; + getHubExperiment: boolean; + }; + experiments: Array; + } + 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( + + + + + + ); + + test('displays error when no fault details', () => { + const errorProps = { + ...defaultProps, + faultDetails: undefined, + loading: { getHubFaults: false, getHubExperiment: false } + }; + renderComponent(errorProps); + expect(screen.getByText('genericResourceNotFoundError')).toBeInTheDocument(); + }); +}); diff --git a/chaoscenter/web/src/views/ChaosHub/__tests__/ChaosHub.test.tsx b/chaoscenter/web/src/views/ChaosHub/__tests__/ChaosHub.test.tsx new file mode 100644 index 00000000000..4357a3b3b4d --- /dev/null +++ b/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( + + + + ); + 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( + + + + ); + const errorMessageElement = await screen.findByText(/genericResourceNotFoundError/i); + expect(errorMessageElement).toBeInTheDocument(); + }); + + test('should switch to chaosFaults tab', async () => { + render( + + + + ); + const tab = await screen.findByText(/chaosFaults/i); + fireEvent.click(tab); + expect(tab).toHaveClass('bp3-tab'); + }); +}); diff --git a/chaoscenter/web/src/views/ChaosHubMenu/__tests__/ChoasHubMenu.test.tsx b/chaoscenter/web/src/views/ChaosHubMenu/__tests__/ChoasHubMenu.test.tsx new file mode 100644 index 00000000000..f27b86d08c2 --- /dev/null +++ b/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; + deleteChaosHubMutation: MutationFunction; + syncChaosHubMutation: MutationFunction; + loading: { + deleteChaosHub: boolean; + syncChaosHub: boolean; + }; + listChaosHubRefetch: ( + variables?: Partial | undefined + ) => Promise>; + 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( + + + + + + ); + + 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(); + }); +});