diff --git a/example/index.js b/example/index.js index 168dd72..c0e3b39 100644 --- a/example/index.js +++ b/example/index.js @@ -1,35 +1,45 @@ -import React from 'react'; -import { render } from 'react-dom'; -import { IntlProvider } from '@edx/frontend-i18n'; -import { AuthenticationContext } from '@edx/frontend-base'; +import 'babel-polyfill'; +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 SiteHeader from '../src/'; -const App = () => ( -
- - <> - { + ReactDOM.render( + + {/* We can fake out authentication by including another provider here with the data we want */} + - - -
Logged out state
+ }, + config: App.config + }}> + + +
Logged out state
- - - -
Logged in state
- - -
-); + }, + config: App.config + }}> + + +
Logged in state
+ , + document.getElementById('root'), + ); +}); -render(, document.getElementById('root')); +App.initialize({ messages: [], loggingService: NewRelicLoggingService }); diff --git a/package-lock.json b/package-lock.json index 02c5b75..6cbb4a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "@edx/frontend-component-header-edx", + "name": "@edx/frontend-component-header", "version": "1.0.0-semantically-released", "lockfileVersion": 1, "requires": true, @@ -1460,14 +1460,16 @@ } }, "@edx/frontend-base": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@edx/frontend-base/-/frontend-base-1.1.1.tgz", - "integrity": "sha512-YWbjaygt16oG9KJuIukl7FC8P46Brhje/nV+zH6+d/WbQTdp8IKtuBnrgXoypvR2unJiaFUsHcaESp9gFdOE/w==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@edx/frontend-base/-/frontend-base-2.0.0.tgz", + "integrity": "sha512-wgckFePSzFHyoTK+NTqkKSCW4dKCY11PypSNT3yDLnPdV4R5L6RqvDQr6ovfeJ/scx0R0EY89j9OV/xcvWIPSw==", "dev": true, "requires": { + "babel-polyfill": "6.26.0", "history": "4.9.0", - "lodash.memoize": "^4.1.2", - "lodash.pick": "^4.4.0", + "lodash.memoize": "4.1.2", + "lodash.merge": "4.6.2", + "lodash.pick": "4.4.0", "pubsub-js": "1.7.0", "redux-devtools-extension": "2.13.8", "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": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz", @@ -3140,7 +3159,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", - "dev": true, "requires": { "core-js": "^2.4.0", "regenerator-runtime": "^0.11.0" @@ -3149,8 +3167,7 @@ "regenerator-runtime": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", - "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", - "dev": true + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" } } }, @@ -4194,8 +4211,7 @@ "core-js": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz", - "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==", - "dev": true + "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==" }, "core-js-compat": { "version": "3.2.1", @@ -5183,6 +5199,36 @@ "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": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -9203,6 +9249,12 @@ "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", "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": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz", diff --git a/package.json b/package.json index 6e365e0..b42fe6e 100644 --- a/package.json +++ b/package.json @@ -37,14 +37,15 @@ "@babel/preset-react": "^7.0.0", "@edx/frontend-analytics": "^2.0.0", "@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-logging": "^3.0.1", "@edx/paragon": "^7.1.2", "babel-eslint": "^10.0.3", "babel-plugin-react-intl": "^4.1.18", "dotenv": "^8.1.0", - "enzyme": "^3.10.0", + "enzyme": "3.10.0", + "enzyme-adapter-react-16": "1.14.0", "eslint": "^6.3.0", "eslint-config-edx": "^4.0.4", "jest": "^24.9.0", @@ -63,12 +64,13 @@ }, "peerDependencies": { "@edx/frontend-analytics": "^2.0.0", - "@edx/frontend-base": "^1.1.1", + "@edx/frontend-base": "^2.0.0", "@edx/frontend-i18n": "^3.0.2", "prop-types": "^15.7.2", "react": "^16.9.0" }, "dependencies": { + "babel-polyfill": "^6.26.0", "react-responsive": "^8.0.1", "react-transition-group": "^4.3.0" }, @@ -88,6 +90,7 @@ "/node_modules/(?!@edx)" ], "setupFiles": [ + "./src/setupTest.js", "dotenv/config" ] } diff --git a/src/SiteHeader.jsx b/src/SiteHeader.jsx index b61e120..2e5abd5 100644 --- a/src/SiteHeader.jsx +++ b/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, diff --git a/src/SiteHeader.test.jsx b/src/SiteHeader.test.jsx index 2e82e6c..886bf51 100644 --- a/src/SiteHeader.test.jsx +++ b/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('', () => { const component = ( - - + ); @@ -34,15 +42,23 @@ describe('', () => { const component = ( - - + ); diff --git a/src/setupTest.js b/src/setupTest.js new file mode 100644 index 0000000..9f074bd --- /dev/null +++ b/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';