[EuiErrorBoundary] Add default data-test-subj

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added support for `ghost` and `text` `EuiIcon` colors on Elastic logos ([#5245](https://github.com/elastic/eui/pull/5245))
+- Added a default `data-test-subj` to `EuiErrorBoundary` ([#5232](https://github.com/elastic/eui/pull/5232))
 
 ## [`39.0.0`](https://github.com/elastic/eui/tree/v39.0.0)
 

src/components/error_boundary/__snapshots__/error_boundary.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiErrorBoundary is rendered without an error 1`] = `
+exports[`EuiErrorBoundary without an error thrown does not render the UI 1`] = `
 <div>
   No error
 </div>

src/components/error_boundary/error_boundary.test.tsx

@@ -22,30 +22,42 @@ const BadComponent = () => {
 };
 
 describe('EuiErrorBoundary', () => {
-  test('is rendered without an error', () => {
-    const component = takeMountedSnapshot(
-      mount(
+  describe('without an error thrown', () => {
+    it('does not render the UI', () => {
+      const component = takeMountedSnapshot(
+        mount(
+          <EuiErrorBoundary {...requiredProps}>
+            <GoodComponent />
+          </EuiErrorBoundary>
+        )
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe('with an error thrown', () => {
+    it('renders UI', () => {
+      // Because the error contains the stack trace, it's non-deterministic. So we'll just check that
+      // it contains our error message.
+      const errorText = mount(
         <EuiErrorBoundary {...requiredProps}>
-          <GoodComponent />
+          <BadComponent />
         </EuiErrorBoundary>
-      )
-    );
-
-    expect(component).toMatchSnapshot();
-  });
+      ).text();
 
-  test('is rendered with an error', () => {
-    // Prevent the React boundary error from appearing in the terminal.
-    spyOn(console, 'error'); // eslint-disable-line no-undef
+      expect(errorText).toContain(errorMessage);
+    });
 
-    // Because the error contains the stack trace, it's non-deterministic. So we'll just check that
-    // it contains our error message.
-    const errorText = mount(
-      <EuiErrorBoundary {...requiredProps}>
-        <BadComponent />
-      </EuiErrorBoundary>
-    ).text();
+    it('renders data-test-subj', () => {
+      const errorHtml = mount(
+        <EuiErrorBoundary {...requiredProps}>
+          <BadComponent />
+        </EuiErrorBoundary>
+      ).html();
 
-    expect(errorText).toContain(errorMessage);
+      expect(errorHtml).toContain('euiErrorBoundary');
+      expect(errorHtml).toContain('test subject string');
+    });
   });
 });

src/components/error_boundary/error_boundary.tsx

@@ -8,7 +8,7 @@
 
 import React, { Component, HTMLAttributes, ReactNode } from 'react';
 import { CommonProps } from '../common';
-import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import { EuiText } from '../text';
 
@@ -29,10 +29,6 @@ export class EuiErrorBoundary extends Component<
   EuiErrorBoundaryProps,
   EuiErrorBoundaryState
 > {
-  static propTypes = {
-    children: PropTypes.node,
-  };
-
   constructor(props: EuiErrorBoundaryProps) {
     super(props);
 
@@ -59,12 +55,17 @@ ${stackStr}`;
   }
 
   render() {
-    const { children, ...rest } = this.props;
+    const { children, 'data-test-subj': _dataTestSubj, ...rest } = this.props;
+    const dataTestSubj = classNames('euiErrorBoundary', _dataTestSubj);
 
     if (this.state.hasError) {
       // You can render any custom fallback UI
       return (
-        <div className="euiErrorBoundary" {...rest}>
+        <div
+          className="euiErrorBoundary"
+          data-test-subj={dataTestSubj}
+          {...rest}
+        >
           <div className="euiErrorBoundary__text">
             <EuiText size="xs">
               <h1>Error</h1>