Add tests for ResourceQuotaEmptyState component

* Add snapshot test * Add functional test for Modal opening mechanism * Add test_helper (cc foreman_ansible) for mocking React/Redux contexts.
ATIX-AG · Jan 27, 2025 · b6c62ce · b6c62ce
1 parent e4ce684
commit b6c62ce
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 0 deletions.
diff --git a/webpack/components/ResourceQuotaEmptyState/__test__/ResourceQuotaEmptyState.test.js b/webpack/components/ResourceQuotaEmptyState/__test__/ResourceQuotaEmptyState.test.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+
+import { mount, testComponentSnapshotsWithFixtures } from '@theforeman/test';
+// Notice: (not) importing Modal affects the snapshot test since it fills
+// the components data dynamically in snapshots as soon as it can find the component.
+import { Modal } from '@patternfly/react-core';
+
+import { withMockedProvider, withRedux } from '../../../test_helper';
+import ResourceQuotaForm from '../../ResourceQuotaForm';
+import ResourceQuotaEmptyState from '../index';
+
+const TestComponent = withRedux(withMockedProvider(ResourceQuotaEmptyState));
+
+describe('ResourceQuotaEmptyState', () => {
+  testComponentSnapshotsWithFixtures(ResourceQuotaEmptyState, {
+    'should render': {}, // component has no props
+  });
+
+  test('opens the modal on clicking "Create resource quota" button', () => {
+    const wrapper = mount(<TestComponent />);
+
+    expect(wrapper.find(Modal).prop('isOpen')).toBe(false);
+    expect(wrapper.find(ResourceQuotaForm).exists()).toBe(false);
+
+    wrapper
+      .find('button')
+      .filterWhere(button => button.text() === 'Create resource quota')
+      .simulate('click');
+    wrapper.update();
+
+    expect(wrapper.find(Modal).prop('isOpen')).toBe(true);
+    expect(wrapper.find(ResourceQuotaForm).exists()).toBe(true);
+  });
+});
diff --git a/...nents/ResourceQuotaEmptyState/__test__/__snapshots__/ResourceQuotaEmptyState.test.js.snap b/...nents/ResourceQuotaEmptyState/__test__/__snapshots__/ResourceQuotaEmptyState.test.js.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResourceQuotaEmptyState should render 1`] = `
+<div>
+  <EmptyStatePattern
+    action={
+      <Button
+        id="foreman-resource-quota-welcome-create-modal-button"
+        onClick={[Function]}
+        variant="primary"
+      >
+        Create resource quota
+      </Button>
+    }
+    description={
+      <span>
+        Resource Quotas help admins to manage resources including CPUs, memory, and disk space among users or user groups.
+        <br />
+        Define a Resource Quota here and apply it to users to guarantee a fair share of your resources.
+        <br />
+      </span>
+    }
+    documentation={
+      Object {
+        "url": "/links/docs/Administering_Project?chapter=limiting-host-resources",
+      }
+    }
+    header="Resource Quotas"
+    icon="pficon pficon-cluster"
+    iconType="pf"
+    secondaryActions={Array []}
+  />
+  <Modal
+    actions={Array []}
+    appendTo={<body />}
+    aria-describedby=""
+    aria-label=""
+    aria-labelledby=""
+    className=""
+    hasNoBodyWrapper={false}
+    isOpen={false}
+    onClose={[Function]}
+    ouiaId="foreman-resource-quota-create-modal"
+    ouiaSafe={true}
+    showClose={true}
+    title="Create resource quota"
+    titleIconVariant={null}
+    titleLabel=""
+    variant="small"
+  >
+    <ResourceQuotaForm
+      initialProperties={
+        Object {
+          "cpu_cores": null,
+          "description": "",
+          "disk_gb": null,
+          "memory_mb": null,
+          "name": "",
+        }
+      }
+      initialStatus={
+        Object {
+          "missing_hosts": null,
+          "number_of_hosts": null,
+          "number_of_usergroups": null,
+          "number_of_users": null,
+          "utilization": Object {
+            "cpu_cores": null,
+            "disk_gb": null,
+            "memory_mb": null,
+          },
+        }
+      }
+      isNewQuota={true}
+      onSubmit={[Function]}
+      quotaChangesCallback={null}
+    />
+  </Modal>
+</div>
+`;
diff --git a/webpack/test_helper.js b/webpack/test_helper.js
@@ -0,0 +1,49 @@
+/* Credits: https://github.com/theforeman/foreman_ansible/blob/master/webpack/testHelper.js */
+import React, { useState } from 'react';
+import { applyMiddleware, createStore, compose, combineReducers } from 'redux';
+import { reducers as apiReducer, APIMiddleware } from 'foremanReact/redux/API';
+import { Provider } from 'react-redux';
+import { MockedProvider } from '@apollo/react-testing';
+import thunk from 'redux-thunk';
+
+import ConfirmModal, {
+  reducers as confirmModalReducers,
+} from 'foremanReact/components/ConfirmModal';
+import { getForemanContext } from 'foremanReact/Root/Context/ForemanContext';
+
+const reducers = combineReducers({ ...apiReducer, ...confirmModalReducers });
+export const generateStore = () =>
+  createStore(reducers, compose(applyMiddleware(thunk, APIMiddleware)));
+
+// use to resolve async mock requests for apollo MockedProvider
+export const tick = () => new Promise(resolve => setTimeout(resolve, 0));
+
+export const withRedux = Component => props => (
+  <Provider store={generateStore()}>
+    <Component {...props} />
+    <ConfirmModal />
+  </Provider>
+);
+
+export const withMockedProvider = Component => props => {
+  const [context, setContext] = useState({
+    metadata: {
+      UISettings: {
+        perPage: 20,
+      },
+    },
+  });
+  const contextData = { context, setContext };
+  const ForemanContext = getForemanContext(contextData);
+
+  // eslint-disable-next-line react/prop-types
+  const { mocks, ...rest } = props;
+
+  return (
+    <ForemanContext.Provider value={contextData}>
+      <MockedProvider mocks={mocks}>
+        <Component {...rest} />
+      </MockedProvider>
+    </ForemanContext.Provider>
+  );
+};