ATIX-AG · bastian-src · Jan 22, 2025 · Jan 22, 2025 · Jan 22, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,11 +23,11 @@
   "peerDependencies": {
     "@theforeman/vendor": ">= 12.0.1"
   },
-  "dependencies": {},
   "devDependencies": {
     "@babel/core": "^7.23.0",
     "@sheerun/mutationobserver-shim": "^0.3.3",
     "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@theforeman/builder": ">= 12.0.1",
     "@theforeman/eslint-plugin-foreman": ">= 12.0.1",
     "@theforeman/find-foreman": ">= 12.0.1",

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); // check we provide the correct input to Modal
+    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/components/ResourceQuotaEmptyState/index.js b/webpack/components/ResourceQuotaEmptyState/index.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Button, Modal, ModalVariant } from '@patternfly/react-core';
 
 import { translate as __ } from 'foremanReact/common/I18n';
+import { getDocsURL } from 'foremanReact/common/helpers';
 import EmptyStatePattern from 'foremanReact/components/common/EmptyState/EmptyStatePattern';
 
 import ResourceQuotaForm from '../ResourceQuotaForm';
@@ -28,16 +29,32 @@ const ResourceQuotaEmptyState = () => {
       {__('Create resource quota')}
     </Button>
   );
+
+  const 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>
+  );
+  const documentation = {
+    url: getDocsURL('Administering_Project', 'limiting-host-resources'),
+  };
+
   return (
     <div>
       <EmptyStatePattern
         icon="pficon pficon-cluster"
         iconType="pf"
         header={__('Resource Quotas')}
-        description={__(
-          'Resource Quotas help admins to manage hardware resources including CPUs, memory, and disk space among users or usergroups. \n\rDefine a Resource Quota here and apply it to users in order to guarantee a free share of your resources.'
-        )}
+        description={description}
         action={ActionButton}
+        documentation={documentation}
       />
       <Modal
         ouiaId={MODAL_ID_CREATE_RESOURCE_QUOTA}

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>
+  );
+};