From 82d7aab264e7075db19558776a2a112501d3fa56 Mon Sep 17 00:00:00 2001 From: Ben Warzeski Date: Wed, 21 Sep 2022 14:01:33 -0400 Subject: [PATCH] fix: update components for new api fields --- .../components/CourseCardActions/hooks.js | 83 +++++++------ .../CourseCardBanners/CertificateBanner.jsx | 4 +- .../CertificateBanner.test.jsx | 111 ------------------ .../CourseCardBanners/CourseBanner.jsx | 6 +- .../CertificateBanner.test.jsx.snap | 39 ------ .../EntitlementBanner.test.jsx.snap | 4 +- .../components/CourseCardContent.jsx | 6 +- .../components/CourseCardDetails/hooks.js | 7 +- src/containers/CourseCard/hooks.js | 4 +- src/containers/CourseCard/hooks.test.js | 4 +- .../__snapshots__/index.test.jsx.snap | 6 - .../EmptyCourse/SuggestedCourses/index.jsx | 8 +- .../SuggestedCourses/index.test.jsx | 15 +-- .../EmptyCourse/SuggestedCourses/messages.js | 5 - .../__snapshots__/index.test.jsx.snap | 2 +- .../__snapshots__/index.test.jsx.snap | 8 +- .../components/ProgramCard.jsx | 8 +- .../components/ProgramCard.test.jsx | 4 +- .../__snapshots__/ProgramCard.test.jsx.snap | 6 +- .../components/messages.js | 2 +- .../RelatedProgramsModal/hooks.test.js | 26 ---- src/containers/RelatedProgramsModal/index.jsx | 7 +- .../RelatedProgramsModal/index.test.jsx | 23 +++- src/test/app.test.jsx | 19 ++- 24 files changed, 122 insertions(+), 285 deletions(-) delete mode 100644 src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx delete mode 100644 src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CertificateBanner.test.jsx.snap delete mode 100644 src/containers/RelatedProgramsModal/hooks.test.js diff --git a/src/containers/CourseCard/components/CourseCardActions/hooks.js b/src/containers/CourseCard/components/CourseCardActions/hooks.js index 323a102..920f7fd 100644 --- a/src/containers/CourseCard/components/CourseCardActions/hooks.js +++ b/src/containers/CourseCard/components/CourseCardActions/hooks.js @@ -11,56 +11,67 @@ export const useCardActionData = ({ cardId }) => { const dispatch = useDispatch(); const { canUpgrade, + coursewareAccess, + hasStarted, isAudit, isAuditAccessExpired, isVerified, } = appHooks.useCardEnrollmentData(cardId); - const { isPending, isArchived } = appHooks.useCardCourseRunData(cardId); + const { isArchived } = appHooks.useCardCourseRunData(cardId); const { - isEntitlement, - canViewCourse, - isFulfilled, - isExpired, canChange, hasSessions, + isEntitlement, + isExpired, + isFulfilled, } = appHooks.useCardEntitlementData(cardId); const openSessionModal = appHooks.useUpdateSelectSessionModalCallback(dispatch, cardId); + const hasAccess = coursewareAccess.isStaff || !( + coursewareAccess.hasUnmetPrereqs + || coursewareAccess.isTooEarly + || isArchived); + + const selectSessionButton = { + children: formatMessage(messages.selectSession), + onClick: openSessionModal, + disabled: !hasAccess || (!canChange || !hasSessions), + }; + + const viewCourseButton = { + children: formatMessage(messages.viewCourse), + disabled: !hasAccess || (isEntitlement && isExpired), + }; + + const beginCourseButton = { + children: formatMessage(messages.beginCourse), + disabled: !hasAccess, + }; + + const resumeButton = { + children: formatMessage(messages.resume), + disabled: isAudit && isAuditAccessExpired, + }; + + const upgradeButton = { + iconBefore: Locked, + variant: 'outline-primary', + children: formatMessage(messages.upgrade), + disabled: !canUpgrade, + }; + let primary; - let secondary = null; if (isEntitlement) { - if (!isFulfilled) { - primary = { - children: formatMessage(messages.selectSession), - disabled: !(canChange && hasSessions), - onClick: openSessionModal, - }; - } else { - primary = { - children: formatMessage(messages.viewCourse), - disabled: !canViewCourse || isExpired, - }; - } + primary = isFulfilled ? selectSessionButton : viewCourseButton; + } else if (!hasStarted) { + primary = beginCourseButton; + } else if (isArchived) { + primary = viewCourseButton; } else { - if (!isVerified) { - secondary = { - iconBefore: Locked, - variant: 'outline-primary', - disabled: !canUpgrade, - children: formatMessage(messages.upgrade), - }; - } - if (isPending) { - primary = { children: formatMessage(messages.beginCourse) }; - } else if (!isArchived) { - primary = { - children: formatMessage(messages.resume), - disabled: isAudit && isAuditAccessExpired, - }; - } else { - primary = { children: formatMessage(messages.viewCourse) }; - } + primary = resumeButton; } + + const secondary = (isEntitlement || !isVerified) ? null : upgradeButton; return { primary, secondary }; }; diff --git a/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx b/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx index 3f02001..d07c3a6 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx @@ -21,7 +21,7 @@ export const CertificateBanner = ({ cardId }) => { const { isPassing } = appHooks.useCardGradeData(cardId); const { minPassingGrade, progressUrl } = appHooks.useCardCourseRunData(cardId); const { supportEmail, billingEmail } = appHooks.usePlatformSettingsData(); - const { formatMessage } = useIntl(); + const { formatMessage, formatDate } = useIntl(); const emailLink = address => address && {address}; @@ -76,7 +76,7 @@ export const CertificateBanner = ({ cardId }) => { {formatMessage( messages.gradeAndCertReadyAfter, - { availableDate: certificate.availableDate }, + { availableDate: formatDate(certificate.availableDate) }, )} ); diff --git a/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx b/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx deleted file mode 100644 index e17b401..0000000 --- a/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx +++ /dev/null @@ -1,111 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import { Hyperlink } from '@edx/paragon'; - -import { hooks as appHooks } from 'data/redux'; -import { CourseBanner } from './CourseBanner'; - -import messages from './messages'; - -jest.mock('components/Banner', () => 'Banner'); -jest.mock('data/redux', () => ({ - hooks: { - useCardCourseData: jest.fn(), - useCardCourseRunData: jest.fn(), - useCardEnrollmentData: jest.fn(), - }, -})); - -const cardId = 'my-test-course-number'; - -let el; - -const enrollmentData = { - isVerified: false, - canUpgrade: false, - isAuditAccessExpired: false, -}; -const courseRunData = { - isActive: false, -}; -const courseData = { - website: 'test-course-website', -}; - -const render = (overrides = {}) => { - const { - course = {}, - courseRun = {}, - enrollment = {}, - } = overrides; - appHooks.useCardCourseData.mockReturnValueOnce({ - ...courseData, - ...course, - }); - appHooks.useCardCourseRunData.mockReturnValueOnce({ - ...courseRunData, - ...courseRun, - }); - appHooks.useCardEnrollmentData.mockReturnValueOnce({ - ...enrollmentData, - ...enrollment, - }); - el = shallow(); -}; - -describe('CourseBanner', () => { - it('initializes data with course number from enrollment, course and course run data', () => { - render(); - expect(appHooks.useCardCourseData).toHaveBeenCalledWith(cardId); - expect(appHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId); - expect(appHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId); - }); - test('no display if learner is verified', () => { - render({ enrollment: { isVerified: true } }); - expect(el.isEmptyRender()).toEqual(true); - }); - describe('audit access expired, can upgrade', () => { - beforeEach(() => { - render({ enrollment: { isAuditAccessExpired: true, canUpgrade: true } }); - }); - test('snapshot: (auditAccessExpired, upgradeToAccess)', () => { - expect(el).toMatchSnapshot(); - }); - test('messages: (auditAccessExpired, upgradeToAccess)', () => { - expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage); - expect(el.text()).toContain(messages.upgradeToAccess.defaultMessage); - }); - }); - describe('audit access expired, cannot upgrade', () => { - beforeEach(() => { - render({ enrollment: { isAuditAccessExpired: true } }); - }); - test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => { - expect(el).toMatchSnapshot(); - }); - test('messages: (auditAccessExpired, upgradeToAccess)', () => { - expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage); - expect(el.find(Hyperlink).text()).toEqual(messages.findAnotherCourse.defaultMessage); - }); - }); - describe('course run active and cannot upgrade', () => { - beforeEach(() => { - render({ courseRun: { isActive: true } }); - }); - test('snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => { - expect(el).toMatchSnapshot(); - }); - test('messages: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => { - expect(el.text()).toContain(messages.upgradeDeadlinePassed.defaultMessage); - const link = el.find(Hyperlink); - expect(link.text()).toEqual(messages.exploreCourseDetails.defaultMessage); - expect(link.props().destination).toEqual(courseData.website); - }); - }); - test('no display if audit access not expired and (course is not active or can upgrade)', () => { - render(); - expect(el.html()).toEqual(''); - render({ enrollment: { canUpgrade: true }, courseRun: { isActive: true } }); - expect(el.html()).toEqual(''); - }); -}); diff --git a/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx b/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx index 4eb36e7..4475101 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx +++ b/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx @@ -17,7 +17,7 @@ export const CourseBanner = ({ cardId }) => { } = appHooks.useCardEnrollmentData(cardId); const courseRun = appHooks.useCardCourseRunData(cardId); const course = appHooks.useCardCourseData(cardId); - const { formatMessage } = useIntl(); + const { formatMessage, formatDate } = useIntl(); const { hasUnmetPrerequisites, isStaff, isTooEarly } = coursewareAccess; @@ -56,7 +56,7 @@ export const CourseBanner = ({ cardId }) => { {isTooEarly && ( {formatMessage(messages.courseHasNotStarted, { - startDate: courseRun.startDate, + startDate: formatDate(courseRun.startDate), })} )} @@ -71,4 +71,4 @@ CourseBanner.propTypes = { cardId: PropTypes.string.isRequired, }; -export default CourseBanner; +export default CourseBanner; \ No newline at end of file diff --git a/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CertificateBanner.test.jsx.snap b/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CertificateBanner.test.jsx.snap deleted file mode 100644 index e4e6433..0000000 --- a/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CertificateBanner.test.jsx.snap +++ /dev/null @@ -1,39 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CourseBanner audit access expired, can upgrade snapshot: (auditAccessExpired, upgradeToAccess) 1`] = ` - - - Your audit access to this course has expired. - - Upgrade now to access your course again. - - -`; - -exports[`CourseBanner audit access expired, cannot upgrade snapshot: (auditAccessExpired, findAnotherCourse hyperlink) 1`] = ` - - - Your audit access to this course has expired. - - - Find another course - - - -`; - -exports[`CourseBanner course run active and cannot upgrade snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink) 1`] = ` - - - Your upgrade deadline for this course has passed. To upgrade, enroll in a session that is farther in the future. - - - Explore course details. - - - -`; diff --git a/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/EntitlementBanner.test.jsx.snap b/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/EntitlementBanner.test.jsx.snap index f0c18a5..76bc536 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/EntitlementBanner.test.jsx.snap +++ b/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/EntitlementBanner.test.jsx.snap @@ -2,7 +2,7 @@ exports[`EntitlementBanner snapshot: expiration warning 1`] = ` - - { const { formatMessage } = useIntl(); - const { title, bannerUrl } = appHooks.useCardCourseData(cardId); + const { courseName, bannerImgSrc } = appHooks.useCardCourseData(cardId); return ( <> {title}} + title={{courseName}} actions={} /> diff --git a/src/containers/CourseCard/components/CourseCardDetails/hooks.js b/src/containers/CourseCard/components/CourseCardDetails/hooks.js index a0a1acf..0aa3a79 100644 --- a/src/containers/CourseCard/components/CourseCardDetails/hooks.js +++ b/src/containers/CourseCard/components/CourseCardDetails/hooks.js @@ -1,7 +1,7 @@ import { useIntl } from '@edx/frontend-platform/i18n'; import { hooks as appHooks } from 'data/redux'; -import * as module from './hooks'; +import * as hooks from './hooks'; import messages from './messages'; export const useAccessMessage = ({ cardId }) => { @@ -9,7 +9,8 @@ export const useAccessMessage = ({ cardId }) => { const enrollment = appHooks.useCardEnrollmentData(cardId); const courseRun = appHooks.useCardCourseRunData(cardId); if (!courseRun.isStarted) { - return formatMessage(messages.courseStarts, { startDate: courseRun.startDate }); + const startDate = formatDate(courseRun.startDate); + return formatMessage(messages.courseStarts, { startDate }); } if (enrollment.isEnrolled) { if (enrollment.isAudit) { @@ -45,7 +46,7 @@ export const useCardDetailsData = ({ dispatch, cardId }) => { return { providerName: providerName || formatMessage(messages.unknownProviderName), - accessMessage: module.useAccessMessage({ cardId }), + accessMessage: hooks.useAccessMessage({ cardId }), isEntitlement, isFulfilled, canChange, diff --git a/src/containers/CourseCard/hooks.js b/src/containers/CourseCard/hooks.js index 0f92afc..715bfa5 100644 --- a/src/containers/CourseCard/hooks.js +++ b/src/containers/CourseCard/hooks.js @@ -9,13 +9,13 @@ export const useIsCollapsed = () => { export const useCardData = ({ cardId }) => { const { formatMessage } = useIntl(); - const { title, bannerUrl } = appHooks.useCardCourseData(cardId); + const { title, bannerImgSrc } = appHooks.useCardCourseData(cardId); const { isEnrolled } = appHooks.useCardEnrollmentData(cardId); return { isEnrolled, title, - bannerUrl, + bannerImgSrc, formatMessage, }; }; diff --git a/src/containers/CourseCard/hooks.test.js b/src/containers/CourseCard/hooks.test.js index 050323b..b3c3bd8 100644 --- a/src/containers/CourseCard/hooks.test.js +++ b/src/containers/CourseCard/hooks.test.js @@ -23,7 +23,7 @@ describe('CourseCard hooks', () => { describe('useCardData', () => { const courseData = { title: 'fake-title', - bannerUrl: 'my-banner-url', + bannerImgSrc: 'my-banner-url', }; const runHook = ({ course = {} }) => { appHooks.useCardCourseData.mockReturnValueOnce({ @@ -42,7 +42,7 @@ describe('CourseCard hooks', () => { it('passes course title and banner URL form course data', () => { expect(appHooks.useCardCourseData).toHaveBeenCalledWith(cardId); expect(out.title).toEqual(courseData.title); - expect(out.bannerUrl).toEqual(courseData.bannerUrl); + expect(out.bannerImgSrc).toEqual(courseData.bannerImgSrc); }); }); }); diff --git a/src/containers/EmptyCourse/SuggestedCourses/__snapshots__/index.test.jsx.snap b/src/containers/EmptyCourse/SuggestedCourses/__snapshots__/index.test.jsx.snap index 905e420..962a281 100644 --- a/src/containers/EmptyCourse/SuggestedCourses/__snapshots__/index.test.jsx.snap +++ b/src/containers/EmptyCourse/SuggestedCourses/__snapshots__/index.test.jsx.snap @@ -17,8 +17,6 @@ exports[`SuggestedCourses snapshot has 3 suggested courses 1`] = ` key="Suggested course 1" > @@ -38,8 +36,6 @@ exports[`SuggestedCourses snapshot has 3 suggested courses 1`] = ` key="Suggested course 2" > @@ -59,8 +55,6 @@ exports[`SuggestedCourses snapshot has 3 suggested courses 1`] = ` key="Suggested course 3" > diff --git a/src/containers/EmptyCourse/SuggestedCourses/index.jsx b/src/containers/EmptyCourse/SuggestedCourses/index.jsx index 0b63446..2954dc6 100644 --- a/src/containers/EmptyCourse/SuggestedCourses/index.jsx +++ b/src/containers/EmptyCourse/SuggestedCourses/index.jsx @@ -15,14 +15,12 @@ export const SuggestedCourses = () => {

{formatMessage(messages.header)}

{suggestedCourses.map((course) => ( - + - + diff --git a/src/containers/EmptyCourse/SuggestedCourses/index.test.jsx b/src/containers/EmptyCourse/SuggestedCourses/index.test.jsx index e131c0e..c84930c 100644 --- a/src/containers/EmptyCourse/SuggestedCourses/index.test.jsx +++ b/src/containers/EmptyCourse/SuggestedCourses/index.test.jsx @@ -12,21 +12,18 @@ jest.mock('data/redux', () => ({ const suggestedCourses = [ { - bannerUrl: 'https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg', - logoUrl: 'https://prod-discovery.edx-cdn.org/organization/certificate_logos/b9dc96da-b3fc-45a6-b6b7-b8e12eb79335-ac60112330e3.png', - title: 'Suggested course 1', + bannerImgSrc: 'https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg', + courseName: 'Suggested course 1', courseUrl: 'www.edx/suggested-course', }, { - bannerUrl: 'https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg', - logoUrl: 'https://prod-discovery.edx-cdn.org/organization/certificate_logos/b9dc96da-b3fc-45a6-b6b7-b8e12eb79335-ac60112330e3.png', - title: 'Suggested course 2', + bannerImgSrc: 'https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg', + courseName: 'Suggested course 2', courseUrl: 'www.edx/suggested-course', }, { - bannerUrl: 'https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg', - logoUrl: 'https://prod-discovery.edx-cdn.org/organization/certificate_logos/b9dc96da-b3fc-45a6-b6b7-b8e12eb79335-ac60112330e3.png', - title: 'Suggested course 3', + bannerImgSrc: 'https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg', + courseName: 'Suggested course 3', courseUrl: 'www.edx/suggested-course', }, ]; diff --git a/src/containers/EmptyCourse/SuggestedCourses/messages.js b/src/containers/EmptyCourse/SuggestedCourses/messages.js index 21c33a9..80efcc6 100644 --- a/src/containers/EmptyCourse/SuggestedCourses/messages.js +++ b/src/containers/EmptyCourse/SuggestedCourses/messages.js @@ -16,11 +16,6 @@ const messages = defineMessages({ defaultMessage: 'Course image banner', description: 'alt for course image', }, - institueLogoAlt: { - id: 'leanerDashboard.emptyCourse.suggestedCourses.institueLogoAlt', - defaultMessage: 'Course institute logo', - description: 'alt for institute logo', - }, }); export default messages; diff --git a/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap b/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap index 9ff8fb9..f8bd95e 100644 --- a/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap +++ b/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap @@ -7,7 +7,7 @@ exports[`ConfirmEmailBanner snapshot Show on unverified 1`] = ` onDismiss={[MockFunction closePageBanner]} show={[MockFunction showPageBanner]} > - - hookProps.courseTitle - + /> @@ -105,9 +103,7 @@ exports[`RelatedProgramsModal snapshot: open 1`] = ` - hookProps.courseTitle - + /> diff --git a/src/containers/RelatedProgramsModal/components/ProgramCard.jsx b/src/containers/RelatedProgramsModal/components/ProgramCard.jsx index fdcdde3..256d910 100644 --- a/src/containers/RelatedProgramsModal/components/ProgramCard.jsx +++ b/src/containers/RelatedProgramsModal/components/ProgramCard.jsx @@ -28,9 +28,9 @@ export const ProgramCard = ({ data }) => { > { }; ProgramCard.propTypes = { data: PropTypes.shape({ - bannerUrl: PropTypes.string, - logoUrl: PropTypes.string, + bannerImgSrc: PropTypes.string, + logoImgSrc: PropTypes.string, numberOfCourses: PropTypes.number, programType: PropTypes.string, programUrl: PropTypes.string, diff --git a/src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx b/src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx index 5bed634..42a60a1 100644 --- a/src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx +++ b/src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx @@ -6,8 +6,8 @@ import ProgramCard from './ProgramCard'; const props = { data: { numberOfCourses: 2, - bannerUrl: 'props.data.bannerUrl', - logoUrl: 'props.data.logoUrl', + bannerImgSrc: 'props.data.bannerImgSrc', + logoImgSrc: 'props.data.logoImgSrc', title: 'props.data.title', provider: 'props.data.provider', programType: 'props.data.programType', diff --git a/src/containers/RelatedProgramsModal/components/__snapshots__/ProgramCard.test.jsx.snap b/src/containers/RelatedProgramsModal/components/__snapshots__/ProgramCard.test.jsx.snap index 6a98133..c4c5fe9 100644 --- a/src/containers/RelatedProgramsModal/components/__snapshots__/ProgramCard.test.jsx.snap +++ b/src/containers/RelatedProgramsModal/components/__snapshots__/ProgramCard.test.jsx.snap @@ -13,9 +13,9 @@ exports[`RelatedProgramsModal ProgramCard snapshot 1`] = ` ({ - hooks: { - useCardCourseData: jest.fn(), - useCardRelatedProgramsData: jest.fn(), - }, -})); - -const cardId = 'test-course-number'; - -const courseTitle = 'test-course-title'; -const relatedPrograms = ['some', 'programs']; - -describe('RelatedProgramsModal hooks', () => { - it('forwards course title and related programs list by course number', () => { - appHooks.useCardCourseData.mockReturnValue({ title: courseTitle }); - appHooks.useCardRelatedProgramsData.mockReturnValue({ list: relatedPrograms }); - const out = hooks.useProgramData({ cardId }); - expect(appHooks.useCardCourseData).toHaveBeenCalledWith(cardId); - expect(appHooks.useCardRelatedProgramsData).toHaveBeenCalledWith(cardId); - expect(out).toEqual({ courseTitle, relatedPrograms }); - }); -}); diff --git a/src/containers/RelatedProgramsModal/index.jsx b/src/containers/RelatedProgramsModal/index.jsx index e18b42b..adb0bd8 100644 --- a/src/containers/RelatedProgramsModal/index.jsx +++ b/src/containers/RelatedProgramsModal/index.jsx @@ -7,9 +7,9 @@ import { Container, Row, Col, ModalDialog, } from '@edx/paragon'; +import { hooks } from 'data/redux'; import ProgramCard from './components/ProgramCard'; import messages from './messages'; -import { useProgramData } from './hooks'; import './index.scss'; export const RelatedProgramsModal = ({ @@ -18,7 +18,8 @@ export const RelatedProgramsModal = ({ cardId, }) => { const { formatMessage } = useIntl(); - const { courseTitle, relatedPrograms } = useProgramData({ cardId }); + const { courseName } = hooks.useCardCourseData(cardId); + const relatedPrograms = hooks.useCardRelatedProgramsData(cardId).list; return ( - {courseTitle} + {courseName}

{formatMessage(messages.description)}

diff --git a/src/containers/RelatedProgramsModal/index.test.jsx b/src/containers/RelatedProgramsModal/index.test.jsx index 34b4930..f8002a9 100644 --- a/src/containers/RelatedProgramsModal/index.test.jsx +++ b/src/containers/RelatedProgramsModal/index.test.jsx @@ -1,18 +1,23 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { useProgramData } from './hooks'; +import { hooks } from 'data/redux'; import RelatedProgramsModal from '.'; jest.mock('./components/ProgramCard', () => 'ProgramCard'); -jest.mock('./hooks', () => ({ - useProgramData: jest.fn(), +jest.mock('data/redux', () => ({ + hooks: { + useCardCourseData: jest.fn(), + useCardRelatedProgramsData: jest.fn(), + }, })); const cardId = 'test-course-number'; -const hookProps = { +const courseData = { courseTitle: 'hookProps.courseTitle', - relatedPrograms: [ +}; +const programData = { + list: [ { programUrl: 'program-1-url', programData: { dataFor: 'program1' }, @@ -36,7 +41,13 @@ const props = { describe('RelatedProgramsModal', () => { beforeEach(() => { - useProgramData.mockReturnValueOnce(hookProps); + hooks.useCardCourseData.mockReturnValueOnce(courseData); + hooks.useCardRelatedProgramsData.mockReturnValueOnce(programData); + }); + it('initializes hooks with cardId', () => { + shallow(); + expect(hooks.useCardCourseData).toHaveBeenCalledWith(cardId); + expect(hooks.useCardRelatedProgramsData).toHaveBeenCalledWith(cardId); }); test('snapshot: open', () => { expect(shallow()).toMatchSnapshot(); diff --git a/src/test/app.test.jsx b/src/test/app.test.jsx index 3e01e41..d041435 100644 --- a/src/test/app.test.jsx +++ b/src/test/app.test.jsx @@ -12,7 +12,7 @@ import { import userEvent from '@testing-library/user-event'; import thunk from 'redux-thunk'; -import { IntlProvider } from '@edx/frontend-platform/i18n'; +import { useIntl, IntlProvider } from '@edx/frontend-platform/i18n'; import api from 'data/services/lms/api'; import fakeData from 'data/services/lms/fakeData/courses'; @@ -34,6 +34,14 @@ jest.unmock('react'); jest.unmock('react-redux'); jest.unmock('hooks'); +jest.mock('@edx/frontend-platform/i18n', () => ({ + ...jest.requireActual('@edx/frontend-platform/i18n'), + useIntl: () => ({ + formatMessage: jest.requireActual('testUtils').formatMessage, + formatDate: (date) => `Date-${date}`, + }), +})); + jest.mock('@edx/frontend-platform/auth', () => ({ getAuthenticatedHttpClient: jest.fn(), getLoginRedirectUrl: jest.fn(), @@ -128,9 +136,10 @@ describe('ESG app integration tests', () => { }); test('course cards', async () => { + const { formatDate } = useIntl(); resolveFns.init.success(); await waitForRequestStatus(RequestKeys.initialize, RequestStates.completed); - await inspector.findByText(fakeData.courseRunData[0].course.title); + await inspector.findByText(fakeData.courseRunData[0].course.courseName); const cards = inspector.get.courseCards; let cardId; @@ -149,14 +158,14 @@ describe('ESG app integration tests', () => { inspector.verifyText( inspector.get.card.header(card), - courseData.course.title, + courseData.course.courseName, ); cardDetails = inspector.get.card.details(card); [ - courseData.provider.name, + courseData.courseProvider.name, courseData.course.courseNumber, appMessages.withValues.CourseCardDetails.courseStarts({ - startDate: courseData.courseRun.startDate, + startDate: formatDate(new Date(courseData.courseRun.startDate)), }), ].forEach(value => inspector.verifyTextIncludes(cardDetails, value)); });