feat: adding fallback component (#533)

Author: johnvente

src/react/ErrorBoundary.jsx

@@ -11,7 +11,7 @@ import ErrorPage from './ErrorPage';
  * @memberof module:React
  * @extends {Component}
  */
-export default class ErrorBoundary extends Component {
+class ErrorBoundary extends Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -28,17 +28,20 @@ export default class ErrorBoundary extends Component {
 
   render() {
     if (this.state.hasError) {
-      return <ErrorPage />;
+      return this.props.fallbackComponent || <ErrorPage />;
     }
-
     return this.props.children;
   }
 }
 
 ErrorBoundary.propTypes = {
   children: PropTypes.node,
+  fallbackComponent: PropTypes.node,
 };
 
 ErrorBoundary.defaultProps = {
   children: null,
+  fallbackComponent: undefined,
 };
+
+export default ErrorBoundary;

src/react/ErrorBoundary.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 
 import ErrorBoundary from './ErrorBoundary';
+import ErrorPage from './ErrorPage';
 import { initializeMockApp } from '..';
 
 describe('ErrorBoundary', () => {
@@ -54,4 +55,30 @@ describe('ErrorBoundary', () => {
       }),
     );
   });
+  it('should render the fallback component when an error occurs', () => {
+    function FallbackComponent() {
+      return <div>Oops, something went wrong!</div>;
+    }
+    function ComponentError() {
+      throw new Error('An error occurred during the click event!');
+    }
+    const wrapper = mount(
+      <ErrorBoundary fallbackComponent={<FallbackComponent />}>
+        <ComponentError />
+      </ErrorBoundary>,
+    );
+    expect(wrapper.contains(<FallbackComponent />)).toBe(true);
+  });
+
+  it('should render the ErrorPage fallbackComponent is null', () => {
+    function ComponentError() {
+      throw new Error('An error occurred during the click event!');
+    }
+    const wrapper = mount(
+      <ErrorBoundary fallbackComponent={null}>
+        <ComponentError />
+      </ErrorBoundary>,
+    );
+    expect(wrapper.contains(<ErrorPage />)).toBe(true);
+  });
 });