Adding test

Returning a fragment to enable testing in enzyme

client/my-sites/checkout/checkout/ebanx-brazil-payment-fields.jsx

@@ -69,7 +69,7 @@ export class EbanxBrazilPaymentFields extends Component {
 		this.props.handleFieldChange( event.target.name, event.target.value );
 	};
 
-	render() {
+	renderFields() {
 		const { translate, countriesList, countryCode } = this.props;
 		const { userSelectedPhoneCountryCode } = this.state;
 		const countryData = find( countriesList.get(), { code: countryCode } );
@@ -86,7 +86,6 @@ export class EbanxBrazilPaymentFields extends Component {
 				}
 			);
 		}
-
 		return [
 			<span key="ebanx-required-fields" className="checkout__form-info-text">
 				{ ebanxMessage }
@@ -95,15 +94,15 @@ export class EbanxBrazilPaymentFields extends Component {
 			this.createField( 'document', Input, {
 				label: translate( 'Taxpayer Identification Number', {
 					comment:
-					'Individual taxpayer registry identification required ' +
-					'for Brazilian payment methods on credit card form',
+						'Individual taxpayer registry identification required ' +
+						'for Brazilian payment methods on credit card form',
 				} ),
 				key: 'document',
 			} ),
 
 			this.createField( 'phone-number', FormPhoneMediaInput, {
 				onChange: this.handlePhoneFieldChange,
-				countriesList: countriesList,
+				countriesList,
 				// If the user has manually selected a country for the phone
 				// number, use that, but otherwise default this to the same
 				// country as the billing address.
@@ -146,6 +145,10 @@ export class EbanxBrazilPaymentFields extends Component {
 			</div>,
 		];
 	}
+
+	render() {
+		return <React.Fragment>{ this.renderFields() }</React.Fragment>;
+	}
 }
 
 export default localize( EbanxBrazilPaymentFields );

client/my-sites/checkout/checkout/test/__snapshots__/ebanx-brazil-payment-box.js.snap

@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<EbanxBrazilPaymentFields /> should render 1`] = `
+<React.Fragment>
+  <span
+    className="checkout__form-info-text"
+    key="ebanx-required-fields"
+  >
+    The following fields are also required for payments in %(countryName)s
+  </span>
+  <Input
+    additionalClasses="checkout__form-field ebanx-brazil"
+    autoComplete="off"
+    autoFocus={false}
+    isError={false}
+    key="document"
+    label="Taxpayer Identification Number"
+    labelClass="checkout__form-label"
+    name="document"
+    onBlur={[Function]}
+    onChange={[Function]}
+  />
+  <FormPhoneMediaInput
+    additionalClasses="checkout__form-field ebanx-brazil"
+    autoComplete="off"
+    countriesList={
+      Object {
+        "get": [Function],
+      }
+    }
+    countryCode="BR"
+    isError={false}
+    key="phone-number"
+    label="Phone"
+    labelClass="checkout__form-label"
+    name="phone-number"
+    onBlur={[Function]}
+    onChange={[Function]}
+  />
+  <Input
+    additionalClasses="checkout__form-field ebanx-brazil"
+    autoComplete="off"
+    autoFocus={false}
+    isError={false}
+    key="address-1"
+    label="Address"
+    labelClass="checkout__form-label"
+    maxLength={40}
+    name="address-1"
+    onBlur={[Function]}
+    onChange={[Function]}
+  />
+  <Input
+    additionalClasses="checkout__form-field ebanx-brazil"
+    autoComplete="off"
+    autoFocus={false}
+    inputMode="numeric"
+    isError={false}
+    key="street-number"
+    label="Street Number"
+    labelClass="checkout__form-label"
+    name="street-number"
+    onBlur={[Function]}
+    onChange={[Function]}
+  />
+  <HiddenInput
+    additionalClasses="checkout__form-field ebanx-brazil"
+    autoComplete="off"
+    isError={false}
+    key="address-2"
+    label="Address Line 2"
+    labelClass="checkout__form-label"
+    maxLength={40}
+    name="address-2"
+    onBlur={[Function]}
+    onChange={[Function]}
+    text="+ Add Address Line 2"
+  />
+  <Input
+    additionalClasses="checkout__form-field ebanx-brazil"
+    autoComplete="off"
+    autoFocus={false}
+    isError={false}
+    key="city"
+    label="City"
+    labelClass="checkout__form-label"
+    name="city"
+    onBlur={[Function]}
+    onChange={[Function]}
+  />
+  <div
+    className="checkout__form-state-field"
+    key="state"
+  >
+    <Connect(Localized(StateSelect))
+      additionalClasses="checkout__form-field ebanx-brazil"
+      autoComplete="off"
+      countryCode="BR"
+      isError={false}
+      label="State"
+      labelClass="checkout__form-label"
+      name="state"
+      onBlur={[Function]}
+      onChange={[Function]}
+    />
+  </div>
+</React.Fragment>
+`;

client/my-sites/checkout/checkout/test/ebanx-brazil-payment-box.js

@@ -0,0 +1,43 @@
+/**
+ * @format
+ * @jest-environment jsdom
+ */
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import { identity } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+
+import { EbanxBrazilPaymentFields } from '../ebanx-brazil-payment-fields';
+
+const defaultProps = {
+	countryCode: 'BR',
+	countriesList: {
+		get: () => [ { code: 'BR', name: 'Brazil' } ],
+	},
+	getErrorMessage: jest.fn(),
+	getFieldValue: jest.fn(),
+	handleFieldChange: jest.fn(),
+	fieldClassName: 'ebanx-brazil',
+	translate: identity,
+};
+
+describe( '<EbanxBrazilPaymentFields />', () => {
+	test( 'should render', () => {
+		const wrapper = shallow( <EbanxBrazilPaymentFields { ...defaultProps } /> );
+		expect( wrapper ).toMatchSnapshot();
+	} );
+
+	test( 'should call this.props.handleFieldChange when updating field', () => {
+		const wrapper = shallow( <EbanxBrazilPaymentFields { ...defaultProps } /> );
+		const documentInput = wrapper.find( '[name="document"]' );
+		const event = { target: { name: 'document', value: 'spam' } };
+		documentInput.simulate( 'change', event );
+		expect( defaultProps.handleFieldChange ).toBeCalledWith( 'document', 'spam' );
+	} );
+} );