Addresses some object mutation issues and improves testing

2026-01-15 03:40:42 -03:30 · 2020-04-23 11:35:58 -04:00 · 2020-04-23 11:35:58 -04:00 · df1489bcee
commit df1489bcee
parent 4c72ab896a
4 changed files with 194 additions and 103 deletions
--- a/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceList.jsx
@ -85,7 +85,6 @@ function InventorySourceList({ i18n }) {
    await handleDeleteSources();
    setSelected([]);
  };
-
  const canAdd =
    sourceChoicesOptions &&
    Object.prototype.hasOwnProperty.call(sourceChoicesOptions, 'POST');
@ -97,7 +96,7 @@ function InventorySourceList({ i18n }) {
        hasContentLoading={isLoading || isDeleteLoading}
        items={sources}
        itemCount={sourceCount}
-        pluralizedItemName={i18n._(t`Sources`)}
+        pluralizedItemName={i18n._(t`Inventory Sources`)}
        qsConfig={QS_CONFIG}
        renderToolbar={props => (
          <DatalistToolbar
@ -116,15 +115,16 @@ function InventorySourceList({ i18n }) {
                key="delete"
                onDelete={handleDelete}
                itemsToDelete={selected}
-                pluralizedItemName={i18n._(t`Inventory Source`)}
+                pluralizedItemName={i18n._(t`Inventory Sources`)}
              />,
            ]}
          />
        )}
        renderItem={inventorySource => {
+          let label;
          sourceChoices.forEach(([scMatch, scLabel]) => {
            if (inventorySource.source === scMatch) {
-              inventorySource.source = scLabel;
+              label = scLabel;
            }
          });
          return (
@ -132,6 +132,7 @@ function InventorySourceList({ i18n }) {
              key={inventorySource.id}
              source={inventorySource}
              onSelect={() => handleSelect(inventorySource)}
+              label={label}
              detailUrl={`${detailUrl}${inventorySource.id}`}
              isSelected={selected.some(row => row.id === inventorySource.id)}
            />
@ -140,6 +141,7 @@ function InventorySourceList({ i18n }) {
      />
      {deletionError && (
        <AlertModal
+          aria-label={i18n._(t`Delete Error`)}
          isOpen={deletionError}
          variant="error"
          title={i18n._(t`Error!`)}
--- a/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceList.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceList.test.jsx
@ -68,6 +68,7 @@ describe('<InventorySourceList />', () => {
    });
  });
  afterEach(() => {
+    wrapper.unmount();
    jest.clearAllMocks();
  });
  test('should mount properly', async () => {
@ -123,6 +124,97 @@ describe('<InventorySourceList />', () => {
    );
    expect(InventorySourcesAPI.destroy).toHaveBeenCalledWith(1);
  });
+  test('should throw error after deletion failure', async () => {
+    InventorySourcesAPI.destroy.mockRejectedValue(
+      new Error({
+        response: {
+          config: {
+            method: 'delete',
+            url: '/api/v2/inventory_sources/',
+          },
+          data: 'An error occurred',
+          status: 403,
+        },
+      })
+    );
+
+    await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
+
+    await act(async () =>
+      wrapper.find('DataListCheck').prop('onChange')({ id: 1 })
+    );
+    wrapper.update();
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
+    );
+    wrapper.update();
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="confirm delete"]').prop('onClick')()
+    );
+    wrapper.update();
+    expect(wrapper.find("AlertModal[aria-label='Delete Error']").length).toBe(
+      1
+    );
+  });
+  test('displays error after unseccessful read sources fetch', async () => {
+    InventorySourcesAPI.readOptions.mockRejectedValue(
+      new Error({
+        response: {
+          config: {
+            method: 'get',
+            url: '/api/v2/inventories/inventory_sources/',
+          },
+          data: 'An error occurred',
+          status: 403,
+        },
+      })
+    );
+    InventoriesAPI.readSources.mockRejectedValue(
+      new Error({
+        response: {
+          config: {
+            method: 'get',
+            url: '/api/v2/inventories/inventory_sources/',
+          },
+          data: 'An error occurred',
+          status: 403,
+        },
+      })
+    );
+
+    await act(async () => {
+      wrapper = mountWithContexts(<InventorySourceList />);
+    });
+
+    await waitForElement(wrapper, 'ContentError', el => el.length > 0);
+
+    expect(wrapper.find('ContentError').length).toBe(1);
+  });
+
+  test('displays error after unseccessful read options fetch', async () => {
+    InventorySourcesAPI.readOptions.mockRejectedValue(
+      new Error({
+        response: {
+          config: {
+            method: 'options',
+            url: '/api/v2/inventory_sources/',
+          },
+          data: 'An error occurred',
+          status: 403,
+        },
+      })
+    );
+
+    await act(async () => {
+      wrapper = mountWithContexts(<InventorySourceList />);
+    });
+
+    await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
+
+    expect(wrapper.find('ContentError').length).toBe(1);
+  });
 });

 describe('<InventorySourceList /> RBAC testing', () => {
@ -156,12 +248,12 @@ describe('<InventorySourceList /> RBAC testing', () => {
        },
      },
    });
-    let wrapper;
+    let newWrapper;
    const history = createMemoryHistory({
-      initialEntries: ['/inventories/inventory/1/sources'],
+      initialEntries: ['/inventories/inventory/2/sources'],
    });
    await act(async () => {
-      wrapper = mountWithContexts(
+      newWrapper = mountWithContexts(
        <Route path="/inventories/:inventoryType/:id/sources">
          <InventorySourceList />
        </Route>,
@ -171,15 +263,20 @@ describe('<InventorySourceList /> RBAC testing', () => {
              history,
              route: {
                location: { search: '' },
-                match: { params: { id: 1 } },
+                match: { params: { id: 2 } },
              },
            },
          },
        }
      );
    });
-
-    await waitForElement(wrapper, 'InventorySourceList', el => el.length > 0);
-    expect(wrapper.find('ToolbarAddButton').length).toBe(0);
+    await waitForElement(
+      newWrapper,
+      'InventorySourceList',
+      el => el.length > 0
+    );
+    expect(newWrapper.find('ToolbarAddButton').length).toBe(0);
+    newWrapper.unmount();
+    jest.clearAllMocks();
  });
 });
