commit before updating test

updated some test

src/App.jsx

@@ -1,31 +1,37 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import { Provider } from 'react-redux';
-import { IntlProvider } from 'react-intl';
 
 import Footer from '@edx/frontend-component-footer';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { routePath } from 'data/constants/app';
 import store from 'data/store';
 import ListView from 'containers/ListView';
-//import messages from './i18n';
+import messages from './i18n';
 import './App.scss';
 
+import { AppProvider, ErrorPage, PageRoute } from '@edx/frontend-platform/react';
+import Header from './course-header/Header';
+
+
 const App = () => (
-  // <IntlProvider locale="en" messages={messages.en} >
-    <Provider store={store}>
+  <IntlProvider locale="en" messages={messages.en} >
+    <AppProvider store={store}>
       <Router>
         <div>
+          <Header
+            courseOrg='Course org'
+            courseNumber='Course Number'
+            courseTitle='Course Title'
+          />
           <main>
             <ListView />
           </main>
-
           <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
-
         </div>
       </Router>
-    </Provider>
-  // </IntlProvider>
+    </AppProvider>
+  </IntlProvider>
 );
 
 export default App;

src/App.scss

@@ -11,6 +11,63 @@ $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.
 
 @import "~@edx/frontend-component-footer/dist/_footer";
 
+#root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  main {
+    flex-grow: 1;
+  }
+
+  header {
+    flex: 0 0 auto;
+
+    .logo {
+      display: block;
+      box-sizing: content-box;
+      position: relative;
+      top: 0.1em;
+      height: 1.75rem;
+      margin-right: 1rem;
+      img {
+        display: block;
+        height: 100%;
+      }
+    }
+  }
+
+  footer {
+    flex: 0;
+  }
+}
+
+.course-header {
+  min-width: 0;
+  border-bottom: 1px solid black;
+
+  .course-title-lockup {
+    min-width: 0;
+
+    span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-bottom: 0.1rem;
+    }
+  }
+
+  .user-dropdown {
+    .btn {
+      height: 3rem;
+      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+        padding: 0 0.5rem;
+      }
+    }
+  }
+}
+
+
 #paragon-portal-root {
   .pgn__modal-layer {
     .pgn__modal-close-container {

src/course-header/AnonymousUserMenu.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import message from './AnonymousUserMenu.messages';
+
+function AnonymousUserMenu({ intl }) {
+  return (
+    <div>
+      <Button
+        className="mr-3"
+        variant="outline-primary"
+        href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
+      >
+        {intl.formatMessage(message.registerSentenceCase)}
+      </Button>
+      <Button
+        variant="primary"
+        href={`${getLoginRedirectUrl(global.location.href)}`}
+      >
+        {intl.formatMessage(message.signInSentenceCase)}
+      </Button>
+    </div>
+  );
+}
+
+AnonymousUserMenu.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(AnonymousUserMenu);

src/course-header/AnonymousUserMenu.messages.js

@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  close: {
+    id: 'general.altText.close',
+    defaultMessage: 'Close',
+    description: 'Text used as an aria-label to describe closing or dismissing a component',
+  },
+  registerLowercase: {
+    id: 'learning.logistration.register', // ID left for historical purposes
+    defaultMessage: 'register',
+    description: 'Text in a link, prompting the user to create an account.  Used in "learning.logistration.alert"',
+  },
+  registerSentenceCase: {
+    id: 'general.register.sentenceCase',
+    defaultMessage: 'Register',
+    description: 'Text in a button, prompting the user to register.',
+  },
+  signInLowercase: {
+    id: 'learning.logistration.login', // ID left for historical purposes
+    defaultMessage: 'sign in',
+    description: 'Text in a link, prompting the user to log in.  Used in "learning.logistration.alert"',
+  },
+  signInSentenceCase: {
+    id: 'general.signIn.sentenceCase',
+    defaultMessage: 'Sign in',
+    description: 'Text in a button, prompting the user to log in.',
+  },
+});
+
+export default messages;

