Skip to content

Commit ce5decd

Browse files
dethstrobedethstrobe
authored
[social-share] fix title and canonical url being passed to share link (#36751)
added e2e test fixed shadow dom css
1 parent c19c2b2 commit ce5decd

6 files changed

Lines changed: 230 additions & 18 deletions

File tree

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {PreactBaseElement} from '#preact/base-element';
22

33
import {BentoSocialShare} from './component';
4+
import {CSS as COMPONENT_CSS} from './component.jss';
45

56
export class BaseElement extends PreactBaseElement {}
67

@@ -30,3 +31,6 @@ BaseElement['staticProps'] = {
3031

3132
/** @override */
3233
BaseElement['usesShadowDom'] = true;
34+
35+
/** @override */
36+
BaseElement['shadowCss'] = COMPONENT_CSS;

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

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -141,15 +141,36 @@ function checkProps(type, endpoint, target, width, height, params) {
141141
return null;
142142
}
143143

144+
// TODO: This logic might be duplicated in the AMP component
145+
// https://github.com/ampproject/amphtml/issues/36777
146+
const currentParams = Object.entries(typeConfig.defaultParams || {}).reduce(
147+
(newParams, [key, value]) => {
148+
if (newParams[key]) {
149+
return newParams;
150+
}
151+
return {
152+
...newParams,
153+
[key]: value
154+
.replace('TITLE', document.title)
155+
.replace(
156+
'CANONICAL_URL',
157+
document.querySelector("link[rel='canonical']")?.href ||
158+
location.href
159+
),
160+
};
161+
},
162+
params || {}
163+
);
164+
144165
// Special case when type is 'email'
145166
if (type === 'email' && !endpoint) {
146-
baseEndpoint = `mailto:${(params && params['recipient']) || ''}`;
167+
baseEndpoint = `mailto:${currentParams['recipient'] || ''}`;
147168
}
148169

149170
// Add params to baseEndpoint
150171
const finalEndpoint = addParamsToUrl(
151172
/** @type {string} */ (baseEndpoint),
152-
/** @type {!JsonObject} */ (params)
173+
/** @type {!JsonObject} */ (currentParams)
153174
);
154175

155176
// Defaults

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
describes.endtoend(
2+
'bento-social-share',
3+
{
4+
version: '1.0',
5+
fixture: 'bento/social-share.html',
6+
environments: ['single'],
7+
},
8+
(env) => {
9+
let controller;
10+
11+
beforeEach(() => {
12+
controller = env.controller;
13+
});
14+
15+
it('should open a window to a share page', async () => {
16+
const element = await controller.findElement('bento-social-share');
17+
await controller.switchToShadowRoot(element);
18+
19+
const shareBtn = await controller.findElement('[role="button"]');
20+
21+
let windows = await controller.getAllWindows();
22+
await expect(windows.length).to.equal(1);
23+
24+
await controller.click(shareBtn);
25+
26+
windows = await controller.getAllWindows();
27+
await expect(windows.length).to.equal(2);
28+
29+
await controller.switchToWindow(windows[1]);
30+
31+
await expect(controller.getCurrentUrl()).to.equal(
32+
'https://twitter.com/intent/tweet?text=Bento%20Social%20Share&url=http%3A%2F%2Fexample.com%2F'
33+
);
34+
});
35+
36+
it('should replace title and conanical url on the same share url', async () => {
37+
const element = await controller.findElement(
38+
'bento-social-share[type="whatsapp"]'
39+
);
40+
await controller.switchToShadowRoot(element);
41+
42+
const shareBtn = await controller.findElement('[role="button"]');
43+
44+
let windows = await controller.getAllWindows();
45+
await expect(windows.length).to.equal(1);
46+
47+
await controller.click(shareBtn);
48+
49+
windows = await controller.getAllWindows();
50+
await expect(windows.length).to.equal(2);
51+
52+
await controller.switchToWindow(windows[1]);
53+
54+
await expect(controller.getCurrentUrl()).to.equal(
55+
'https://api.whatsapp.com/send?text=Bento%20Social%20Share%20-%20http%3A%2F%2Fexample.com%2F'
56+
);
57+
});
58+
}
59+
);

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,17 @@ import {mount} from 'enzyme';
33
import {dict} from '#core/types/object';
44

55
import * as Preact from '#preact';
6+
import {Wrapper} from '#preact/component';
67

78
import {BentoSocialShare} from '../component';
89

9-
describes.sandboxed('BentoSocialShare 1.0 preact component', {}, () => {
10+
describes.sandboxed('BentoSocialShare 1.0 preact component', {}, (env) => {
1011
const originalWarn = console.warn;
12+
let openSpy;
13+
14+
beforeEach(() => {
15+
openSpy = env.sandbox.stub(window, 'open');
16+
});
1117

1218
afterEach(() => (console.warn = originalWarn));
1319

@@ -39,4 +45,16 @@ describes.sandboxed('BentoSocialShare 1.0 preact component', {}, () => {
3945
const button = wrapper.getDOMNode();
4046
expect(button.className.includes('button')).to.be.true;
4147
});
48+
49+
it('should call window.open when clicked', () => {
50+
const wrapper = mount(<BentoSocialShare type="twitter" />);
51+
52+
const button = wrapper.find(Wrapper);
53+
54+
expect(button.length).to.equal(1);
55+
56+
button.getDOMNode().dispatchEvent(new Event('click'));
57+
58+
expect(openSpy).called;
59+
});
4260
});

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

Lines changed: 93 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,99 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html ⚡ lang="en">
3-
<head>
4-
<meta charset="utf-8">
3+
<head>
4+
<meta charset="utf-8" />
55
<title>amp-social-share</title>
6-
<link rel="canonical" href="//example.com" >
7-
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
8-
<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>
6+
<link rel="canonical" href="//example.com" />
7+
<meta
8+
name="viewport"
9+
content="width=device-width,minimum-scale=1,initial-scale=1"
10+
/>
11+
<style amp-boilerplate>
12+
body {
13+
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
14+
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
15+
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
16+
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
17+
}
18+
@-webkit-keyframes -amp-start {
19+
from {
20+
visibility: hidden;
21+
}
22+
to {
23+
visibility: visible;
24+
}
25+
}
26+
@-moz-keyframes -amp-start {
27+
from {
28+
visibility: hidden;
29+
}
30+
to {
31+
visibility: visible;
32+
}
33+
}
34+
@-ms-keyframes -amp-start {
35+
from {
36+
visibility: hidden;
37+
}
38+
to {
39+
visibility: visible;
40+
}
41+
}
42+
@-o-keyframes -amp-start {
43+
from {
44+
visibility: hidden;
45+
}
46+
to {
47+
visibility: visible;
48+
}
49+
}
50+
@keyframes -amp-start {
51+
from {
52+
visibility: hidden;
53+
}
54+
to {
55+
visibility: visible;
56+
}
57+
}
58+
</style>
59+
<noscript
60+
><style amp-boilerplate>
61+
body {
62+
-webkit-animation: none;
63+
-moz-animation: none;
64+
-ms-animation: none;
65+
animation: none;
66+
}
67+
</style></noscript
68+
>
969
<script async src="https://cdn.ampproject.org/v0.js"></script>
10-
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-latest.js"></script>
11-
</head>
70+
<script
71+
async
72+
custom-element="amp-social-share"
73+
src="https://cdn.ampproject.org/v0/amp-social-share-latest.js"
74+
></script>
75+
</head>
1276

13-
<body>
77+
<body>
1478
<amp-social-share id="one" type="email"></amp-social-share>
15-
<amp-social-share id="two" type="twitter" ><div id='twoChild'>Child</div></amp-social-share>
16-
<amp-social-share id="three" height='400' width='400' type="tumblr"></amp-social-share>
17-
<amp-social-share id="four" type="meow" data-share-endpoint="endpoint" ></amp-social-share>
18-
<amp-social-share id="five" type="meow" ><div id='fiveChild'>Child</div></amp-social-share>
19-
<amp-social-share id="six"><div id='sixChild'>Child</div></amp-social-share>
20-
</body>
79+
<amp-social-share id="two" type="twitter"
80+
><div id="twoChild">Child</div></amp-social-share
81+
>
82+
<amp-social-share
83+
id="three"
84+
height="400"
85+
width="400"
86+
type="tumblr"
87+
></amp-social-share>
88+
<amp-social-share
89+
id="four"
90+
type="meow"
91+
data-share-endpoint="endpoint"
92+
></amp-social-share>
93+
<amp-social-share id="five" type="meow"
94+
><div id="fiveChild">Child</div></amp-social-share
95+
>
96+
<amp-social-share id="six"><div id="sixChild">Child</div></amp-social-share>
97+
<amp-social-share id="seven" type="facebook"></amp-social-share>
98+
</body>
2199
</html>

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Bento Social Share</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width,minimum-scale=1,initial-scale=1"
9+
/>
10+
<link rel="canonical" href="//example.com" />
11+
<script src="https://cdn.ampproject.org/bento.js"></script>
12+
<script
13+
async
14+
src="https://cdn.ampproject.org/v0/bento-social-share-1.0.js"
15+
></script>
16+
</head>
17+
<body>
18+
<h1>Social Share</h1>
19+
<p>
20+
<bento-social-share type="twitter"></bento-social-share>
21+
<bento-social-share type="facebook"></bento-social-share>
22+
<bento-social-share type="pinterest"></bento-social-share>
23+
<bento-social-share type="linkedin"></bento-social-share>
24+
<bento-social-share type="email"></bento-social-share>
25+
<bento-social-share type="tumblr"></bento-social-share>
26+
<bento-social-share type="whatsapp"></bento-social-share>
27+
<bento-social-share type="line"></bento-social-share>
28+
<bento-social-share type="sms"></bento-social-share>
29+
<bento-social-share type="system"></bento-social-share>
30+
</p>
31+
</body>
32+
</html>

0 commit comments

Comments
 (0)