fix: use getConfig not process.env (#232)

openedx · Nov 30, 2023 · a4f14da · a4f14da
2 parents 5ca1e9d + 81ce59e
commit a4f14da
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 23 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,8 @@
 <!doctype html>
 <html lang="en-us" dir="ltr">
   <head>
-      <title>Learner Dashboard | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
-      <% if (process.env.OPTIMIZELY_URL) { %>
-        <script
-          src="<%= process.env.OPTIMIZELY_URL %>"
-        ></script>
-      <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
-        <script
-          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
-        ></script>
-      <% } %>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.jsx b/src/App.jsx
@@ -27,6 +27,7 @@ import fakeData from 'data/services/lms/fakeData/courses';
 import AppWrapper from 'containers/WidgetContainers/AppWrapper';
 import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
 
+import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 import './App.scss';
 
@@ -41,8 +42,21 @@ export const App = () => {
   const { supportEmail } = reduxHooks.usePlatformSettingsData();
   const loadData = reduxHooks.useLoadData();
 
+  const optimizelyScript = () => {
+    if (getConfig().OPTIMIZELY_URL) {
+      return <script src={getConfig().OPTIMIZELY_URL} />;
+    } if (getConfig().OPTIMIZELY_PROJECT_ID) {
+      return (
+        <script
+          src={`${getConfig().MARKETING_SITE_BASE_URL}/optimizelyjs/${getConfig().OPTIMIZELY_PROJECT_ID}.js`}
+        />
+      );
+    }
+    return null;
+  };
+
   React.useEffect(() => {
-    if (authenticatedUser?.administrator || process.env.NODE_ENV === 'development') {
+    if (authenticatedUser?.administrator || getConfig().NODE_ENV === 'development') {
       window.loadEmptyData = () => {
         loadData({ ...fakeData.globalData, courses: [] });
       };
@@ -60,12 +74,12 @@ export const App = () => {
       window.actions = actions;
       window.track = track;
     }
-    if (process.env.HOTJAR_APP_ID) {
+    if (getConfig().HOTJAR_APP_ID) {
       try {
         initializeHotjar({
-          hotjarId: process.env.HOTJAR_APP_ID,
-          hotjarVersion: process.env.HOTJAR_VERSION,
-          hotjarDebug: !!process.env.HOTJAR_DEBUG,
+          hotjarId: getConfig().HOTJAR_APP_ID,
+          hotjarVersion: getConfig().HOTJAR_VERSION,
+          hotjarDebug: !!getConfig().HOTJAR_DEBUG,
         });
       } catch (error) {
         logError(error);
@@ -76,6 +90,8 @@ export const App = () => {
     <>
       <Helmet>
         <title>{formatMessage(messages.pageTitle)}</title>
+        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+        {optimizelyScript()}
       </Helmet>
       <div>
         <AppWrapper>
@@ -93,7 +109,7 @@ export const App = () => {
               )}
           </main>
         </AppWrapper>
-        <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+        <Footer logo={getConfig().LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
         <ZendeskFab />
       </div>
     </>

diff --git a/src/App.test.jsx b/src/App.test.jsx
@@ -4,6 +4,7 @@ import { shallow } from '@edx/react-unit-test-utils';
 
 import Footer from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 
 import { RequestKeys } from 'data/constants/requests';
 import { reduxHooks } from 'hooks';
@@ -37,17 +38,21 @@ jest.mock('hooks', () => ({
 }));
 jest.mock('data/store', () => 'data/store');
 
+const logo = 'fakeLogo.png';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({})),
+}));
+
 const loadData = jest.fn();
 reduxHooks.useLoadData.mockReturnValue(loadData);
 
-const logo = 'fakeLogo.png';
 let el;
 
 const supportEmail = 'test-support-url';
 reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
 
 describe('App router component', () => {
-  process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
   const { formatMessage } = useIntl();
   describe('component', () => {
     const runBasicTests = () => {
@@ -73,6 +78,43 @@ describe('App router component', () => {
     describe('no network failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const expProvider = main.children[0];
+        expect(expProvider.type).toEqual('ExperimentProvider');
+        expect(expProvider.children.length).toEqual(1);
+        expect(
+          expProvider.matches(shallow(<ExperimentProvider><Dashboard /></ExperimentProvider>)),
+        ).toEqual(true);
+      });
+    });
+    describe('no network failure with optimizely url', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo, OPTIMIZELY_URL: 'fake.url' });
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const expProvider = main.children[0];
+        expect(expProvider.type).toEqual('ExperimentProvider');
+        expect(expProvider.children.length).toEqual(1);
+        expect(
+          expProvider.matches(shallow(<ExperimentProvider><Dashboard /></ExperimentProvider>)),
+        ).toEqual(true);
+      });
+    });
+    describe('no network failure with optimizely project id', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo, OPTIMIZELY_PROJECT_ID: 'fakeId' });
         el = shallow(<App />);
       });
       runBasicTests();
@@ -90,6 +132,7 @@ describe('App router component', () => {
     describe('initialize failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.initialize);
+        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
         el = shallow(<App />);
       });
       runBasicTests();
@@ -107,6 +150,7 @@ describe('App router component', () => {
     describe('refresh failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.refreshList);
+        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
         el = shallow(<App />);
       });
       runBasicTests();

diff --git a/src/__snapshots__/App.test.jsx.snap b/src/__snapshots__/App.test.jsx.snap
@@ -9,6 +9,10 @@ exports[`App router component component initialize failure snapshot 1`] = `
     <title>
       Learner Home
     </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
   </HelmetWrapper>
   <div>
     <AppWrapper>
@@ -40,6 +44,78 @@ exports[`App router component component no network failure snapshot 1`] = `
     <title>
       Learner Home
     </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+  </HelmetWrapper>
+  <div>
+    <AppWrapper>
+      <LearnerDashboardHeader />
+      <main>
+        <ExperimentProvider>
+          <Dashboard />
+        </ExperimentProvider>
+      </main>
+    </AppWrapper>
+    <Footer
+      logo="fakeLogo.png"
+    />
+    <ZendeskFab />
+  </div>
+</Fragment>
+`;
+
+exports[`App router component component no network failure with optimizely project id snapshot 1`] = `
+<Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+    <script
+      src="undefined/optimizelyjs/fakeId.js"
+    />
+  </HelmetWrapper>
+  <div>
+    <AppWrapper>
+      <LearnerDashboardHeader />
+      <main>
+        <ExperimentProvider>
+          <Dashboard />
+        </ExperimentProvider>
+      </main>
+    </AppWrapper>
+    <Footer
+      logo="fakeLogo.png"
+    />
+    <ZendeskFab />
+  </div>
+</Fragment>
+`;
+
+exports[`App router component component no network failure with optimizely url snapshot 1`] = `
+<Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+    <script
+      src="fake.url"
+    />
   </HelmetWrapper>
   <div>
     <AppWrapper>
@@ -67,6 +143,10 @@ exports[`App router component component refresh failure snapshot 1`] = `
     <title>
       Learner Home
     </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
   </HelmetWrapper>
   <div>
     <AppWrapper>

diff --git a/src/containers/LearnerDashboardHeader/BrandLogo.jsx b/src/containers/LearnerDashboardHeader/BrandLogo.jsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { reduxHooks } from 'hooks';
-import { configuration } from '../../config';
 
+import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 
 export const BrandLogo = () => {
@@ -15,7 +15,7 @@ export const BrandLogo = () => {
     <a href={dashboard?.url || '/'} className="mx-auto">
       <img
         className="logo py-3"
-        src={configuration.LOGO_URL}
+        src={getConfig().LOGO_URL}
         alt={formatMessage(messages.logoAltText)}
       />
     </a>

diff --git a/src/widgets/ProductRecommendations/components/ProductCardHeader.jsx b/src/widgets/ProductRecommendations/components/ProductCardHeader.jsx
@@ -5,6 +5,7 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
 import { Icon, Hyperlink } from '@edx/paragon';
 import { ChevronRight } from '@edx/paragon/icons';
+import { getConfig } from '@edx/frontend-platform';
 import { trackProductHeaderClicked } from '../optimizelyExperiment';
 import { recommendationsHeaderClicked } from '../track';
 import { executiveEducation, bootCamp } from '../constants';
@@ -44,7 +45,7 @@ const ProductCardHeader = ({ courseType }) => {
 
   const { formatMessage } = useIntl();
   const productTypeDetail = getProductTypeDetail(courseType);
-  const headerUrl = `${process.env.MARKETING_SITE_BASE_URL}${productTypeDetail.url}`;
+  const headerUrl = `${getConfig().MARKETING_SITE_BASE_URL}${productTypeDetail.url}`;
 
   return (
     <div>

diff --git a/src/widgets/ProductRecommendations/optimizely.js b/src/widgets/ProductRecommendations/optimizely.js
@@ -1,6 +1,8 @@
 import { createInstance, setLogLevel } from '@optimizely/react-sdk';
 
-const OPTIMIZELY_SDK_KEY = process.env.OPTIMIZELY_FULL_STACK_SDK_KEY;
+import { getConfig } from '@edx/frontend-platform';
+
+const OPTIMIZELY_SDK_KEY = getConfig().OPTIMIZELY_FULL_STACK_SDK_KEY;
 
 const configureClient = () => {
   setLogLevel('error');

diff --git a/src/widgets/ProductRecommendations/optimizely.test.js b/src/widgets/ProductRecommendations/optimizely.test.js
@@ -6,6 +6,10 @@ jest.mock('@optimizely/react-sdk', () => ({
   setLogLevel: jest.fn(),
 }));
 
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({ OPTIMIZELY_FULL_STACK_SDK_KEY: 'SDK Key' })),
+}));
+
 describe('optimizelyClient', () => {
   it('should configure an Optimizely client instance with the correct SDK key', () => {
     expect(optimizelyClient).toBeDefined();