Andal.LND/frontend-component-header
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
David Joy
2019-09-18 23:17:37 -04:00
committed by GitHub
parent d36115f60b
commit f9d173462d
6 changed files with 174 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
example/index.js
View File

@@ -1,35 +1,45 @@
import React from 'react'; import 'babel-polyfill';
import { render } from 'react-dom';
import { IntlProvider } from '@edx/frontend-i18n';
import { AuthenticationContext } from '@edx/frontend-base';
import React from 'react';
import ReactDOM from 'react-dom';
import { App, AppContext, APP_READY, AppProvider } from '@edx/frontend-base';
import { NewRelicLoggingService } from '@edx/frontend-logging';
import './index.scss'; import './index.scss';
import SiteHeader from '../src/'; import SiteHeader from '../src/';
const App = () => ( App.subscribe(APP_READY, () => {
<div> ReactDOM.render(
<IntlProvider locale="en"> <AppProvider>
<> {/* We can fake out authentication by including another provider here with the data we want */}
<AuthenticationContext.Provider value={{ <AppContext.Provider value={{
authenticatedUser: {
userId: null, userId: null,
username: null, username: null,
roles: [],
administrator: false, administrator: false,
}}> },
<SiteHeader /> config: App.config
</AuthenticationContext.Provider> }}>
<h5 className="mt-2 mb-5">Logged out state</h5> <SiteHeader />
</AppContext.Provider>
<h5 className="mt-2 mb-5">Logged out state</h5>
<AuthenticationContext.Provider value={{ {/* We can fake out authentication by including another provider here with the data we want */}
<AppContext.Provider value={{
authenticatedUser: {
userId: null, userId: null,
username: 'testuser', username: 'testuser',
roles: [],
administrator: false, administrator: false,
}}> },
<SiteHeader /> config: App.config
</AuthenticationContext.Provider> }}>
<h5 className="mt-2">Logged in state</h5> <SiteHeader />
</> </AppContext.Provider>
</IntlProvider> <h5 className="mt-2">Logged in state</h5>
</div> </AppProvider>,
); document.getElementById('root'),
);
});
render(<App />, document.getElementById('root')); App.initialize({ messages: [], loggingService: NewRelicLoggingService });

74
package-lock.json generated
View File

