diff --git a/README.md b/README.md index 646e07e..e004cbe 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,35 @@ import { DiscussionEmbed } from 'disqus-react'; This component is limited to one instance in the DOM at a time and will handle updates to both the `config` and `shortname` props and reload appropriately with the new discussion thread. +### DiscussionEmbed with SSO + +This is an example for setting up the DiscussionEmbed component with SSO. This example config is also used on the Disqus SSO example found here: https://disqus-sso-demo.glitch.me/. + +```js +import { DiscussionEmbed } from 'disqus-react'; + + +``` ### CommentCount diff --git a/src/DiscussionEmbed.jsx b/src/DiscussionEmbed.jsx index bc29ee6..80030d1 100644 --- a/src/DiscussionEmbed.jsx +++ b/src/DiscussionEmbed.jsx @@ -80,6 +80,8 @@ export class DiscussionEmbed extends React.Component { this.page.category_id = config.categoryID; this.page.remote_auth_s3 = config.remoteAuthS3; this.page.api_key = config.apiKey; + if (config.sso) + this.sso = config.sso; if (config.language) this.language = config.language; @@ -120,5 +122,15 @@ DiscussionEmbed.propTypes = { beforeComment: PropTypes.func, onNewComment: PropTypes.func, onPaginate: PropTypes.func, + sso: PropTypes.shape({ + name: PropTypes.string, + button: PropTypes.string, + icon: PropTypes.string, + url: PropTypes.string, + logout: PropTypes.string, + profile_url: PropTypes.string, + width: PropTypes.string, + height: PropTypes.string, + }), }).isRequired, }; diff --git a/tests/DiscussionEmbed.js b/tests/DiscussionEmbed.js index d647ca2..13dda11 100644 --- a/tests/DiscussionEmbed.js +++ b/tests/DiscussionEmbed.js @@ -17,6 +17,18 @@ const DISQUS_CONFIG = { identifier: 'tester', }; +// This is the SSO config that is used on the Disqus SSO example found here: https://disqus-sso-demo.glitch.me/ +const SSO_CONFIG = { + name: 'SampleNews', + button: 'http://example.com/images/samplenews.gif', + icon: 'http://example.com/favicon.png', + url: 'http://example.com/login/', + logout: 'http://example.com/logout/', + profile_url: 'http://example.com/profileUrlTemplate/{username}', + width: '800', + height: '400', +}; + const Component = (props) => { expect(global.window.disqus_config).toBeTruthy(); }); +test('Creates window.disqus_config when passed an SSO config', () => { + const TEST_CONFIG = DISQUS_CONFIG; + TEST_CONFIG.sso = SSO_CONFIG; + render(); + expect(global.window.disqus_config).toBeTruthy(); +}); + test('Inserts the script correctly', () => { const { baseElement } = render(); const scriptQuery = baseElement.querySelectorAll(`#${EMBED_SCRIPT_ID}`); @@ -48,6 +67,15 @@ test('Inserts the script correctly', () => { expect(scriptQuery[0].src).toEqual('https://testing.disqus.com/embed.js'); }); +test('Inserts the script correctly when passed an SSO config', () => { + const TEST_CONFIG = DISQUS_CONFIG; + TEST_CONFIG.sso = SSO_CONFIG; + const { baseElement } = render(); + const scriptQuery = baseElement.querySelectorAll(`#${EMBED_SCRIPT_ID}`); + expect(scriptQuery.length).toEqual(1); + expect(scriptQuery[0].src).toEqual('https://testing.disqus.com/embed.js'); +}); + test('Cleans script and window attributes on unmount', () => { const { baseElement, unmount } = render(); unmount(); @@ -55,6 +83,7 @@ test('Cleans script and window attributes on unmount', () => { // Make sure the embed script is removed expect(scriptQuery.length).toEqual(0); // Make sure the resources created by the embed script are removed + // eslint-disable-next-line max-len const resourcesQuery = baseElement.querySelectorAll('link[href*="disquscdn.com/next/embed"], link[href*="disqus.com/next/config.js"], script[src*="disquscdn.com/next/embed"]'); expect(resourcesQuery.length).toEqual(0); // Make sure window.DISQUS is removed