feat: getting footer and its test suite working in the shell!

openedx · Jul 31, 2024 · f1e3754 · f1e3754
1 parent a2bc5f2
commit f1e3754
Show file tree

Hide file tree

Showing 14 changed files with 144 additions and 248 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,8 +57,8 @@
 		"@fullhuman/postcss-purgecss": "5.0.0",
 		"@module-federation/runtime": "^0.2.6",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
-		"@typescript-eslint/eslint-plugin": "^5.58.0",
-		"@typescript-eslint/parser": "^5.58.0",
+		"@typescript-eslint/eslint-plugin": "^6.21.0",
+		"@typescript-eslint/parser": "^6.21.0",
 		"autoprefixer": "10.4.19",
 		"axios": "^0.28.1",
 		"axios-cache-interceptor": "^0.10.7",
@@ -93,6 +93,7 @@
 		"localforage": "^1.10.0",
 		"localforage-memoryStorageDriver": "^0.9.2",
 		"lodash.camelcase": "^4.3.0",
+		"lodash.isempty": "^4.4.0",
 		"lodash.memoize": "^4.1.2",
 		"lodash.merge": "^4.6.2",
 		"lodash.snakecase": "^4.1.1",

diff --git a/shell/__mocks__/env.config.js b/shell/__mocks__/env.config.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/shell/__mocks__/file.js b/shell/__mocks__/file.js
@@ -0,0 +1 @@
+export default 'FileMock';
diff --git a/shell/__mocks__/svg.js b/shell/__mocks__/svg.js
@@ -0,0 +1 @@
+export default 'SvgURL';
diff --git a/shell/__mocks__/universal-cookie.js b/shell/__mocks__/universal-cookie.js
@@ -0,0 +1,6 @@
+const mockCookiesImplementation = {
+  get: jest.fn(),
+  remove: jest.fn(),
+};
+
+module.exports = () => mockCookiesImplementation;
diff --git a/shell/bootstrap.tsx b/shell/bootstrap.tsx
@@ -9,6 +9,7 @@ import {
   subscribe,
 } from '../runtime';
 
+import Footer from './footer';
 import Header from './header';
 
 const messages = [];
@@ -18,6 +19,7 @@ subscribe(APP_READY, () => {
     <AppProvider>
       <Header />
       {getConfig().app ? createElement(getConfig().app, {}) : null}
+      <Footer />
     </AppProvider>,
     document.getElementById('root'),
   );

diff --git a/shell/footer/components/Footer.jsx b/shell/footer/components/Footer.jsx
@@ -1,9 +1,13 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { ensureConfig } from '@edx/frontend-platform';
-import { AppContext } from '@edx/frontend-platform/react';
+import React from 'react';
+
+import {
+  AppContext,
+  ensureConfig,
+  injectIntl,
+  intlShape,
+  sendTrackEvent
+} from '../../../runtime';
 
 import messages from './Footer.messages';
 import LanguageSelector from './LanguageSelector';

diff --git a/shell/footer/components/Footer.messages.js b/shell/footer/components/Footer.messages.js
@@ -1,4 +1,4 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
+import { defineMessages } from '../../../runtime';
 
 const messages = defineMessages({
   'footer.socialLinks.srText.facebook': {

diff --git a/shell/footer/components/Footer.test.jsx b/shell/footer/components/Footer.test.jsx
@@ -1,9 +1,9 @@
 /* eslint-disable react/prop-types */
-import React, { useMemo } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useMemo } from 'react';
 import renderer from 'react-test-renderer';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
+
+import { AppContext, IntlProvider } from '../../../runtime';
 
 import Footer from './Footer';
 

diff --git a/shell/footer/components/LanguageSelector.jsx b/shell/footer/components/LanguageSelector.jsx
@@ -1,6 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, injectIntl, intlShape } from '../../../runtime';
 
 const LanguageSelector = ({
   intl, options, onSubmit, ...props

diff --git a/shell/footer/components/studio-footer/StudioFooter.jsx b/shell/footer/components/studio-footer/StudioFooter.jsx
@@ -1,8 +1,3 @@
-import React, { useContext, useState } from 'react';
-import _ from 'lodash';
-import { intlShape, injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
-import { ensureConfig } from '@edx/frontend-platform';
-import { AppContext } from '@edx/frontend-platform/react';
 import {
   ActionRow,
   Button,
@@ -12,6 +7,15 @@ import {
   TransitionReplace,
 } from '@openedx/paragon';
 import { ExpandLess, ExpandMore, Help } from '@openedx/paragon/icons';
+import isEmpty from 'lodash.isempty';
+import { useContext, useState } from 'react';
+
+import {
+  AppContext, ensureConfig,
+  FormattedMessage,
+  injectIntl,
+  intlShape
+} from '../../../../runtime';
 import messages from './messages';
 
 ensureConfig([
@@ -79,7 +83,7 @@ const StudioFooter = ({
               >
                 <FormattedMessage {...messages.studioXButtonLabel} />
               </Button>
-              {!_.isEmpty(config.SUPPORT_EMAIL) && (
+              {!isEmpty(config.SUPPORT_EMAIL) && (
                 <Button
                   as="a"
                   href={`mailto:${config.SUPPORT_EMAIL}`}
@@ -96,11 +100,11 @@ const StudioFooter = ({
         <ActionRow className="pt-3 m-0 x-small">
           © {new Date().getFullYear()} <Hyperlink destination={config.MARKETING_SITE_BASE_URL} target="_blank" className="ml-2">{config.SITE_NAME}</Hyperlink>
           <ActionRow.Spacer />
-          {!_.isEmpty(config.TERMS_OF_SERVICE_URL) && (
+          {!isEmpty(config.TERMS_OF_SERVICE_URL) && (
             <Hyperlink destination={config.TERMS_OF_SERVICE_URL} data-testid="termsOfService">
               {intl.formatMessage(messages.termsOfServiceLinkLabel)}
             </Hyperlink>
-          )}{!_.isEmpty(config.PRIVACY_POLICY_URL) && (
+          )}{!isEmpty(config.PRIVACY_POLICY_URL) && (
             <Hyperlink destination={config.PRIVACY_POLICY_URL} data-testid="privacyPolicy">
               {intl.formatMessage(messages.privacyPolicyLinkLabel)}
             </Hyperlink>

diff --git a/shell/footer/components/studio-footer/StudioFooter.test.jsx b/shell/footer/components/studio-footer/StudioFooter.test.jsx
@@ -1,9 +1,8 @@
 /* eslint-disable react/prop-types */
-import React, { useMemo } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
+import { useMemo } from 'react';
+
+import { AppContext, IntlProvider } from '../../../../runtime';
 import StudioFooter from './StudioFooter';
 import messages from './messages';
 

diff --git a/shell/footer/components/studio-footer/messages.js b/shell/footer/components/studio-footer/messages.js
@@ -1,4 +1,4 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
+import { defineMessages } from '../../../../runtime';
 
 const messages = defineMessages({
   openHelpButtonLabel: {