fix: force LMS url to reload when changed (#136)

This reverts commit a479b7ead6.

.eslintrc.js

@@ -5,6 +5,7 @@ const config = createConfig('eslint', {
     'import/no-named-as-default': 'off',
     'import/no-named-as-default-member': 'off',
     'import/no-self-import': 'off',
+    'import/no-import-module-exports': 'off',
     'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
   },
 });

src/containers/CourseCard/components/CourseCardMenu/__snapshots__/index.test.jsx.snap

@@ -1,64 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CourseCardMenu disable and stop rendering buttons snapshot when no dropdown items exist 1`] = `
-<Fragment>
-  <Dropdown>
-    <Dropdown.Toggle
-      alt="Course actions dropdown"
-      as="IconButton"
-      iconAs="Icon"
-      id="course-actions-dropdown-test-card-id"
-      src={[MockFunction icons.MoreVert]}
-      variant="primary"
-    />
-    <Dropdown.Menu>
-      <Dropdown.Item
-        data-testid="unenrollModalToggle"
-        disabled={false}
-        onClick={[MockFunction unenrollShow]}
-      >
-        Unenroll
-      </Dropdown.Item>
-      <Dropdown.Item
-        data-testid="emailSettingsModalToggle"
-        disabled={false}
-        onClick={[MockFunction emailSettingShow]}
-      >
-        Email settings
-      </Dropdown.Item>
-      <FacebookShareButton
-        className="pgn__dropdown-item dropdown-item"
-        onClick={[MockFunction facebookShareClick]}
-        resetButtonStyle={false}
-        title="I'm taking test-course-name online with facebook-social-brand.  Check it out!"
-        url="facebook-share-url"
-      >
-        Share to Facebook
-      </FacebookShareButton>
-      <TwitterShareButton
-        className="pgn__dropdown-item dropdown-item"
-        onClick={[MockFunction twitterShareClick]}
-        resetButtonStyle={false}
-        title="I'm taking test-course-name online with twitter-social-brand.  Check it out!"
-        url="twitter-share-url"
-      >
-        Share to Twitter
-      </TwitterShareButton>
-    </Dropdown.Menu>
-  </Dropdown>
-  <UnenrollConfirmModal
-    cardId="test-card-id"
-    closeModal={[MockFunction unenrollHide]}
-    show={false}
-  />
-  <EmailSettingsModal
-    cardId="test-card-id"
-    closeModal={[MockFunction emailSettingHide]}
-    show={false}
-  />
-</Fragment>
-`;
-
 exports[`CourseCardMenu enrolled, share enabled, email setting enable snapshot 1`] = `
 <Fragment>
   <Dropdown>
@@ -176,3 +117,24 @@ exports[`CourseCardMenu masquerading snapshot 1`] = `
   />
 </Fragment>
 `;
+
+exports[`CourseCardMenu not enrolled, share disabled, email setting disabled snapshot 1`] = `
+<Fragment>
+  <Dropdown>
+    <Dropdown.Toggle
+      alt="Course actions dropdown"
+      as="IconButton"
+      iconAs="Icon"
+      id="course-actions-dropdown-test-card-id"
+      src={[MockFunction icons.MoreVert]}
+      variant="primary"
+    />
+    <Dropdown.Menu />
+  </Dropdown>
+  <UnenrollConfirmModal
+    cardId="test-card-id"
+    closeModal={[MockFunction unenrollHide]}
+    show={false}
+  />
+</Fragment>
+`;

src/containers/CourseCard/components/CourseCardMenu/index.jsx

