diff --git a/src/__tests__/ui/box/__snapshots__/global_message.test.jsx.snap b/src/__tests__/ui/box/__snapshots__/global_message.test.jsx.snap new file mode 100644 index 000000000..98c7b04a8 --- /dev/null +++ b/src/__tests__/ui/box/__snapshots__/global_message.test.jsx.snap @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`GlobalMessage renders correctly given a success type 1`] = ` +
+ + Success! + +
+`; + +exports[`GlobalMessage renders correctly given an error type 1`] = ` +
+ + An error occurred. + +
+`; diff --git a/src/__tests__/ui/box/global_message.test.jsx b/src/__tests__/ui/box/global_message.test.jsx new file mode 100644 index 000000000..bde43bd90 --- /dev/null +++ b/src/__tests__/ui/box/global_message.test.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import { expectComponent } from '../../testUtils'; + +import GlobalMessage from 'ui/box/global_message'; + +describe('GlobalMessage', () => { + it('renders correctly given a success type', () => { + expectComponent().toMatchSnapshot(); + }); + it('renders correctly given an error type', () => { + expectComponent().toMatchSnapshot(); + }); + it('should NOT strip out HTML tags if given a React node', () => { + const message = React.createElement('span', { + dangerouslySetInnerHTML: { __html: 'Success!' } + }); + const wrapper = mount(); + expect(wrapper.html()).toBe( + '
' + + 'Success!
' + ); + }); + it('should strip out HTML tags if given a string', () => { + const wrapper = mount(); + expect(wrapper.html()).toBe( + '
' + + '<b>Success!</b>
' + ); + }); +}); diff --git a/src/ui/box/chrome.jsx b/src/ui/box/chrome.jsx index 7db4c9c1c..077fbd07f 100644 --- a/src/ui/box/chrome.jsx +++ b/src/ui/box/chrome.jsx @@ -210,11 +210,17 @@ export default class Chrome extends React.Component { ref="submit" />; + function wrapGlobalMessage(message) { + return typeof message === 'string' + ? React.createElement('span', { dangerouslySetInnerHTML: { __html: message } }) + : message; + } + const globalError = error - ? + ? : null; const globalSuccess = success - ? + ? : null; const Content = contentComponent; diff --git a/src/ui/box/global_message.jsx b/src/ui/box/global_message.jsx index f6e4972b7..af5bc3715 100644 --- a/src/ui/box/global_message.jsx +++ b/src/ui/box/global_message.jsx @@ -1,6 +1,5 @@ import PropTypes from 'prop-types'; import React from 'react'; -import ReactDOM from 'react-dom'; export default class GlobalMessage extends React.Component { render() {