diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/constants.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/constants.js new file mode 100644 index 000000000..08a42dfff --- /dev/null +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/constants.js @@ -0,0 +1,5 @@ +export const analyticsEvents = { + socialSharingSettingChanged: 'edx.social.video_sharing_setting.changed' +} + +export default analyticsEvents \ No newline at end of file diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.jsx new file mode 100644 index 000000000..1b6dee43d --- /dev/null +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.jsx @@ -0,0 +1,24 @@ +import { useSelector } from 'react-redux'; +import analyticsEvents from './constants'; +import { sendTrackEvent } from '@edx/frontend-platform/analytics'; +import { selectors } from '../../../../../../data/redux'; + +export const handleSocialSharingCheckboxChange = ({ updateField }) => { + const analytics = useSelector(selectors.app.analytics); + const allowVideoSharing = useSelector(selectors.video.allowVideoSharing); + return (event) => { + sendTrackEvent( + analyticsEvents.socialSharingSettingChanged, + { + ...analytics, + value: event.target.checked, + } + ); + updateField({ + allowVideoSharing: { + ...allowVideoSharing, + value: event.target.checked, + }, + }); + }; +}; diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.test.jsx new file mode 100644 index 000000000..3e20a74b1 --- /dev/null +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.test.jsx @@ -0,0 +1,44 @@ +import { actions } from '../../../../../../data/redux/app'; +import { sendTrackEvent } from '@edx/frontend-platform/analytics'; +import analyticsEvents from './constants'; +import * as hooks from './hooks'; + +jest.mock('../../../../../../data/redux', () => ({ + selectors: { + app: { + analytics: jest.fn((state) => ({ analytics: state })), + }, + video: { + allowVideoSharing: jest.fn((state) => ({ allowVideoSharing: state })), + }, + }, +})); + +jest.mock('@edx/frontend-platform/analytics', () => ({ + sendTrackEvent: jest.fn(), +})); + + +describe('SocialShareWidget hooks', () => { + describe('handleSocialSharingCheckboxChange when', () => { + var onClick, updateField; + describe.each([true, false])('box is toggled', (checked) => { + beforeAll(() => { + jest.resetAllMocks() + updateField = jest.fn() + onClick = hooks.handleSocialSharingCheckboxChange({ updateField }); + expect(typeof onClick).toBe('function'); + onClick({ target: { checked } }); + }); + it("field is updated", () => { + expect(updateField).toBeCalledWith({"allowVideoSharing": {"value": checked}}); + }); + it("event tracking is called", () => { + expect(sendTrackEvent).toBeCalledWith( + analyticsEvents.socialSharingSettingChanged, + {"value": checked} + ); + }); + }); + }); +}); diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx index f9c9a2026..09e3de14b 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx @@ -14,6 +14,7 @@ import { import { selectors, actions } from '../../../../../../data/redux'; import CollapsibleFormWidget from '../CollapsibleFormWidget'; import messages from './messages'; +import * as hooks from './hooks' /** * Collapsible Form widget controlling video thumbnail @@ -32,6 +33,8 @@ export const SocialShareWidget = ({ const isSetByCourse = allowVideoSharing.level === 'course'; const videoSharingEnabled = isLibrary ? videoSharingEnabledForAll : videoSharingEnabledForCourse; const learnMoreLink = videoSharingLearnMoreLink || 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/social_sharing.html'; + const onSocialSharingCheckboxChange = hooks.handleSocialSharingCheckboxChange({ updateField }); + const getSubtitle = () => { if (allowVideoSharing.value) { return intl.formatMessage(messages.enabledSubtitle); @@ -52,12 +55,7 @@ export const SocialShareWidget = ({ className="mt-3" checked={allowVideoSharing.value} disabled={isSetByCourse} - onChange={(e) => updateField({ - allowVideoSharing: { - ...allowVideoSharing, - value: e.target.checked, - }, - })} + onChange={onSocialSharingCheckboxChange} >