[MAKE_RELEASE] fix : fix problem when we have empty children and renderOn with FlagsConsumer

Author: Dumora Guillaume

CHANGELOG.md

@@ -1,6 +1,12 @@
+import FlagsConsumer from "./src/FlagsConsumer";
+
 # Changelog
 All notable changes to this project are documented in this file.
 
+## [1.0.28] - 2019-06-27
+### Fix
+- Fix a problem when no children and no renderOn are provided to the FlagsConsumer.
+
 ## [1.0.27] - 2019-06-17
 ### Added
 - `JSON, Numbers and Strings` are now injected as props for multivariant flags.

src/FlagsConsumer.js

@@ -13,32 +13,45 @@ export default class FlagsConsumer extends Component {
   };
 
   static defaultProps = {
-    renderOn: () => null,
-    fallbackRender: () => null
+    renderOn: undefined,
+    fallbackRender: undefined
+  };
+
+  renderChildrenOrRenderOn = (featureProps, children, renderOn) => {
+    if (renderOn) {
+      return renderOn(featureProps);
+    }
+    if (children) {
+      return React.cloneElement(children, { flag: featureProps });
+    }
+    return React.Fragment;
   };
 
   render() {
+    const { flag, children, renderOn, fallbackRender } = this.props;
     return (
       <FlagsContext.Consumer>
         {ldClient => {
-          const flagValue = ldClient.variation(this.props.flag, false);
+          const flagValue = ldClient.variation(flag, false);
           const featureProps = {
-            [camelize(this.props.flag)]: flagValue
+            [camelize(flag)]: flagValue
           };
           return (() => {
             if (flagValue === true) {
-              return (
-                this.props.renderOn(featureProps) ||
-                React.cloneElement(this.props.children, { flag: featureProps })
+              return this.renderChildrenOrRenderOn(
+                featureProps,
+                children,
+                renderOn
               );
             }
             if (flagValue === false) {
-              return this.props.fallbackRender(featureProps) || null;
+              return fallbackRender ? fallbackRender(featureProps) : null;
             }
             if (typeof flagValue !== 'boolean') {
-              return (
-                this.props.renderOn(featureProps) ||
-                React.cloneElement(this.props.children, { flag: featureProps })
+              return this.renderChildrenOrRenderOn(
+                featureProps,
+                children,
+                renderOn
               );
             }
             return null;

src/__tests__/FlagsConsumer.spec.js

@@ -32,6 +32,24 @@ describe('Flags', () => {
       expect(wrapper.find('h4').length).toBe(1);
     });
 
+    it('should return nothing when we have no children or renderProps and flags is active (true)', () => {
+      const Flags = getComponentWithContext({
+        variation: jest.fn(() => true)
+      });
+      const wrapper = mount(<Flags flag="beta-only" />);
+      expect(wrapper.find('Consumer').children().length).toBe(0);
+    });
+
+    it('should return nothing when we have a children with a condition and flags is active (true)', () => {
+      const Flags = getComponentWithContext({
+        variation: jest.fn(() => true)
+      });
+      const wrapper = mount(
+        <Flags flag="beta-only">{1 === 0 && <h4>for beta users</h4>}</Flags>
+      );
+      expect(wrapper.find('Consumer').children().length).toBe(0);
+    });
+
     it('should return the component or element given by children props when flags is active (true) and there no renderProps defined', () => {
       const Flags = getComponentWithContext({
         variation: jest.fn(() => true)
@@ -46,6 +64,7 @@ describe('Flags', () => {
           <h4 className="children">for beta users</h4>
         </Flags>
       );
+
       expect(wrapper.find('h4.fallbackRender').length).toBe(0);
       expect(wrapper.find('h4.children').length).toBe(1);
     });
@@ -190,6 +209,14 @@ describe('Flags', () => {
       expect(wrapper.find('h4').length).toBe(1);
     });
 
+    it('should return nothing when we have no children or renderProps and flags is active (json)', () => {
+      const Flags = getComponentWithContext({
+        variation: jest.fn(() => ({ test1: 1, test2: 2 }))
+      });
+      const wrapper = mount(<Flags flag="multi-variant-json" />);
+      expect(wrapper.find('Consumer').children().length).toBe(0);
+    });
+
     it('should return the component or element given by children props when flags is active (json) and there no renderProps defined', () => {
       const Flags = getComponentWithContext({
         variation: jest.fn(() => ({ test1: 1, test2: 2 }))