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 ( -
+

Error