src/course-header/AuthenticatedUserDropdown.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
+
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Dropdown } from '@edx/paragon';
+
+import messages from './messages';
+
+function AuthenticatedUserDropdown({ intl, username }) {
+  let dashboardMenuItem = (
+    <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
+      {intl.formatMessage(messages.dashboard)}
+    </Dropdown.Item>
+  );
+  return (
+    <>
+      <a className="text-gray-700 mr-3" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
+      <Dropdown className="user-dropdown">
+        <Dropdown.Toggle variant="outline-primary">
+          <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
+          <span data-hj-suppress className="d-none d-md-inline">
+            {username}
+          </span>
+        </Dropdown.Toggle>
+        <Dropdown.Menu className="dropdown-menu-right">
+          {dashboardMenuItem}
+          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/u/${username}`}>
+            {intl.formatMessage(messages.profile)}
+          </Dropdown.Item>
+          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>
+            {intl.formatMessage(messages.account)}
+          </Dropdown.Item>
+          <Dropdown.Item href={getConfig().LOGOUT_URL}>
+            {intl.formatMessage(messages.signOut)}
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  );
+}
+
+AuthenticatedUserDropdown.propTypes = {
+  intl: intlShape.isRequired,
+  username: PropTypes.string.isRequired,
+};
+
+AuthenticatedUserDropdown.defaultProps = {};
+
+export default injectIntl(AuthenticatedUserDropdown);

src/course-header/AuthenticatedUserDropdown.messages.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
+
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Dropdown } from '@edx/paragon';
+
+import messages from './messages';
+
+function AuthenticatedUserDropdown({ intl, username }) {
+  let dashboardMenuItem = (
+    <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
+      {intl.formatMessage(messages.dashboard)}
+    </Dropdown.Item>
+  );
+  return (
+    <>
+      <a className="text-gray-700 mr-3" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
+      <Dropdown className="user-dropdown">
+        <Dropdown.Toggle variant="outline-primary">
+          <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
+          <span data-hj-suppress className="d-none d-md-inline">
+            {username}
+          </span>
+        </Dropdown.Toggle>
+        <Dropdown.Menu className="dropdown-menu-right">
+          {dashboardMenuItem}
+          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/u/${username}`}>
+            {intl.formatMessage(messages.profile)}
+          </Dropdown.Item>
+          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>
+            {intl.formatMessage(messages.account)}
+          </Dropdown.Item>
+          <Dropdown.Item href={getConfig().LOGOUT_URL}>
+            {intl.formatMessage(messages.signOut)}
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  );
+}
+
+AuthenticatedUserDropdown.propTypes = {
+  intl: intlShape.isRequired,
+  username: PropTypes.string.isRequired,
+};
+
+AuthenticatedUserDropdown.defaultProps = {};
+
+export default injectIntl(AuthenticatedUserDropdown);

src/course-header/Header.jsx

@@ -0,0 +1,81 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import AnonymousUserMenu from './AnonymousUserMenu';
+import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
+import messages from './messages';
+
+function LinkedLogo({
+  href,
+  src,
+  alt,
+  ...attributes
+}) {
+  return (
+    <a href={href} {...attributes}>
+      <img className="d-block" src={src} alt={alt} />
+    </a>
+  );
+}
+
+LinkedLogo.propTypes = {
+  href: PropTypes.string.isRequired,
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+};
+
+function Header({
+  courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
+}) {
+  const { authenticatedUser } = useContext(AppContext);
+
+  let headerLogo = (
+    <LinkedLogo
+      className="logo"
+      href={`${getConfig().LMS_BASE_URL}/dashboard`}
+      src={getConfig().LOGO_URL}
+      alt={getConfig().SITE_NAME}
+    />
+  );
+
+  return (
+    <header className="course-header">
+      <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
+      <div className="container-xl py-2 d-flex align-items-center">
+        {headerLogo}
+        <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
+          <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
+          <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
+        </div>
+        {showUserDropdown && authenticatedUser && (
+          <AuthenticatedUserDropdown
+            username={authenticatedUser.username}
+          />
+        )}
+        {showUserDropdown && !authenticatedUser && (
+          <AnonymousUserMenu />
+        )}
+      </div>
+    </header>
+  );
+}
+
+Header.propTypes = {
+  courseOrg: PropTypes.string,
+  courseNumber: PropTypes.string,
+  courseTitle: PropTypes.string,
+  intl: intlShape.isRequired,
+  showUserDropdown: PropTypes.bool,
+};
+
+Header.defaultProps = {
+  courseOrg: null,
+  courseNumber: null,
+  courseTitle: null,
+  showUserDropdown: true,
+};
+
+export default injectIntl(Header);

src/course-header/Header.test.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  authenticatedUser, initializeMockApp, render, screen,
+} from '../setupTest';
+import { Header } from './index';
+
+describe('Header', () => {
+  beforeAll(async () => {
+    // We need to mock AuthService to implicitly use `getAuthenticatedUser` within `AppContext.Provider`.
+    await initializeMockApp();
+  });
+
+  it('displays user button', () => {
+    render(<Header />);
+    expect(screen.getByRole('button')).toHaveTextContent(authenticatedUser.username);
+  });
+
+  it('displays course data', () => {
+    const courseData = {
+      courseOrg: 'course-org',
+      courseNumber: 'course-number',
+      courseTitle: 'course-title',
+    };
+    render(<Header {...courseData} />);
+
+    expect(screen.getByText(`${courseData.courseOrg} ${courseData.courseNumber}`)).toBeInTheDocument();
+    expect(screen.getByText(courseData.courseTitle)).toBeInTheDocument();
+  });
+});

