fix(ConfigProvider): config on components should take higher priority

alibaba-fusion · Mar 13, 2019 · 87917c8 · 87917c8
1 parent 2796396
commit 87917c8
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 19 deletions.
diff --git a/docs/config-provider/demo/error-boundary.md b/docs/config-provider/demo/error-boundary.md
@@ -21,41 +21,43 @@ const { ErrorBoundary, config } = ConfigProvider;
 
 class Demo extends React.Component {
     render() {
-        return (
-            <span>{this.props.locale.ok}</span>
-        );
+        if (this.props.throwError) {
+            throw Error('There is something going wrong!');
+        } else {
+            return (
+                <span>normal</span>
+            );
+        }
     }
 }
 
 const NewDemo = config(Demo);
 
 const fallbackUI = (props) => {
     const { error, errorInfo } = props;
-    return <span style={{color: 'red'}}>Error: {error.toString()}</span>;
+    return <span style={{color: 'red'}}>{error.toString()}</span>;
 };
 
 export default class App extends React.Component {
     state = {
-        locale: {
-            ok: 'ok'
-        }
+        throwError: false
     };
 
     onClick = () => {
         this.setState({
-            locale: undefined
+            throwError: true
         });
     };
 
     render() {
         return (<div>
-            Pass undefined to locale which will cause an error: <Button type="primary" onClick={this.onClick}>trigger error</Button>
+            Click to throw an error <Button type="primary" onClick={this.onClick}>trigger error</Button>
             <br/>
             <br/>
             Default fallback UI:
             <hr />
             <ConfigProvider errorBoundary>
-                <NewDemo locale={this.state.locale}/>
+                <NewDemo throwError={this.state.throwError}/>
             </ConfigProvider>
             <br/>
             <br/>
@@ -70,7 +72,7 @@ export default class App extends React.Component {
                     console.log('catching');
                 }
             }}>
-                <NewDemo locale={this.state.locale}/>
+                <NewDemo throwError={this.state.throwError}/>
             </ConfigProvider>
         </div>);
     }

diff --git a/src/config-provider/config.jsx b/src/config-provider/config.jsx
@@ -154,7 +154,7 @@ export function config(Component, options = {}) {
                 nextLocale = {},
                 nextPure,
                 nextRtl,
-                nextErrorBoundary = {},
+                nextErrorBoundary,
             } = this.context;
 
             const displayName =

diff --git a/src/config-provider/get-context-props.jsx b/src/config-provider/get-context-props.jsx
@@ -1,3 +1,21 @@
+/**
+ *
+ * @param {Object|Boolean} input
+ * @returns {Object} typeof obj.open === 'boolean'
+ */
+const parseBoundary = input => {
+    let obj;
+    if (input === undefined || input === null) {
+        return {};
+    } else if (typeof input === 'boolean') {
+        obj = { open: input };
+    } else {
+        obj = { open: true, ...input };
+    }
+
+    return obj;
+};
+
 export default function getContextProps(props, context, displayName) {
     const { prefix, locale, pure, rtl, errorBoundary } = props;
     const {
@@ -32,12 +50,8 @@ export default function getContextProps(props, context, displayName) {
     // but typeof newErrorBoundary === 'object'
     // newErrorBoundary should always have the key 'open', which indicates ErrorBoundary on or off
     const newErrorBoundary = {
-        ...(typeof nextErrorBoundary === 'boolean'
-            ? { open: nextErrorBoundary }
-            : nextErrorBoundary),
-        ...(typeof errorBoundary === 'boolean'
-            ? { open: errorBoundary }
-            : errorBoundary),
+        ...parseBoundary(nextErrorBoundary),
+        ...parseBoundary(errorBoundary),
     };
 
     if (!('open' in newErrorBoundary)) {

diff --git a/test/config-provider/index-spec.js b/test/config-provider/index-spec.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import Enzyme, { mount } from 'enzyme';
+import Enzyme, { mount, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import moment from 'moment';
 import assert from 'power-assert';
@@ -446,4 +446,94 @@ describe('ConfigProvider.ErrorBoundary', () => {
 
         wrapper.find(Something).simulateError(error);
     });
+
+    it('should on: errorBoundary should work', () => {
+        wrapper = shallow(
+            <ConfigProvider errorBoundary>
+                <Button />
+            </ConfigProvider>
+        );
+        assert(wrapper.dive().name() === 'ErrorBoundary');
+    });
+
+    it('should on: errorBoundary={{}} should work', () => {
+        wrapper = shallow(
+            <ConfigProvider errorBoundary={{}}>
+                <Button />
+            </ConfigProvider>
+        );
+        assert(wrapper.dive().name() === 'ErrorBoundary');
+    });
+
+    it('should off: errorBoundary={false} should work', () => {
+        wrapper = shallow(
+            <ConfigProvider errorBoundary={false}>
+                <Button />
+            </ConfigProvider>
+        );
+        assert(wrapper.dive().name() === 'Button');
+    });
+
+    it('should on: errorBoundary={{open: true}} should work', () => {
+        wrapper = shallow(
+            <ConfigProvider errorBoundary={{ open: true }}>
+                <Button />
+            </ConfigProvider>
+        );
+        assert(wrapper.dive().name() === 'ErrorBoundary');
+    });
+
+    it('should off: errorBoundary={{open: false}} should work', () => {
+        wrapper = shallow(
+            <ConfigProvider errorBoundary={{ open: false }}>
+                <Button />
+            </ConfigProvider>
+        );
+        assert(wrapper.dive().name() === 'Button');
+    });
+
+    it('should off: config on component iteself >  on ConfigProvider 1', () => {
+        wrapper = shallow(
+            <ConfigProvider errorBoundary={{}}>
+                <Button errorBoundary={false} />
+            </ConfigProvider>
+        );
+        assert(wrapper.dive().name() === 'Button');
+    });
+
+    it('should on: config on component iteself >  on ConfigProvider 2', () => {
+        wrapper = shallow(
+            <ConfigProvider errorBoundary={false}>
+                <Button errorBoundary={{}} />
+            </ConfigProvider>
+        );
+        assert(wrapper.dive().name() === 'ErrorBoundary');
+    });
+
+    it('should on: config on component iteself >  on ConfigProvider 3', () => {
+        wrapper = shallow(
+            <ConfigProvider errorBoundary={{ open: false }}>
+                <Button errorBoundary />
+            </ConfigProvider>
+        );
+        assert(wrapper.dive().name() === 'ErrorBoundary');
+    });
+
+    it('should off: config on component iteself >  on ConfigProvider 4', () => {
+        wrapper = shallow(
+            <ConfigProvider errorBoundary>
+                <Button errorBoundary={{ open: false }} />
+            </ConfigProvider>
+        );
+        assert(wrapper.dive().name() === 'Button');
+    });
+
+    it('should on: config on component iteself >  on ConfigProvider 5', () => {
+        wrapper = shallow(
+            <ConfigProvider errorBoundary={{ open: false }}>
+                <Button errorBoundary={{ open: true }} />
+            </ConfigProvider>
+        );
+        assert(wrapper.dive().name() === 'ErrorBoundary');
+    });
 });