Fix tests failing due to rendering issues

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskBlue/VeteranInformation.jsx

@@ -6,7 +6,7 @@ import { isValid, format } from 'date-fns';
 import { genderLabels } from '~/platform/static-data/labels';
 import { selectProfile } from '~/platform/user/selectors';
 
-import { CONTACTS } from '@department-of-veterans-affairs/component-library';
+import { CONTACTS } from '@department-of-veterans-affairs/component-library/contacts';
 import {
   FORMAT_READABLE_DATE_FNS,
   FORMAT_YMD_DATE_FNS_CONCAT,

src/applications/_mock-form-ae-design-patterns/shared/components/GetFormHelp.jsx

@@ -1,4 +1,4 @@
-import { CONTACTS } from '@department-of-veterans-affairs/component-library';
+import { CONTACTS } from '@department-of-veterans-affairs/component-library/contacts';
 import React from 'react';
 
 export const GetFormHelp = () => {

src/platform/forms-system/test/js/components/EditContactInfo.unit.spec.jsx

@@ -46,7 +46,7 @@ describe('EditContactInfo', () => {
         container,
       );
       expect(phoneNumber).to.exist;
-      expect(phoneNumber.getAttribute('required')).to.be.true;
+      expect(phoneNumber.getAttribute('required')).to.equal('true');
       const extension = $('va-text-input[label^="Extension"]', container);
       expect(extension).to.exist;
 

src/platform/forms-system/test/js/definitions/address.unit.spec.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
+import { render, waitFor, fireEvent } from '@testing-library/react';
 
 import {
   DefinitionTester,
@@ -139,18 +140,33 @@ describe('Schemaform definition address', () => {
     form.unmount();
   }).timeout(4000);
 
-  it('should require state for non-required addresses with other info', () => {
+  it('should require state for non-required addresses with other info', async () => {
     const s = schema(addressSchema, false);
     const uis = uiSchema();
-    const form = mount(<DefinitionTester schema={s} uiSchema={uis} />);
+    const form = render(<DefinitionTester schema={s} uiSchema={uis} />);
 
-    fillData(form, 'input#root_street', '123 st');
-    fillData(form, 'input#root_city', 'Northampton');
-    fillData(form, 'input#root_postalCode', '12345');
+    const streetInput = form.container.querySelector('input#root_street');
+    fireEvent.change(streetInput, { target: { value: '123 st' } });
 
-    form.find('form').simulate('submit');
+    const cityInput = form.container.querySelector('input#root_city');
+    fireEvent.change(cityInput, { target: { value: 'Northampton' } });
 
-    expect(form.find('.usa-input-error-message').length).to.equal(1);
-    form.unmount();
-  }).timeout(4000);
+    const postalCodeInput = form.container.querySelector(
+      'input#root_postalCode',
+    );
+    fireEvent.change(postalCodeInput, { target: { value: '12345' } });
+
+    const submitButton = form.getByRole('button', { name: 'Submit' });
+    const mouseClick = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    });
+    fireEvent(submitButton, mouseClick);
+
+    await waitFor(() => {
+      form.getByText(
+        'Please enter a state or province, or remove other address information.',
+      );
+    });
+  });
 });

src/platform/forms-system/test/js/definitions/bankAccount.unit.spec.jsx

@@ -2,11 +2,11 @@
 import { findDOMNode } from 'react-dom';
 import { expect } from 'chai';
 import ReactTestUtils from 'react-dom/test-utils';
-import Form from '@department-of-veterans-affairs/react-jsonschema-form';
+import { render, waitFor, fireEvent } from '@testing-library/react';
 
 import { DefinitionTester } from 'platform/testing/unit/schemaform-utils.jsx';
-import uiSchema from '../../../src/js/definitions/bankAccount';
 import definitions from 'vets-json-schema/dist/definitions.json';