src/course-header/index.js

@@ -0,0 +1 @@
+export { default as Header } from './Header';

src/course-header/messages.js

@@ -0,0 +1,36 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  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.',
+  },
+  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.',
+  },
+});
+
+export default messages;

src/index.jsx

@@ -4,9 +4,9 @@ import 'regenerator-runtime/runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   APP_READY,
+  APP_INIT_ERROR,
   initialize,
   subscribe,
 } from '@edx/frontend-platform';
@@ -29,9 +29,25 @@ initialize({
 });
 */
 
-ReactDOM.render(
-  <IntlProvider locale="en">
-    <App />
-  </IntlProvider>,
-  document.getElementById('root'),
-);
+// ReactDOM.render(
+//   <IntlProvider locale="en">
+//     <App />
+//   </IntlProvider>,
+//   document.getElementById('root'),
+// );
+
+subscribe(APP_READY, () => {
+  ReactDOM.render(<App />, document.getElementById('root'));
+});
+
+subscribe(APP_INIT_ERROR, (error) => {
+  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
+});
+
+initialize({
+  messages: [
+    appMessages,
+    footerMessages,
+  ],
+  requireAuthenticatedUser: true,
+});

src/index.test.jsx

@@ -23,7 +23,7 @@ jest.mock('@edx/frontend-platform', () => ({
 jest.mock('@edx/frontend-component-footer', () => ({
   messages: ['some', 'messages'],
 }));
-jest.mock('./App', () => 'App');
+jest.mock('./App', () => () => (<div>App</div>));
 
 describe('app registry', () => {
   let getElement;

src/setupTest.js

@@ -1,13 +1,23 @@
 /* eslint-disable import/no-extraneous-dependencies */
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';
 
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
-Enzyme.configure({ adapter: new Adapter() });
+import AppProvider from '@edx/frontend-platform/react/AppProvider';
+import { IntlProvider } from 'react-intl';
+import { render as rtlRender } from '@testing-library/react';
+import PropTypes from 'prop-types';
 
-// 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.LMS_BASE_URL = 'http://localhost:18000';
+import { getConfig, mergeConfig } from '@edx/frontend-platform';
+import { configure as configureAuth, MockAuthService } from '@edx/frontend-platform/auth';
+import { configure as configureI18n } from '@edx/frontend-platform/i18n';
+
+import appMessages from './i18n';
+import { messages as footerMessages } from '@edx/frontend-component-footer';
+
+Enzyme.configure({ adapter: new Adapter() });
 
 jest.mock('@edx/frontend-platform/i18n', () => {
   const i18n = jest.requireActual('@edx/frontend-platform/i18n');
@@ -21,3 +31,74 @@ jest.mock('@edx/frontend-platform/i18n', () => {
     FormattedMessage: () => 'FormattedMessage',
   };
 });
+
+export const authenticatedUser = {
+  userId: 'abc123',
+  username: 'Mock User',
+  roles: [],
+  administrator: false,
+};
+
+export function initializeMockApp() {
+  mergeConfig({
+    CONTACT_URL: process.env.CONTACT_URL || null,
+    INSIGHTS_BASE_URL: process.env.INSIGHTS_BASE_URL || null,
+    STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
+    TWITTER_URL: process.env.TWITTER_URL || null,
+    authenticatedUser: {
+      userId: 'abc123',
+      username: 'Mock User',
+      roles: [],
+      administrator: false,
+    },
+    SUPPORT_URL_ID_VERIFICATION: 'http://example.com',
+  });
+
+  const authService = configureAuth(MockAuthService, {
+    config: getConfig()
+  });
+
+  // i18n doesn't have a service class to return.
+  configureI18n({
+    config: getConfig(),
+    messages: [appMessages, footerMessages],
+    requireAuthenticatedUser: true,
+  });
+
+  return { authService };
+}
+
+
+
+function render(
+  ui,
+  {
+    store = null,
+    ...renderOptions
+  } = {},
+) {
+  function Wrapper({ children }) {
+    return (
+      // eslint-disable-next-line react/jsx-filename-extension
+      <IntlProvider locale="en">
+        <AppProvider store={store || {}}>
+          {children}
+        </AppProvider>
+      </IntlProvider>
+    );
+  }
+
+  Wrapper.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
+}
+
+// Re-export everything.
+export * from '@testing-library/react';
+
+// Override `render` method.
+export {
+  render,
+};