feat: add ability to obtain site name dynamically and fix tests

openedx · Mar 2, 2023 · cf720d5 · cf720d5
1 parent ba7bd23
commit cf720d5
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,6 +54,7 @@
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
+    "react-helmet": "^6.1.0",
     "react-redux": "7.1.3",
     "react-responsive": "8.1.0",
     "react-router": "5.1.2",

diff --git a/src/head/Head.jsx b/src/head/Head.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+
+const Head = ({ intl }) => (
+  <Helmet>
+    <title>
+      {intl.formatMessage(messages['course-authoring.page.title'], { siteName: getConfig().SITE_NAME })}
+    </title>
+    <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+  </Helmet>
+);
+
+Head.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(Head);
diff --git a/src/head/Head.test.jsx b/src/head/Head.test.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { Helmet } from 'react-helmet';
+import { mount } from 'enzyme';
+import { getConfig } from '@edx/frontend-platform';
+import Head from './Head';
+
+describe('Head', () => {
+  const props = {};
+  it('should match render title tag and favicon with the site configuration values', () => {
+    mount(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
+    const helmet = Helmet.peek();
+    expect(helmet.title).toEqual(`Course Authoring | ${getConfig().SITE_NAME}`);
+    expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
+    expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
+  });
+});
diff --git a/src/head/messages.js b/src/head/messages.js
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'course-authoring.page.title': {
+    id: 'course-authoring.page.title',
+    defaultMessage: 'Course Authoring | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;
diff --git a/src/index.jsx b/src/index.jsx
@@ -16,10 +16,12 @@ import appMessages from './i18n';
 import initializeStore from './store';
 import './index.scss';
 import CourseAuthoringRoutes from './CourseAuthoringRoutes';
+import Head from './head/Head';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={initializeStore()}>
+      <Head />
       <Switch>
         <Route
           path="/course/:courseId"

diff --git a/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx b/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx
@@ -1,3 +1,4 @@
+import ReactDOM from 'react-dom';
 import {
   getConfig, history, initializeMockApp, setConfig,
 } from '@edx/frontend-platform';
@@ -42,6 +43,9 @@ let axiosMock;
 let store;
 let container;
 
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
 function renderComponent() {
   const wrapper = render(
     <AppProvider store={store}>

diff --git a/src/pages-and-resources/live/BbbSettings.test.jsx b/src/pages-and-resources/live/BbbSettings.test.jsx
@@ -6,6 +6,7 @@ import {
   waitForElementToBeRemoved,
 } from '@testing-library/react';
 
+import ReactDOM from 'react-dom';
 import { Switch } from 'react-router-dom';
 import { initializeMockApp, history } from '@edx/frontend-platform';
 import MockAdapter from 'axios-mock-adapter';
@@ -34,6 +35,9 @@ let container;
 let store;
 const liveSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;
 
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
 const renderComponent = () => {
   const wrapper = render(
     <IntlProvider locale="en">

diff --git a/src/pages-and-resources/live/Settings.test.jsx b/src/pages-and-resources/live/Settings.test.jsx
@@ -10,6 +10,7 @@ import {
   waitForElementToBeRemoved,
 } from '@testing-library/react';
 
+import ReactDOM from 'react-dom';
 import { Switch } from 'react-router-dom';
 import { initializeMockApp, history } from '@edx/frontend-platform';
 import MockAdapter from 'axios-mock-adapter';
@@ -37,6 +38,9 @@ let container;
 let store;
 const liveSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;
 
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
 const renderComponent = () => {
   const wrapper = render(
     <IntlProvider locale="en">

diff --git a/src/pages-and-resources/live/ZoomSettings.test.jsx b/src/pages-and-resources/live/ZoomSettings.test.jsx
@@ -5,6 +5,7 @@ import {
   waitForElementToBeRemoved,
 } from '@testing-library/react';
 
+import ReactDOM from 'react-dom';
 import { Switch } from 'react-router-dom';
 import { initializeMockApp, history } from '@edx/frontend-platform';
 import MockAdapter from 'axios-mock-adapter';
@@ -32,6 +33,9 @@ let container;
 let store;
 const liveSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;
 
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
 const renderComponent = () => {
   const wrapper = render(
     <IntlProvider locale="en">

diff --git a/src/setupTest.js b/src/setupTest.js
@@ -2,7 +2,6 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
-import ReactDOM from 'react-dom';
 
 /* eslint-disable import/no-extraneous-dependencies */
 import Enzyme from 'enzyme';
@@ -29,9 +28,6 @@ Object.defineProperty(window, 'matchMedia', {
   })),
 });
 
-// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
-ReactDOM.createPortal = node => node;
-
 // Mock Intersection Observer which is unavailable in the context of a test.
 global.IntersectionObserver = jest.fn(function mockIntersectionObserver() {
   this.observe = jest.fn();