--- a/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceListItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceListItem.jsx
@ -1,4 +1,4 @@
-import React  from 'react';
+import React from 'react';
 import { withI18n } from '@lingui/react';
 import { Link } from 'react-router-dom';
 import { t } from '@lingui/macro';
@ -19,51 +19,49 @@ function InventorySourceListItem({
  onSelect,
  i18n,
  detailUrl,
+  label,
 }) {
-
  return (
-    <>
-      <DataListItem aria-labelledby={`check-action-${source.id}`}>
-        <DataListItemRow>
-          <DataListCheck
-            id={`select-source-${source.id}`}
-            checked={isSelected}
-            onChange={onSelect}
-            aria-labelledby={`check-action-${source.id}`}
-          />
-          <DataListItemCells
-            dataListCells={[
-              <DataListCell aria-label={i18n._(t`name`)} key="name">
-                <span>
-                  <Link to={`${detailUrl}/details`}>
-                    <b>{source.name}</b>
-                  </Link>
-                </span>
-              </DataListCell>,
-              <DataListCell aria-label={i18n._(t`type`)} key="type">
-                {source.source}
-              </DataListCell>,
-            ]}
-          />
-          <DataListAction
-            id="actions"
-            aria-labelledby="actions"
-            aria-label="actions"
-          >
-            {source.summary_fields.user_capabilities.edit && (
-              <Button
-                aria-label={i18n._(t`Edit Source`)}
-                variant="plain"
-                component={Link}
-                to={`${detailUrl}/edit`}
-              >
-                <PencilAltIcon />
-              </Button>
-            )}
-          </DataListAction>
-        </DataListItemRow>
-      </DataListItem>
-    </>
+    <DataListItem aria-labelledby={`check-action-${source.id}`}>
+      <DataListItemRow>
+        <DataListCheck
+          id={`select-source-${source.id}`}
+          checked={isSelected}
+          onChange={onSelect}
+          aria-labelledby={`check-action-${source.id}`}
+        />
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell aria-label={i18n._(t`name`)} key="name">
+              <span>
+                <Link to={`${detailUrl}/details`}>
+                  <b>{source.name}</b>
+                </Link>
+              </span>
+            </DataListCell>,
+            <DataListCell aria-label={i18n._(t`type`)} key="type">
+              {label}
+            </DataListCell>,
+          ]}
+        />
+        <DataListAction
+          id="actions"
+          aria-labelledby="actions"
+          aria-label="actions"
+        >
+          {source.summary_fields.user_capabilities.edit && (
+            <Button
+              aria-label={i18n._(t`Edit Source`)}
+              variant="plain"
+              component={Link}
+              to={`${detailUrl}/edit`}
+            >
+              <PencilAltIcon />
+            </Button>
+          )}
+        </DataListAction>
+      </DataListItemRow>
+    </DataListItem>
  );
 }
 export default withI18n()(InventorySourceListItem);
