Use get_link_for_about_page utility for social sharing on dashboard

common/test/acceptance/tests/lms/test_lms_dashboard.py

@@ -163,7 +163,8 @@ class LmsDashboardPageTest(BaseLmsDashboardTest):
         self.assertIn(twitter_url, twitter_widget.attrs('onclick')[0])
 
         facebook_widget = self.dashboard_page.get_course_social_sharing_widget('facebook')
-        facebook_url = "https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcustom%2Fcourse%2Furl"
+        facebook_url = ('https://www.facebook.com/sharer/sharer.php?'
+                        'u=http%3A%2F%2Fcustom%2Fcourse%2Furl&quote=I%27m+taking')
         self.assertEqual(facebook_widget.attrs('title')[0], 'Share on Facebook')
         self.assertEqual(facebook_widget.attrs('data-tooltip')[0], 'Share on Facebook')
         self.assertEqual(facebook_widget.attrs('aria-haspopup')[0], 'true')

lms/static/js/course_sharing/course_sharing_events.js

@@ -0,0 +1,28 @@
+/**
+* Module for emitting Course Sharing Events.
+*/
+(function(define) {
+    'use strict';
+
+    define(['jquery', 'logger'], function($, Logger) {
+        return function(courseId) {
+            $(".action-facebook[data-course-id='" + courseId + "']").on('click', function() {
+                // Emit an event telling that the Facebook share link was clicked.
+                Logger.log('edx.course.share_clicked', {
+                    course_id: courseId,
+                    social_media_site: 'facebook',
+                    location: 'dashboard'
+                });
+            });
+
+            $(".action-twitter[data-course-id='" + courseId + "']").on('click', function() {
+                // Emit an event telling that the Twitter share link was clicked.
+                Logger.log('edx.course.share_clicked', {
+                    course_id: courseId,
+                    social_media_site: 'twitter',
+                    location: 'dashboard'
+                });
+            });
+        };
+    });
+}).call(this, define || RequireJS.define);

lms/static/js/fixtures/course_sharing/course_listings.html

@@ -0,0 +1,91 @@
+<div class="my-courses" id="my-courses">
+
+    <header class="wrapper-header-courses">
+        <h2 class="header-courses">My Courses</h2>
+    </header>
+
+    <h2 class="hd hd-2 sr" id="courses-tab">My Courses</h2>
+
+    <ul class="listing-courses">
+
+        <li class="course-item">
+
+            <div class="course-container">
+                <article class="course">
+
+                    <section class="details" aria-labelledby="details-heading-cs181">
+                        <h2 class="hd hd-2 sr" id="details-heading-cs181">Course details</h2>
+
+                        <div class="wrapper-course-details">
+
+                            <div class="wrapper-course-actions">
+                                <div class="course-actions">
+                                    <a href="/courses/course-v1:uog+cs181+2017_LT/info" class="enter-course archived"
+                                       data-course-key="course-v1:uog+cs181+2017_LT">View Archived Course<span
+                                            class="sr">&nbsp;Accounting for Decision-Making</span></a>
+
+                                    <a data-tooltip="Share on Facebook" class="action action-facebook"
+                                       title="Share on Facebook"
+                                       data-course-id="course-v1:uog+cs181+2017_LT">
+                                        <span class="sr">Facebook</span>
+                                        <span class="fa fa-facebook" aria-hidden="true"></span>
+                                    </a>
+
+                                    <a data-tooltip="Share on Twitter" class="action action-twitter"
+                                       title="Share on Twitter"
+                                       data-course-id="course-v1:uog+cs181+2017_LT">
+                                        <span class="sr">Twitter</span>
+                                        <span class="fa fa-twitter" aria-hidden="true"></span>
+                                    </a>
+
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <footer class="wrapper-messages-primary"> </footer>
+                </article>
+            </div>
+        </li>
+
+        <li class="course-item">
+
+            <div class="course-container">
+                <article class="course">
+
+                    <section class="details" aria-labelledby="details-heading-DemoX">
+                        <h2 class="hd hd-2 sr" id="details-heading-DemoX">Course details</h2>
+
+                        <div class="wrapper-course-details">
+
+                            <div class="wrapper-course-actions">
+                                <div class="course-actions">
+
+                                    <a href="/courses/course-v1:edX+DemoX+Demo_Course/info" class="enter-course"
+                                       data-course-key="course-v1:edX+DemoX+Demo_Course">View Course<span class="sr">&nbsp;edX Demonstration Course</span></a>
+
+                                    <a data-tooltip="Share on Facebook" class="action action-facebook"
+                                       title="Share on Facebook"
+                                       data-course-id="course-v1:edX+DemoX+Demo_Course">
+                                        <span class="sr">Facebook</span>
+                                        <span class="fa fa-facebook" aria-hidden="true"></span>
+                                    </a>
+
+                                    <a data-tooltip="Share on Twitter" class="action action-twitter"
+                                       title="Share on Twitter"
+                                       data-course-id="course-v1:edX+DemoX+Demo_Course">
+                                        <span class="sr">Twitter</span>
+                                        <span class="fa fa-twitter" aria-hidden="true"></span>
+                                    </a>
+
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <footer class="wrapper-messages-primary"> </footer>
+                </article>
+            </div>
+        </li>
+
+    </ul>
+
+</div>

