test: Add tests for remove hosts from group modal (#2126)

src/components/InventoryGroups/Modals/RemoveHostsFromGroupModal.js

@@ -18,13 +18,13 @@ const schema = (hosts) => {
         name: 'warning-message',
         label:
           hostsInGroup.length === 1 ? (
-            <Text>
+            <Text data-testid="desc">
               <strong>{hostsInGroup[0].display_name}</strong> will no longer be
               part of <strong>{groupName}</strong> and its configuration will be
               impacted.
             </Text>
           ) : (
-            <Text>
+            <Text data-testid="desc">
               <strong>{hostsInGroup.length}</strong> systems will no longer be
               part of <strong>{groupName}</strong> and their configuration will
               be impacted.

src/components/InventoryGroups/Modals/__tests__/RemoveHostsFromGroupModal.test.js

@@ -0,0 +1,137 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { removeHostsFromGroup } from '../../utils/api';
+import RemoveHostsFromGroupModal from '../RemoveHostsFromGroupModal';
+
+jest.mock('react-redux');
+jest.mock('../../utils/api');
+
+describe('RemoveHostsFromGroupModal', () => {
+  const setIsModalOpen = jest.fn();
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('shows correct text, single group', () => {
+    render(
+      <RemoveHostsFromGroupModal
+        isModalOpen
+        setIsModalOpen={setIsModalOpen}
+        modalState={[{ display_name: 'host-1', groups: [{ name: 'group-1' }] }]}
+      />
+    );
+
+    expect(screen.getByTestId('desc')).toHaveTextContent(
+      'host-1 will no longer be part of group-1 and its configuration will be impacted.'
+    );
+  });
+
+  it('shows correct text, more groups', () => {
+    render(
+      <RemoveHostsFromGroupModal
+        isModalOpen
+        setIsModalOpen={setIsModalOpen}
+        modalState={[
+          { display_name: 'host-1', groups: [{ name: 'group-1' }] },
+          { display_name: 'host-2', groups: [{ name: 'group-1' }] },
+        ]}
+      />
+    );
+
+    expect(screen.getByTestId('desc')).toHaveTextContent(
+      '2 systems will no longer be part of group-1 and their configuration will be impacted.'
+    );
+  });
+
+  it('can close the modal', async () => {
+    render(
+      <RemoveHostsFromGroupModal
+        isModalOpen
+        setIsModalOpen={setIsModalOpen}
+        modalState={[{ display_name: 'host-1', groups: [{ name: 'group-1' }] }]}
+      />
+    );
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: /close/i,
+      })
+    );
+
+    expect(setIsModalOpen).toBeCalled();
+  });
+
+  it('can cancel the deletion', async () => {
+    render(
+      <RemoveHostsFromGroupModal
+        isModalOpen
+        setIsModalOpen={setIsModalOpen}
+        modalState={[{ display_name: 'host-1', groups: [{ name: 'group-1' }] }]}
+      />
+    );
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: /cancel/i,
+      })
+    );
+
+    expect(setIsModalOpen).toBeCalled();
+  });
+
+  it('can remove single group', async () => {
+    render(
+      <RemoveHostsFromGroupModal
+        isModalOpen
+        setIsModalOpen={setIsModalOpen}
+        modalState={[
+          {
+            display_name: 'host-1',
+            id: 'h1',
+            groups: [{ name: 'group-1', id: 'g1' }],
+          },
+        ]}
+      />
+    );
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: /remove/i,
+      })
+    );
+
+    expect(removeHostsFromGroup).toBeCalledWith('g1', ['h1']);
+  });
+
+  it('can remove more groups', async () => {
+    render(
+      <RemoveHostsFromGroupModal
+        isModalOpen
+        setIsModalOpen={setIsModalOpen}
+        modalState={[
+          {
+            display_name: 'host-1',
+            id: 'h1',
+            groups: [{ name: 'group-1', id: 'g1' }],
+          },
+          {
+            display_name: 'host-2',
+            id: 'h2',
+            groups: [{ name: 'group-1', id: 'g1' }],
+          },
+        ]}
+      />
+    );
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: /remove/i,
+      })
+    );
+
+    expect(removeHostsFromGroup).toBeCalledWith('g1', ['h1', 'h2']);
+  });
+});