+import uiSchema from '../../../src/js/definitions/bankAccount';
 
 describe('Schemaform definition bankAccount', () => {
   it('should render bankAccount', () => {
@@ -25,24 +25,25 @@
     expect(inputs[2].id).to.equal('root_accountNumber');
     expect(inputs[3].id).to.equal('root_routingNumber');
   });
-  it('should render bankAccount with routing number error', () => {
-    const form = ReactTestUtils.renderIntoDocument(
+  it('should render bankAccount with routing number error', async () => {
+    const form = render(
       <DefinitionTester schema={definitions.bankAccount} uiSchema={uiSchema} />,
     );
 
-    const formDOM = findDOMNode(form);
-    const find = formDOM.querySelector.bind(formDOM);
-    ReactTestUtils.Simulate.change(find('#root_routingNumber'), {
-      target: {
-        value: '123456789',
-      },
-    });
+    const input = form.container.querySelector('#root_routingNumber');
+    fireEvent.change(input, { target: { value: '123456789' } });
+    const submitButton = form.getByRole('button', { name: 'Submit' });
 
-    ReactTestUtils.findRenderedComponentWithType(form, Form).onSubmit({
-      preventDefault: f => f,
+    const mouseClick = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    });
+    fireEvent(submitButton, mouseClick);
+    await waitFor(() => {
+      const error = form.container.querySelector('.usa-input-error-message');
+      expect(error.textContent).to.equal(
+        `Error ${uiSchema.routingNumber['ui:errorMessages'].pattern}`,
+      );
     });
-    expect(find('.usa-input-error-message').textContent).to.equal(
-      `Error ${uiSchema.routingNumber['ui:errorMessages'].pattern}`,
-    );
   });
 });

src/platform/forms-system/test/js/definitions/date.unit.spec.jsx

@@ -2,11 +2,11 @@
 import { findDOMNode } from 'react-dom';
 import { expect } from 'chai';
 import ReactTestUtils from 'react-dom/test-utils';
-import Form from '@department-of-veterans-affairs/react-jsonschema-form';
+import { render, waitFor, fireEvent } from '@testing-library/react';
 
 import { DefinitionTester } from 'platform/testing/unit/schemaform-utils.jsx';
-import uiSchema from '../../../src/js/definitions/date';
 import definitions from 'vets-json-schema/dist/definitions.json';
+import uiSchema from '../../../src/js/definitions/date';
 
 describe('Schemaform definition date', () => {
   it('should render date', () => {
@@ -23,24 +23,28 @@
   });
   it('should render invalid date error', () => {
     const dateUISchema = uiSchema();
-    const form = ReactTestUtils.renderIntoDocument(
+    const form = render(
       <DefinitionTester schema={definitions.date} uiSchema={dateUISchema} />,
     );
 
-    const formDOM = findDOMNode(form);
-    const find = formDOM.querySelector.bind(formDOM);
-    ReactTestUtils.Simulate.change(find('input'), {
-      target: {
-        value: 'asfd',
-      },
-    });
-    ReactTestUtils.findRenderedComponentWithType(form, Form).onSubmit({
-      preventDefault: f => f,
+    const input = form.getByLabelText('Year');
+    // normal method of setting input will not work if the value is not a number
+    Object.defineProperty(input, 'value', { value: 'asdf', writable: true }); // Directly set value
+    fireEvent.input(input);
+
+    const mouseClick = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
     });
 
-    expect(find('.usa-input-error-message').textContent).to.equal(
-      `Error ${dateUISchema['ui:errorMessages'].pattern}`,
-    );
+    const submitButton = form.getByRole('button', { name: 'Submit' });
+    fireEvent(submitButton, mouseClick);
+    waitFor(() => {
+      const error = form.container.querySelector('.usa-input-error-message');
+      expect(error.textContent).to.equal(
+        `Error ${dateUISchema['ui:errorMessages'].pattern}`,
+      );
+    });
   });
   it('should render date title', () => {
     const form = ReactTestUtils.renderIntoDocument(

src/platform/forms-system/test/js/definitions/dateRange.unit.spec.jsx

@@ -1,87 +1,82 @@
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import { expect } from 'chai';
-import ReactTestUtils from 'react-dom/test-utils';
-import Form from '@department-of-veterans-affairs/react-jsonschema-form';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 
 import { DefinitionTester } from 'platform/testing/unit/schemaform-utils.jsx';
-import uiSchema from '../../../src/js/definitions/dateRange';
 import definitions from 'vets-json-schema/dist/definitions.json';
+import uiSchema from '../../../src/js/definitions/dateRange';
 
 const { dateRange: schema, date } = definitions;
 
-function fillDate(find, toFrom, day, month, year) {
-  ReactTestUtils.Simulate.change(find(`#root_${toFrom}Day`), {
-    target: {
-      value: day,
-    },
-  });
-  ReactTestUtils.Simulate.change(find(`#root_${toFrom}Month`), {
-    target: {
-      value: month,
-    },
-  });
-  ReactTestUtils.Simulate.change(find(`#root_${toFrom}Year`), {
-    target: {
-      value: year,
-    },
-  });
+function fillDate(form, toFrom, day, month, year) {
+  const _day = form.container.querySelector(`#root_${toFrom}Day`);
+  fireEvent.change(_day, { target: { value: day } });
+
+  const _month = form.container.querySelector(`#root_${toFrom}Month`);
+  fireEvent.change(_month, { target: { value: month } });
+
+  const _year = form.container.querySelector(`#root_${toFrom}Year`);
+  fireEvent.change(_year, { target: { value: year } });
 }
 
 describe('Schemaform definition dateRange', () => {
   it('should render dateRange', () => {
-    const form = ReactTestUtils.renderIntoDocument(
+    const form = render(
       <DefinitionTester
         schema={schema}
         definitions={{ date }}
         uiSchema={uiSchema()}
       />,
     );
 
-    const formDOM = findDOMNode(form);
-
-    expect(formDOM.querySelectorAll('label,legend').length).to.equal(8);
-    expect(formDOM.querySelectorAll('input').length).to.equal(2);
-    expect(formDOM.querySelectorAll('select').length).to.equal(4);
+    expect(form.container.querySelectorAll('label,legend').length).to.equal(8);
+    expect(form.container.querySelectorAll('input').length).to.equal(2);
+    expect(form.container.querySelectorAll('select').length).to.equal(4);
   });
-  it('should render invalid dateRange error', () => {
+  it('should render invalid dateRange error', async () => {
     const dateRangeUISchema = uiSchema();
-    const form = ReactTestUtils.renderIntoDocument(
+    const form = render(
       <DefinitionTester
         schema={schema}
         definitions={{ date }}
         uiSchema={dateRangeUISchema}
       />,
     );
 
-    const formDOM = findDOMNode(form);
-    const find = formDOM.querySelector.bind(formDOM);
-    fillDate(find, 'from', 4, 4, 2000);
-    fillDate(find, 'to', 4, 4, 2001);
+    fillDate(form, 'to', 4, 4, 2000);
 
-    ReactTestUtils.findRenderedComponentWithType(form, Form).onSubmit({
-      preventDefault: f => f,
-    });
+    fillDate(form, 'from', 4, 4, 2001);
 
-    expect(find('.usa-input-error-message').textContent).to.equal(
-      `Error ${dateRangeUISchema['ui:errorMessages'].pattern}`,
-    );
+    await waitFor(() => {
+      const submitButton = form.getByRole('button', { name: 'Submit' });
+      const mouseClick = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      });
+      fireEvent(submitButton, mouseClick);
+
+      const errorMessage = `Error ${
+        dateRangeUISchema['ui:errorMessages'].pattern
+      }`;
+      const errorElement = form.container.querySelector(
+        '.usa-input-error-message',
+      );
+      expect(errorElement.textContent).to.equal(errorMessage);
+    });
   });
   it('should render dateRange title and messages', () => {
-    const form = ReactTestUtils.renderIntoDocument(
+    const form = render(
       <DefinitionTester
         schema={schema}
         definitions={{ date }}
         uiSchema={uiSchema('My from date', 'My to date', 'My error')}
       />,
     );
 
-    const formDOM = findDOMNode(form);
-
-    expect(formDOM.querySelectorAll('legend')[0].textContent).to.equal(
+    expect(form.container.querySelectorAll('legend')[0].textContent).to.equal(
       'My from date',
     );
-    expect(formDOM.querySelectorAll('legend')[1].textContent).to.equal(
+    expect(form.container.querySelectorAll('legend')[1].textContent).to.equal(
       'My to date',
     );
   });