Merge branch 'master' into flags-locales

client/.babelrc

@@ -1,15 +0,0 @@
-{
-  "presets": [
-    "es2015"
-  ],
-  "plugins": [
-    "add-module-exports",
-    "transform-class-properties",
-    "transform-decorators-legacy",
-    "transform-object-assign",
-    "transform-object-rest-spread",
-    "transform-async-to-generator",
-    "transform-react-jsx",
-    "syntax-dynamic-import"
-  ]
-}

client/coral-configure/components/QuestionBoxBuilder.js

@@ -8,7 +8,7 @@ import styles from './QuestionBoxBuilder.css';
 class QuestionBoxBuilder extends React.Component {
   constructor() {
     super();
-    
+
     this.state = {
       loading: true
     };
@@ -17,9 +17,9 @@ class QuestionBoxBuilder extends React.Component {
   componentWillMount() {
     this.loadEditor();
   }
-  
+
   async loadEditor() {
-    const MarkdownEditor = await import('coral-framework/components/MarkdownEditor');
+    const {default: MarkdownEditor} = await import('coral-framework/components/MarkdownEditor');
 
     return this.setState({
       loading : false,
@@ -79,17 +79,17 @@ class QuestionBoxBuilder extends React.Component {
         </ul>
 
         <QuestionBox
-          className={styles.qb} 
+          className={styles.qb}
           enable={true}
-          icon={questionBoxIcon}  
+          icon={questionBoxIcon}
           content={questionBoxContent}
         />
 
-        <MarkdownEditor 
+        <MarkdownEditor
           value={questionBoxContent}
           onChange={(value) => handleChange({}, {questionBoxContent: value})}
         />
-      
+
       </div>
     );
   }

client/coral-embed/src/index.js

@@ -2,101 +2,98 @@ import URLSearchParams from 'url-search-params';
 import Stream from './Stream';
 import StreamInterface from './StreamInterface';
 
-// This function should return value of window.Coral
-const Coral = {};
-const Talk = (Coral.Talk = {});
+export class Talk {
 
-/**
- * Render a Talk stream
- * @param {HTMLElement} el - Element to render the stream in
- * @param {Object} opts - Configuration options for talk
- * @param {String} opts.talk - Talk base URL
- * @param {String} [opts.title] - Title of Stream (rendered in iframe)
- * @param {String} [opts.asset_url] - Asset URL
- * @param {String} [opts.asset_id] - Asset ID
- * @param {String} [opts.auth_token] - (optional) A jwt representing the session
- * @return {Object}
- *
- * Example:
- * ```
- *   const embed = Talk.render(document.getElementById('talkStreamEmbed'), opts);
- *
- *   // trigger a login with optional token.
- *   embed.login(token);
- *
- *   // trigger a logout.
- *   embed.logout();
- *
- *   // listen to events (in this case all events).
- *   embed.on('**', function(value) {
- *     console.log(this.event, value);
- *   });
- * ```
- */
-Talk.render = (el, opts) => {
-  if (!el) {
-    throw new Error('Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.');
-  }
-  if (typeof el !== 'object') {
-    throw new Error(`Coral.Talk.render() expected HTMLElement but got ${el} (${typeof el})`);
-  }
-
-  opts = opts || {};
-
-  // TODO: infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
-  if (!opts.talk) {
-    throw new Error(
-      'Coral.Talk.render() expects opts.talk as the Talk Base URL'
-    );
-  }
-
-  // Ensure el has an id, as pym can't directly accept the HTMLElement.
-  if (!el.id) {
-    el.id = `_${Math.random()}`;
-  }
-
-  // Compose the query to send down to the Talk API so it knows what to load.
-  const query = {};
-
-  // Parse the url parameters to extract some of the information.
-  const urlParams = new URLSearchParams(window.location.search);
-  if (urlParams.get('commentId')) {
-    query.comment_id = urlParams.get('commentId');
-  }
-
-  // Extract the asset id from the options.
-  if (opts.asset_id) {
-    query.asset_id = opts.asset_id;
-  }
-
-  // Extract the asset url.
-  if (opts.asset_url) {
-    query.asset_url = opts.asset_url;
-  } else if (!opts.asset_id) {
-
-    // The asset url was not provided and the asset id was also not provided,
-    // we need to infer the asset url from details on the page.
-
-    try {
-      query.asset_url = document.querySelector('link[rel="canonical"]').href;
-    } catch (e) {
-      console.warn(
-        'This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.'
-      );
-
-      if (!window.location.origin) {
-        window.location.origin = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
-      }
-
-      query.asset_url = window.location.origin + window.location.pathname;
+  /**
+   * Render a Talk stream
+   * @param {HTMLElement} el - Element to render the stream in
+   * @param {Object} opts - Configuration options for talk
+   * @param {String} opts.talk - Talk base URL
+   * @param {String} [opts.title] - Title of Stream (rendered in iframe)
+   * @param {String} [opts.asset_url] - Asset URL
+   * @param {String} [opts.asset_id] - Asset ID
+   * @param {String} [opts.auth_token] - (optional) A jwt representing the session
+   * @return {Object}
+   *
+   * Example:
+   * ```
+   *   const embed = Talk.render(document.getElementById('talkStreamEmbed'), opts);
+   *
+   *   // trigger a login with optional token.
+   *   embed.login(token);
+   *
+   *   // trigger a logout.
+   *   embed.logout();
+   *
+   *   // listen to events (in this case all events).
+   *   embed.on('**', function(value) {
+   *     console.log(this.event, value);
+   *   });
+   * ```
+   */
+  static render(el, opts) {
+    if (!el) {
+      throw new Error('Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.');
     }
+    if (typeof el !== 'object') {
+      throw new Error(`Coral.Talk.render() expected HTMLElement but got ${el} (${typeof el})`);
+    }
+
+    opts = opts || {};
+
+    // TODO: infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
+    if (!opts.talk) {
+      throw new Error(
+        'Coral.Talk.render() expects opts.talk as the Talk Base URL'
+      );
+    }
+
+    // Ensure el has an id, as pym can't directly accept the HTMLElement.
+    if (!el.id) {
+      el.id = `_${Math.random()}`;
+    }
+
+    // Compose the query to send down to the Talk API so it knows what to load.
+    const query = {};
+
+    // Parse the url parameters to extract some of the information.
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('commentId')) {
+      query.comment_id = urlParams.get('commentId');
+    }
+
+    // Extract the asset id from the options.
+    if (opts.asset_id) {
+      query.asset_id = opts.asset_id;
+    }
+
+    // Extract the asset url.
+    if (opts.asset_url) {
+      query.asset_url = opts.asset_url;
+    } else if (!opts.asset_id) {
+
+      // The asset url was not provided and the asset id was also not provided,
+      // we need to infer the asset url from details on the page.
+
+      try {
+        query.asset_url = document.querySelector('link[rel="canonical"]').href;
+      } catch (e) {
+        console.warn(
+          'This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.'
+        );
+
+        if (!window.location.origin) {
+          window.location.origin = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
+        }
+
+        query.asset_url = window.location.origin + window.location.pathname;
+      }
+    }
+
+    // Create the new Stream.
+    const stream = new Stream(el, opts.talk, query, opts);
+
+    // Return the public interface for the stream.
+    return new StreamInterface(stream);
   }
-
-  // Create the new Stream.
-  const stream = new Stream(el, opts.talk, query, opts);
-
-  // Return the public interface for the stream.
-  return new StreamInterface(stream);
-};
-
-export default Coral;
+}

client/coral-framework/components/__tests__/Markdown.spec.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import {expect} from 'chai';
 import Markdown from '../Markdown';
 
 const render = (props) => shallow(<Markdown {...props} />);
@@ -9,12 +8,12 @@ describe('Markdown', () => {
   it('should convert Markdown to html', () => {
     const wrapper = render({content: '*test*'});
     const html = wrapper.html();
-    expect(html).to.contain('<em>');
+    expect(html).toMatch('<em>');
   });
 
   it('should set target="_parent" for links', () => {
     const wrapper = render({content: '[link](https://coralproject.net)'});
     const html = wrapper.html();
-    expect(html).to.contain('target="_parent"');
+    expect(html).toMatch('target="_parent"');
   });
 });

client/coral-framework/loaders/plugins-loader.js

@@ -21,7 +21,7 @@ module.exports = function(source) {
   this.cacheable();
   const config = this.exec(source, this.resourcePath);
   const plugins = getPluginList(config).map((plugin) => `{
-    module: require('${plugin}/client'),
+    module: require('${plugin}/client').default,
     name: '${plugin}'
   }`);
 

client/coral-framework/services/client.js

@@ -1,4 +1,4 @@
-import ApolloClient, {addTypename, IntrospectionFragmentMatcher, createNetworkInterface} from 'apollo-client';
+import ApolloClient, {IntrospectionFragmentMatcher, createNetworkInterface} from 'apollo-client';
 import {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws';
 import MessageTypes from 'subscriptions-transport-ws/dist/message-types';
 
@@ -64,7 +64,6 @@ export function createClient(options = {}) {
     connectToDevTools: true,
     addTypename: true,
     fragmentMatcher: new IntrospectionFragmentMatcher({introspectionQueryResultData: introspectionData}),
-    queryTransformer: addTypename,
     dataIdFromObject: (result) => {
       if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle
         return `${result.__typename}_${result.id}`; // eslint-disable-line no-underscore-dangle

client/talk-plugin-commentbox/__tests__/commentBox.spec.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import {shallow} from 'enzyme';
-import {expect} from 'chai';
-import CommentBox from '../CommentBox';
-
-describe('CommentBox', () => {
-  let comment;
-  let render;
-  beforeEach(() => {
-    comment = {};
-    const postItem = (item) => {
-      comment.posted = item;
-      return Promise.resolve(4);
-    };
-    render = shallow(<CommentBox
-      postItem={postItem}
-      updateItem={(e) => comment.text = e.target.value}
-      item_id={'1'}
-      comments={['1', '2', '3']}/>);
-  });
-
-  it('should render the CommentBox appropriately', () => {
-    expect(render.contains('<div class="CommentBox"')).to.be.true;
-    expect(render.contains('<button class="postCommentButton"')).to.be.true;
-  });
-});

client/talk-plugin-commentbox/index.js

@@ -1,5 +1 @@
-import reducer from './reducer';
-
-export default {
-  reducer
-};
+export {default as reducer} from './reducer';

client/talk-plugin-flags/helpers/flagReasons.js

@@ -1,15 +1,14 @@
-export default {
-  username: {
-    offensive: 'USERNAME_OFFENSIVE',
-    nolike: 'USERNAME_NOLIKE',
-    impersonating: 'USERNAME_IMPERSONATING',
-    spam: 'USERNAME_SPAM',
-    other: 'USERNAME_OTHER'
-  },
-  comment: {
-    offensive: 'COMMENT_OFFENSIVE',
-    spam: 'COMMENT_SPAM',
-    noagree: 'COMMENT_NOAGREE',
-    other: 'COMMENT_OTHER'
-  }
+export const username = {
+  offensive: 'USERNAME_OFFENSIVE',
+  nolike: 'USERNAME_NOLIKE',
+  impersonating: 'USERNAME_IMPERSONATING',
+  spam: 'USERNAME_SPAM',
+  other: 'USERNAME_OTHER'
+};
+
+export const comment = {
+  offensive: 'COMMENT_OFFENSIVE',
+  spam: 'COMMENT_SPAM',
+  noagree: 'COMMENT_NOAGREE',
+  other: 'COMMENT_OTHER'
 };

client/talk-plugin-infobox/__tests__/InfoBox.spec.js

@@ -1,29 +1,36 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import {expect} from 'chai';
 import InfoBox from '../InfoBox';
+import renderer from 'react-test-renderer';
 
 const render = (props) => shallow(<InfoBox {...props} />);
 
 describe('InfoBox', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(
+      <InfoBox content='test' enable/>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should render hidden InfoBox', () => {
     const wrapper = render();
     const className = wrapper.prop('className');
-    expect(className).to.include('-info');
-    expect(className).to.include('hidden');
+    expect(className).toMatch('-info');
+    expect(className).toMatch('hidden');
   });
 
   it('should render enabled InfoBox', () => {
     const wrapper = render({enable: true});
     const className = wrapper.prop('className');
-    expect(className).to.include('-info');
-    expect(className).to.not.include('hidden');
+    expect(className).toMatch('-info');
+    expect(className).not.toMatch('hidden');
   });
 
   it('should render Markdown', () => {
     const wrapper = render({content: 'x'});
     const Markddown = wrapper.find('Markdown');
-    expect(Markddown).to.have.length(1);
-    expect(Markddown.prop('content')).to.equal('x');
+    expect(Markddown).toHaveLength(1);
+    expect(Markddown.prop('content')).toEqual('x');
   });
 });

client/talk-plugin-infobox/__tests__/__snapshots__/InfoBox.spec.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfoBox renders correctly 1`] = `
+<div
+  className="talk-plugin-infobox-info "
+>
+  <div
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<p>test</p>
+",
+      }
+    }
+  />
+</div>
+`;