chore: improve unit test (#525)

containers/ClusterForms/shared/__tests__/ClusterRunning.test.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 
 import * as reduxHooks from '../../../../redux/store';
 import { getClusters } from '../../../../redux/thunks/api.thunk';
 import { ManagementCluster } from '../../../../types/provision';
 import { InstallationType } from '../../../../types/redux';
 import ClusterRunning from '../ClusterRunning';
 import { mockClusterManagement } from '../../../../tests/mocks/mockClusterManagement';
+import customRender from '../../../../tests/setup';
 
 // Mock the redux hooks
 jest.mock('@/redux/store', () => ({
@@ -19,31 +20,6 @@ jest.mock('@/redux/thunks/api.thunk', () => ({
   getClusters: jest.fn(),
 }));
 
-// Mock the components
-jest.mock('@/components/ClusterReady/ClusterReady', () => ({
-  __esModule: true,
-  default: jest.fn(({ clusterName, domainName, cloudProvider, kbotPassword }) => (
-    <div data-testid="cluster-ready">
-      <div data-testid="cluster-name">{clusterName}</div>
-      <div data-testid="domain-name">{domainName}</div>
-      <div data-testid="cloud-provider">{cloudProvider}</div>
-      <div data-testid="kbot-password">{kbotPassword}</div>
-    </div>
-  )),
-}));
-
-jest.mock('@/components/ClusterProReady/ClusterProReady', () => ({
-  __esModule: true,
-  default: jest.fn(({ clusterName, domainName, cloudProvider, kbotPassword }) => (
-    <div data-testid="cluster-pro-ready">
-      <div data-testid="cluster-name">{clusterName}</div>
-      <div data-testid="domain-name">{domainName}</div>
-      <div data-testid="cloud-provider">{cloudProvider}</div>
-      <div data-testid="kbot-password">{kbotPassword}</div>
-    </div>
-  )),
-}));
-
 describe('ClusterRunning', () => {
   const mockDispatch = jest.fn();
 
@@ -56,7 +32,7 @@ describe('ClusterRunning', () => {
   });
 
   it('dispatches getClusters on mount', () => {
-    render(<ClusterRunning />);
+    customRender(<ClusterRunning />);
     expect(mockDispatch).toHaveBeenCalledWith(getClusters());
   });
 
@@ -77,14 +53,12 @@ describe('ClusterRunning', () => {
       managementCluster: mockManagementCluster,
     });
 
-    render(<ClusterRunning />);
+    customRender(<ClusterRunning />);
 
-    expect(screen.getByTestId('cluster-ready')).toBeInTheDocument();
-    expect(screen.queryByTestId('cluster-pro-ready')).not.toBeInTheDocument();
-    expect(screen.getByTestId('cluster-name')).toHaveTextContent('test-cluster');
-    expect(screen.getByTestId('domain-name')).toHaveTextContent('test.com');
-    expect(screen.getByTestId('cloud-provider')).toHaveTextContent('aws');
-    expect(screen.getByTestId('kbot-password')).toHaveTextContent('test-password');
+    expect(screen.getByText(`You’re all set to use the Kubefirst platform!`)).toBeInTheDocument();
+    expect(screen.getByText('KBot')).toBeInTheDocument();
+    expect(screen.getByText('Open Argo CD')).toBeInTheDocument();
+    expect(screen.getByText('Copy')).toBeInTheDocument();
   });
 
   it('renders ClusterProReady when skipInstallPro is false', () => {
@@ -103,10 +77,14 @@ describe('ClusterRunning', () => {
       managementCluster: mockManagementCluster,
     });
 
-    render(<ClusterRunning />);
+    customRender(<ClusterRunning />);
 
-    expect(screen.getByTestId('cluster-pro-ready')).toBeInTheDocument();
-    expect(screen.queryByTestId('cluster-ready')).not.toBeInTheDocument();
+    expect(
+      screen.getByText(`Your management cluster test-cluster is now up and running!`),
+    ).toBeInTheDocument();
+    expect(screen.getByText('KBot')).toBeInTheDocument();
+    expect(screen.getByText('Open Kubefirst Pro')).toBeInTheDocument();
+    expect(screen.getByText('Copy')).toBeInTheDocument();
   });
 
   it('handles subdomain in domain name construction', () => {
@@ -126,22 +104,19 @@ describe('ClusterRunning', () => {
       managementCluster: mockManagementCluster,
     });
 
-    render(<ClusterRunning />);
+    customRender(<ClusterRunning />);
 
-    expect(screen.getByTestId('domain-name')).toHaveTextContent('sub.test.com');
+    const argocdLink = screen.getByRole('link', { name: 'Open Argo CD' });
+    expect(argocdLink).toHaveAttribute('href', `https://argocd.sub.test.com/`);
   });
 
   it('handles missing managementCluster data', () => {
     (reduxHooks.useAppSelector as jest.Mock).mockReturnValue({
       managementCluster: null,
     });
 
-    render(<ClusterRunning />);
+    customRender(<ClusterRunning />);
 
-    expect(screen.getByTestId('cluster-pro-ready')).toBeInTheDocument();
-    expect(screen.getByTestId('cluster-name')).toBeInTheDocument();
-    expect(screen.getByTestId('domain-name')).toBeInTheDocument();
-    expect(screen.getByTestId('cloud-provider')).toBeInTheDocument();
-    expect(screen.getByTestId('kbot-password')).toBeInTheDocument();
+    expect(screen.getByText('KBot')).toBeInTheDocument();
   });
 });

tests/setup.tsx

@@ -1,23 +1,18 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider as ThemeProviderMUI } from '@mui/material/styles';
 
+import { muiTheme } from '../theme/muiTheme';
 import { theme } from '../theme';
-import { makeStore } from '../redux/store';
+import { ThemeProvider } from '../app/lib/styled-components';
 
-function setupComponent<T>(Component: () => React.ReactNode, defaultProps?: T) {
-  return async function (testProps?: Partial<T>) {
-    const store = makeStore();
+// Custom render function that includes ThemeProvider
+const customRender = (ui: React.ReactElement) => {
+  return render(
+    <ThemeProviderMUI theme={muiTheme}>
+      <ThemeProvider theme={theme}>{ui}</ThemeProvider>
+    </ThemeProviderMUI>,
+  );
+};
 
-    return render(
-      <ThemeProvider theme={theme}>
-        <Provider store={store}>
-          <Component {...defaultProps} {...testProps} />
-        </Provider>
-      </ThemeProvider>,
-    );
-  };
-}
-
-export default setupComponent;
+export default customRender;