[social-share] fix title and canonical url being passed to share link (…

…#36751)

added e2e test
fixed shadow dom css

extensions/amp-social-share/1.0/base-element.js

@@ -1,6 +1,7 @@
 import {PreactBaseElement} from '#preact/base-element';
 
 import {BentoSocialShare} from './component';
+import {CSS as COMPONENT_CSS} from './component.jss';
 
 export class BaseElement extends PreactBaseElement {}
 
@@ -30,3 +31,6 @@ BaseElement['staticProps'] = {
 
 /** @override */
 BaseElement['usesShadowDom'] = true;
+
+/** @override */
+BaseElement['shadowCss'] = COMPONENT_CSS;

extensions/amp-social-share/1.0/component.js

@@ -141,15 +141,36 @@ function checkProps(type, endpoint, target, width, height, params) {
     return null;
   }
 
+  // TODO: This logic might be duplicated in the AMP component
+  // https://github.com/ampproject/amphtml/issues/36777
+  const currentParams = Object.entries(typeConfig.defaultParams || {}).reduce(
+    (newParams, [key, value]) => {
+      if (newParams[key]) {
+        return newParams;
+      }
+      return {
+        ...newParams,
+        [key]: value
+          .replace('TITLE', document.title)
+          .replace(
+            'CANONICAL_URL',
+            document.querySelector("link[rel='canonical']")?.href ||
+              location.href
+          ),
+      };
+    },
+    params || {}
+  );
+
   // Special case when type is 'email'
   if (type === 'email' && !endpoint) {
-    baseEndpoint = `mailto:${(params && params['recipient']) || ''}`;
+    baseEndpoint = `mailto:${currentParams['recipient'] || ''}`;
   }
 
   // Add params to baseEndpoint
   const finalEndpoint = addParamsToUrl(
     /** @type {string} */ (baseEndpoint),
-    /** @type {!JsonObject} */ (params)
+    /** @type {!JsonObject} */ (currentParams)
   );
 
   // Defaults

extensions/amp-social-share/1.0/test-e2e/test-bento-social-share.js

@@ -0,0 +1,59 @@
+describes.endtoend(
+  'bento-social-share',
+  {
+    version: '1.0',
+    fixture: 'bento/social-share.html',
+    environments: ['single'],
+  },
+  (env) => {
+    let controller;
+
+    beforeEach(() => {
+      controller = env.controller;
+    });
+
+    it('should open a window to a share page', async () => {
+      const element = await controller.findElement('bento-social-share');
+      await controller.switchToShadowRoot(element);
+
+      const shareBtn = await controller.findElement('[role="button"]');
+
+      let windows = await controller.getAllWindows();
+      await expect(windows.length).to.equal(1);
+
+      await controller.click(shareBtn);
+
+      windows = await controller.getAllWindows();
+      await expect(windows.length).to.equal(2);
+
+      await controller.switchToWindow(windows[1]);
+
+      await expect(controller.getCurrentUrl()).to.equal(
+        'https://twitter.com/intent/tweet?text=Bento%20Social%20Share&url=http%3A%2F%2Fexample.com%2F'
+      );
+    });
+
+    it('should replace title and conanical url on the same share url', async () => {
+      const element = await controller.findElement(
+        'bento-social-share[type="whatsapp"]'
+      );
+      await controller.switchToShadowRoot(element);
+
+      const shareBtn = await controller.findElement('[role="button"]');
+
+      let windows = await controller.getAllWindows();
+      await expect(windows.length).to.equal(1);
+
+      await controller.click(shareBtn);
+
+      windows = await controller.getAllWindows();
+      await expect(windows.length).to.equal(2);
+
+      await controller.switchToWindow(windows[1]);
+
+      await expect(controller.getCurrentUrl()).to.equal(
+        'https://api.whatsapp.com/send?text=Bento%20Social%20Share%20-%20http%3A%2F%2Fexample.com%2F'
+      );
+    });
+  }
+);

extensions/amp-social-share/1.0/test/test-component.js

@@ -3,11 +3,17 @@ import {mount} from 'enzyme';
 import {dict} from '#core/types/object';
 
 import * as Preact from '#preact';
+import {Wrapper} from '#preact/component';
 
 import {BentoSocialShare} from '../component';
 
-describes.sandboxed('BentoSocialShare 1.0 preact component', {}, () => {
+describes.sandboxed('BentoSocialShare 1.0 preact component', {}, (env) => {
   const originalWarn = console.warn;
+  let openSpy;
+
+  beforeEach(() => {
+    openSpy = env.sandbox.stub(window, 'open');
+  });
 
   afterEach(() => (console.warn = originalWarn));
 
@@ -39,4 +45,16 @@ describes.sandboxed('BentoSocialShare 1.0 preact component', {}, () => {
     const button = wrapper.getDOMNode();
     expect(button.className.includes('button')).to.be.true;
   });
+
+  it('should call window.open when clicked', () => {
+    const wrapper = mount(<BentoSocialShare type="twitter" />);
+
+    const button = wrapper.find(Wrapper);
+
+    expect(button.length).to.equal(1);
+
+    button.getDOMNode().dispatchEvent(new Event('click'));
+
+    expect(openSpy).called;
+  });
 });

test/fixtures/e2e/amp-social-share/amp-social-share.html

@@ -1,21 +1,99 @@
-<!doctype html>
+<!DOCTYPE html>
 <html ⚡ lang="en">
-<head>
-    <meta charset="utf-8">
+  <head>
+    <meta charset="utf-8" />
     <title>amp-social-share</title>
-    <link rel="canonical" href="//example.com" >
-    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+    <link rel="canonical" href="//example.com" />
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,initial-scale=1"
+    />
+    <style amp-boilerplate>
+      body {
+        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
+        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
+        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
+        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
+      }
+      @-webkit-keyframes -amp-start {
+        from {
+          visibility: hidden;
+        }
+        to {
+          visibility: visible;
+        }
+      }
+      @-moz-keyframes -amp-start {
+        from {
+          visibility: hidden;
+        }
+        to {
+          visibility: visible;
+        }
+      }
+      @-ms-keyframes -amp-start {
+        from {
+          visibility: hidden;
+        }
+        to {
+          visibility: visible;
+        }
+      }
+      @-o-keyframes -amp-start {
+        from {
+          visibility: hidden;
+        }
+        to {
+          visibility: visible;
+        }
+      }
+      @keyframes -amp-start {
+        from {
+          visibility: hidden;
+        }
+        to {
+          visibility: visible;
+        }
+      }
+    </style>
+    <noscript
+      ><style amp-boilerplate>
+        body {
+          -webkit-animation: none;
+          -moz-animation: none;
+          -ms-animation: none;
+          animation: none;
+        }
+      </style></noscript
+    >
     <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-latest.js"></script>
-</head>
+    <script
+      async
+      custom-element="amp-social-share"
+      src="https://cdn.ampproject.org/v0/amp-social-share-latest.js"
+    ></script>
+  </head>
 
-<body>
+  <body>
     <amp-social-share id="one" type="email"></amp-social-share>
-    <amp-social-share id="two" type="twitter" ><div id='twoChild'>Child</div></amp-social-share>
-    <amp-social-share id="three" height='400' width='400' type="tumblr"></amp-social-share>
-    <amp-social-share id="four" type="meow" data-share-endpoint="endpoint" ></amp-social-share>
-    <amp-social-share id="five" type="meow" ><div id='fiveChild'>Child</div></amp-social-share>
-    <amp-social-share id="six"><div id='sixChild'>Child</div></amp-social-share>
-</body>
+    <amp-social-share id="two" type="twitter"
+      ><div id="twoChild">Child</div></amp-social-share
+    >
+    <amp-social-share
+      id="three"
+      height="400"
+      width="400"
+      type="tumblr"
+    ></amp-social-share>
+    <amp-social-share
+      id="four"
+      type="meow"
+      data-share-endpoint="endpoint"
+    ></amp-social-share>
+    <amp-social-share id="five" type="meow"
+      ><div id="fiveChild">Child</div></amp-social-share
+    >
+    <amp-social-share id="six"><div id="sixChild">Child</div></amp-social-share>
+    <amp-social-share id="seven" type="facebook"></amp-social-share>
+  </body>
 </html>

test/fixtures/e2e/bento/social-share.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Bento Social Share</title>
+    <meta
+      name="viewport"
+      content="width=device-width,minimum-scale=1,initial-scale=1"
+    />
+    <link rel="canonical" href="//example.com" />
+    <script src="https://cdn.ampproject.org/bento.js"></script>
+    <script
+      async
+      src="https://cdn.ampproject.org/v0/bento-social-share-1.0.js"
+    ></script>
+  </head>
+  <body>
+    <h1>Social Share</h1>
+    <p>
+      <bento-social-share type="twitter"></bento-social-share>
+      <bento-social-share type="facebook"></bento-social-share>
+      <bento-social-share type="pinterest"></bento-social-share>
+      <bento-social-share type="linkedin"></bento-social-share>
+      <bento-social-share type="email"></bento-social-share>
+      <bento-social-share type="tumblr"></bento-social-share>
+      <bento-social-share type="whatsapp"></bento-social-share>
+      <bento-social-share type="line"></bento-social-share>
+      <bento-social-share type="sms"></bento-social-share>
+      <bento-social-share type="system"></bento-social-share>
+    </p>
+  </body>
+</html>