frontend-build updated to v12 (#277)

* refactor: frontend-build updated to v12 & resolved eslint issues
edx · Dec 1, 2022 · 403db9f · 403db9f
1 parent afe8be9
commit 403db9f
Show file tree

Hide file tree

Showing 14 changed files with 4,795 additions and 5,927 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint');
+module.exports = createConfig('eslint');
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -6,6 +6,7 @@ jobs:
     strategy:
       matrix:
         node: [16]
+        npm: [8.5.x]
     steps:
     - name: Checkout
       uses: actions/checkout@v2
@@ -15,6 +16,7 @@ jobs:
       uses: actions/setup-node@v2
       with:
         node-version: ${{ matrix.node }}
+    - run: npm install -g npm@${{ matrix.npm }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
   "homepage": "https://github.com/edx/frontend-component-header-edx#readme",
   "devDependencies": {
     "@edx/brand": "npm:@edx/brand-edx.org@2.0.8",
-    "@edx/frontend-build": "11.0.2",
+    "@edx/frontend-build": "12.3.0",
     "@edx/frontend-platform": "^2.0.0 || ^3.0.0",
     "@edx/paragon": "19.9.0",
     "@edx/reactifex": "2.1.1",

diff --git a/src/Avatar.jsx b/src/Avatar.jsx
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 
 import { AvatarIcon } from './Icons';
 
-function Avatar({
+const Avatar = ({
   size,
   src,
   alt,
   className,
-}) {
+}) => {
   const avatar = src ? (
     <img className="d-block w-100 h-100" src={src} alt={alt} />
   ) : (
@@ -23,7 +23,7 @@ function Avatar({
       {avatar}
     </span>
   );
-}
+};
 
 Avatar.propTypes = {
   src: PropTypes.string,

diff --git a/src/Header.jsx b/src/Header.jsx
@@ -34,7 +34,7 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
   }, 'Header additional config');
 });
 
-function Header({ intl }) {
+const Header = ({ intl }) => {
   const { authenticatedUser, config } = useContext(AppContext);
   const {
     enterpriseLearnerPortalLink,
@@ -165,7 +165,7 @@ function Header({ intl }) {
       </Responsive>
     </>
   );
-}
+};
 
 Header.propTypes = {
   intl: intlShape.isRequired,

diff --git a/src/Header.test.jsx b/src/Header.test.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -24,6 +25,18 @@ const APP_CONTEXT_CONFIG = {
   LOGO_URL: process.env.LOGO_URL,
 };
 
+const HeaderContext = ({ width, contextValue }) => (
+  <ResponsiveContext.Provider value={width}>
+    <IntlProvider locale="en" messages={{}}>
+      <AppContext.Provider
+        value={contextValue}
+      >
+        <Header />
+      </AppContext.Provider>
+    </IntlProvider>
+  </ResponsiveContext.Provider>
+);
+
 describe('<Header />', () => {
   beforeEach(() => {
     useEnterpriseConfig.mockReturnValue({});
@@ -45,72 +58,45 @@ describe('<Header />', () => {
   };
 
   it('renders correctly for unauthenticated users on desktop', () => {
-    const component = (
-      <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider
-            value={{
-              authenticatedUser: null,
-              config: APP_CONTEXT_CONFIG,
-            }}
-          >
-            <Header />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
+    const contextValue = {
+      authenticatedUser: null,
+      config: APP_CONTEXT_CONFIG,
+    };
+    const component = <HeaderContext width={{ width: 1280 }} contextValue={contextValue} />;
 
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it('renders correctly for authenticated users on desktop', () => {
-    const component = (
-      <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider
-            value={{
-              authenticatedUser: {
-                userId: 'abc123',
-                username: 'edX',
-                roles: [],
-                administrator: false,
-              },
-              config: APP_CONTEXT_CONFIG,
-            }}
-          >
-            <Header />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
+    const contextValue = {
+      authenticatedUser: {
+        userId: 'abc123',
+        username: 'edX',
+        roles: [],
+        administrator: false,
+      },
+      config: APP_CONTEXT_CONFIG,
+    };
+    const component = <HeaderContext width={{ width: 1280 }} contextValue={contextValue} />;
 
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it('renders correctly for authenticated users on desktop with or without learner portal links', async () => {
-    const component = (
-      <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider
-            value={{
-              authenticatedUser: {
-                userId: 'abc123',
-                username: 'edX',
-                roles: [],
-                administrator: false,
-              },
-              config: APP_CONTEXT_CONFIG,
-            }}
-          >
-            <Header />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
+    const contextValue = {
+      authenticatedUser: {
+        userId: 'abc123',
+        username: 'edX',
+        roles: [],
+        administrator: false,
+      },
+      config: APP_CONTEXT_CONFIG,
+    };
+    const component = <HeaderContext width={{ width: 1280 }} contextValue={contextValue} />;
 
     // When learner portal links are not present, Order History should be a dropdown item
     let wrapper = mount(component);
@@ -140,46 +126,28 @@ describe('<Header />', () => {
   });
 
   it('renders correctly for unauthenticated users on mobile', () => {
-    const component = (
-      <ResponsiveContext.Provider value={{ width: 500 }}>
-        <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider
-            value={{
-              authenticatedUser: null,
-              config: APP_CONTEXT_CONFIG,
-            }}
-          >
-            <Header />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
+    const contextValue = {
+      authenticatedUser: null,
+      config: APP_CONTEXT_CONFIG,
+    };
+    const component = <HeaderContext width={{ width: 500 }} contextValue={contextValue} />;
 
     const wrapper = TestRenderer.create(component);
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it('renders correctly for authenticated users on mobile', () => {
-    const component = (
-      <ResponsiveContext.Provider value={{ width: 500 }}>
-        <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider
-            value={{
-              authenticatedUser: {
-                userId: 'abc123',
-                username: 'edX',
-                roles: [],
-                administrator: false,
-              },
-              config: APP_CONTEXT_CONFIG,
-            }}
-          >
-            <Header />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
+    const contextValue = {
+      authenticatedUser: {
+        userId: 'abc123',
+        username: 'edX',
+        roles: [],
+        administrator: false,
+      },
+      config: APP_CONTEXT_CONFIG,
+    };
+    const component = <HeaderContext width={{ width: 500 }} contextValue={contextValue} />;
 
     const wrapper = TestRenderer.create(component);
 
@@ -200,46 +168,28 @@ describe('<Header />', () => {
     });
 
     it('renders correctly for unauthenticated users when minimal', () => {
-      const component = (
-        <ResponsiveContext.Provider value={{ width: 1280 }}>
-          <IntlProvider locale="en" messages={{}}>
-            <AppContext.Provider
-              value={{
-                authenticatedUser: null,
-                config: APP_CONTEXT_CONFIG,
-              }}
-            >
-              <Header />
-            </AppContext.Provider>
-          </IntlProvider>
-        </ResponsiveContext.Provider>
-      );
+      const contextValue = {
+        authenticatedUser: null,
+        config: APP_CONTEXT_CONFIG,
+      };
+      const component = <HeaderContext width={{ width: 1280 }} contextValue={contextValue} />;
 
       const wrapper = TestRenderer.create(component);
 
       expect(wrapper.toJSON()).toMatchSnapshot();
     });
 
     it('renders correctly for authenticated users when minimal', () => {
-      const component = (
-        <ResponsiveContext.Provider value={{ width: 1280 }}>
-          <IntlProvider locale="en" messages={{}}>
-            <AppContext.Provider
-              value={{
-                authenticatedUser: {
-                  userId: 'abc123',
-                  username: 'edX',
-                  roles: [],
-                  administrator: false,
-                },
-                config: APP_CONTEXT_CONFIG,
-              }}
-            >
-              <Header />
-            </AppContext.Provider>
-          </IntlProvider>
-        </ResponsiveContext.Provider>
-      );
+      const contextValue = {
+        authenticatedUser: {
+          userId: 'abc123',
+          username: 'edX',
+          roles: [],
+          administrator: false,
+        },
+        config: APP_CONTEXT_CONFIG,
+      };
+      const component = <HeaderContext width={{ width: 1280 }} contextValue={contextValue} />;
 
       const wrapper = TestRenderer.create(component);
 

diff --git a/src/Icons.jsx b/src/Icons.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const MenuIcon = props => (
+export const MenuIcon = (props) => (
   <svg
     width="24px"
     height="24px"
@@ -14,7 +14,7 @@ export const MenuIcon = props => (
   </svg>
 );
 
-export const AvatarIcon = props => (
+export const AvatarIcon = (props) => (
   <svg
     width="24px"
     height="24px"
@@ -29,7 +29,7 @@ export const AvatarIcon = props => (
   </svg>
 );
 
-export const CaretIcon = props => (
+export const CaretIcon = (props) => (
   <svg
     width="16px"
     height="16px"

diff --git a/src/Logo.jsx b/src/Logo.jsx
@@ -1,29 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function Logo({ src, alt, ...attributes }) {
-  return (
-    <img src={src} alt={alt} {...attributes} />
-  );
-}
+const Logo = ({ src, alt, ...attributes }) => (
+  <img src={src} alt={alt} {...attributes} />
+);
 
 Logo.propTypes = {
   src: PropTypes.string.isRequired,
   alt: PropTypes.string.isRequired,
 };
 
-function LinkedLogo({
+const LinkedLogo = ({
   href,
   src,
   alt,
   ...attributes
-}) {
-  return (
-    <a href={href} {...attributes}>
-      <img className="d-block" src={src} alt={alt} />
-    </a>
-  );
-}
+}) => (
+  <a href={href} {...attributes}>
+    <img className="d-block" src={src} alt={alt} />
+  </a>
+);
 
 LinkedLogo.propTypes = {
   href: PropTypes.string.isRequired,