@@ -1,5 +1,5 @@
{ {
"name": "@edx/frontend-component-header-edx", "name": "@edx/frontend-component-header",
"version": "1.0.0-semantically-released", "version": "1.0.0-semantically-released",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
@@ -1460,14 +1460,16 @@
} }
}, },
"@edx/frontend-base": { "@edx/frontend-base": {
"version": "1.1.1", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/@edx/frontend-base/-/frontend-base-1.1.1.tgz", "resolved": "https://registry.npmjs.org/@edx/frontend-base/-/frontend-base-2.0.0.tgz",
"integrity": "sha512-YWbjaygt16oG9KJuIukl7FC8P46Brhje/nV+zH6+d/WbQTdp8IKtuBnrgXoypvR2unJiaFUsHcaESp9gFdOE/w==", "integrity": "sha512-wgckFePSzFHyoTK+NTqkKSCW4dKCY11PypSNT3yDLnPdV4R5L6RqvDQr6ovfeJ/scx0R0EY89j9OV/xcvWIPSw==",
"dev": true, "dev": true,
"requires": { "requires": {
"babel-polyfill": "6.26.0",
"history": "4.9.0", "history": "4.9.0",
"lodash.memoize": "^4.1.2", "lodash.memoize": "4.1.2",
"lodash.pick": "^4.4.0", "lodash.merge": "4.6.2",
"lodash.pick": "4.4.0",
"pubsub-js": "1.7.0", "pubsub-js": "1.7.0",
"redux-devtools-extension": "2.13.8", "redux-devtools-extension": "2.13.8",
"redux-logger": "3.0.6", "redux-logger": "3.0.6",
@@ -3126,6 +3128,23 @@
} }
} }
}, },
"babel-polyfill": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
"integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
"requires": {
"babel-runtime": "^6.26.0",
"core-js": "^2.5.0",
"regenerator-runtime": "^0.10.5"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
"integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
}
}
},
"babel-preset-jest": { "babel-preset-jest": {
"version": "24.9.0", "version": "24.9.0",
"resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz", "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz",
@@ -3140,7 +3159,6 @@
"version": "6.26.0", "version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"dev": true,
"requires": { "requires": {
"core-js": "^2.4.0", "core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0" "regenerator-runtime": "^0.11.0"
@@ -3149,8 +3167,7 @@
"regenerator-runtime": { "regenerator-runtime": {
"version": "0.11.1", "version": "0.11.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
"dev": true
} }
} }
}, },
@@ -4194,8 +4211,7 @@
"core-js": { "core-js": {
"version": "2.6.9", "version": "2.6.9",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
"integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==", "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
"dev": true
}, },
"core-js-compat": { "core-js-compat": {
"version": "3.2.1", "version": "3.2.1",
@@ -5183,6 +5199,36 @@
"string.prototype.trim": "^1.1.2" "string.prototype.trim": "^1.1.2"
} }
}, },
"enzyme-adapter-react-16": {
"version": "1.14.0",
"resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.14.0.tgz",
"integrity": "sha512-7PcOF7pb4hJUvjY7oAuPGpq3BmlCig3kxXGi2kFx0YzJHppqX1K8IIV9skT1IirxXlu8W7bneKi+oQ10QRnhcA==",
"dev": true,
"requires": {
"enzyme-adapter-utils": "^1.12.0",
"has": "^1.0.3",
"object.assign": "^4.1.0",
"object.values": "^1.1.0",
"prop-types": "^15.7.2",
"react-is": "^16.8.6",
"react-test-renderer": "^16.0.0-0",
"semver": "^5.7.0"
}
},
"enzyme-adapter-utils": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.12.0.tgz",
"integrity": "sha512-wkZvE0VxcFx/8ZsBw0iAbk3gR1d9hK447ebnSYBf95+r32ezBq+XDSAvRErkc4LZosgH8J7et7H7/7CtUuQfBA==",
"dev": true,
"requires": {
"airbnb-prop-types": "^2.13.2",
"function.prototype.name": "^1.1.0",
"object.assign": "^4.1.0",
"object.fromentries": "^2.0.0",
"prop-types": "^15.7.2",
"semver": "^5.6.0"
}
},
"error-ex": { "error-ex": {
"version": "1.3.2", "version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -9203,6 +9249,12 @@
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
"dev": true "dev": true
}, },
"lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true
},
"lodash.mergewith": { "lodash.mergewith": {
"version": "4.6.2", "version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz", "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",

9
package.json
View File

@@ -37,14 +37,15 @@
"@babel/preset-react": "^7.0.0", "@babel/preset-react": "^7.0.0",
"@edx/frontend-analytics": "^2.0.0", "@edx/frontend-analytics": "^2.0.0",
"@edx/frontend-auth": "^6.0.1", "@edx/frontend-auth": "^6.0.1",
"@edx/frontend-base": "^1.1.1", "@edx/frontend-base": "^2.0.0",
"@edx/frontend-i18n": "^3.0.2", "@edx/frontend-i18n": "^3.0.2",
"@edx/frontend-logging": "^3.0.1", "@edx/frontend-logging": "^3.0.1",
"@edx/paragon": "^7.1.2", "@edx/paragon": "^7.1.2",
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"babel-plugin-react-intl": "^4.1.18", "babel-plugin-react-intl": "^4.1.18",
"dotenv": "^8.1.0", "dotenv": "^8.1.0",
"enzyme": "^3.10.0", "enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.14.0",
"eslint": "^6.3.0", "eslint": "^6.3.0",
"eslint-config-edx": "^4.0.4", "eslint-config-edx": "^4.0.4",
"jest": "^24.9.0", "jest": "^24.9.0",
@@ -63,12 +64,13 @@
}, },
"peerDependencies": { "peerDependencies": {
"@edx/frontend-analytics": "^2.0.0", "@edx/frontend-analytics": "^2.0.0",
"@edx/frontend-base": "^1.1.1", "@edx/frontend-base": "^2.0.0",
"@edx/frontend-i18n": "^3.0.2", "@edx/frontend-i18n": "^3.0.2",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.9.0" "react": "^16.9.0"
}, },
"dependencies": { "dependencies": {
"babel-polyfill": "^6.26.0",
"react-responsive": "^8.0.1", "react-responsive": "^8.0.1",
"react-transition-group": "^4.3.0" "react-transition-group": "^4.3.0"
}, },
@@ -88,6 +90,7 @@
"/node_modules/(?!@edx)" "/node_modules/(?!@edx)"
], ],
"setupFiles": [ "setupFiles": [
"./src/setupTest.js",
"dotenv/config" "dotenv/config"
] ]
} }

51
src/SiteHeader.jsx
View File

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

30
src/SiteHeader.test.jsx
View File

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

26
src/setupTest.js Normal file
View File

@@ -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';