diff --git a/package-lock.json b/package-lock.json index 05476e2..73621a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3", "@edx/frontend-component-footer": "10.1.6", + "@edx/frontend-component-header": "^2.4.6", "@edx/frontend-platform": "^1.15.6", "@edx/paragon": "16.14.4", "@fortawesome/fontawesome-svg-core": "^1.2.36", @@ -3521,6 +3522,28 @@ "react": ">=16.x" } }, + "node_modules/@edx/frontend-component-header": { + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-2.4.6.tgz", + "integrity": "sha512-bwEP3B37N4lIDPM4cz/Dg1egQHWf14qj+3VU44BOf5DC/bNhASKeeEJEvDn6XTZdFCpGioHRBtqlEJQJsp0WqA==", + "dependencies": { + "@fortawesome/fontawesome-svg-core": "1.2.36", + "@fortawesome/free-brands-svg-icons": "5.15.4", + "@fortawesome/free-regular-svg-icons": "5.15.4", + "@fortawesome/free-solid-svg-icons": "5.15.4", + "@fortawesome/react-fontawesome": "^0.1.14", + "babel-polyfill": "6.26.0", + "react-responsive": "8.2.0", + "react-transition-group": "4.4.2" + }, + "peerDependencies": { + "@edx/frontend-platform": "^1.8.0", + "@edx/paragon": ">= 7.0.0 < 20.0.0", + "prop-types": "^15.5.10", + "react": "^16.9.0", + "react-dom": "^16.9.0" + } + }, "node_modules/@edx/frontend-platform": { "version": "1.15.6", "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.15.6.tgz", @@ -8514,7 +8537,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz", "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=", - "dev": true, "dependencies": { "babel-runtime": "^6.26.0", "core-js": "^2.5.0", @@ -8526,14 +8548,12 @@ "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", "deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.", - "dev": true, "hasInstallScript": true }, "node_modules/babel-polyfill/node_modules/regenerator-runtime": { "version": "0.10.5", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", - "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=", - "dev": true + "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=" }, "node_modules/babel-preset-current-node-syntax": { "version": "1.0.1", @@ -8578,7 +8598,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, "dependencies": { "core-js": "^2.4.0", "regenerator-runtime": "^0.11.0" @@ -8589,14 +8608,12 @@ "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", "deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.", - "dev": true, "hasInstallScript": true }, "node_modules/babel-runtime/node_modules/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==" }, "node_modules/balanced-match": { "version": "1.0.2", @@ -36088,6 +36105,21 @@ } } }, + "@edx/frontend-component-header": { + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-2.4.6.tgz", + "integrity": "sha512-bwEP3B37N4lIDPM4cz/Dg1egQHWf14qj+3VU44BOf5DC/bNhASKeeEJEvDn6XTZdFCpGioHRBtqlEJQJsp0WqA==", + "requires": { + "@fortawesome/fontawesome-svg-core": "1.2.36", + "@fortawesome/free-brands-svg-icons": "5.15.4", + "@fortawesome/free-regular-svg-icons": "5.15.4", + "@fortawesome/free-solid-svg-icons": "5.15.4", + "@fortawesome/react-fontawesome": "^0.1.14", + "babel-polyfill": "6.26.0", + "react-responsive": "8.2.0", + "react-transition-group": "4.4.2" + } + }, "@edx/frontend-platform": { "version": "1.15.6", "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.15.6.tgz", @@ -39986,7 +40018,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz", "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=", - "dev": true, "requires": { "babel-runtime": "^6.26.0", "core-js": "^2.5.0", @@ -39996,14 +40027,12 @@ "core-js": { "version": "2.6.12", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", - "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", - "dev": true + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==" }, "regenerator-runtime": { "version": "0.10.5", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", - "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=", - "dev": true + "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=" } } }, @@ -40041,7 +40070,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" @@ -40050,14 +40078,12 @@ "core-js": { "version": "2.6.12", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", - "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", - "dev": true + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==" }, "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==" } } }, diff --git a/package.json b/package.json index 915bd80..072dc87 100755 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "dependencies": { "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3", "@edx/frontend-component-footer": "10.1.6", + "@edx/frontend-component-header": "^2.4.6", "@edx/frontend-platform": "^1.15.6", "@edx/paragon": "16.14.4", "@fortawesome/fontawesome-svg-core": "^1.2.36", diff --git a/src/App.jsx b/src/App.jsx index 1b3c24c..b28f390 100755 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,11 +4,11 @@ import { connect } from 'react-redux'; import { BrowserRouter as Router } from 'react-router-dom'; import Footer from '@edx/frontend-component-footer'; +import { LearningHeader as Header } from '@edx/frontend-component-header'; import { selectors } from 'data/redux'; import DemoWarning from 'containers/DemoWarning'; -import CourseHeader from 'containers/CourseHeader'; import ListView from 'containers/ListView'; import './App.scss'; @@ -16,7 +16,7 @@ import './App.scss'; export const App = ({ courseMetadata, isEnabled }) => (
- ({ }, })); +jest.mock('@edx/frontend-component-header', () => ({ + LearningHeader: 'Header', +})); jest.mock('@edx/frontend-component-footer', () => 'Footer'); jest.mock('containers/DemoWarning', () => 'DemoWarning'); jest.mock('containers/ListView', () => 'ListView'); -jest.mock('containers/CourseHeader', () => 'CourseHeader'); const logo = 'fakeLogo.png'; let el; @@ -57,5 +60,16 @@ describe('App router component', () => { test('Footer logo drawn from env variable', () => { expect(router.find(Footer).props().logo).toEqual(logo); }); + + test('Header to use courseMetadata props', () => { + const { + courseTitle, + courseNumber, + courseOrg, + } = router.find(Header).props(); + expect(courseTitle).toEqual(props.courseMetadata.title); + expect(courseNumber).toEqual(props.courseMetadata.number); + expect(courseOrg).toEqual(props.courseMetadata.org); + }); }); }); diff --git a/src/__snapshots__/App.test.jsx.snap b/src/__snapshots__/App.test.jsx.snap index 442faca..23af3f3 100644 --- a/src/__snapshots__/App.test.jsx.snap +++ b/src/__snapshots__/App.test.jsx.snap @@ -3,7 +3,7 @@ exports[`App router component snapshot: disabled (show demo warning) 1`] = `
-
- { - const { LMS_BASE_URL } = getConfig(); - const locationHref = encodeURIComponent(global.location.href); - return `${LMS_BASE_URL}/register?next=${locationHref}`; -}; - -export const AnonymousUserMenu = ({ intl }) => ( -
- - -
-); - -AnonymousUserMenu.propTypes = { - intl: intlShape.isRequired, -}; - -export default injectIntl(AnonymousUserMenu); diff --git a/src/containers/CourseHeader/AnonymousUserMenu.test.jsx b/src/containers/CourseHeader/AnonymousUserMenu.test.jsx deleted file mode 100644 index aee1a41..0000000 --- a/src/containers/CourseHeader/AnonymousUserMenu.test.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; - -import { AnonymousUserMenu } from './AnonymousUserMenu'; - -jest.mock('@edx/frontend-platform', () => ({ - getConfig: () => ({ - LMS_BASE_URL: '', - }), -})); -jest.mock('@edx/frontend-platform/auth', () => ({ - getLoginRedirectUrl: (url) => `redirect:${url}`, -})); - -describe('Header AnonymousUserMenu component', () => { - const props = { - intl: { formatMessage: (msg) => msg.defaultMessage }, - }; - test('snapshot', () => { - expect( - shallow(), - ).toMatchSnapshot(); - }); -}); diff --git a/src/containers/CourseHeader/AuthenticatedUserDropdown/UserAvatar.jsx b/src/containers/CourseHeader/AuthenticatedUserDropdown/UserAvatar.jsx deleted file mode 100644 index 47eb320..0000000 --- a/src/containers/CourseHeader/AuthenticatedUserDropdown/UserAvatar.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faUserCircle } from '@fortawesome/free-solid-svg-icons'; - -import { Dropdown } from '@edx/paragon'; - -export const UserAvatar = ({ username }) => ( - - - - {username} - - -); -UserAvatar.propTypes = { - username: PropTypes.string.isRequired, -}; - -UserAvatar.defaultProps = {}; - -export default UserAvatar; diff --git a/src/containers/CourseHeader/AuthenticatedUserDropdown/UserAvatar.test.jsx b/src/containers/CourseHeader/AuthenticatedUserDropdown/UserAvatar.test.jsx deleted file mode 100644 index 0a2873f..0000000 --- a/src/containers/CourseHeader/AuthenticatedUserDropdown/UserAvatar.test.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; - -import UserAvatar from './UserAvatar'; - -jest.mock('@edx/frontend-platform', () => ({ - getConfig: () => ({ - LMS_BASE_URL: '', - LOGOUT_URL: '', - SUPPORT_URL: '', - }), -})); - -describe('Header AuthenticatedUserDropdown UserAvatar component', () => { - const props = { - username: 'test-username', - }; - test('snapshot', () => { - expect( - shallow(), - ).toMatchSnapshot(); - }); -}); diff --git a/src/containers/CourseHeader/AuthenticatedUserDropdown/UserMenu.jsx b/src/containers/CourseHeader/AuthenticatedUserDropdown/UserMenu.jsx deleted file mode 100644 index 2c28c3a..0000000 --- a/src/containers/CourseHeader/AuthenticatedUserDropdown/UserMenu.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import { getConfig } from '@edx/frontend-platform'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; -import { Dropdown } from '@edx/paragon'; - -import messages from '../messages'; - -export class UserMenu extends React.Component { - menuItem(href, message) { - return ( - - {this.props.intl.formatMessage(message)} - - ); - } - - render() { - const { username } = this.props; - const { LMS_BASE_URL, LOGOUT_URL } = getConfig(); - return ( - - {this.menuItem(`${LMS_BASE_URL}/dashboard`, messages.dashboard)} - {this.menuItem(`${LMS_BASE_URL}/u/${username}`, messages.profile)} - {this.menuItem(`${LMS_BASE_URL}/account/settings`, messages.account)} - {this.menuItem(LOGOUT_URL, messages.signOut)} - - ); - } -} - -UserMenu.propTypes = { - intl: intlShape.isRequired, - username: PropTypes.string.isRequired, -}; - -UserMenu.defaultProps = {}; - -export default injectIntl(UserMenu); diff --git a/src/containers/CourseHeader/AuthenticatedUserDropdown/UserMenu.test.jsx b/src/containers/CourseHeader/AuthenticatedUserDropdown/UserMenu.test.jsx deleted file mode 100644 index 1672d6c..0000000 --- a/src/containers/CourseHeader/AuthenticatedUserDropdown/UserMenu.test.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; - -import { UserMenu } from './UserMenu'; - -jest.mock('@edx/frontend-platform', () => ({ - getConfig: () => ({ - LMS_BASE_URL: '', - LOGOUT_URL: '', - SUPPORT_URL: '', - }), -})); - -describe('Header AuthenticatedUserDropdown UserMenu component', () => { - const props = { - intl: { formatMessage: (msg) => msg.defaultMessage }, - username: 'test-username', - }; - test('snapshot', () => { - expect( - shallow(), - ).toMatchSnapshot(); - }); -}); diff --git a/src/containers/CourseHeader/AuthenticatedUserDropdown/__snapshots__/UserAvatar.test.jsx.snap b/src/containers/CourseHeader/AuthenticatedUserDropdown/__snapshots__/UserAvatar.test.jsx.snap deleted file mode 100644 index 27ca085..0000000 --- a/src/containers/CourseHeader/AuthenticatedUserDropdown/__snapshots__/UserAvatar.test.jsx.snap +++ /dev/null @@ -1,31 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Header AuthenticatedUserDropdown UserAvatar component snapshot 1`] = ` - - - - test-username - - -`; diff --git a/src/containers/CourseHeader/AuthenticatedUserDropdown/__snapshots__/UserMenu.test.jsx.snap b/src/containers/CourseHeader/AuthenticatedUserDropdown/__snapshots__/UserMenu.test.jsx.snap deleted file mode 100644 index 2b677fc..0000000 --- a/src/containers/CourseHeader/AuthenticatedUserDropdown/__snapshots__/UserMenu.test.jsx.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Header AuthenticatedUserDropdown UserMenu component snapshot 1`] = ` - - - Dashboard - - - Profile - - - Account - - - Sign Out - - -`; diff --git a/src/containers/CourseHeader/AuthenticatedUserDropdown/__snapshots__/index.test.jsx.snap b/src/containers/CourseHeader/AuthenticatedUserDropdown/__snapshots__/index.test.jsx.snap deleted file mode 100644 index a603f23..0000000 --- a/src/containers/CourseHeader/AuthenticatedUserDropdown/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,22 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Header AuthenticatedUserDropdown component snapshot 1`] = ` - - - Help - - - - - - -`; diff --git a/src/containers/CourseHeader/AuthenticatedUserDropdown/index.jsx b/src/containers/CourseHeader/AuthenticatedUserDropdown/index.jsx deleted file mode 100644 index b8fd81c..0000000 --- a/src/containers/CourseHeader/AuthenticatedUserDropdown/index.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import { getConfig } from '@edx/frontend-platform'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; -import { Dropdown } from '@edx/paragon'; - -import UserMenu from './UserMenu'; -import UserAvatar from './UserAvatar'; - -import messages from '../messages'; - -export const AuthenticatedUserDropdown = ({ - intl, - username, -}) => ( - <> - - {intl.formatMessage(messages.help)} - - - - - - -); - -AuthenticatedUserDropdown.propTypes = { - intl: intlShape.isRequired, - username: PropTypes.string.isRequired, -}; - -AuthenticatedUserDropdown.defaultProps = {}; - -export default injectIntl(AuthenticatedUserDropdown); diff --git a/src/containers/CourseHeader/AuthenticatedUserDropdown/index.test.jsx b/src/containers/CourseHeader/AuthenticatedUserDropdown/index.test.jsx deleted file mode 100644 index abf4679..0000000 --- a/src/containers/CourseHeader/AuthenticatedUserDropdown/index.test.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; - -import { AuthenticatedUserDropdown } from '.'; - -jest.mock('@edx/frontend-platform', () => ({ - getConfig: () => ({ - SUPPORT_URL: '', - }), -})); -jest.mock('./UserAvatar', () => 'UserAvatar'); -jest.mock('./UserMenu', () => 'UserMenu'); - -describe('Header AuthenticatedUserDropdown component', () => { - const props = { - intl: { formatMessage: (msg) => msg.defaultMessage }, - username: 'test-username', - }; - test('snapshot', () => { - expect( - shallow(), - ).toMatchSnapshot(); - }); -}); diff --git a/src/containers/CourseHeader/CourseLabel.jsx b/src/containers/CourseHeader/CourseLabel.jsx deleted file mode 100644 index e946a72..0000000 --- a/src/containers/CourseHeader/CourseLabel.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -export const CourseLabel = ({ - courseOrg, - courseNumber, - courseTitle, -}) => ( -
- - {courseOrg} {courseNumber} - - - {courseTitle} - -
-); -CourseLabel.propTypes = { - courseOrg: PropTypes.string, - courseNumber: PropTypes.string, - courseTitle: PropTypes.string, -}; -CourseLabel.defaultProps = { - courseOrg: null, - courseNumber: null, - courseTitle: null, -}; - -export default CourseLabel; diff --git a/src/containers/CourseHeader/CourseLabel.test.jsx b/src/containers/CourseHeader/CourseLabel.test.jsx deleted file mode 100644 index 1c774cb..0000000 --- a/src/containers/CourseHeader/CourseLabel.test.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; - -import CourseLabel from './CourseLabel'; - -const courseData = { - courseOrg: 'course-org', - courseNumber: 'course-number', - courseTitle: 'course-title', -}; - -describe('Header CourseLabel component', () => { - test('snapshot', () => { - expect( - shallow(), - ).toMatchSnapshot(); - }); -}); diff --git a/src/containers/CourseHeader/LinkedLogo.jsx b/src/containers/CourseHeader/LinkedLogo.jsx deleted file mode 100644 index f385602..0000000 --- a/src/containers/CourseHeader/LinkedLogo.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { getConfig } from '@edx/frontend-platform'; - -const LinkedLogo = () => ( - - {getConfig().SITE_NAME} - -); - -export default LinkedLogo; diff --git a/src/containers/CourseHeader/LinkedLogo.test.jsx b/src/containers/CourseHeader/LinkedLogo.test.jsx deleted file mode 100644 index 19592bc..0000000 --- a/src/containers/CourseHeader/LinkedLogo.test.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; - -import LinkedLogo from './LinkedLogo'; - -jest.mock('@edx/frontend-platform', () => ({ - getConfig: () => ({ - LMS_BASE_URL: '', - LOGO_URL: '', - SITE_NAME: '', - }), -})); - -describe('Header CourseLabel component', () => { - test('snapshot', () => { - expect( - shallow(), - ).toMatchSnapshot(); - }); -}); diff --git a/src/containers/CourseHeader/__snapshots__/AnonymousUserMenu.test.jsx.snap b/src/containers/CourseHeader/__snapshots__/AnonymousUserMenu.test.jsx.snap deleted file mode 100644 index e042921..0000000 --- a/src/containers/CourseHeader/__snapshots__/AnonymousUserMenu.test.jsx.snap +++ /dev/null @@ -1,19 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Header AnonymousUserMenu component snapshot 1`] = ` -
- - -
-`; diff --git a/src/containers/CourseHeader/__snapshots__/CourseLabel.test.jsx.snap b/src/containers/CourseHeader/__snapshots__/CourseLabel.test.jsx.snap deleted file mode 100644 index fdf9dd0..0000000 --- a/src/containers/CourseHeader/__snapshots__/CourseLabel.test.jsx.snap +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Header CourseLabel component snapshot 1`] = ` -
- - course-org - - course-number - - - course-title - -
-`; diff --git a/src/containers/CourseHeader/__snapshots__/LinkedLogo.test.jsx.snap b/src/containers/CourseHeader/__snapshots__/LinkedLogo.test.jsx.snap deleted file mode 100644 index c26dda8..0000000 --- a/src/containers/CourseHeader/__snapshots__/LinkedLogo.test.jsx.snap +++ /dev/null @@ -1,14 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Header CourseLabel component snapshot 1`] = ` - - <getConfig().SITE_NAME> - -`; diff --git a/src/containers/CourseHeader/__snapshots__/index.test.jsx.snap b/src/containers/CourseHeader/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 57a5c72..0000000 --- a/src/containers/CourseHeader/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,51 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Header component snapshot 1`] = ` -
- - Skip to main content. - -
- - - -
-
-`; - -exports[`Header component snapshot with authenticatedUser 1`] = ` -
- - Skip to main content. - -
- - - -
-
-`; diff --git a/src/containers/CourseHeader/index.jsx b/src/containers/CourseHeader/index.jsx deleted file mode 100644 index afcc76f..0000000 --- a/src/containers/CourseHeader/index.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import React, { useContext } from 'react'; -import PropTypes from 'prop-types'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; -import { AppContext } from '@edx/frontend-platform/react'; - -import AnonymousUserMenu from './AnonymousUserMenu'; -import AuthenticatedUserDropdown from './AuthenticatedUserDropdown'; -import LinkedLogo from './LinkedLogo'; -import CourseLabel from './CourseLabel'; - -import messages from './messages'; - -export const Header = ({ - courseOrg, - courseNumber, - courseTitle, - intl, -}) => { - const { authenticatedUser } = useContext(AppContext); - return ( -
- - {intl.formatMessage(messages.skipNavLink)} - -
- - - {authenticatedUser - ? () - : ()} -
-
- ); -}; -Header.propTypes = { - courseOrg: PropTypes.string, - courseNumber: PropTypes.string, - courseTitle: PropTypes.string, - intl: intlShape.isRequired, -}; -Header.defaultProps = { - courseOrg: null, - courseNumber: null, - courseTitle: null, -}; - -export default injectIntl(Header); diff --git a/src/containers/CourseHeader/index.test.jsx b/src/containers/CourseHeader/index.test.jsx deleted file mode 100644 index becdf47..0000000 --- a/src/containers/CourseHeader/index.test.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; - -import { AppContext } from '@edx/frontend-platform/react'; -import { Header } from '.'; - -jest.mock('./AnonymousUserMenu', () => 'AnonymousUserMenu'); -jest.mock('./AuthenticatedUserDropdown', () => 'AuthenticatedUserDropdown'); -jest.mock('./LinkedLogo', () => 'LinkedLogo'); -jest.mock('./CourseLabel', () => 'CourseLabel'); - -jest.mock('@edx/frontend-platform/react', () => ({ - AppContext: { authenticatedUser: null }, -})); -jest.mock('react', () => ({ - ...jest.requireActual('react'), - useContext: (context) => context, -})); - -const courseData = { - courseOrg: 'course-org', - courseNumber: 'course-number', - courseTitle: 'course-title', -}; - -describe('Header component', () => { - const props = { - ...courseData, - intl: { formatMessage: (msg) => msg.defaultMessage }, - }; - test('snapshot', () => { - expect(shallow(
)).toMatchSnapshot(); - }); - test('snapshot with authenticatedUser', () => { - AppContext.authenticatedUser = { username: 'test' }; - expect(shallow(
)).toMatchSnapshot(); - }); -}); diff --git a/src/containers/CourseHeader/messages.js b/src/containers/CourseHeader/messages.js deleted file mode 100644 index 0c03373..0000000 --- a/src/containers/CourseHeader/messages.js +++ /dev/null @@ -1,56 +0,0 @@ -import { defineMessages } from '@edx/frontend-platform/i18n'; - -const messages = defineMessages({ - courseMaterial: { - id: 'learn.navigation.course.tabs.label', - defaultMessage: 'Course Material', - description: 'The accessible label for course tabs navigation', - }, - dashboard: { - id: 'header.menu.dashboard.label', - defaultMessage: 'Dashboard', - description: 'The text for the user menu Dashboard navigation link.', - }, - help: { - id: 'header.help.label', - defaultMessage: 'Help', - description: 'The text for the link to the Help Center', - }, - profile: { - id: 'header.menu.profile.label', - defaultMessage: 'Profile', - description: 'The text for the user menu Profile navigation link.', - }, - account: { - id: 'header.menu.account.label', - defaultMessage: 'Account', - description: 'The text for the user menu Account navigation link.', - }, - orderHistory: { - id: 'header.menu.orderHistory.label', - defaultMessage: 'Order History', - description: 'The text for the user menu Order History navigation link.', - }, - skipNavLink: { - id: 'header.navigation.skipNavLink', - defaultMessage: 'Skip to main content.', - description: 'A link used by screen readers to allow users to skip to the main content of the page.', - }, - signOut: { - id: 'header.menu.signOut.label', - defaultMessage: 'Sign Out', - description: 'The label for the user menu Sign Out action.', - }, - registerSentenceCase: { - id: 'header.register.sentenceCase', - defaultMessage: 'Register', - description: 'Text in a button, prompting the user to register.', - }, - signInSentenceCase: { - id: 'header.signIn.sentenceCase', - defaultMessage: 'Sign in', - description: 'Text in a button, prompting the user to log in.', - }, -}); - -export default messages; diff --git a/src/index.jsx b/src/index.jsx index f6d71c0..179483e 100755 --- a/src/index.jsx +++ b/src/index.jsx @@ -11,8 +11,12 @@ import { APP_INIT_ERROR, initialize, subscribe, + mergeConfig, } from '@edx/frontend-platform'; + import { messages as footerMessages } from '@edx/frontend-component-footer'; +import { messages as headerMesssages } from '@edx/frontend-component-header'; + import { IntlProvider } from '@edx/frontend-platform/i18n'; import messages from './i18n'; @@ -38,8 +42,16 @@ subscribe(APP_INIT_ERROR, (error) => { }); initialize({ + handlers: { + config: () => { + mergeConfig({ + SUPPORT_URL: process.env.SUPPORT_URL || null, + }, 'OraGradingAppConfig'); + }, + }, messages: [ messages, + headerMesssages, footerMessages, ], requireAuthenticatedUser: true, diff --git a/src/index.test.jsx b/src/index.test.jsx index 3b99601..f57b60e 100644 --- a/src/index.test.jsx +++ b/src/index.test.jsx @@ -6,7 +6,9 @@ import { initialize, subscribe, } from '@edx/frontend-platform'; + import { messages as footerMessages } from '@edx/frontend-component-footer'; +import { messages as headerMesssages } from '@edx/frontend-component-header'; import appMessages from './i18n'; import App from './App'; @@ -36,17 +38,18 @@ describe('app registry', () => { afterAll(() => { window.document.getElementById = getElement; }); + test('subscribe is called for APP_READY, linking App to root element', () => { - const callArgs = subscribe.mock.calls[0]; + const callArgs = subscribe.mock.calls[1]; expect(callArgs[0]).toEqual(APP_READY); expect(callArgs[1]()).toEqual( ReactDOM.render(, document.getElementById('root')), ); }); test('initialize is called with footerMessages and requireAuthenticatedUser', () => { - expect(initialize).toHaveBeenCalledWith({ - messages: [appMessages, footerMessages], - requireAuthenticatedUser: true, - }); + expect(initialize).toHaveBeenCalledTimes(1); + const initializeArg = initialize.mock.calls[0][0]; + expect(initializeArg.messages).toEqual([appMessages, headerMesssages, footerMessages]); + expect(initializeArg.requireAuthenticatedUser).toEqual(true); }); }); diff --git a/src/test/messages.js b/src/test/messages.js index de258c2..ca52ac1 100644 --- a/src/test/messages.js +++ b/src/test/messages.js @@ -1,7 +1,6 @@ import InfoPopover from 'components/InfoPopover/messages'; import ResponseDisplay from 'containers/ResponseDisplay/messages'; import ResponseDisplayComponents from 'containers/ResponseDisplay/components/messages'; -import CourseHeader from 'containers/CourseHeader/messages'; import CriterionContainer from 'containers/CriterionContainer/messages'; import ListView from 'containers/ListView/messages'; import ReviewActions from 'containers/ReviewActions/messages'; @@ -20,7 +19,6 @@ export default { InfoPopover: mapMessages(InfoPopover), ResponseDisplay: mapMessages(ResponseDisplay), ResponseDisplayComponents: mapMessages(ResponseDisplayComponents), - CourseHeader: mapMessages(CourseHeader), CriterionContainer: mapMessages(CriterionContainer), ListView: mapMessages(ListView), ReviewActions: mapMessages(ReviewActions),