From e315ce1040f80b0f9749b56dc4e2ffa65d689320 Mon Sep 17 00:00:00 2001 From: Konstantinos Familonidis Date: Tue, 30 Jun 2026 17:28:04 +0300 Subject: [PATCH] Fixes #39498: Replace enzyme test in ForemanForm with RTL --- .../forms/ForemanForm/ForemanForm.test.js | 92 +++++++---- .../__snapshots__/ForemanForm.test.js.snap | 145 ------------------ .../__snapshots__/integration.test.js.snap | 47 ------ .../forms/ForemanForm/integration.test.js | 52 ++++--- 4 files changed, 92 insertions(+), 244 deletions(-) delete mode 100644 webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/__snapshots__/ForemanForm.test.js.snap delete mode 100644 webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/__snapshots__/integration.test.js.snap diff --git a/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/ForemanForm.test.js b/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/ForemanForm.test.js index 9ffe103292..0ff98b965d 100644 --- a/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/ForemanForm.test.js +++ b/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( + {}} + 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); + }); +}); diff --git a/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/__snapshots__/ForemanForm.test.js.snap b/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/__snapshots__/ForemanForm.test.js.snap deleted file mode 100644 index 8cdefd7ac4..0000000000 --- a/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/__snapshots__/ForemanForm.test.js.snap +++ /dev/null @@ -1,145 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Foreman form helper functions should format errors 1`] = ` -Object { - "_error": undefined, - "errors": Object { - "email": Array [ - "is not a valid format", - ], - "name": Array [ - "is already taken", - "is too short", - ], - "phone": Array [ - "is too long", - ], - }, -} -`; - -exports[`Foreman form helper functions should recognize invalid initial values 1`] = `false`; - -exports[`Foreman form helper functions should recognize valid initial values 1`] = `true`; - -exports[`ForemanForm render foreman form with fields 1`] = ` - - - - -`; diff --git a/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/__snapshots__/integration.test.js.snap b/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/__snapshots__/integration.test.js.snap deleted file mode 100644 index 0151b794b9..0000000000 --- a/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/__snapshots__/integration.test.js.snap +++ /dev/null @@ -1,47 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ForemanForm integration test should render form with errors 1`] = ` - -
- - - - - - - - Warning! - -
  • - does not have enough vitamins -
    • -
  • - does not have enough proteins -
    • -     -     -
    -     -`; diff --git a/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/integration.test.js b/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/integration.test.js index 0cb262d0b4..867543f726 100644 --- a/webpack/assets/javascripts/react_app/components/common/forms/ForemanForm/integration.test.js +++ b/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(); + return render( + + + + ); +}; - 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(); }); });