[Tests] mount/shallow: add tests for text children

Closes #906.
enzymejs · Sep 1, 2018 · f23f85f · f23f85f
1 parent d38a9d8
commit f23f85f
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 0 deletions.
diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -3355,6 +3355,56 @@ describeWithDOM('mount', () => {
       const textNodes = children.map(x => x.text());
       expect(textNodes).to.eql(['Foo Bar Foo Bar Foo']);
     });
+
+    it('renders children separated by spaces', () => {
+      class JustificationRow extends React.Component {
+        render() {
+          const { children } = this.props;
+          const wrappedChildren = React.Children.map(
+            children,
+            child => child && <span>{child}</span>,
+          );
+
+          const justifiedChildren = [];
+          React.Children.forEach(wrappedChildren, (child) => {
+            if (child) {
+              justifiedChildren.push(child, ' ');
+            }
+          });
+          justifiedChildren.pop();
+
+          return <div>{justifiedChildren}</div>;
+        }
+      }
+
+      const wrapper = mount((
+        <JustificationRow>
+          <div>foo</div>
+          <div>bar</div>
+          <div>baz</div>
+        </JustificationRow>
+      )).children();
+
+      expect(wrapper.children().map(x => x.debug())).to.eql([
+        `<span>
+  <div>
+    foo
+  </div>
+</span>`,
+        // ' ', // TODO: fixme: difference between shallow and mount
+        `<span>
+  <div>
+    bar
+  </div>
+</span>`,
+        // ' ', // TODO: fixme: difference between shallow and mount
+        `<span>
+  <div>
+    baz
+  </div>
+</span>`,
+      ]);
+    });
   });
 
   describe('.childAt(index)', () => {

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -3320,6 +3320,56 @@ describe('shallow', () => {
       const textNodes = children.map(x => x.text());
       expect(textNodes).to.eql(['Foo', ' Bar ', 'Foo', ' Bar ', 'Foo']);
     });
+
+    it('renders children separated by spaces', () => {
+      class JustificationRow extends React.Component {
+        render() {
+          const { children } = this.props;
+          const wrappedChildren = React.Children.map(
+            children,
+            child => child && <span>{child}</span>,
+          );
+
+          const justifiedChildren = [];
+          React.Children.forEach(wrappedChildren, (child) => {
+            if (child) {
+              justifiedChildren.push(child, ' ');
+            }
+          });
+          justifiedChildren.pop();
+
+          return <div>{justifiedChildren}</div>;
+        }
+      }
+
+      const wrapper = shallow((
+        <JustificationRow>
+          <div>foo</div>
+          <div>bar</div>
+          <div>baz</div>
+        </JustificationRow>
+      ));
+
+      expect(wrapper.children().map(x => x.debug())).to.eql([
+        `<span>
+  <div>
+    foo
+  </div>
+</span>`,
+        ' ',
+        `<span>
+  <div>
+    bar
+  </div>
+</span>`,
+        ' ',
+        `<span>
+  <div>
+    baz
+  </div>
+</span>`,
+      ]);
+    });
   });
 
   describe('.childAt(index)', () => {