Extend RTL Test Coverage for Components Migrated from Enzyme

Author: cajieh

frontend/packages/console-app/src/components/modals/resource-limits/__tests__/ResourceLimitsModal.spec.tsx

@@ -1,67 +1,104 @@
-import type { ComponentProps } from 'react';
-import { screen, fireEvent } from '@testing-library/react';
-import type { FormikProps, FormikValues } from 'formik';
-import { formikFormProps } from '@console/shared/src/test-utils/formik-props-utils';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Formik } from 'formik';
+import * as yup from 'yup';
+import { limitsValidationSchema } from '@console/dev-console/src/components/import/validation-schema';
+import type { K8sResourceKind } from '@console/internal/module/k8s';
 import { renderWithProviders } from '@console/shared/src/test-utils/unit-test-utils';
+import { getLimitsDataFromResource } from '@console/shared/src/utils/resource-utils';
+import { t } from '../../../../../../../__mocks__/i18next';
 import ResourceLimitsModal from '../ResourceLimitsModal';
 
-jest.mock('@console/dev-console/src/components/import/advanced/ResourceLimitSection', () => ({
-  default: () => null,
-}));
+jest.mock('@patternfly/react-topology', () => ({}));
 
-type ResourceLimitsModalProps = ComponentProps<typeof ResourceLimitsModal>;
+const emptyLimits = {
+  cpu: {
+    request: '',
+    requestUnit: '',
+    defaultRequestUnit: '',
+    limit: '',
+    limitUnit: '',
+    defaultLimitUnit: '',
+  },
+  memory: {
+    request: '',
+    requestUnit: 'Mi',
+    defaultRequestUnit: 'Mi',
+    limit: '',
+    limitUnit: 'Mi',
+    defaultLimitUnit: 'Mi',
+  },
+};
 