@@ -25,7 +25,6 @@ export const CourseCardMenu = ({ cardId }) => {
   const { isEnrolled, isEmailEnabled } = reduxHooks.useCardEnrollmentData(cardId);
   const { twitter, facebook } = reduxHooks.useCardSocialSettingsData(cardId);
   const { isMasquerading } = reduxHooks.useMasqueradeData();
-  const { isEarned } = reduxHooks.useCardCertificateData(cardId);
   const handleTwitterShare = reduxHooks.useTrackCourseEvent(
     track.socialShare,
     cardId,
@@ -41,13 +40,6 @@ export const CourseCardMenu = ({ cardId }) => {
   const unenrollModal = useUnenrollData();
   const handleToggleDropdown = useHandleToggleDropdown(cardId);
 
-  const showUnenrollItem = isEnrolled && !isEarned;
-  const showDropdown = showUnenrollItem || isEmailEnabled || facebook.isEnabled || twitter.isEnabled;
-
-  if (!showDropdown) {
-    return null;
-  }
-
   return (
     <>
       <Dropdown onToggle={handleToggleDropdown}>
@@ -60,7 +52,7 @@ export const CourseCardMenu = ({ cardId }) => {
           alt={formatMessage(messages.dropdownAlt)}
         />
         <Dropdown.Menu>
-          {showUnenrollItem && (
+          {isEnrolled && (
             <Dropdown.Item
               disabled={isMasquerading}
               onClick={unenrollModal.show}

src/containers/CourseCard/components/CourseCardMenu/index.test.jsx

@@ -14,7 +14,6 @@ jest.mock('hooks', () => ({
     useCardEnrollmentData: jest.fn(),
     useCardSocialSettingsData: jest.fn(),
     useMasqueradeData: jest.fn(),
-    useCardCertificateData: jest.fn(),
     useTrackCourseEvent: (_, __, site) => jest.fn().mockName(`${site}ShareClick`),
   },
 }));
@@ -54,43 +53,17 @@ let wrapper;
 let el;
 
 describe('CourseCardMenu', () => {
-  const mockCourseCardMenu = ({
-    isEnrolled,
-    isEmailEnabled,
-    isMasquerading,
-    facebook,
-    twitter,
-    isEarned,
-  }) => {
-    useEmailSettings.mockReturnValueOnce(defaultEmailSettingsModal);
-    useUnenrollData.mockReturnValueOnce(defaultUnenrollModal);
-    reduxHooks.useCardCourseData.mockReturnValueOnce({ courseName });
-    reduxHooks.useCardSocialSettingsData.mockReturnValueOnce({
-      facebook: {
-        ...defaultSocialShare.facebook,
-        ...facebook,
-      },
-      twitter: {
-        ...defaultSocialShare.twitter,
-        ...twitter,
-      },
-    });
-    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
-      isEnrolled,
-      isEmailEnabled,
-    });
-    reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading });
-    reduxHooks.useCardCertificateData.mockReturnValueOnce({ isEarned });
-    return shallow(<CourseCardMenu {...props} />);
-  };
+  beforeEach(() => {
+    useEmailSettings.mockReturnValue(defaultEmailSettingsModal);
+    useUnenrollData.mockReturnValue(defaultUnenrollModal);
+    reduxHooks.useCardSocialSettingsData.mockReturnValue(defaultSocialShare);
+    reduxHooks.useCardCourseData.mockReturnValue({ courseName });
+    reduxHooks.useCardEnrollmentData.mockReturnValue({ isEnrolled: true, isEmailEnabled: true });
+    reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
+  });
   describe('enrolled, share enabled, email setting enable', () => {
     beforeEach(() => {
-      wrapper = mockCourseCardMenu({
-        isEnrolled: true,
-        isEmailEnabled: true,
-        isMasquerading: false,
-        isEarned: false,
-      });
+      wrapper = shallow(<CourseCardMenu {...props} />);
     });
     test('snapshot', () => {
       expect(wrapper).toMatchSnapshot();
@@ -116,84 +89,36 @@ describe('CourseCardMenu', () => {
       expect(el.props().disabled).toEqual(false);
     });
   });
-  describe('disable and stop rendering buttons', () => {
-    it('does not render unenroll dropdown item when certificate is already earned', () => {
-      wrapper = mockCourseCardMenu({
-        isEnrolled: true,
-        isEmailEnabled: true,
-        isMasquerading: false,
-        isEarned: true,
+  describe('not enrolled, share disabled, email setting disabled', () => {
+    beforeEach(() => {
+      reduxHooks.useCardSocialSettingsData.mockReturnValueOnce({
+        ...defaultSocialShare,
+        twitter: { ...defaultSocialShare.twitter, isEnabled: false },
+        facebook: { ...defaultSocialShare.facebook, isEnabled: false },
       });
+      reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isEnrolled: false, isEmailEnabled: false });
+      wrapper = shallow(<CourseCardMenu {...props} />);
+    });
+    test('snapshot', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('does not renders share buttons', () => {
+      expect(wrapper.find('FacebookShareButton').length).toEqual(0);
+      expect(wrapper.find('TwitterShareButton').length).toEqual(0);
+    });
+    it('does not render unenroll modal toggle', () => {
       el = wrapper.find({ 'data-testid': 'unenrollModalToggle' });
       expect(el.length).toEqual(0);
     });
-    it('does not render unenroll dropdown item when course is not enrolled', () => {
-      wrapper = mockCourseCardMenu({
-        isEnrolled: false,
-        isEmailEnabled: true,
-        isMasquerading: false,
-        isEarned: false,
-      });
-      el = wrapper.find({ 'data-testid': 'unenrollModalToggle' });
-      expect(el.length).toEqual(0);
-    });
-    it('does not render email settings modal toggle when email is not enabled', () => {
-      wrapper = mockCourseCardMenu({
-        isEnrolled: true,
-        isEmailEnabled: false,
-        isMasquerading: false,
-        isEarned: false,
-      });
+    it('does not render email settings modal toggle', () => {
       el = wrapper.find({ 'data-testid': 'emailSettingsModalToggle' });
       expect(el.length).toEqual(0);
     });
-    it('does not render facebook share button when facebook is not enabled', () => {
-      wrapper = mockCourseCardMenu({
-        isEnrolled: true,
-        isEmailEnabled: true,
-        facebook: {
-          ...defaultSocialShare.facebook,
-          isEnabled: false,
-        },
-        isMasquerading: false,
-        isEarned: false,
-      });
-      el = wrapper.find('FacebookShareButton');
-      expect(el.length).toEqual(0);
-    });
-    it('does not render twitter share button when twitter is not enabled', () => {
-      wrapper = mockCourseCardMenu({
-        isEnrolled: true,
-        isEmailEnabled: true,
-        twitter: {
-          ...defaultSocialShare.twitter,
-          isEnabled: false,
-        },
-        isMasquerading: false,
-        isEarned: false,
-      });
-      el = wrapper.find('TwitterShareButton');
-      expect(el.length).toEqual(0);
-    });
-    it('snapshot when no dropdown items exist', () => {
-      wrapper = mockCourseCardMenu({
-        isEnrolled: true,
-        isEmailEnabled: true,
-        isMasquerading: false,
-        isEarned: false,
-      });
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper).toEqual({});
-    });
   });
   describe('masquerading', () => {
     beforeEach(() => {
-      wrapper = mockCourseCardMenu({
-        isEnrolled: true,
-        isEmailEnabled: true,
-        isMasquerading: true,
-        isEarned: false,
-      });
+      reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: true });
+      wrapper = shallow(<CourseCardMenu {...props} />);
     });
     test('snapshot', () => {
       expect(wrapper).toMatchSnapshot();

src/containers/CourseList/NoCoursesView/__snapshots__/index.test.jsx.snap

@@ -17,7 +17,7 @@ exports[`NoCoursesView snapshot 1`] = `
   </p>
   <Button
     as="a"
-    href="course-search-url"
+    href="http://localhost:18000/course-search-url"
     iconBefore={[MockFunction icons.Search]}
     variant="brand"
   >

src/containers/CourseList/NoCoursesView/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Image } from '@edx/paragon';
 import { Search } from '@edx/paragon/icons';
+import { baseAppUrl } from 'data/services/lms/urls';
 
 import emptyCourseSVG from 'assets/empty-course.svg';
 import { reduxHooks } from 'hooks';
@@ -27,7 +28,7 @@ export const NoCoursesView = () => {
       <Button
         variant="brand"
         as="a"
-        href={courseSearchUrl}
+        href={baseAppUrl(courseSearchUrl)}
         iconBefore={Search}
       >
         {formatMessage(messages.exploreCoursesButton)}

src/containers/CourseList/NoCoursesView/index.test.jsx

@@ -6,7 +6,7 @@ import EmptyCourse from '.';
 jest.mock('hooks', () => ({
   reduxHooks: {
     usePlatformSettingsData: jest.fn(() => ({
-      courseSearchUrl: 'course-search-url',
+      courseSearchUrl: '/course-search-url',
     })),
   },
 }));

src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx

@@ -21,7 +21,7 @@ export const CollapseMenuBody = ({ isOpen }) => {
   const dashboard = reduxHooks.useEnterpriseDashboardData();
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
 
-  const exploreCoursesClick = findCoursesNavDropdownClicked(courseSearchUrl);
+  const exploreCoursesClick = findCoursesNavDropdownClicked(urls.baseAppUrl(courseSearchUrl));
 
   return (
     isOpen && (
@@ -34,7 +34,7 @@ export const CollapseMenuBody = ({ isOpen }) => {
         </Button>
         <Button
           as="a"
-          href={courseSearchUrl}
+          href={urls.baseAppUrl(courseSearchUrl)}
           variant="inverse-primary"
           onClick={exploreCoursesClick}
         >

src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx

@@ -17,7 +17,7 @@ jest.mock('hooks', () => ({
       url: 'url',
     }),
     usePlatformSettingsData: () => ({
-      courseSearchUrl: 'courseSearchUrl',
+      courseSearchUrl: '/courseSearchUrl',
     }),
   },
 }));

src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap

@@ -20,8 +20,8 @@ exports[`CollapseMenuBody render 1`] = `
   </Button>
   <Button
     as="a"
-    href="courseSearchUrl"
-    onClick={[MockFunction findCoursesNavDropdownClicked("courseSearchUrl")]}
+    href="http://localhost:18000/courseSearchUrl"
+    onClick={[MockFunction findCoursesNavDropdownClicked("http://localhost:18000/courseSearchUrl")]}
     variant="inverse-primary"
   >
     Discover New
@@ -86,8 +86,8 @@ exports[`CollapseMenuBody render unauthenticated 1`] = `
   </Button>
   <Button
     as="a"
-    href="courseSearchUrl"
-    onClick={[MockFunction findCoursesNavDropdownClicked("courseSearchUrl")]}
+    href="http://localhost:18000/courseSearchUrl"
+    onClick={[MockFunction findCoursesNavDropdownClicked("http://localhost:18000/courseSearchUrl")]}
     variant="inverse-primary"
   >
     Discover New

src/containers/LearnerDashboardHeader/ExpandedHeader/AuthenticatedUserDropdown.test.jsx

@@ -9,6 +9,7 @@ import { useIsCollapsed } from '../hooks';
 jest.mock('@edx/frontend-platform', () => ({
   getConfig: jest.fn(),
 }));
+
 jest.mock('@edx/frontend-platform/react', () => ({
   AppContext: {
     authenticatedUser: {
@@ -17,11 +18,13 @@ jest.mock('@edx/frontend-platform/react', () => ({
     },
   },
 }));
+const COURSE_SEARCH_URL = 'test-course-search-url';
+
 jest.mock('hooks', () => ({
   reduxHooks: {
     useEnterpriseDashboardData: jest.fn(),
     usePlatformSettingsData: jest.fn(() => ({
-      courseSearchUrl: 'test-course-search-url',
+      courseSearchUrl: COURSE_SEARCH_URL,
     })),
   },
 }));
@@ -30,6 +33,11 @@ jest.mock('../hooks', () => ({
   findCoursesNavDropdownClicked: (href) => jest.fn().mockName(`findCoursesNavDropdownClicked('${href}')`),
 }));
 
+jest.mock('data/services/lms/urls', () => ({
+  baseAppUrl: (url) => (url),
+  programsUrl: 'http://localhost:18000/dashboard/programs',
+}));
+
 const config = {
   ACCOUNT_PROFILE_URL: 'http://account-profile-url.test',
   ACCOUNT_SETTINGS_URL: 'http://account-settings-url.test',
@@ -37,6 +45,7 @@ const config = {
   ORDER_HISTORY_URL: 'http://order-history-url.test',
   SUPPORT_URL: 'http://localhost:18000/support',
   CAREER_LINK_URL: 'http://localhost:18000/career',
+  LMS_BASE_URL: 'http:/localhost:18000',
 };
 getConfig.mockReturnValue(config);
 

src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/index.test.jsx.snap

@@ -27,8 +27,8 @@ exports[`ExpandedHeader render 1`] = `
     <Button
       as="a"
       className="p-4"
-      href="courseSearchUrl"
-      onClick={[MockFunction findCoursesNavClicked("courseSearchUrl")]}
+      href="http://localhost:18000/courseSearchUrl"
+      onClick={[MockFunction findCoursesNavClicked("http://localhost:18000/courseSearchUrl")]}
       variant="inverse-primary"
     >
       Discover New

src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx

@@ -18,7 +18,7 @@ export const ExpandedHeader = () => {
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
   const isCollapsed = useIsCollapsed();
 
-  const exploreCoursesClick = findCoursesNavClicked(courseSearchUrl);
+  const exploreCoursesClick = findCoursesNavClicked(urls.baseAppUrl(courseSearchUrl));
 
   return (
     !isCollapsed && (
@@ -44,7 +44,7 @@ export const ExpandedHeader = () => {
         </Button>
         <Button
           as="a"
-          href={courseSearchUrl}
+          href={urls.baseAppUrl(courseSearchUrl)}
           variant="inverse-primary"
           className="p-4"
           onClick={exploreCoursesClick}

src/containers/LearnerDashboardHeader/ExpandedHeader/index.test.jsx

@@ -6,12 +6,13 @@ import { useIsCollapsed } from '../hooks';
 
 jest.mock('data/services/lms/urls', () => ({
   programsUrl: 'programsUrl',
+  baseAppUrl: url => (`http://localhost:18000${url}`),
 }));
 
 jest.mock('hooks', () => ({
   reduxHooks: {
     usePlatformSettingsData: () => ({
-      courseSearchUrl: 'courseSearchUrl',
+      courseSearchUrl: '/courseSearchUrl',
     }),
   },
 }));

src/data/redux/app/selectors/courseCard.js

@@ -24,7 +24,6 @@ export const courseCard = StrictDict({
         isDownloadable: certificate.isDownloadable,
         isEarnedButUnavailable: certificate.isEarned && !isAvailable,
         isRestricted: certificate.isRestricted,
-        isEarned: certificate.isEarned,
       };
     },
   ),

src/data/services/lms/api.js

@@ -17,7 +17,7 @@ import * as module from './api';
  * GET Actions
  *********************************************************************************/
 export const initializeList = ({ user } = {}) => get(
-  stringifyUrl(urls.init, { [apiKeys.user]: user }),
+  stringifyUrl(urls.getInitApiUrl(), { [apiKeys.user]: user }),
 );
 
 export const updateEntitlementEnrollment = ({ uuid, courseId }) => post(

src/data/services/lms/api.test.js

@@ -43,7 +43,7 @@ describe('lms api methods', () => {
         [apiKeys.user]: testUser,
       };
       expect(api.initializeList(userArg)).toEqual(
-        utils.get(utils.stringifyUrl(urls.init, userArg)),
+        utils.get(utils.stringifyUrl(urls.getInitApiUrl(), userArg)),
       );
     });
   });

src/data/services/lms/urls.js

@@ -1,40 +1,41 @@
 import { StrictDict } from 'utils';
-import { configuration } from 'config';
 
-const baseUrl = `${configuration.LMS_BASE_URL}`;
-export const ecommerceUrl = `${configuration.ECOMMERCE_BASE_URL}`;
+import { getConfig } from '@edx/frontend-platform';
 
-export const api = `${baseUrl}/api`;
+export const getEcommerceUrl = () => getConfig().ECOMMERCE_BASE_URL;
 
-// const init = `${api}learner_home/mock/init`; // mock endpoint for testing
-const init = `${api}/learner_home/init`;
+const getBaseUrl = () => getConfig().LMS_BASE_URL;
 
-const event = `${baseUrl}/event`;
-const courseUnenroll = `${baseUrl}/change_enrollment`;
-const updateEmailSettings = `${api}/change_email_settings`;
-const entitlementEnrollment = (uuid) => `${api}/entitlements/v1/entitlements/${uuid}/enrollments`;
+export const getApiUrl = () => (`${getConfig().LMS_BASE_URL}/api`);
+
+const getInitApiUrl = () => (`${getApiUrl()}/learner_home/init`);
+
+const event = `${getBaseUrl()}/event`;
+const courseUnenroll = `${getBaseUrl()}/change_enrollment`;
+const updateEmailSettings = `${getApiUrl()}/change_email_settings`;
+const entitlementEnrollment = (uuid) => `${getApiUrl()}/entitlements/v1/entitlements/${uuid}/enrollments`;
 
 // if url is null or absolute, return it as is
-const updateUrl = (base, url) => ((url == null || url.startsWith('http://') || url.startsWith('https://')) ? url : `${base}${url}`);
+export const updateUrl = (base, url) => ((url == null || url.startsWith('http://') || url.startsWith('https://')) ? url : `${base}${url}`);
 
-export const baseAppUrl = (url) => updateUrl(baseUrl, url);
-export const learningMfeUrl = (url) => updateUrl(configuration.LEARNING_BASE_URL, url);
+export const baseAppUrl = (url) => updateUrl(getBaseUrl(), url);
+export const learningMfeUrl = (url) => updateUrl(getConfig().LEARNING_BASE_URL, url);
 
 // static view url
 const programsUrl = baseAppUrl('/dashboard/programs');
 
-export const creditPurchaseUrl = (courseId) => `${ecommerceUrl}/credit/checkout/${courseId}/`;
-export const creditRequestUrl = (providerId) => `${api}/credit/v1/providers/${providerId}/request/`;
+export const creditPurchaseUrl = (courseId) => `${getEcommerceUrl()}/credit/checkout/${courseId}/`;
+export const creditRequestUrl = (providerId) => `${getApiUrl()}/credit/v1/providers/${providerId}/request/`;
 
 export default StrictDict({
-  api,
+  getApiUrl,
   baseAppUrl,
   courseUnenroll,
   creditPurchaseUrl,
   creditRequestUrl,
   entitlementEnrollment,
   event,
-  init,
+  getInitApiUrl,
   learningMfeUrl,
   programsUrl,
   updateEmailSettings,

src/data/services/lms/urls.test.js

@@ -1,4 +1,4 @@
-import { configuration } from 'config';
+import { getConfig } from '@edx/frontend-platform';
 import * as urls from './urls';
 
 describe('urls', () => {
@@ -10,7 +10,7 @@ describe('urls', () => {
     it('returns the url if it is relative', () => {
       const url = '/edx.org';
       expect(urls.baseAppUrl(url)).toEqual(
-        `${configuration.LMS_BASE_URL}${url}`,
+        `${getConfig().LMS_BASE_URL}${url}`,
       );
     });
     it('return null if url is null', () => {
@@ -25,7 +25,7 @@ describe('urls', () => {
     it('returns the url if it is relative', () => {
       const url = '/edx.org';
       expect(urls.learningMfeUrl(url)).toEqual(
-        `${configuration.LEARNING_BASE_URL}${url}`,
+        `${getConfig().LEARNING_BASE_URL}${url}`,
       );
     });
     it('return null if url is null', () => {
@@ -36,7 +36,6 @@ describe('urls', () => {
     it('builds from ecommerce url and loads courseId', () => {
       const courseId = 'test-course-id';
       const url = urls.creditPurchaseUrl(courseId);
-      expect(url.startsWith(urls.ecommerceUrl)).toEqual(true);
       expect(url).toEqual(expect.stringContaining(courseId));
     });
   });
@@ -44,7 +43,7 @@ describe('urls', () => {
     it('builds from api url and loads providerId', () => {
       const providerId = 'test-provider-id';
       const url = urls.creditRequestUrl(providerId);
-      expect(url.startsWith(urls.api)).toEqual(true);
+      expect(url.startsWith(urls.getApiUrl())).toEqual(true);
       expect(url).toEqual(expect.stringContaining(providerId));
     });
   });

src/widgets/LookingForChallengeWidget/__snapshots__/index.test.jsx.snap

@@ -18,8 +18,8 @@ exports[`LookingForChallengeWidget snapshots default 1`] = `
     <h5>
       <Hyperlink
         className="d-flex align-items-center"
-        destination="course-search-url"
-        onClick={[MockFunction track.findCoursesWidgetClicked('course-search-url')]}
+        destination="http://localhost:18000/course-search-url"
+        onClick={[MockFunction track.findCoursesWidgetClicked('http://localhost:18000/course-search-url')]}
         variant="brand"
       >
         <format-message-function

src/widgets/LookingForChallengeWidget/index.jsx

@@ -6,6 +6,7 @@ import { ArrowForward } from '@edx/paragon/icons';
 
 import { reduxHooks } from 'hooks';
 import moreCoursesSVG from 'assets/more-courses-sidewidget.svg';
+import { baseAppUrl } from 'data/services/lms/urls';
 
 import track from '../RecommendationsPanel/track';
 import messages from './messages';
@@ -29,8 +30,8 @@ export const LookingForChallengeWidget = () => {
         <h5>
           <Hyperlink
             variant="brand"
-            destination={courseSearchUrl}
-            onClick={track.findCoursesWidgetClicked(courseSearchUrl)}
+            destination={baseAppUrl(courseSearchUrl)}
+            onClick={track.findCoursesWidgetClicked(baseAppUrl(courseSearchUrl))}
             className="d-flex align-items-center"
           >
             {formatMessage(messages.findCoursesButton, { arrow: arrowIcon })}

src/widgets/LookingForChallengeWidget/index.test.jsx

@@ -5,7 +5,7 @@ import LookingForChallengeWidget from '.';
 jest.mock('hooks', () => ({
   reduxHooks: {
     usePlatformSettingsData: () => ({
-      courseSearchUrl: 'course-search-url',
+      courseSearchUrl: 'http://localhost:18000/course-search-url',
     }),
   },
 }));

src/widgets/RecommendationsPanel/LoadedView.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
 import { Search } from '@edx/paragon/icons';
+import { baseAppUrl } from 'data/services/lms/urls';
 
 import { reduxHooks } from 'hooks';
 import track from './track';
@@ -38,8 +39,8 @@ export const LoadedView = ({
           variant="tertiary"
           iconBefore={Search}
           as="a"
-          href={courseSearchUrl}
-          onClick={track.findCoursesWidgetClicked(courseSearchUrl)}
+          href={baseAppUrl(courseSearchUrl)}
+          onClick={track.findCoursesWidgetClicked(baseAppUrl(courseSearchUrl))}
         >
           {formatMessage(messages.exploreCoursesButton)}
         </Button>

src/widgets/RecommendationsPanel/LoadedView.test.jsx

@@ -5,17 +5,20 @@ import LoadedView from './LoadedView';
 import mockData from './mockData';
 import messages from './messages';
 
-jest.mock('./components/CourseCard', () => 'CourseCard');
 jest.mock('hooks', () => ({
   reduxHooks: {
     usePlatformSettingsData: () => ({
-      courseSearchUrl: 'course-search-url',
+      courseSearchUrl: '/course-search-url',
     }),
   },
 }));
+jest.mock('data/services/lms/urls', () => ({
+  baseAppUrl: (url) => (`http://localhost:18000${url}`),
+}));
 jest.mock('./track', () => ({
   findCoursesWidgetClicked: (href) => jest.fn().mockName(`track.findCoursesWidgetClicked('${href}')`),
 }));
+jest.mock('./components/CourseCard', () => 'CourseCard');
 
 describe('RecommendationsPanel LoadedView', () => {
   const props = {

src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap

@@ -64,9 +64,9 @@ exports[`RecommendationsPanel LoadedView snapshot with personalize recommendatio
   >
     <Button
       as="a"
-      href="course-search-url"
+      href="http://localhost:18000/course-search-url"
       iconBefore={[MockFunction icons.Search]}
-      onClick={[MockFunction track.findCoursesWidgetClicked('course-search-url')]}
+      onClick={[MockFunction track.findCoursesWidgetClicked('http://localhost:18000/course-search-url')]}
       variant="tertiary"
     >
       Explore courses
@@ -139,9 +139,9 @@ exports[`RecommendationsPanel LoadedView snapshot without personalize recommenda
   >
     <Button
       as="a"
-      href="course-search-url"
+      href="http://localhost:18000/course-search-url"
       iconBefore={[MockFunction icons.Search]}
-      onClick={[MockFunction track.findCoursesWidgetClicked('course-search-url')]}
+      onClick={[MockFunction track.findCoursesWidgetClicked('http://localhost:18000/course-search-url')]}
       variant="tertiary"
     >
       Explore courses

src/widgets/RecommendationsPanel/api.js

@@ -2,10 +2,10 @@ import { StrictDict } from 'utils';
 import { get, stringifyUrl } from 'data/services/lms/utils';
 import urls from 'data/services/lms/urls';
 
-export const fetchUrl = `${urls.api}/learner_recommendations/courses/`;
+export const getFetchUrl = () => (`${urls.getApiUrl()}/learner_recommendations/courses/`);
 export const apiKeys = StrictDict({ user: 'user' });
 
-const fetchRecommendedCourses = () => get(stringifyUrl(fetchUrl));
+const fetchRecommendedCourses = () => get(stringifyUrl(getFetchUrl()));
 
 export default {
   fetchRecommendedCourses,

src/widgets/RecommendationsPanel/api.test.js

@@ -1,5 +1,5 @@
 import { get, stringifyUrl } from 'data/services/lms/utils';
-import api, { fetchUrl } from './api';
+import api, { getFetchUrl } from './api';
 
 jest.mock('data/services/lms/utils', () => ({
   stringifyUrl: (...args) => ({ stringifyUrl: args }),
@@ -10,7 +10,7 @@ describe('recommendedCourses api', () => {
   describe('fetchRecommendedCourses', () => {
     it('calls get with the correct recommendation courses URL and user', () => {
       expect(api.fetchRecommendedCourses()).toEqual(
-        get(stringifyUrl(fetchUrl)),
+        get(stringifyUrl(getFetchUrl())),
       );
     });
   });