From 778d271b82be3ce13112462435983ee2f4d6213d Mon Sep 17 00:00:00 2001 From: Dario Banfi Date: Mon, 29 May 2017 14:03:06 +0200 Subject: [PATCH 1/3] Enabled HTML formatting for flashMessages --- src/ui/box/global_message.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/box/global_message.jsx b/src/ui/box/global_message.jsx index f6e4972b7..cd150b793 100644 --- a/src/ui/box/global_message.jsx +++ b/src/ui/box/global_message.jsx @@ -8,7 +8,7 @@ export default class GlobalMessage extends React.Component { const className = `auth0-global-message auth0-global-message-${type}`; return (
- {message} +
); } From 01be4be81f0cf9e58c901c92bcf8daa70e83ad0a Mon Sep 17 00:00:00 2001 From: Dario Banfi Date: Mon, 29 May 2017 16:05:18 +0200 Subject: [PATCH 2/3] Added tests for GlobalMessage component --- .../global_message.test.jsx.snap | 31 +++++++++++++++++++ src/__tests__/ui/box/global_message.test.jsx | 22 +++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 src/__tests__/ui/box/__snapshots__/global_message.test.jsx.snap create mode 100644 src/__tests__/ui/box/global_message.test.jsx 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..9d121aee6 --- /dev/null +++ b/src/__tests__/ui/box/__snapshots__/global_message.test.jsx.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`GlobalMessage renders correctly 1`] = ` +
+ +
+`; + +exports[`GlobalMessage renders with error type 1`] = ` +
+ +
+`; 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..ed112a61a --- /dev/null +++ b/src/__tests__/ui/box/global_message.test.jsx @@ -0,0 +1,22 @@ +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', () => { + const wrapper = mount(); + expect(wrapper.html()).toBe( + '
' + + 'Success!
' + ); + }); +}); From cc38f3430ca55b0e40b8a0d2c6dac068ab0b9443 Mon Sep 17 00:00:00 2001 From: Dario Banfi Date: Wed, 31 May 2017 15:04:09 +0200 Subject: [PATCH 3/3] Always passing a React node to GlobalMessage component --- .../global_message.test.jsx.snap | 22 +++++++------------ src/__tests__/ui/box/global_message.test.jsx | 14 ++++++++++-- src/ui/box/chrome.jsx | 10 +++++++-- src/ui/box/global_message.jsx | 3 +-- 4 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/__tests__/ui/box/__snapshots__/global_message.test.jsx.snap b/src/__tests__/ui/box/__snapshots__/global_message.test.jsx.snap index 9d121aee6..98c7b04a8 100644 --- a/src/__tests__/ui/box/__snapshots__/global_message.test.jsx.snap +++ b/src/__tests__/ui/box/__snapshots__/global_message.test.jsx.snap @@ -1,31 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`GlobalMessage renders correctly 1`] = ` +exports[`GlobalMessage renders correctly given a success type 1`] = `
+ > + Success! +
`; -exports[`GlobalMessage renders with error type 1`] = ` +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 index ed112a61a..bde43bd90 100644 --- a/src/__tests__/ui/box/global_message.test.jsx +++ b/src/__tests__/ui/box/global_message.test.jsx @@ -12,11 +12,21 @@ describe('GlobalMessage', () => { it('renders correctly given an error type', () => { expectComponent().toMatchSnapshot(); }); - it('should not strip out HTML tags', () => { + 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( '
' + - 'Success!
' + '<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 cd150b793..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() { @@ -8,7 +7,7 @@ export default class GlobalMessage extends React.Component { const className = `auth0-global-message auth0-global-message-${type}`; return (
- + {message}
); }