diff --git a/src/generic/course-sock/CourseSock.jsx b/src/generic/course-sock/CourseSock.jsx index 4e84ecef..2ed34d23 100644 --- a/src/generic/course-sock/CourseSock.jsx +++ b/src/generic/course-sock/CourseSock.jsx @@ -49,6 +49,14 @@ export default class CourseSock extends Component { location: 'sock', ...this.commonEventProperties, }); + const onCourseHome = this.props.pageLocation === 'Home Page'; + sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', { + ...this.commonEventProperties, + linkCategory: 'green_upgrade', + linkName: onCourseHome ? 'course_home_sock' : 'in_course_sock', + linkType: 'button', + pageName: onCourseHome ? 'course_home' : 'in_course', + }); } showToUser = () => { diff --git a/src/generic/course-sock/CourseSock.test.jsx b/src/generic/course-sock/CourseSock.test.jsx index a70a0882..2716ae29 100644 --- a/src/generic/course-sock/CourseSock.test.jsx +++ b/src/generic/course-sock/CourseSock.test.jsx @@ -1,12 +1,14 @@ import React from 'react'; +import { sendTrackEvent } from '@edx/frontend-platform/analytics'; import { - render, screen, fireEvent, initializeMockApp, + render, screen, fireEvent, initializeMockApp, initializeTestStore, } from '../../setupTest'; import CourseSock from './CourseSock'; jest.mock('@edx/frontend-platform/analytics'); describe('Course Sock', () => { + let store; const mockData = { verifiedMode: { upgradeUrl: 'test-url', @@ -20,6 +22,9 @@ describe('Course Sock', () => { beforeAll(async () => { // We need to mock AuthService to implicitly use `getAuthenticatedUser` within `AppContext.Provider`. await initializeMockApp(); + store = await initializeTestStore(); + const { courseware } = store.getState(); + mockData.courseId = courseware.courseId; }); it('hides upsell information on load', () => { @@ -29,16 +34,49 @@ describe('Course Sock', () => { expect(screen.queryByText('edX Verified Certificate')).not.toBeInTheDocument(); }); - it('handles click', () => { + it.only('handles click', () => { + sendTrackEvent.mockClear(); render(); - const upsellButton = screen.getByRole('button', { name: 'Learn About Verified Certificates' }); - fireEvent.click(upsellButton); + const learnMoreButton = screen.getByRole('button', { name: 'Learn About Verified Certificates' }); + fireEvent.click(learnMoreButton); expect(screen.getByText('edX Verified Certificate')).toBeInTheDocument(); const { currencySymbol, price } = mockData.verifiedMode; - expect(screen.getByText(`Upgrade for ${currencySymbol}${price}`)).toBeInTheDocument(); - + const upsellButton = screen.getByText(`Upgrade for ${currencySymbol}${price}`); + expect(upsellButton).toBeInTheDocument(); fireEvent.click(upsellButton); + expect(sendTrackEvent).toHaveBeenCalledTimes(4); + + expect(sendTrackEvent).toHaveBeenCalledWith('Promotion Viewed', { + courserun_key: 'course-v1:edX+DemoX+Demo_Course_1', + creative: 'original_sock', + name: 'In-Course Verification Prompt', + org_key: null, + position: 'sock', + promotion_id: 'courseware_verified_certificate_upsell', + }); + expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.course.sock.toggle_closed', { + courserun_key: 'course-v1:edX+DemoX+Demo_Course_1', + from_page: 'Course Content Page', + org_key: null, + }); + expect(sendTrackEvent).toHaveBeenCalledWith('Promotion Clicked', { + courserun_key: 'course-v1:edX+DemoX+Demo_Course_1', + creative: 'original_sock', + name: 'In-Course Verification Prompt', + org_key: null, + position: 'sock', + promotion_id: 'courseware_verified_certificate_upsell', + }); + expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', { + org_key: null, + courserun_key: mockData.courseId, + linkCategory: 'green_upgrade', + linkName: 'in_course_sock', + linkType: 'button', + pageName: 'in_course', + }); + fireEvent.click(learnMoreButton); expect(screen.queryByText('edX Verified Certificate')).not.toBeInTheDocument(); }); });