lms/static/js/spec/course_sharing/course_sharing_events_spec.js

@@ -0,0 +1,58 @@
+define(
+
+    ['jquery', 'logger', 'js/course_sharing/course_sharing_events'],
+    function($, Logger, CourseSharingEvents) {
+        'use strict';
+
+        describe('Course sharing click eventing', function() {
+            var courseKey1 = 'course-v1:edX+DemoX+Demo_Course',
+                courseKey2 = 'course-v1:uog+cs181+2017_LT';
+
+            beforeEach(function() {
+                loadFixtures('js/fixtures/course_sharing/course_listings.html');
+                // Register course sharing eventing callbacks for both courses.
+                CourseSharingEvents(courseKey1);
+                CourseSharingEvents(courseKey2);
+                spyOn(Logger, 'log');
+            });
+
+            it('sends an event only for a course whose facebook link is clicked', function() {
+                $(".action-facebook[data-course-id='" + courseKey1 + "']").click();
+                expect(Logger.log).toHaveBeenCalledWith('edx.course.share_clicked', {
+                    course_id: courseKey1,
+                    social_media_site: 'facebook',
+                    location: 'dashboard'
+                });
+                expect(Logger.log.calls.count()).toEqual(1);
+
+                Logger.log.calls.reset();
+                $(".action-facebook[data-course-id='" + courseKey2 + "']").click();
+                expect(Logger.log).toHaveBeenCalledWith('edx.course.share_clicked', {
+                    course_id: courseKey2,
+                    social_media_site: 'facebook',
+                    location: 'dashboard'
+                });
+                expect(Logger.log.calls.count()).toEqual(1);
+            });
+
+            it('sends an event only for a course whose twitter link is clicked', function() {
+                $(".action-twitter[data-course-id='" + courseKey1 + "']").click();
+                expect(Logger.log).toHaveBeenCalledWith('edx.course.share_clicked', {
+                    course_id: courseKey1,
+                    social_media_site: 'twitter',
+                    location: 'dashboard'
+                });
+                expect(Logger.log.calls.count()).toEqual(1);
+
+                Logger.log.calls.reset();
+                $(".action-twitter[data-course-id='" + courseKey2 + "']").click();
+                expect(Logger.log).toHaveBeenCalledWith('edx.course.share_clicked', {
+                    course_id: courseKey2,
+                    social_media_site: 'twitter',
+                    location: 'dashboard'
+                });
+                expect(Logger.log.calls.count()).toEqual(1);
+            });
+        });
+    }
+);

lms/static/lms/js/spec/main.js

@@ -687,6 +687,7 @@
         'js/spec/commerce/receipt_view_spec.js',
         'js/spec/components/card/card_spec.js',
         'js/spec/components/header/header_spec.js',
+        'js/spec/course_sharing/course_sharing_events_spec.js',
         'js/spec/courseware/course_home_events_spec.js',
         'js/spec/courseware/link_clicked_events_spec.js',
         'js/spec/courseware/updates_visibility_spec.js',

lms/templates/dashboard/_dashboard_course_listing.html

@@ -8,7 +8,7 @@ from django.utils.translation import ungettext
 from django.core.urlresolvers import reverse
 from course_modes.models import CourseMode
 from course_modes.helpers import enrollment_mode_display
