Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: use getConfig not process.env #232

Merged
merged 3 commits into from
Nov 30, 2023
+159 −23
Merged

fix: use getConfig not process.env #232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4b2d65c
fix: use getConfig not process.env
cintnguyen Oct 27, 2023
d1bf6f9
Merge branch 'master' into runtime-config
deborahgu Nov 21, 2023
81ce59e
fix: properly use OPTIMIZELY_PROJECT_ID and increase test coverage
brian-smith-tcril Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,8 @@
<!doctype html>
<html lang="en-us" dir="ltr">
<head>
<title>Learner Dashboard | <%= process.env.SITE_NAME %></title>
deborahgu marked this conversation as resolved.
Show resolved Hide resolved
<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>
Expand Down
28 changes: 22 additions & 6 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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} />;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing test; could you add one?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tried tackling this in 370aa3f, ran into issues with runBasicTests() not respecting dynamic getConfig mocks. It seems to be a test scope issue. I am not quite sure what refactoring of App.test.jsx would be needed to get this working yet.

I will be out of office until end of next week, in the meantime @brian-smith-tcril and @httpsmenahassan have offered to take a look at this.

} if (getConfig().OPTIMIZELY_PROJECT_ID) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing test; could you add one?

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: [] });
};
Expand All @@ -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);
Expand All @@ -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" />
deborahgu marked this conversation as resolved.
Show resolved Hide resolved
{optimizelyScript()}
</Helmet>
<div>
<AppWrapper>
Expand All @@ -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>
</>
Expand Down
48 changes: 46 additions & 2 deletions src/App.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 = () => {
Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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();
Expand Down
80 changes: 80 additions & 0 deletions src/__snapshots__/App.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/containers/LearnerDashboardHeader/BrandLogo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion src/widgets/ProductRecommendations/components/ProductCardHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion src/widgets/ProductRecommendations/optimizely.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand Down
4 changes: 4 additions & 0 deletions src/widgets/ProductRecommendations/optimizely.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down