diff --git a/CHANGELOG.md b/CHANGELOG.md
index 10e84868265..5594bd7f00a 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/src/components/error_boundary/__snapshots__/error_boundary.test.tsx.snap b/src/components/error_boundary/__snapshots__/error_boundary.test.tsx.snap
index 1989fb10443..152fbde6d66 100644
--- a/src/components/error_boundary/__snapshots__/error_boundary.test.tsx.snap
+++ b/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`] = `
No error
diff --git a/src/components/error_boundary/error_boundary.test.tsx b/src/components/error_boundary/error_boundary.test.tsx
index 09d202cf297..400f0b1588b 100644
--- a/src/components/error_boundary/error_boundary.test.tsx
+++ b/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(
+
+
+
+ )
+ );
+
+ 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(
-
+
- )
- );
-
- 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(
-
-
-
- ).text();
+ it('renders data-test-subj', () => {
+ const errorHtml = mount(
+
+
+
+ ).html();
- expect(errorText).toContain(errorMessage);
+ expect(errorHtml).toContain('euiErrorBoundary');
+ expect(errorHtml).toContain('test subject string');
+ });
});
});
diff --git a/src/components/error_boundary/error_boundary.tsx b/src/components/error_boundary/error_boundary.tsx
index a8c284266d7..d5157cac546 100644
--- a/src/components/error_boundary/error_boundary.tsx
+++ b/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 (
-