-from openedx.core.djangolib.js_utils import dump_js_escaped_json
+from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_string
 from openedx.core.djangolib.markup import HTML, Text
 from student.helpers import (
   VERIFY_STATUS_NEED_TO_VERIFY,
@@ -19,6 +19,7 @@ from student.helpers import (
   VERIFY_STATUS_NEED_TO_REVERIFY,
   DISABLE_UNENROLL_CERT_STATES,
 )
+from util.course import get_link_for_about_page
 %>
 
 <%
@@ -149,18 +150,16 @@ from student.helpers import (
 
               % if share_settings:
                 <%
-                  if share_settings.get("CUSTOM_COURSE_URLS", False):
-                    if course_overview.social_sharing_url:
-                      share_url = urllib.quote_plus(course_overview.social_sharing_url)
-                    else:
-                      share_url = ''
-                  else:
-                    share_url = urllib.quote_plus(request.build_absolute_uri(reverse('about_course', args=[unicode(course_overview.id)])))
+                  share_url = get_link_for_about_page(course_overview)
                   share_window_name = 'shareWindow'
                   share_window_config = 'toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=640, height=480'
                 %>
-                % if share_url and share_settings.get('DASHBOARD_FACEBOOK', False):
-                  <% facebook_url = 'https://www.facebook.com/sharer/sharer.php?u=' + share_url %>
+                % if share_settings.get('DASHBOARD_FACEBOOK', False):
+                  <%
+                      share_text = _("I'm taking {course_name} online with edX.org. Check it out!").format(course_name=course_overview.display_name_with_default)
+                      query_params = urllib.urlencode((('u', share_url), ('quote', share_text.encode('utf-8')),))
+                      facebook_url = 'https://www.facebook.com/sharer/sharer.php?{query}'.format(query=query_params)
+                  %>
                     <a
                       data-tooltip="${_('Share on Facebook')}"
                       class="action action-facebook"
@@ -169,15 +168,18 @@ from student.helpers import (
                       href="${facebook_url}"
                       target="_blank"
                       title="${_('Share on Facebook')}"
+                      data-course-id="${course_overview.id}"
                       onclick="window.open('${facebook_url}', '${share_window_name}', '${share_window_config}'); return false;">
                       <span class="sr">${_('Facebook')}</span>
                       <span class="fa fa-facebook" aria-hidden="true"></span>
                     </a>
                 % endif
-                % if share_url and share_settings.get('DASHBOARD_TWITTER', False):
-                  <% share_text_default = _("I'm learning on {platform_name}:").format(platform_name=settings.PLATFORM_NAME) %>
-                  <% share_text = urllib.quote_plus(share_settings.get('DASHBOARD_TWITTER_TEXT', share_text_default)) %>
-                  <% twitter_url = 'https://twitter.com/intent/tweet?text=' + share_text + '%20' + share_url %>
+                % if share_settings.get('DASHBOARD_TWITTER', False):
+                  <%
+                      default_share_text = _("I'm taking {course_name} online with @edxonline. Check it out!").format(course_name=course_overview.display_name_with_default)
+                      share_text = urllib.quote_plus(share_settings.get('DASHBOARD_TWITTER_TEXT', default_share_text.encode('utf-8')))
+                      twitter_url = 'https://twitter.com/intent/tweet?text=' + share_text + '%20' + urllib.quote_plus(share_url)
+                  %>
                     <a
                       data-tooltip="${_('Share on Twitter')}"
                       class="action action-twitter"
@@ -186,6 +188,7 @@ from student.helpers import (
                       href="${twitter_url}"
                       target="_blank"
                       title="${_('Share on Twitter')}"
+                      data-course-id="${course_overview.id}"
                       onclick="window.open('${twitter_url}', '${share_window_name}', '${share_window_config}'); return false;">
                       <span class="sr">${_('Twitter')}</span>
                       <span class="fa fa-twitter" aria-hidden="true"></span>
@@ -450,6 +453,12 @@ from student.helpers import (
            });
 </script>
 
+% if share_settings.get('DASHBOARD_FACEBOOK', False) and share_settings.get('DASHBOARD_TWITTER', False):
+    <%static:require_module_async module_name="js/course_sharing/course_sharing_events" class_name="CourseSharingEvents">
+        CourseSharingEvents("${course_overview.id | n, js_escaped_string}");
+    </%static:require_module_async>
+%endif
+
 <%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
     DateUtilFactory.transform(iterationKey=".localized-datetime");
 </%static:require_module_async>