fix: upgrading to frontend-base 2.0.0 (#3)

src/SiteHeader.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import Responsive from 'react-responsive';
 import { injectIntl, intlShape } from '@edx/frontend-i18n';
-import { App, AuthenticationContext } from '@edx/frontend-base';
+import { App, AppContext, APP_CONFIGURED } from '@edx/frontend-base';
 
 import DesktopHeader from './DesktopHeader';
 import MobileHeader from './MobileHeader';
@@ -10,27 +10,22 @@ import LogoSVG from './logo.svg';
 
 import messages from './SiteHeader.messages';
 
-App.requireConfig([
-  'LMS_BASE_URL',
-  'LOGOUT_URL',
-  'LOGIN_URL',
-  'SITE_NAME',
-], 'Header component');
-
-const {
-  LMS_BASE_URL,
-  LOGOUT_URL,
-  LOGIN_URL,
-  SITE_NAME,
-} = App.config;
+App.subscribe(APP_CONFIGURED, () => {
+  App.requireConfig([
+    'LMS_BASE_URL',
+    'LOGOUT_URL',
+    'LOGIN_URL',
+    'SITE_NAME',
+  ], 'Header component');
+});
 
 function SiteHeader({ intl }) {
-  const { username, avatar } = useContext(AuthenticationContext);
+  const { authenticatedUser, config } = useContext(AppContext);
 
   const mainMenu = [
     {
       type: 'item',
-      href: `${LMS_BASE_URL}/dashboard`,
+      href: `${config.LMS_BASE_URL}/dashboard`,
       content: intl.formatMessage(messages['header.links.courses']),
     },
   ];
@@ -38,22 +33,22 @@ function SiteHeader({ intl }) {
   const userMenu = [
     {
       type: 'item',
-      href: `${LMS_BASE_URL}/dashboard`,
+      href: `${config.LMS_BASE_URL}/dashboard`,
       content: intl.formatMessage(messages['header.user.menu.dashboard']),
     },
     {
       type: 'item',
-      href: `${LMS_BASE_URL}/u/${username}`,
+      href: `${config.LMS_BASE_URL}/u/${authenticatedUser.username}`,
       content: intl.formatMessage(messages['header.user.menu.profile']),
     },
     {
       type: 'item',
-      href: `${LMS_BASE_URL}/account/settings`,
+      href: `${config.LMS_BASE_URL}/account/settings`,
       content: intl.formatMessage(messages['header.user.menu.account.settings']),
     },
     {
       type: 'item',
-      href: LOGOUT_URL,
+      href: config.LOGOUT_URL,
       content: intl.formatMessage(messages['header.user.menu.logout']),
     },
   ];
@@ -61,24 +56,24 @@ function SiteHeader({ intl }) {
   const loggedOutItems = [
     {
       type: 'item',
-      href: LOGIN_URL,
+      href: config.LOGIN_URL,
       content: intl.formatMessage(messages['header.user.menu.login']),
     },
     {
       type: 'item',
-      href: `${LMS_BASE_URL}/register`,
+      href: `${config.LMS_BASE_URL}/register`,
       content: intl.formatMessage(messages['header.user.menu.register']),
     },
   ];
 
   const props = {
     logo: LogoSVG,
-    logoAltText: SITE_NAME,
-    siteName: SITE_NAME,
-    logoDestination: `${LMS_BASE_URL}/dashboard`,
-    loggedIn: !!username,
-    username,
-    avatar,
+    logoAltText: config.SITE_NAME,
+    siteName: config.SITE_NAME,
+    logoDestination: `${config.LMS_BASE_URL}/dashboard`,
+    loggedIn: !!authenticatedUser.username,
+    username: authenticatedUser.username,
+    avatar: authenticatedUser.avatar,
     mainMenu,
     userMenu,
     loggedOutItems,

src/SiteHeader.test.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-i18n';
 import TestRenderer from 'react-test-renderer';
-import { AuthenticationContext } from '@edx/frontend-base';
+import { AppContext } from '@edx/frontend-base';
 import { Context as ResponsiveContext } from 'react-responsive';
 
 import SiteHeader from './index';
@@ -12,15 +12,23 @@ describe('<SiteHeader />', () => {
     const component = (
       <ResponsiveContext.Provider value={{ width: 1280 }}>
         <IntlProvider locale="en" messages={{}}>
-          <AuthenticationContext.Provider
-            value={{
+          <AppContext.Provider value={{
+            authenticatedUser: {
               userId: null,
               username: null,
+              roles: [],
               administrator: false,
+            },
+            config: {
+              LMS_BASE_URL: process.env.LMS_BASE_URL,
+              SITE_NAME: process.env.SITE_NAME,
+              LOGIN_URL: process.env.LOGIN_URL,
+              LOGOUT_URL: process.env.LOGOUT_URL,
+            },
             }}
           >
             <SiteHeader />
-          </AuthenticationContext.Provider>
+          </AppContext.Provider>
         </IntlProvider>
       </ResponsiveContext.Provider>
     );
@@ -34,15 +42,23 @@ describe('<SiteHeader />', () => {
     const component = (
       <ResponsiveContext.Provider value={{ width: 500 }}>
         <IntlProvider locale="en" messages={{}}>
-          <AuthenticationContext.Provider
-            value={{
+          <AppContext.Provider value={{
+            authenticatedUser: {
               userId: null,
               username: null,
+              roles: [],
               administrator: false,
+            },
+            config: {
+              LMS_BASE_URL: process.env.LMS_BASE_URL,
+              SITE_NAME: process.env.SITE_NAME,
+              LOGIN_URL: process.env.LOGIN_URL,
+              LOGOUT_URL: process.env.LOGOUT_URL,
+            },
             }}
           >
             <SiteHeader />
-          </AuthenticationContext.Provider>
+          </AppContext.Provider>
         </IntlProvider>
       </ResponsiveContext.Provider>
     );

src/setupTest.js

@@ -0,0 +1,26 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import 'babel-polyfill';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+// These configuration values are usually set in webpack's EnvironmentPlugin however
+// Jest does not use webpack so we need to set these so for testing
+process.env.ACCESS_TOKEN_COOKIE_NAME = 'edx-jwt-cookie-header-payload';
+process.env.BASE_URL = 'localhost:1995';
+process.env.CREDENTIALS_BASE_URL = 'http://localhost:18150';
+process.env.CSRF_COOKIE_NAME = 'csrftoken';
+process.env.CSRF_TOKEN_API_PATH = '/csrf/api/v1/token';
+process.env.ECOMMERCE_BASE_URL = 'http://localhost:18130';
+process.env.LANGUAGE_PREFERENCE_COOKIE_NAME = 'openedx-language-preference';
+process.env.LMS_BASE_URL = 'http://localhost:18000';
+process.env.LOGIN_URL = 'http://localhost:18000/login';
+process.env.LOGOUT_URL = 'http://localhost:18000/login';
+process.env.MARKETING_SITE_BASE_URL = 'http://localhost:18000';
+process.env.ORDER_HISTORY_URL = 'localhost:1996/orders';
+process.env.REFRESH_ACCESS_TOKEN_ENDPOINT = 'http://localhost:18000/login_refresh';
+process.env.SEGMENT_KEY = 'segment_whoa';
+process.env.SITE_NAME = 'edX';
+process.env.USER_INFO_COOKIE_NAME = 'edx-user-info';