--- a/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceListItem.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceListItem.test.jsx
@ -1,5 +1,4 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import InventorySourceListItem from './InventorySourceListItem';

@ -10,35 +9,34 @@ const source = {
  summary_fields: { user_capabilities: { start: true, edit: true } },
 };
 describe('<InventorySourceListItem />', () => {
+  let wrapper;
  afterEach(() => {
+    wrapper.unmount();
    jest.clearAllMocks();
  });
-  test('should mount properly', async () => {
-    let wrapper;
+  test('should mount properly', () => {
    const onSelect = jest.fn();
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <InventorySourceListItem
-          source={source}
-          isSelected={false}
-          onSelect={onSelect}
-        />
-      );
-    });
+    wrapper = mountWithContexts(
+      <InventorySourceListItem
+        source={source}
+        isSelected={false}
+        onSelect={onSelect}
+        label="Source Bar"
+      />
+    );
    expect(wrapper.find('InventorySourceListItem').length).toBe(1);
  });
-  test('all buttons and text fields should render properly', async () => {
-    let wrapper;
+
+  test('all buttons and text fields should render properly', () => {
    const onSelect = jest.fn();
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <InventorySourceListItem
-          source={source}
-          isSelected={false}
-          onSelect={onSelect}
-        />
-      );
-    });
+    wrapper = mountWithContexts(
+      <InventorySourceListItem
+        source={source}
+        isSelected={false}
+        onSelect={onSelect}
+        label="Source Bar"
+      />
+    );
    expect(wrapper.find('DataListCheck').length).toBe(1);
    expect(
      wrapper
@ -55,37 +53,33 @@ describe('<InventorySourceListItem />', () => {
    expect(wrapper.find('PencilAltIcon').length).toBe(1);
  });

-  test('item should be checked', async () => {
-    let wrapper;
+  test('item should be checked', () => {
    const onSelect = jest.fn();
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <InventorySourceListItem
-          source={source}
-          isSelected
-          onSelect={onSelect}
-        />
-      );
-    });
+    wrapper = mountWithContexts(
+      <InventorySourceListItem
+        source={source}
+        isSelected
+        onSelect={onSelect}
+        label="Source Bar"
+      />
+    );
    expect(wrapper.find('DataListCheck').length).toBe(1);
    expect(wrapper.find('DataListCheck').prop('checked')).toBe(true);
  });

-  test(' should render edit buttons', async () => {
-    let wrapper;
+  test(' should render edit buttons', () => {
    const onSelect = jest.fn();
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <InventorySourceListItem
-          source={{
-            ...source,
-            summary_fields: { user_capabilities: { edit: false, start: true } },
-          }}
-          isSelected={false}
-          onSelect={onSelect}
-        />
-      );
-    });
+    wrapper = mountWithContexts(
+      <InventorySourceListItem
+        source={{
+          ...source,
+          summary_fields: { user_capabilities: { edit: false, start: true } },
+        }}
+        isSelected={false}
+        onSelect={onSelect}
+        label="Source Bar"
+      />
+    );
    expect(wrapper.find('Button[aria-label="Edit Source"]').length).toBe(0);
  });
 });