Fixes #39731 - replace enzyme tests with RTL for BulkChangePuppetProxy

Author: andreilakatos

webpack/src/Extends/Hosts/BulkActions/BulkChangePuppetProxy/__tests__/index.test.js

@@ -1,69 +1,108 @@
 import React from 'react';
-import { mount } from '@theforeman/test';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 import { openBulkModal } from 'foremanReact/common/BulkModalStateHelper';
 import { ForemanActionsBarContext } from 'foremanReact/components/HostDetails/ActionsBar';
+import { rtlHelpers } from 'foremanReact/common/rtlTestHelpers';
+import API from 'foremanReact/redux/API/API';
 
 import BulkChangePuppetProxyScene from '../index';
-import BulkChangeProxyCommon from '../../BulkChangeProxyCommon';
 
-jest.mock('foremanReact/components/HostDetails/ActionsBar', () => ({
-  ForemanActionsBarContext: jest.requireActual('react').createContext(),
+jest.mock('foremanReact/redux/API', () => ({
+  ...jest.requireActual('foremanReact/redux/API'),
 }));
 
-jest.mock('../../BulkChangeProxyCommon', () => ({
-  __esModule: true,
-  default: jest.fn(() => null),
-}));
+const { renderWithStoreAndI18n } = rtlHelpers;
 
-describe('BulkChangePuppetProxyScene', () => {
-  const fetchBulkParams = jest.fn();
-  const refreshTableData = jest.fn();
-  const contextValue = {
-    selectAllHostsMode: false,
-    selectedCount: 2,
-    selectedResults: [1, 2],
-    fetchBulkParams,
-    refreshTableData,
-  };
+const MODAL_ID = 'bulk-change-puppet-proxy';
+
+const fetchBulkParams = jest.fn(() => 'id ^ (1,2)');
+const refreshTableData = jest.fn();
+
+const defaultContextValue = {
+  selectAllHostsMode: false,
+  selectedCount: 2,
+  selectedResults: [1, 2],
+  fetchBulkParams,
+  refreshTableData,
+};
+
+const smartProxiesResponse = {
+  data: {
+    results: [{ id: 1, name: 'proxy1.example.com' }],
+  },
+};
 
+const renderScene = ({ contextValue = defaultContextValue } = {}) =>
+  renderWithStoreAndI18n(
+    <ForemanActionsBarContext.Provider value={contextValue}>
+      <BulkChangePuppetProxyScene />
+    </ForemanActionsBarContext.Provider>
+  );
+
+describe('BulkChangePuppetProxyScene', () => {
   beforeEach(() => {
+    openBulkModal(MODAL_ID, false);
+    API.get.mockImplementation(() => Promise.resolve(smartProxiesResponse));
+  });
+
+  afterEach(() => {
     jest.clearAllMocks();
-    openBulkModal('bulk-change-puppet-proxy', false);
   });
 
-  it('opens with bulk modal state and passes expected props', () => {
-    openBulkModal('bulk-change-puppet-proxy', true);
-    const wrapper = mount(
-      <ForemanActionsBarContext.Provider value={contextValue}>
-        <BulkChangePuppetProxyScene />
-      </ForemanActionsBarContext.Provider>
-    );
-
-    const componentType =
-      BulkChangeProxyCommon.default || BulkChangeProxyCommon;
-    const props = wrapper.find(componentType).props();
-
-    expect(props).toEqual(
-      expect.objectContaining({
-        isCAProxy: false,
-        fetchBulkParams,
-        selectedCount: 2,
-        selectedResults: [1, 2],
-        selectAllHostsMode: false,
-        isOpen: true,
-        closeModal: expect.any(Function),
-        onSuccess: refreshTableData,
-        selectMessage: 'Select a Puppet Proxy',
-        handleErrorMessage: 'Failed to change Puppet Proxy',
-        changeMessage: 'Change Puppet Proxy',
-        allHostsMessage:
-          'Changing the Puppet proxy will affect {boldCount} selected hosts. Some hosts may already have been associated with the selected Puppet proxy.',
-        someHostsMessage:
-          'Changing the Puppet proxy will affect {boldCount} selected {count, plural, one {host} other {hosts}}. Some hosts may already have been associated with the selected Puppet proxy.',
-      })
-    );
-
-    wrapper.unmount();
+  it('does not show the modal when bulk modal state is closed', () => {
+    renderScene();
+
+    expect(
+      screen.queryByRole('dialog', { name: 'Change Puppet Proxy' })
+    ).not.toBeInTheDocument();
+  });
+
+  it('opens the modal with Puppet Proxy content when bulk modal is open', async () => {
+    openBulkModal(MODAL_ID, true);
+    renderScene();
+
+    expect(
+      await screen.findByRole('dialog', { name: 'Change Puppet Proxy' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Changing the Puppet proxy will affect/)
+    ).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(
+      await screen.findByText('Select a Puppet Proxy')
+    ).toBeInTheDocument();
+    expect(screen.queryByText('Select a Puppet CA Proxy')).not.toBeInTheDocument();
+    expect(screen.queryByText('Change Puppet CA Proxy')).not.toBeInTheDocument();
+    expect(
+      await screen.findByRole('button', { name: 'Change Puppet Proxy' })
+    ).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+  });
+
+  it('shows the all-hosts warning when select all hosts mode is enabled', async () => {
+    openBulkModal(MODAL_ID, true);
+    renderScene({
+      contextValue: { ...defaultContextValue, selectAllHostsMode: true },
+    });
+
+    await screen.findByRole('dialog', { name: 'Change Puppet Proxy' });
+    expect(screen.getByText('All')).toBeInTheDocument();
+  });
+
+  it('closes the modal when Cancel is clicked', async () => {
+    openBulkModal(MODAL_ID, true);
+    renderScene();
+
+    await screen.findByRole('dialog', { name: 'Change Puppet Proxy' });
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('dialog', { name: 'Change Puppet Proxy' })
+      ).not.toBeInTheDocument();
+    });
   });
 });

webpack/test_setup.js

@@ -0,0 +1,5 @@
+import 'foremanJSTestSetup';
+
+jest.mock('foremanReact/redux/API/APISelectors', () =>
+  jest.requireActual('foremanReact/redux/API/APISelectors')
+);