From 909f3f1f47befa5bbaa01655c0e8b78bb1906a1c Mon Sep 17 00:00:00 2001 From: Ben Warzeski Date: Tue, 22 Aug 2023 15:12:54 -0400 Subject: [PATCH] Bw/fix email modal (#193) --- .../components/CourseCardMenu/SocialShareMenu.jsx | 10 +++++----- .../CourseCardMenu/SocialShareMenu.test.jsx | 14 +++++--------- .../__snapshots__/index.test.jsx.snap | 14 ++++++++++++++ .../CourseCard/components/CourseCardMenu/index.jsx | 8 ++++---- .../components/CourseCardMenu/index.test.jsx | 11 +++++++++++ src/data/services/lms/fakeData/courses.js | 7 +++++-- 6 files changed, 44 insertions(+), 20 deletions(-) diff --git a/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.jsx b/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.jsx index 79e5c6e..bbc455a 100644 --- a/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.jsx +++ b/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.jsx @@ -8,7 +8,6 @@ import { Dropdown } from '@edx/paragon'; import track from 'tracking'; import { reduxHooks } from 'hooks'; -import { useEmailSettings } from './hooks'; import messages from './messages'; @@ -16,11 +15,9 @@ export const testIds = StrictDict({ emailSettingsModalToggle: 'emailSettingsModalToggle', }); -export const SocialShareMenu = ({ cardId }) => { +export const SocialShareMenu = ({ cardId, emailSettings }) => { const { formatMessage } = useIntl(); - const emailSettingsModal = useEmailSettings(); - const { courseName } = reduxHooks.useCardCourseData(cardId); const { isEmailEnabled, isExecEd2UCourse } = reduxHooks.useCardEnrollmentData(cardId); const { twitter, facebook } = reduxHooks.useCardSocialSettingsData(cardId); @@ -38,7 +35,7 @@ export const SocialShareMenu = ({ cardId }) => { {isEmailEnabled && ( {formatMessage(messages.emailSettings)} @@ -77,6 +74,9 @@ export const SocialShareMenu = ({ cardId }) => { }; SocialShareMenu.propTypes = { cardId: PropTypes.string.isRequired, + emailSettings: PropTypes.shape({ + show: PropTypes.func, + }).isRequired, }; export default SocialShareMenu; diff --git a/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.test.jsx b/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.test.jsx index eb932ad..979a978 100644 --- a/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.test.jsx +++ b/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.test.jsx @@ -39,14 +39,11 @@ jest.mock('./hooks', () => ({ useEmailSettings: jest.fn(), })); -const emailSettings = { - isVisible: false, - show: jest.fn().mockName('emailSettingShow'), - hide: jest.fn().mockName('emailSettingHide'), +const props = { + cardId: 'test-card-id', + emailSettings: { show: jest.fn() }, }; -const props = { cardId: 'test-card-id' }; - const mockHook = (fn, returnValue, options = {}) => { if (options.isCardHook) { when(fn).calledWith(props.cardId).mockReturnValueOnce(returnValue); @@ -71,7 +68,6 @@ const socialShare = { }; const mockHooks = (returnVals = {}) => { - mockHook(useEmailSettings, emailSettings); mockHook( reduxHooks.useCardEnrollmentData, { @@ -140,7 +136,7 @@ describe('SocialShareMenu', () => { }); } test('show email settings modal on click', () => { - expect(loadToggle().props.onClick).toEqual(emailSettings.show); + expect(loadToggle().props.onClick).toEqual(props.emailSettings.show); }); }); }; @@ -188,7 +184,7 @@ describe('SocialShareMenu', () => { expect(loadToggle().props.disabled).toEqual(false); }); test('show email settings modal on click', () => { - expect(loadToggle().props.onClick).toEqual(emailSettings.show); + expect(loadToggle().props.onClick).toEqual(props.emailSettings.show); }); }); testEmailSettingsDropdown(); diff --git a/src/containers/CourseCard/components/CourseCardMenu/__snapshots__/index.test.jsx.snap b/src/containers/CourseCard/components/CourseCardMenu/__snapshots__/index.test.jsx.snap index 2d62e56..a72f9cd 100644 --- a/src/containers/CourseCard/components/CourseCardMenu/__snapshots__/index.test.jsx.snap +++ b/src/containers/CourseCard/components/CourseCardMenu/__snapshots__/index.test.jsx.snap @@ -16,6 +16,13 @@ exports[`CourseCardMenu render show dropdown hide unenroll item and disable emai @@ -50,6 +57,13 @@ exports[`CourseCardMenu render show dropdown show unenroll and enable email snap diff --git a/src/containers/CourseCard/components/CourseCardMenu/index.jsx b/src/containers/CourseCard/components/CourseCardMenu/index.jsx index 0f7fc6c..b9f529c 100644 --- a/src/containers/CourseCard/components/CourseCardMenu/index.jsx +++ b/src/containers/CourseCard/components/CourseCardMenu/index.jsx @@ -26,7 +26,7 @@ export const testIds = StrictDict({ export const CourseCardMenu = ({ cardId }) => { const { formatMessage } = useIntl(); - const emailSettingsModal = useEmailSettings(); + const emailSettings = useEmailSettings(); const unenrollModal = useUnenrollData(); const handleToggleDropdown = useHandleToggleDropdown(cardId); const { shouldShowUnenrollItem, shouldShowDropdown } = useOptionVisibility(cardId); @@ -58,7 +58,7 @@ export const CourseCardMenu = ({ cardId }) => { {formatMessage(messages.unenroll)} )} - + { /> {isEmailEnabled && ( )} diff --git a/src/containers/CourseCard/components/CourseCardMenu/index.test.jsx b/src/containers/CourseCard/components/CourseCardMenu/index.test.jsx index 3a48f6d..e3050ff 100644 --- a/src/containers/CourseCard/components/CourseCardMenu/index.test.jsx +++ b/src/containers/CourseCard/components/CourseCardMenu/index.test.jsx @@ -7,6 +7,7 @@ import { useIntl } from '@edx/frontend-platform/i18n'; import EmailSettingsModal from 'containers/EmailSettingsModal'; import UnenrollConfirmModal from 'containers/UnenrollConfirmModal'; import { reduxHooks } from 'hooks'; +import SocialShareMenu from './SocialShareMenu'; import * as hooks from './hooks'; import CourseCardMenu, { testIds } from '.'; @@ -18,6 +19,7 @@ jest.mock('@edx/frontend-platform/i18n', () => ({ jest.mock('hooks', () => ({ reduxHooks: { useMasqueradeData: jest.fn(), useCardEnrollmentData: jest.fn() }, })); +jest.mock('./SocialShareMenu', () => 'SocialShareMenu'); jest.mock('./hooks', () => ({ useEmailSettings: jest.fn(), useUnenrollData: jest.fn(), @@ -122,6 +124,13 @@ describe('CourseCardMenu', () => { expect(modal.props.cardId).toEqual(props.cardId); }); }; + const testSocialShareMenu = () => { + it('displays SocialShareMenu with cardID and emailSettings', () => { + const menu = el.instance.findByType(SocialShareMenu)[0]; + expect(menu.props.cardId).toEqual(props.cardId); + expect(menu.props.emailSettings).toEqual(emailSettings); + }); + }; describe('show dropdown', () => { describe('hide unenroll item and disable email', () => { beforeEach(() => { @@ -132,6 +141,7 @@ describe('CourseCardMenu', () => { expect(el.snapshot).toMatchSnapshot(); }); testHandleToggle(); + testSocialShareMenu(); it('does not render unenroll modal toggle', () => { expect(el.instance.findByTestId(testIds.unenrollModalToggle).length).toEqual(0); }); @@ -154,6 +164,7 @@ describe('CourseCardMenu', () => { expect(el.snapshot).toMatchSnapshot(); }); testHandleToggle(); + testSocialShareMenu(); describe('unenroll modal toggle', () => { let toggle; describe('not masquerading', () => { diff --git a/src/data/services/lms/fakeData/courses.js b/src/data/services/lms/fakeData/courses.js index fe1923e..0fec065 100644 --- a/src/data/services/lms/fakeData/courses.js +++ b/src/data/services/lms/fakeData/courses.js @@ -761,10 +761,13 @@ export const compileCourseRunData = ({ courseName, ...data }, index) => { credit: {}, ...data, certificate: genCertificateData(data.certificate), - enrollment: genEnrollmentData({ lastEnrolled, ...data.enrollment }), + enrollment: genEnrollmentData({ + lastEnrolled, + ...getOption(emailOptions, index), + ...data.enrollment, + }), courseRun: genCourseRunData({ ...data.courseRun, - ...getOption(emailOptions, index), courseId, }), course: {