feat(SocialShare): url encoding the social share icons (#91)

Author: gja

package-lock.json

@@ -50,6 +50,7 @@
     "babel-plugin-quintype-assets": "^1.1.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "jest": "^24.8.0",
+    "jest-dom": "^3.2.2",
     "onchange": "^4.1.0",
     "react-dom": "^16.8.6",
     "react-testing-library": "^7.0.0",

package.json

@@ -32,12 +32,12 @@ class SocialShareBase extends React.Component {
     const hashtags = this.props.hashtags ? this.props.hashtags : '';
 
     return React.createElement(this.props.template, Object.assign({
-      fbUrl: `https://www.facebook.com/sharer.php?u=${fullUrl}`,
-      twitterUrl: `https://twitter.com/intent/tweet?url=${fullUrl}&text=${this.props.title}&hashtags=${hashtags}`,
-      gplusUrl: `https://plus.google.com/share?url=${fullUrl}`,
-      linkedinUrl: `https://www.linkedin.com/shareArticle?url=${fullUrl}&title=${this.props.title}`,
-      whatsappUrl: `https://api.whatsapp.com/send?text=${fullUrl}`,
-      mailtoUrl: `mailto:${''}?subject=${this.props.title}&body=${fullUrl}`,
+      fbUrl: `https://www.facebook.com/sharer.php?u=${encodeURIComponent(fullUrl)}`,
+      twitterUrl: `https://twitter.com/intent/tweet?url=${encodeURIComponent(fullUrl)}&text=${encodeURIComponent(this.props.title)}&hashtags=${hashtags}`,
+      gplusUrl: `https://plus.google.com/share?url=${encodeURIComponent(fullUrl)}`,
+      linkedinUrl: `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(fullUrl)}&title=${encodeURIComponent(this.props.title)}`,
+      whatsappUrl: `https://api.whatsapp.com/send?text=${encodeURIComponent(fullUrl)}`,
+      mailtoUrl: `mailto:${''}?subject=${encodeURIComponent(this.props.title)}&body=${encodeURIComponent(fullUrl)}`,
       handleNativeShare: getNativeShareHandler(this.state.canNativeShare, this.props.title, fullUrl)
     }, this.props));
   }

src/components/social-share.js

@@ -0,0 +1,24 @@
+import { SocialShare } from '..';
+import { Provider } from 'react-redux';
+import { render, cleanup } from 'react-testing-library';
+import 'jest-dom/extend-expect'
+import { createStore } from 'redux';
+import React from 'react';
+
+afterEach(cleanup);
+
+describe("SocialShare", () => {
+  it("URL encodes the title for twitter", () => {
+    const {container} = render(
+      <Provider store={createStore(x => x, { qt: { config: {} } })}>
+        <SocialShare
+          fullUrl="https://www.google.com"
+          title="Amazing Link"
+          hashtags="awesome"
+          template={({ twitterUrl }) => <span>{twitterUrl}</span>} />
+      </Provider>
+    )
+
+    expect(container.firstChild).toHaveTextContent("https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.google.com&text=Amazing%20Link&hashtags=awesome");
+  });
+})