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