feat(TMD-463): Tracking for View more comments

packages/article-comments/__tests__/web/__snapshots__/shared.web.test.js.snap

@@ -350,6 +350,7 @@ Array [
   "spot-im-clicked-settings",
   "spot-im-user-notifications-click",
   "spot-im-open-user-profile",
+  "spot-im-show-more-comments-clicked",
   "spot-im-share-type",
   "spot-im-renew-sso",
 ]

packages/article-comments/__tests__/web/__snapshots__/tracking.web.test.js.snap

@@ -119,3 +119,11 @@ Object {
   "component": "spot im : username clicked",
 }
 `;
+
+exports[`should track when user clicks view more comments 1`] = `
+Object {
+  "action": "navigation",
+  "attrs": Object {},
+  "component": "spot im : view more comments clicked",
+}
+`;

packages/article-comments/__tests__/web/tracking.web.test.js

@@ -243,3 +243,17 @@ it("should track when user clicks on their username", () => {
   const [[callParams]] = analyticsStream.mock.calls;
   expect(callParams).toMatchSnapshot();
 });
+
+it("should track when user clicks view more comments", () => {
+  const analyticsStream = jest.fn();
+
+  const testInstance = TestRenderer.create(
+    <WithTrackingContext analyticsStream={analyticsStream} />
+  );
+  const [commentsContainer] = testInstance.root.findAllByType(CommentContainer);
+
+  commentsContainer.props.viewMoreComments();
+
+  const [[callParams]] = analyticsStream.mock.calls;
+  expect(callParams).toMatchSnapshot();
+});

packages/article-comments/src/comments.js

@@ -40,6 +40,7 @@ class Comments extends Component {
       onCommentNotificationClicked,
       onCommentUsernameClicked,
       onCommentSettingsClicked,
+      viewMoreComments,
       domainSpecificUrl
     } = this.props;
 
@@ -108,6 +109,10 @@ class Comments extends Component {
       "spot-im-open-user-profile",
       onCommentUsernameClicked
     );
+    document.addEventListener(
+      "spot-im-show-more-comments-clicked",
+      viewMoreComments
+    );
     document.addEventListener("spot-im-share-type", event =>
       getShareEvent(event)
     );
@@ -167,7 +172,8 @@ class Comments extends Component {
       onCommentRecommend,
       onCommentNotificationClicked,
       onCommentUsernameClicked,
-      onCommentSettingsClicked
+      onCommentSettingsClicked,
+      viewMoreComments
     } = this.props;
 
     return (
@@ -188,6 +194,7 @@ class Comments extends Component {
         onCommentNotificationClicked={onCommentNotificationClicked}
         onCommentUsernameClicked={onCommentUsernameClicked}
         onCommentSettingsClicked={onCommentSettingsClicked}
+        viewMoreComments={viewMoreComments}
       >
         <div
           ref={el => {
@@ -220,6 +227,7 @@ Comments.propTypes = {
   onCommentNotificationClicked: PropTypes.func,
   onCommentUsernameClicked: PropTypes.func,
   onCommentSettingsClicked: PropTypes.func,
+  viewMoreComments: PropTypes.func,
   domainSpecificUrl: PropTypes.string.isRequired
 };
 
@@ -239,7 +247,8 @@ Comments.defaultProps = {
   onCommentRecommend: () => {},
   onCommentNotificationClicked: () => {},
   onCommentUsernameClicked: () => {},
-  onCommentSettingsClicked: () => {}
+  onCommentSettingsClicked: () => {},
+  viewMoreComments: () => {}
 };
 
 export default withTrackEvents(Comments);

packages/article-comments/src/tracking/with-track-events.js

@@ -77,6 +77,11 @@ export default Component =>
         actionName: "navigation",
         eventName: "onCommentNotificationClicked",
         trackingName: "spot im : notification clicked"
+      },
+      {
+        actionName: "navigation",
+        eventName: "viewMoreComments",
+        trackingName: "spot im : view more comments clicked"
       }
     ]
   });