-describe('ResourceLimitsModal Form', () => {
-  let formProps: ResourceLimitsModalProps;
-
-  type Props = FormikProps<FormikValues> & ResourceLimitsModalProps;
+const resourceLimitsSchema = yup.object().shape({
+  limits: limitsValidationSchema(t),
+});
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-    formProps = {
-      ...formikFormProps,
-      isSubmitting: false,
-      cancel: jest.fn(),
-      resource: {
-        apiVersion: 'apps/v1',
-        kind: 'Deployment',
+const baseDeployment = (): K8sResourceKind =>
+  ({
+    apiVersion: 'apps/v1',
+    kind: 'Deployment',
+    metadata: {
+      name: 'xyz-deployment',
+    },
+    spec: {
+      selector: {
+        matchLabels: {
+          app: 'hello-openshift',
+        },
+      },
+      replicas: 1,
+      template: {
         metadata: {
-          name: 'xyz-deployment',
+          labels: {
+            app: 'hello-openshift',
+          },
         },
         spec: {
-          selector: {
-            matchLabels: {
-              app: 'hello-openshift',
-            },
-          },
-          replicas: 1,
-          template: {
-            metadata: {
-              labels: {
-                app: 'hello-openshift',
-              },
-            },
-            spec: {
-              containers: [
+          containers: [
+            {
+              name: 'hello-openshift',
+              image: 'openshift/hello-openshift',
+              ports: [
                 {
-                  name: 'hello-openshift',
-                  image: 'openshift/hello-openshift',
-                  ports: [
-                    {
-                      containerPort: 8080,
-                    },
-                  ],
+                  containerPort: 8080,
                 },
               ],
             },
-          },
+          ],
         },
       },
-    } as Props;
+    },
+  } as K8sResourceKind);
+
+describe('ResourceLimitsModal Form', () => {
+  const limitsFormValues = {
+    limits: emptyLimits,
+    container: 'hello-openshift',
+  };
+
+  const renderModalWithFormikContext = (options?: { onSubmit?: jest.Mock; cancel?: jest.Mock }) => {
+    const onSubmit = options?.onSubmit ?? jest.fn();
+    const cancel = options?.cancel ?? jest.fn();
+    return {
+      onSubmit,
+      cancel,
+      ...renderWithProviders(
+        <Formik initialValues={limitsFormValues} onSubmit={onSubmit}>
+          {(formikProps) => (
+            <ResourceLimitsModal {...formikProps} cancel={cancel} isSubmitting={false} />
+          )}
+        </Formik>,
+      ),
+    };
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
 
   it('renders the modal with the correct title and initial elements', () => {
-    renderWithProviders(<ResourceLimitsModal {...formProps} />);
+    renderModalWithFormikContext();
 
     expect(screen.getByText('Edit resource limits')).toBeVisible();
     expect(screen.getByRole('form')).toBeVisible();
@@ -70,16 +107,107 @@ describe('ResourceLimitsModal Form', () => {
   });
 
   it('calls the cancel function when the Cancel button is clicked', async () => {
-    renderWithProviders(<ResourceLimitsModal {...formProps} />);
+    const user = userEvent.setup();
+    const cancel = jest.fn();
+    renderModalWithFormikContext({ cancel });
 
-    await fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-    expect(formProps.cancel).toHaveBeenCalledTimes(1);
+    await user.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(cancel).toHaveBeenCalledTimes(1);
   });
 
-  it('calls the handleSubmit function when the form is submitted', async () => {
-    renderWithProviders(<ResourceLimitsModal {...formProps} />);
+  it('submits the form when Save is clicked', async () => {
+    const user = userEvent.setup();
+    const onSubmit = jest.fn();
+    renderModalWithFormikContext({ onSubmit });
+
+    await user.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('ResourceLimitsModal with validation (resource limits schema)', () => {
+  const renderModalWithFormik = (resource: K8sResourceKind) => {
+    const initialValues = {
+      limits: getLimitsDataFromResource(resource),
+      container: resource.spec.template.spec.containers[0].name,
+    };
+    const onSubmit = jest.fn();
+
+    return {
+      onSubmit,
+      ...renderWithProviders(
+        <Formik
+          initialValues={initialValues}
+          validationSchema={resourceLimitsSchema}
+          onSubmit={onSubmit}
+        >
+          {(formikProps) => (
+            <ResourceLimitsModal {...formikProps} cancel={jest.fn()} isSubmitting={false} />
+          )}
+        </Formik>,
+      ),
+    };
+  };
+
+  it('populates CPU and Memory request/limit fields from the workload resource', () => {
+    const resource = baseDeployment();
+    resource.spec.template.spec.containers[0].resources = {
+      requests: { cpu: '100m', memory: '128Mi' },
+      limits: { cpu: '500m', memory: '256Mi' },
+    };
+
+    renderModalWithFormik(resource);
+
+    expect(screen.getByDisplayValue('100')).toBeVisible();
+    expect(screen.getByDisplayValue('500')).toBeVisible();
+    expect(screen.getByDisplayValue('128')).toBeVisible();
+    expect(screen.getByDisplayValue('256')).toBeVisible();
+  });
+
+  it('disables Save when CPU request is greater than CPU limit', async () => {
+    const user = userEvent.setup();
+    const resource = baseDeployment();
+    resource.spec.template.spec.containers[0].resources = {
+      requests: { cpu: '100m', memory: '128Mi' },
+      limits: { cpu: '200m', memory: '256Mi' },
+    };
+
+    renderModalWithFormik(resource);
+
+    const save = screen.getByRole('button', { name: 'Save' });
+    expect(save).not.toBeDisabled();
+
+    const spinbuttons = screen.getAllByRole('spinbutton');
+    await user.click(spinbuttons[0]);
+    await user.keyboard('{Control>}a{/Control}');
+    await user.keyboard('300');
+
+    await waitFor(() => {
+      expect(save).toBeDisabled();
+    });
+    expect(screen.getByText('CPU request must be less than or equal to limit.')).toBeVisible();
+  });
+
+  it('disables Save when Memory request is greater than Memory limit', async () => {
+    const user = userEvent.setup();
+    const resource = baseDeployment();
+    resource.spec.template.spec.containers[0].resources = {
+      requests: { cpu: '100m', memory: '128Mi' },
+      limits: { cpu: '500m', memory: '256Mi' },
+    };
+
+    renderModalWithFormik(resource);
+
+    const save = screen.getByRole('button', { name: 'Save' });
+    const spinbuttons = screen.getAllByRole('spinbutton');
+
+    await user.click(spinbuttons[2]);
+    await user.keyboard('{Control>}a{/Control}');
+    await user.keyboard('512');
 
-    await fireEvent.submit(screen.getByRole('form'));
-    expect(formProps.handleSubmit).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(save).toBeDisabled();
+    });
+    expect(screen.getByText('Memory request must be less than or equal to limit.')).toBeVisible();
   });
 });

frontend/packages/console-shared/src/components/empty-state/__tests__/empty-state.spec.tsx

@@ -1,33 +1,83 @@
-import { render } from '@testing-library/react';
+import { Button } from '@patternfly/react-core';
+import { screen } from '@testing-library/react';
+import { renderWithProviders } from '@console/shared/src/test-utils/unit-test-utils';
 import { AccessDenied, EmptyBox, ConsoleEmptyState } from '..';
 
+const TestIcon = () => 'TestIcon';
+
 describe('EmptyBox', () => {
-  it('should render without label', () => {
-    const { getByText } = render(<EmptyBox />);
-    getByText('Not found');
+  it('renders default "Not found" message without label', () => {
+    renderWithProviders(<EmptyBox />);
+    expect(screen.getByText('Not found')).toBeVisible();
   });
 
-  it('should render with label', () => {
-    const { getByText } = render(<EmptyBox label="test-label" />);
-    getByText('No test-label found');
+  it('renders message with label when provided', () => {
+    renderWithProviders(<EmptyBox label="resources" />);
+    expect(screen.getByText('No resources found')).toBeVisible();
   });
 });
 
-describe('MsgBox', () => {
-  it('should render title', () => {
-    const { getByText } = render(<ConsoleEmptyState title="test-title" />);
-    getByText('test-title');
+describe('ConsoleEmptyState', () => {
+  it('renders title and children in body', () => {
+    renderWithProviders(
+      <ConsoleEmptyState title="Empty State Title">Body content</ConsoleEmptyState>,
+    );
+    expect(screen.getByText('Empty State Title')).toBeVisible();
+    expect(screen.getByText('Body content')).toBeVisible();
+  });
+
+  it('renders Icon when provided', () => {
+    renderWithProviders(<ConsoleEmptyState Icon={TestIcon} title="With Icon" />);
+    expect(screen.getByText('TestIcon')).toBeVisible();
   });
 
-  it('should render children', () => {
-    const { getByText } = render(<ConsoleEmptyState>test-child</ConsoleEmptyState>);
-    getByText('test-child');
+  it('renders primary and secondary actions when provided', () => {
+    const primaryActions = [<Button key="create">Create Resource</Button>];
+    const secondaryActions = [
+      <Button key="learn" variant="link">
+        Learn more
+      </Button>,
+    ];
+    renderWithProviders(
+      <ConsoleEmptyState
+        title="Test"
+        primaryActions={primaryActions}
+        secondaryActions={secondaryActions}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Create Resource' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Learn more' })).toBeVisible();
+  });
+
+  it('does not render body or footer when not provided', () => {
+    renderWithProviders(<ConsoleEmptyState title="No Body" />);
+    expect(screen.queryByTestId('console-empty-state-body')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('console-empty-state-footer')).not.toBeInTheDocument();
   });
 });
 
 describe('AccessDenied', () => {
-  it('should render message', () => {
-    const { getByText } = render(<AccessDenied>test-message</AccessDenied>);
-    getByText('test-message');
+  it('renders restricted access title and message', () => {
+    renderWithProviders(<AccessDenied />);
+    expect(screen.getByText('Restricted access')).toBeVisible();
+    expect(
+      screen.getByText("You don't have access to this section due to cluster policy"),
+    ).toBeVisible();
+  });
+
+  it('renders error details alert when children provided', () => {
+    renderWithProviders(<AccessDenied>Permission denied for resource xyz</AccessDenied>);
+    expect(screen.getByText('Error details')).toBeVisible();
+    expect(screen.getByText('Permission denied for resource xyz')).toBeVisible();
+  });
+
+  it('does not render error alert when no children provided', () => {
+    renderWithProviders(<AccessDenied />);
+    expect(screen.queryByText('Error details')).not.toBeInTheDocument();
+  });
+
+  it('renders restricted sign icon', () => {
+    renderWithProviders(<AccessDenied />);
+    expect(screen.getByAltText('Restricted access')).toBeVisible();
   });
 });