From f2ef2b034aed3af3b35cc3bee9253e33679bac24 Mon Sep 17 00:00:00 2001
From: Harry Rein <hrein@edx.org>
Date: Wed, 12 Jul 2017 15:03:22 -0400
Subject: [PATCH] Adding eventing to the course tools.

LEARNER-1652

We now send log events when the user clicks on the events in the course
toolbar, representing a change to the new page.
---
 .../fixtures/course-home-fragment.html        | 100 ++++++++++++++++++
 .../static/course_experience/js/CourseHome.js |  18 ++++
 .../js/spec/CourseHome_spec.js                |  29 +++++
 .../course-home-fragment.html                 |   8 +-
 webpack.config.js                             |   1 +
 5 files changed, 155 insertions(+), 1 deletion(-)
 create mode 100644 openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html
 create mode 100644 openedx/features/course_experience/static/course_experience/js/CourseHome.js
 create mode 100644 openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js

diff --git a/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html b/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html
new file mode 100644
index 0000000000..42fdd71c75
--- /dev/null
+++ b/openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html
@@ -0,0 +1,100 @@
+<div class="course-view container" id="course-container">
+    <header class="page-header has-secondary">
+        <div class="page-header-main">
+            <nav aria-label="Course Outline" class="sr-is-focusable" tabindex="-1">
+                <h2 class="hd hd-3 page-title">Reviews Test Course</h2>
+            </nav>
+        </div>
+        <div class="page-header-secondary">
+              <div class="page-header-search">
+                  <form class="search-form" role="search" action="/courses/course-v1:W3Cx+HTML5.0x+1T2017/search/">
+                      <label class="field-label sr-only" for="search" id="search-hint">Search the course</label>
+                      <input
+                              class="field-input input-text search-input"
+                              type="search"
+                              name="query"
+                              id="search"
+                              placeholder="Search the course"
+                      />
+                      <button class="btn btn-small search-button" type="submit">Search</button>
+                  </form>
+              </div>
+            <div class="form-actions">
+                <a class="btn btn-brand action-resume-course" href="${resume_course_url}">
+                    Start Course
+                </a>
+            </div>
+        </div>
+    </header>
+    <div class="page-content">
+        <div class="layout layout-1t2t">
+            <main class="layout-col layout-col-b">
+                <div class="section section-dates">
+                    <div class="welcome-message">
+                        <div class="dismiss-message">
+                            <button type="button" class="btn-link">Dismiss</button>
+                        </div>
+                        This is a major update!
+                    </div>
+                </div>
+                <main role="main" class="course-outline" id="main" tabindex="-1">
+                    <ol class="block-tree" role="tree">
+                        <li aria-expanded="true" class="outline-item focusable section" id="block-v1:W3Cx+HTML5.0x+1T2017+type@chapter+block@451e0388724c4f1fafba1b218ce16582" role="treeitem" tabindex="0">
+                            <div class="section-name">
+                                <h3>Testing</h3>
+                            </div>
+                            <ol class="outline-item focusable" role="group" tabindex="0">
+                                <li class="subsection " role="treeitem" tabindex="-1" aria-expanded="true">
+                                    <a class="outline-item focusable" href="http://localhost:8000/courses/course-v1:W3Cx+HTML5.0x+1T2017/jump_to/block-v1:W3Cx+HTML5.0x+1T2017+type@sequential+block@77a74ef4daa74c83b00d0b1e0e6d81f6" id="block-v1:W3Cx+HTML5.0x+1T2017+type@sequential+block@77a74ef4daa74c83b00d0b1e0e6d81f6">
+                                        <div class="subsection-text">
+                                            <span class="subsection-title">Still Testing Subsection</span>
+
+                                            <div class="details">
+
+                                            </div> <!-- /details -->
+                                        </div> <!-- /subsection-text -->
+                                        <div class="subsection-actions">
+                                        </div>
+                                    </a>
+                                </li>
+                            </ol>
+                        </li>
+                    </ol>
+                </main>
+            </main>
+            <aside class="course-sidebar layout-col layout-col-a">
+                <div class="section section-tools">
+                    <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/">
+                                <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">
+                                <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">
+                                <span class="icon fa fa-newspaper-o" aria-hidden="true"></span>
+                                Updates
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="section section-dates">
+                    <h3 class="hd hd-6 handouts-header">Important Course Dates</h3>
+                    <div class="date-summary-container">
+                        <div class="date-summary date-summary-todays-date">
+                            <span class="hd hd-6 heading localized-datetime" data-datetime="2017-07-13 17:31:27.952061+00:00" data-string="Today is {date}" data-timezone="None" data-language="en">Today is Jul 13, 2017 13:31 EDT</span>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+        </div>
+    </div>
+</div>
diff --git a/openedx/features/course_experience/static/course_experience/js/CourseHome.js b/openedx/features/course_experience/static/course_experience/js/CourseHome.js
new file mode 100644
index 0000000000..cedc8701b8
--- /dev/null
+++ b/openedx/features/course_experience/static/course_experience/js/CourseHome.js
@@ -0,0 +1,18 @@
+/* globals Logger */
+
+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();
+      Logger.log(
+        'edx.course.tool.accessed',
+        {
+          tool_name: courseToolName,
+          page: 'course_home',
+        },
+      );
+    });
+  }
+}
diff --git a/openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js b/openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js
new file mode 100644
index 0000000000..d9af744bee
--- /dev/null
+++ b/openedx/features/course_experience/static/course_experience/js/spec/CourseHome_spec.js
@@ -0,0 +1,29 @@
+/* globals Logger, loadFixtures */
+
+import { CourseHome } from '../CourseHome';
+
+describe('Course Home factory', () => {
+  describe('Ensure course tool click logging', () => {
+    let home; // eslint-disable-line no-unused-vars
+
+    beforeEach(() => {
+      loadFixtures('course_experience/fixtures/course-home-fragment.html');
+      home = new CourseHome({
+        courseToolLink: '.course-tool-link',
+      });
+      spyOn(Logger, 'log');
+    });
+
+    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',
+        },
+      );
+    });
+  });
+});
diff --git a/openedx/features/course_experience/templates/course_experience/course-home-fragment.html b/openedx/features/course_experience/templates/course_experience/course-home-fragment.html
index 90812cfe3c..d68617a2d0 100644
--- a/openedx/features/course_experience/templates/course_experience/course-home-fragment.html
+++ b/openedx/features/course_experience/templates/course_experience/course-home-fragment.html
@@ -74,7 +74,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 href="${course_tool.url(course_key)}">
+                                    <a class="course-tool-link" href="${course_tool.url(course_key)}">
                                         <span class="icon ${course_tool.icon_classes()}" aria-hidden="true"></span>
                                         ${course_tool.title()}
                                     </a>
@@ -102,3 +102,9 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
     % endif
 </div>
 </%block>
+
+<%static:webpack entry="CourseHome">
+    new CourseHome({
+        courseToolLink: ".course-tool-link",
+    });
+</%static:webpack>
diff --git a/webpack.config.js b/webpack.config.js
index f6f78bde2b..b34e53ce7b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -18,6 +18,7 @@ var wpconfig = {
     context: __dirname,
 
     entry: {
+        CourseHome: './openedx/features/course_experience/static/course_experience/js/CourseHome.js',
         CourseOutline: './openedx/features/course_experience/static/course_experience/js/CourseOutline.js',
         CourseSock: './openedx/features/course_experience/static/course_experience/js/CourseSock.js',
         CourseTalkReviews: './openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js',