Fixes #39498: Replace enzyme test in ForemanForm with RTL

webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/ForemanForm.test.js

@@ -1,51 +1,79 @@
-import {
-  testComponentSnapshotsWithFixtures,
-  testSelectorsSnapshotWithFixtures,
-} from 'foremanReact/common/testHelpers';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import * as Yup from 'yup';
 
 import { prepareErrors } from '../../../../redux/actions/common/forms';
-import { isInitialValid } from './ForemanForm'
+import { isInitialValid } from './ForemanForm';
 import {
   initialValues,
   FormComponent,
   validationSchema,
 } from './ForemanForm.fixtures';
 
-const fixtures = {
-  'render foreman form with fields': {
-    submitForm: () => {},
-    initValues: initialValues,
-    schema: validationSchema,
-    onCancel: () => {},
-  },
-};
+describe('ForemanForm', () => {
+  it('renders the form fields with their initial values', () => {
+    const { container } = render(
+      <FormComponent
+        submitForm={() => {}}
+        initValues={initialValues}
+        schema={validationSchema}
+        onCancel={() => {}}
+      />
+    );
 
-const basicSchema = Yup.object().shape({
-  name: Yup.string().required('is required'),
+    // a field per child, populated from the initial values
+    expect(container.querySelector('input[name="name"]')).toHaveValue(
+      'Charles'
+    );
+    expect(container.querySelector('input[name="surname"]')).toHaveValue(
+      'Lindbergh'
+    );
+    // the required field's label carries an asterisk
+    expect(screen.getByText('name *')).toBeInTheDocument();
+    expect(screen.getByText('surname')).toBeInTheDocument();
+    // the form renders submit and cancel actions
+    expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+  });
 });
 
-const helperFixtures = {
-  'should format errors': () =>
-    prepareErrors({
+describe('Foreman form helper functions', () => {
+  const basicSchema = Yup.object().shape({
+    name: Yup.string().required('is required'),
+  });
+
+  it('formats errors', () => {
+    expect(
+      prepareErrors({
+        errors: {
+          name: ['is already taken', 'is too short'],
+          email: ['is not a valid format'],
+          phone: ['is too long'],
+        },
+      })
+    ).toEqual({
+      _error: undefined,
       errors: {
         name: ['is already taken', 'is too short'],
         email: ['is not a valid format'],
         phone: ['is too long'],
       },
-    }),
-  'should recognize valid initial values': () =>
-    isInitialValid({
-      validationSchema: basicSchema,
-      initialValues: { name: 'George' },
-    }),
-  'should recognize invalid initial values': () =>
-    isInitialValid({ validationSchema: basicSchema, initialValues: {} }),
-};
+    });
+  });
 
-describe('ForemanForm', () => {
-  testComponentSnapshotsWithFixtures(FormComponent, fixtures);
-});
+  it('recognizes valid initial values', () => {
+    expect(
+      isInitialValid({
+        validationSchema: basicSchema,
+        initialValues: { name: 'George' },
+      })
+    ).toBe(true);
+  });
 
-describe('Foreman form helper functions', () =>
-  testSelectorsSnapshotWithFixtures(helperFixtures));
+  it('recognizes invalid initial values', () => {
+    expect(
+      isInitialValid({ validationSchema: basicSchema, initialValues: {} })
+    ).toBe(false);
+  });
+});

webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/integration.test.js

@@ -1,8 +1,12 @@
 import React from 'react';
-import IntegrationTestHelper from 'foremanReact/common/IntegrationTestHelper';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { applyMiddleware, combineReducers, createStore } from 'redux';
+import thunk from 'redux-thunk';
 
 import { submitForm } from '../../../../redux/actions/common/forms';
-
 import { initialValues, ConnectedFormComponent } from './ForemanForm.fixtures';
 import { APIMiddleware } from '../../../../redux/API';
 import APIHelper from '../../../../redux/API/API';
@@ -15,9 +19,6 @@ const baseErrors = [
   'does not have enough vitamins',
   'does not have enough proteins',
 ];
-const reducers = {
-  apiReducer,
-};
 const severity = 'warning';
 const errorResponse = {
   response: {
@@ -33,12 +34,13 @@ const errorResponse = {
     },
   },
 };
+
 const handleSubmit = (values, actions) =>
   submitForm({
     url: '/test/form',
     values,
     item: 'Test',
-    message: __('Form was successfully created.'),
+    message: 'Form was successfully created.',
     actions,
   });
 
@@ -48,24 +50,34 @@ const props = {
   initValues: initialValues,
 };
 
-describe('ForemanForm integration test', () => {
-  it('should render form with errors', async () => {
-    APIHelper.post.mockRejectedValue(errorResponse);
+const renderForm = () => {
+  const store = createStore(
+    combineReducers({ apiReducer }),
+    applyMiddleware(thunk, APIMiddleware)
+  );
 
-    const testHelper = new IntegrationTestHelper(reducers, [APIMiddleware]);
-
-    const component = testHelper.mount(<ConnectedFormComponent {...props} />);
+  return render(
+    <Provider store={store}>
+      <ConnectedFormComponent {...props} />
+    </Provider>
+  );
+};
 
-    const submitBtn = component.find('Button[bsStyle="primary"]');
-    submitBtn.simulate('submit');
-    await IntegrationTestHelper.flushAllPromises();
-    component.update();
+describe('ForemanForm integration test', () => {
+  it('renders a warning alert with the base errors when submission fails', async () => {
+    APIHelper.post.mockRejectedValue(errorResponse);
 
-    const formError = component.find('Form').prop('error');
+    renderForm();
 
-    expect(formError.errorMsgs).toBe(baseErrors);
-    expect(formError.severity).toBe(severity);
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
 
-    expect(component.find('Alert')).toMatchSnapshot();
+    // the base errors are surfaced in a warning alert
+    expect(
+      await screen.findByText('does not have enough vitamins')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('does not have enough proteins')
+    ).toBeInTheDocument();
+    expect(screen.getByText('Warning!')).toBeInTheDocument();
   });
 });