diff --git a/.env b/.env index d57909e..b0b0784 100644 --- a/.env +++ b/.env @@ -30,3 +30,4 @@ ENTERPRISE_MARKETING_URL='' ENTERPRISE_MARKETING_UTM_SOURCE='' ENTERPRISE_MARKETING_UTM_CAMPAIGN='' ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='' +LEARNING_MICROFRONTEND_URL='' diff --git a/.env.development b/.env.development index 2aa9d4d..622496c 100644 --- a/.env.development +++ b/.env.development @@ -36,3 +36,4 @@ ENTERPRISE_MARKETING_URL='http://example.com' ENTERPRISE_MARKETING_UTM_SOURCE='example.com' ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral' ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer' +LEARNING_MICROFRONTEND_URL='http://localhost:2000' diff --git a/.env.test b/.env.test index 2b22562..9030b1d 100644 --- a/.env.test +++ b/.env.test @@ -36,3 +36,4 @@ ENTERPRISE_MARKETING_URL='http://example.com' ENTERPRISE_MARKETING_UTM_SOURCE='example.com' ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral' ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer' +LEARNING_MICROFRONTEND_URL='http://localhost:2000' diff --git a/src/config/index.js b/src/config/index.js index 94e3119..2790b40 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -9,6 +9,7 @@ const configuration = { // SECURE_COOKIES: process.env.NODE_ENV !== 'development', // SEGMENT_KEY: process.env.SEGMENT_KEY, // ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME, + LEARNING_MICROFRONTEND_URL: process.env.LEARNING_MICROFRONTEND_URL, }; const features = {}; diff --git a/src/containers/CourseCard/CourseCard.scss b/src/containers/CourseCard/CourseCard.scss index 8074c9a..0383a07 100644 --- a/src/containers/CourseCard/CourseCard.scss +++ b/src/containers/CourseCard/CourseCard.scss @@ -8,9 +8,6 @@ .pgn__card-header-content { margin-top: 1.5rem; } - .course-card-content-vertical { - - } } .course-card-banners { diff --git a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx index 2f99487..fa5a75b 100644 --- a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx +++ b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx @@ -8,7 +8,7 @@ import { hooks } from 'data/redux'; import messages from './messages'; export const ViewCourseButton = ({ cardId }) => { - const { marketingUrl } = hooks.useCardCourseRunData(cardId); + const { homeUrl } = hooks.useCardCourseRunData(cardId); const { hasAccess } = hooks.useCardEnrollmentData(cardId); const { isEntitlement, isExpired } = hooks.useCardEntitlementData(cardId); const { isMasquerading } = hooks.useMasqueradeData(); @@ -17,7 +17,7 @@ export const ViewCourseButton = ({ cardId }) => { diff --git a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx index 9c26c39..88510a8 100644 --- a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx +++ b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx @@ -6,48 +6,60 @@ import ViewCourseButton from './ViewCourseButton'; jest.mock('data/redux', () => ({ hooks: { - useCardCourseRunData: jest.fn(() => ({ marketingUrl: 'marketing-url' })), - useCardEnrollmentData: jest.fn(() => ({ hasAccess: true })), - useCardEntitlementData: jest.fn(() => ({ isEntitlement: false, isExpired: false })), - useMasqueradeData: jest.fn(() => ({ isMasquerading: false })), + useCardCourseRunData: jest.fn(), + useCardEnrollmentData: jest.fn(), + useCardEntitlementData: jest.fn(), + useMasqueradeData: jest.fn(), }, })); -let wrapper; - describe('ViewCourseButton', () => { const props = { cardId: 'cardId', }; - const { marketingUrl } = hooks.useCardCourseRunData(); + const homeUrl = 'homeUrl'; + hooks.useCardCourseRunData.mockReturnValue({ homeUrl }); + const createWrapper = ({ + hasAccess = false, + isEntitlement = false, + isExpired = false, + isMasquerading = false, + }) => { + hooks.useCardEnrollmentData.mockReturnValueOnce({ hasAccess }); + hooks.useCardEntitlementData.mockReturnValueOnce({ isEntitlement, isExpired }); + hooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading }); + return shallow(); + }; describe('snapshot', () => { test('default button', () => { - wrapper = shallow(); + const wrapper = createWrapper({ hasAccess: true }); expect(wrapper).toMatchSnapshot(); expect(wrapper.prop(htmlProps.disabled)).toEqual(false); - expect(wrapper.prop(htmlProps.href)).toEqual(marketingUrl); + expect(wrapper.prop(htmlProps.href)).toEqual(homeUrl); + }); + test('disabled button', () => { + const wrapper = createWrapper({}); + expect(wrapper).toMatchSnapshot(); + expect(wrapper.prop(htmlProps.disabled)).toEqual(true); + expect(wrapper.prop(htmlProps.href)).toEqual(homeUrl); }); }); describe('behavior', () => { - describe('disabled states', () => { - test('learner does not have access', () => { - hooks.useCardEnrollmentData.mockReturnValueOnce({ hasAccess: false }); - wrapper = shallow(); - expect(wrapper.prop(htmlProps.disabled)).toEqual(true); - }); - test('expired entitlement', () => { - hooks.useCardEntitlementData.mockReturnValueOnce({ - isEntitlement: true, - isExpired: true, - }); - wrapper = shallow(); - expect(wrapper.prop(htmlProps.disabled)).toEqual(true); - }); - test('masquerading', () => { - hooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading: true }); - wrapper = shallow(); - expect(wrapper.prop(htmlProps.disabled)).toEqual(true); - }); + it('disabled button when masquerading', () => { + const wrapper = createWrapper({ isMasquerading: true }); + expect(wrapper.prop('disabled')).toEqual(true); + }); + it('disabled button without access', () => { + const wrapper = createWrapper({ hasAccess: false, isEntitlement: false, isExpired: false }); + expect(wrapper.prop('disabled')).toEqual(true); + }); + it('disabled button with access', () => { + const wrapper = createWrapper({ hasAccess: true, isEntitlement: true, isExpired: true }); + expect(wrapper.prop('disabled')).toEqual(true); + }); + it('enabled button', () => { + const wrapper = createWrapper({ hasAccess: true, isEntitlement: false, isExpired: false }); + expect(wrapper.prop('disabled')).toEqual(false); }); }); }); diff --git a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ViewCourseButton.test.jsx.snap b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ViewCourseButton.test.jsx.snap index 832f22c..c3714f2 100644 --- a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ViewCourseButton.test.jsx.snap +++ b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/ViewCourseButton.test.jsx.snap @@ -4,7 +4,17 @@ exports[`ViewCourseButton snapshot default button 1`] = ` +`; + +exports[`ViewCourseButton snapshot disabled button 1`] = ` + diff --git a/src/containers/CourseCard/components/CourseCardContent.jsx b/src/containers/CourseCard/components/CourseCardContent.jsx index 6871f1b..df024bd 100644 --- a/src/containers/CourseCard/components/CourseCardContent.jsx +++ b/src/containers/CourseCard/components/CourseCardContent.jsx @@ -17,15 +17,23 @@ import messages from '../messages'; export const CourseCardContent = ({ cardId, orientation }) => { const { formatMessage } = useIntl(); const { courseName, bannerImgSrc } = appHooks.useCardCourseData(cardId); + const { homeUrl } = appHooks.useCardCourseRunData(cardId); return ( <> - + + {formatMessage(messages.bannerAlt)} + {courseName}} + title={( + + {courseName} + + )} actions={} /> diff --git a/src/containers/CourseCard/components/CourseCardContent.test.jsx b/src/containers/CourseCard/components/CourseCardContent.test.jsx index fcb2a27..b21464c 100644 --- a/src/containers/CourseCard/components/CourseCardContent.test.jsx +++ b/src/containers/CourseCard/components/CourseCardContent.test.jsx @@ -6,6 +6,7 @@ import CourseCardContent from './CourseCardContent'; jest.mock('data/redux', () => ({ hooks: { useCardCourseData: jest.fn(), + useCardCourseRunData: jest.fn(), }, })); @@ -23,6 +24,9 @@ describe('CourseCardContent', () => { courseName: 'test-course-name', bannerImgSrc: 'test-banner-img-src', }); + hooks.useCardCourseRunData.mockReturnValue({ + homeUrl: 'test-home-url', + }); describe('snapshot', () => { test('orientation vertical', () => { const wrapper = shallow(); diff --git a/src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap b/src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap index dddaccc..ba1e7c6 100644 --- a/src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap +++ b/src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap @@ -2,10 +2,16 @@ exports[`CourseCardContent snapshot orientation horizontal 1`] = ` - + + Course thumbnail + } title={ - test-course-name - + } /> - + + Course thumbnail + } title={ - test-course-name - + } /> state.app; const mkSimpleSelector = (cb) => createSelector([module.appSelector], cb); @@ -56,7 +59,7 @@ export const courseCard = StrictDict({ isRestricted: certificate.isRestricted, })), course: mkCardSelector(({ course }) => ({ - bannerImgSrc: process.env.LMS_BASE_URL + course.bannerImgSrc, + bannerImgSrc: baseAppUrl(course.bannerImgSrc), courseNumber: course.courseNumber, courseName: course.courseName, website: course.website, @@ -69,6 +72,12 @@ export const courseCard = StrictDict({ isFinished: courseRun.isFinished, minPassingGrade: Math.floor(courseRun.minPassingGrade * 100), startDate: new Date(courseRun.startDate), + homeUrl: courseRun.homeUrl, + marketingUrl: courseRun.marketingUrl, + progressUrl: learningMfeUrl(courseRun.progressUrl), + unenrollUrl: learningMfeUrl(courseRun.unenrollUrl), + upgradeUrl: courseRun.upgradeUrl, + resumeUrl: learningMfeUrl(courseRun.resumeUrl), })), enrollment: mkCardSelector(({ enrollment }) => { if (enrollment == null) { diff --git a/src/data/services/lms/urls.js b/src/data/services/lms/urls.js index fc73fe9..dabef5d 100644 --- a/src/data/services/lms/urls.js +++ b/src/data/services/lms/urls.js @@ -12,10 +12,15 @@ const courseUnenroll = `${baseUrl}/change_enrollment`; const updateEmailSettings = `${api}/change_email_settings`; const entitlementEnrollment = (uuid) => `${api}/entitlements/v1/entitlements/${uuid}/enrollments`; +const baseAppUrl = (url) => baseUrl + url; +const learningMfeUrl = (url) => configuration.LEARNING_MICROFRONTEND_URL + url; + export default StrictDict({ api, init, courseUnenroll, updateEmailSettings, entitlementEnrollment, + baseAppUrl, + learningMfeUrl, }); diff --git a/src/index.jsx b/src/index.jsx index 1c4c89a..2d5c442 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -41,7 +41,7 @@ subscribe(APP_INIT_ERROR, (error) => { ); }); -export const appName = 'OraGradingAppConfig'; +export const appName = 'LearnerHomeAppConfig'; initialize({ handlers: {