fix: video share link fixes (#32187)
* fix: remove outdated click handler in social share * fix: reestablish blank target of social share link * test: update js tests
This commit is contained in:
@@ -1,37 +1,28 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
describe('VideoSocialSharingHandler', function() {
|
||||
var state, spyOpen;
|
||||
var state;
|
||||
|
||||
beforeEach(function() {
|
||||
state = jasmine.initializePlayer('video_all.html');
|
||||
spyOpen = spyOn(window, 'open').and.returnValue(null);
|
||||
window.analytics = jasmine.createSpyObj('analytics', ['track'])
|
||||
});
|
||||
|
||||
afterAll(() => delete window.analytics);
|
||||
|
||||
describe('clicking social share opens the correct URL', function() {
|
||||
describe('clicking social share fires an analytics event', function() {
|
||||
const testCases = [
|
||||
{
|
||||
source: 'twitter',
|
||||
url: "https://twitter.com/intent/tweet?text=Here's%20a%20fun%20clip%20from%20a%20class%20I'm%20taking%20on%20%40edXonline.%0A%0A&url="
|
||||
},
|
||||
{ source: 'facebook', url: "https://www.facebook.com/sharer/sharer.php?u=" },
|
||||
{ source: 'linkedin', url: 'https://www.linkedin.com/sharing/share-offsite/?url=' },
|
||||
{ source: 'twitter' },
|
||||
{ source: 'facebook' },
|
||||
{ source: 'linkedin' },
|
||||
];
|
||||
_.each(testCases, ({ source, url }) => {
|
||||
_.each(testCases, ({ source }) => {
|
||||
it(source, () => {
|
||||
var siteShareButton = $(`.social-share-link[data-source="${source}"]`);
|
||||
expect(siteShareButton.length).toEqual(1);
|
||||
|
||||
siteShareButton.trigger('click');
|
||||
expect(spyOpen).toHaveBeenCalledWith(
|
||||
url + `video-share-url%3Futm_source%3D${source}%26utm_medium%3Dsocial%26utm_campaign%3Dsocial-share-exp`,
|
||||
'targetWindow',
|
||||
'toolbar=no,location=0,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=400'
|
||||
);
|
||||
|
||||
|
||||
expect(window.analytics.track).toHaveBeenCalledWith(
|
||||
'edx.social.video.share_button.clicked',
|
||||
{
|
||||
|
||||
@@ -2,9 +2,10 @@
|
||||
'use strict';
|
||||
// VideoSocialSharingHandler module.
|
||||
define(
|
||||
'video/036_video_social_sharing.js', ['underscore', 'gettext'],
|
||||
function(_, gettext) {
|
||||
var VideoSocialSharingHandler, SocialSharingSite, SimpleSocialSharingSite, facebook, linkedin, twitter;
|
||||
'video/036_video_social_sharing.js', ['underscore'],
|
||||
function(_) {
|
||||
var VideoSocialSharingHandler;
|
||||
|
||||
/**
|
||||
* Video Social Sharing control module.
|
||||
* @exports video/036_video_social_sharing.js
|
||||
@@ -29,6 +30,7 @@
|
||||
};
|
||||
|
||||
VideoSocialSharingHandler.prototype = {
|
||||
|
||||
// Initializes the module.
|
||||
initialize: function() {
|
||||
this.el = this.container.find('.wrapper-social-share');
|
||||
@@ -36,42 +38,16 @@
|
||||
this.baseVideoUrl = this.el.data('url');
|
||||
this.course_id = this.container.data('courseId');
|
||||
this.block_id = this.container.data('blockId')
|
||||
this.socialSharingSites = this.getSocialSharingSites()
|
||||
},
|
||||
|
||||
// Fire an analytics event on share button click.
|
||||
clickHandler: function(event) {
|
||||
var self = this;
|
||||
event.preventDefault();
|
||||
var source = $(event.currentTarget).data('source')
|
||||
var utmQuery = $.param({
|
||||
utm_source: source,
|
||||
utm_medium: 'social',
|
||||
utm_campaign: 'social-share-exp',
|
||||
});
|
||||
var sharedVideoUrl = encodeURIComponent(self.baseVideoUrl + "?" + utmQuery);
|
||||
var socialShareSite = self.socialSharingSites[source];
|
||||
var socialMediaShareLinkUrl = socialShareSite.generateShareUrl(sharedVideoUrl);
|
||||
window.open(
|
||||
socialMediaShareLinkUrl,
|
||||
'targetWindow',
|
||||
'toolbar=no,location=0,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=400'
|
||||
);
|
||||
self.sendAnalyticsEvent(source);
|
||||
},
|
||||
|
||||
getSocialSharingSites: function() {
|
||||
var socialSharingSites = {},
|
||||
socialSharingSitesList = [
|
||||
twitter, facebook, linkedin
|
||||
];
|
||||
|
||||
_.each(socialSharingSitesList, function(socialSharingSite) {
|
||||
socialSharingSites[socialSharingSite.name] = socialSharingSite;
|
||||
}, this);
|
||||
|
||||
return socialSharingSites;
|
||||
},
|
||||
|
||||
// Send an analytics event for share button tracking.
|
||||
sendAnalyticsEvent: function(source) {
|
||||
window.analytics.track(
|
||||
'edx.social.video.share_button.clicked',
|
||||
@@ -84,28 +60,6 @@
|
||||
}
|
||||
};
|
||||
|
||||
// Define the social sharing sites and how they generate
|
||||
// a link to their share page.
|
||||
SocialSharingSite = function(name, generateShareUrl) {
|
||||
// A social sharing site with a name and a function to generate a share URL
|
||||
this.name = name;
|
||||
this.generateShareUrl = generateShareUrl;
|
||||
};
|
||||
SimpleSocialSharingSite = function(name, baseShareUrl) {
|
||||
// A social sharing site with a url that is a static string with the url appended
|
||||
this.name = name;
|
||||
this.generateShareUrl = (url) => baseShareUrl + url;
|
||||
}
|
||||
twitter = new SocialSharingSite(
|
||||
'twitter',
|
||||
url => {
|
||||
var tweetText = encodeURIComponent(gettext("Here's a fun clip from a class I'm taking on @edXonline.\n\n"));
|
||||
return "https://twitter.com/intent/tweet?text=" + tweetText + "&url=" + url;
|
||||
}
|
||||
);
|
||||
facebook = new SimpleSocialSharingSite('facebook', 'https://www.facebook.com/sharer/sharer.php?u=');
|
||||
linkedin = new SimpleSocialSharingSite('linkedin', 'https://www.linkedin.com/sharing/share-offsite/?url=');
|
||||
|
||||
return VideoSocialSharingHandler;
|
||||
});
|
||||
}(RequireJS.define));
|
||||
|
||||
Reference in New Issue
Block a user