Merge pull request #15637 from edx/HarryRein/LEARNER-1652-cleanup

Updating jasmine tests for course tools.

openedx/features/course_bookmarks/plugins.py

@@ -13,6 +13,13 @@ class CourseBookmarksTool(CourseTool):
     """
     The course bookmarks tool.
     """
+    @classmethod
+    def analytics_id(cls):
+        """
+        Returns an id to uniquely identify this tool in analytics events.
+        """
+        return 'edx.bookmarks'
+
     @classmethod
     def is_enabled(cls, request, course_key):
         """

openedx/features/course_experience/course_tools.py

@@ -16,6 +16,14 @@ class CourseTool(object):
     not a requirement, and plugin implementations outside of this repo should
     simply follow the contract defined below.
     """
+    @classmethod
+    def analytics_id(cls):
+        """
+        Returns an id to uniquely identify this tool in analytics events.
+
+        For example, 'edx.bookmarks'.  New tools may warrant doc updates for the new id.
+        """
+        raise NotImplementedError("Must specify an id to enable course tool eventing.")
 
     @classmethod
     def is_enabled(cls, request, course_key):

openedx/features/course_experience/plugins.py

@@ -19,6 +19,13 @@ class CourseUpdatesTool(CourseTool):
     """
     The course updates tool.
     """
+    @classmethod
+    def analytics_id(cls):
+        """
+        Returns an analytics id for this tool, used for eventing.
+        """
+        return 'edx.updates'
+
     @classmethod
     def title(cls):
         """
@@ -57,6 +64,13 @@ class CourseReviewsTool(CourseTool):
     """
     The course reviews tool.
     """
+    @classmethod
+    def analytics_id(cls):
+        """
+        Returns an id to uniquely identify this tool in analytics events.
+        """
+        return 'edx.reviews'
+
     @classmethod
     def title(cls):
         """

openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html

@@ -67,19 +67,19 @@
                     <h3 class="hd-6">Course Tools</h3>
                     <ul class="list-unstyled">
                         <li>
-                            <a class="course-tool-link" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/bookmarks/">
+                            <a class="course-tool-link" data-analytics-id="edx.bookmarks" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/bookmarks/">
                                 <span class="icon fa fa-bookmark" aria-hidden="true"></span>
                                 Bookmarks
                             </a>
                         </li>
                         <li>
-                            <a class="course-tool-link" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/course/reviews">
+                            <a class="course-tool-link" data-analytics-id="edx.reviews" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/course/reviews">
                                 <span class="icon fa fa-star" aria-hidden="true"></span>
                                 Reviews
                             </a>
                         </li>
                         <li>
-                            <a class="course-tool-link" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/course/updates">
+                            <a class="course-tool-link" data-analytics-id="edx.updates" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/course/updates">
                                 <span class="icon fa fa-newspaper-o" aria-hidden="true"></span>
                                 Updates
                             </a>

openedx/features/course_experience/static/course_experience/js/CourseHome.js

@@ -4,13 +4,12 @@ export class CourseHome {  // eslint-disable-line import/prefer-default-export
   constructor(options) {
     // Logging for course tool click events
     const $courseToolLink = $(options.courseToolLink);
-    $courseToolLink.on('click', () => {
-      const courseToolName = document.querySelector('.course-tool-link').text.trim().toLowerCase();
+    $courseToolLink.on('click', (event) => {
+      const courseToolName = event.srcElement.dataset['analytics-id']; // eslint-disable-line dot-notation
       Logger.log(
         'edx.course.tool.accessed',
         {
           tool_name: courseToolName,
-          page: 'course_home',
         },
       );
     });

openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js

@@ -15,15 +15,19 @@ describe('Course Home factory', () => {
     });
 
     it('sends an event when an course tool is clicked', () => {
-      document.querySelector('.course-tool-link').dispatchEvent(new Event('click'));
-      const courseToolName = document.querySelector('.course-tool-link').text.trim().toLowerCase();
-      expect(Logger.log).toHaveBeenCalledWith(
-        'edx.course.tool.accessed',
-        {
-          tool_name: courseToolName,
-          page: 'course_home',
-        },
-      );
+      const courseToolNames = document.querySelectorAll('.course-tool-link');
+      for (let i = 0; i < courseToolNames.length; i += 1) {
+        const courseToolName = courseToolNames[i].dataset['analytics-id']; // eslint-disable-line dot-notation
+        const event = new CustomEvent('click');
+        event.srcElement = { dataset: { 'analytics-id': courseToolName } };
+        courseToolNames[i].dispatchEvent(event);
+        expect(Logger.log).toHaveBeenCalledWith(
+          'edx.course.tool.accessed',
+          {
+            tool_name: courseToolName,
+          },
+        );
+      }
     });
   });
 });

openedx/features/course_experience/templates/course_experience/course-home-fragment.html

@@ -78,7 +78,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
                         <ul class="list-unstyled">
                             % for course_tool in course_tools:
                                 <li>
-                                    <a class="course-tool-link" href="${course_tool.url(course_key)}">
+                                    <a class="course-tool-link" data-analytics-id="${course_tool.analytics_id()}" href="${course_tool.url(course_key)}">
                                         <span class="icon ${course_tool.icon_classes()}" aria-hidden="true"></span>
                                         ${course_tool.title()}
                                     </a>