Remove not needed <div>

Enzyme 3 fails with fragments, see enzymejs/enzyme#1213 (comment)
tkrotoff · Oct 9, 2017 · fac7c2d · fac7c2d
1 parent 76bb6b8
commit fac7c2d
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 26 deletions.
diff --git a/examples/Bootstrap4/App.jsx b/examples/Bootstrap4/App.jsx
@@ -3,8 +3,8 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { FormWithConstraints, FieldFeedback } from '../../src/index';
-import { FieldFeedbacks, FormGroup, FormControlLabel, FormControlInput } from '../../src/Bootstrap4';
+import { FormWithConstraints, FieldFeedbacks } from '../../src/index';
+import { FieldFeedback, FormGroup, FormControlLabel, FormControlInput } from '../../src/Bootstrap4';
 
 import './index.html';
 

diff --git a/src/Bootstrap4.tsx b/src/Bootstrap4.tsx
@@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types';
 
 import {
   Input, FormWithConstraintsChildContext,
-  FieldFeedbacks as FieldFeedbacks_, FieldFeedbacksProps
+  FieldFeedback as FieldFeedback_, FieldFeedbackProps
 } from './index';
 
 export interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -132,12 +132,12 @@ export class FormControlInput extends React.Component<FormControlInputProps> {
 }
 
 
-const FieldFeedbacks: React.SFC<FieldFeedbacksProps> = props => {
+const FieldFeedback: React.SFC<FieldFeedbackProps> = props => {
   const { className, children, ...other } = props;
   const classes = className !== undefined ? `${className} form-control-feedback` : 'form-control-feedback';
-  return <FieldFeedbacks_ {...other} className={classes}>{children}</FieldFeedbacks_>;
+  return <FieldFeedback_ {...other} className={classes}>{children}</FieldFeedback_>;
 };
-export { FieldFeedbacks };
+export { FieldFeedback };
 
 
 export interface LabelWithFormControlStyleProps extends React.LabelHTMLAttributes<HTMLLabelElement> {

diff --git a/src/Enzyme.test.tsx b/src/Enzyme.test.tsx
@@ -26,9 +26,9 @@ test('with Bootstrap4', () => {
     <div>
       <Bootstrap4.FormGroup for="username">
         <Bootstrap4.FormControlInput name="username" value="" required />
-        <Bootstrap4.FieldFeedbacks for="username">
+        <FieldFeedbacks for="username">
           <FieldFeedback when="*" />
-        </Bootstrap4.FieldFeedbacks>
+        </FieldFeedbacks>
       </Bootstrap4.FormGroup>
     </div>
   );

diff --git a/src/Enzyme.ts b/src/Enzyme.ts
@@ -2,14 +2,13 @@ import * as React from 'react';
 import { ShallowWrapper } from 'enzyme';
 
 import { FieldFeedback, FieldFeedbackProps, FieldFeedbacks } from './index';
-import * as Bootstrap4 from './Bootstrap4';
 
 // Return the list of FieldFeedback associated with an input name
 // Algorithm: find the FieldFeedbacks that matches the input name (for prop) and then return its children
 function findFieldFeedbackList(wrapper: ShallowWrapper<{}, {}>, inputName: string) {
   const fieldFeedbacksList = wrapper.findWhere(node => {
     let found = false;
-    if (node.type() === FieldFeedbacks || node.type() === Bootstrap4.FieldFeedbacks) {
+    if (node.type() === FieldFeedbacks) {
       if (node.prop('for') === inputName) {
         found = true;
       }

diff --git a/src/FieldFeedbacks.test.tsx b/src/FieldFeedbacks.test.tsx
@@ -211,7 +211,7 @@ describe('render()', () => {
       }
     });
     expect(component.html()).toEqual(
-      '<div><div><div class="error">Suffering from being missing</div></div></div>'
+      '<div><div class="error">Suffering from being missing</div></div>'
     );
   });
 
@@ -229,9 +229,7 @@ describe('render()', () => {
     expect(form.fieldsStore.fields).toEqual({
       username: fieldWithoutFeedback
     });
-    expect(component.html()).toEqual(
-      '<div></div>'
-    );
+    expect(component.html()).toEqual(null);
   });
 
   describe('show prop', () => {
@@ -259,7 +257,7 @@ describe('render()', () => {
       });
 
       expect(component.html()).toEqual(
-        '<div><div class="error">Suffering from being missing</div><div class="error">Suffering from being missing</div><div class="error">Suffering from being missing</div></div>'
+        '<div class="error">Suffering from being missing</div><div class="error">Suffering from being missing</div><div class="error">Suffering from being missing</div>'
       );
     });
 
@@ -287,7 +285,7 @@ describe('render()', () => {
       });
 
       expect(component.html()).toEqual(
-        '<div><div class="error">Suffering from being missing</div></div>'
+        '<div class="error">Suffering from being missing</div>'
       );
     });
 
@@ -315,7 +313,7 @@ describe('render()', () => {
       });
 
       expect(component.html()).toEqual(
-        '<div><div class="error">Suffering from being missing</div><div class="info">Suffering from being missing</div></div>'
+        '<div class="error">Suffering from being missing</div><div class="info">Suffering from being missing</div>'
       );
     });
   });
@@ -343,13 +341,11 @@ describe('reRender()', () => {
       }
     });
     expect(component.html()).toEqual(
-      '<div><div class="error">Suffering from being missing</div></div>'
+      '<div class="error">Suffering from being missing</div>'
     );
 
     form.fieldsStore.updateField('username', fieldWithoutFeedback);
-    expect(component.html()).toEqual(
-      '<div></div>'
-    );
+    expect(component.html()).toEqual(null);
   });
 
   test('unknown field updated', () => {
@@ -373,7 +369,7 @@ describe('reRender()', () => {
       }
     });
     expect(component.html()).toEqual(
-      '<div><div class="error">Suffering from being missing</div></div>'
+      '<div class="error">Suffering from being missing</div>'
     );
 
     const assert = console.assert;
@@ -387,7 +383,7 @@ describe('reRender()', () => {
     console.assert = assert;
 
     expect(component.html()).toEqual(
-      '<div><div class="error">Suffering from being missing</div></div>'
+      '<div class="error">Suffering from being missing</div>'
     );
   });
 });
diff --git a/src/FieldFeedbacks.tsx b/src/FieldFeedbacks.tsx
@@ -7,7 +7,7 @@ import { EventEmitter } from './EventEmitter'; // FIXME See https://github.com/M
 import Input from './Input';
 import { FieldEvent } from './FieldsStore';
 
-export interface FieldFeedbacksProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface FieldFeedbacksProps {
   for: string;
 
   /**
@@ -116,7 +116,7 @@ export class FieldFeedbacks extends withValidateEventEmitter(FieldFeedbacksCompo
   }
 
   render() {
-    const { for: fieldName, show, children, ...divProps } = this.props;
-    return <div {...divProps}>{children}</div>;
+    const { children } = this.props;
+    return children !== undefined ? children : null;
   }
 }