fix: update test and linter

Author: dcoa

src/components/Footer.jsx

@@ -39,7 +39,7 @@ class SiteFooter extends React.Component {
       logo,
       intl,
     } = this.props;
-    const { config, authenticatedUser } = this.context;
+    const { config } = this.context;
     return (
       <footer
         role="contentinfo"
@@ -58,9 +58,9 @@ class SiteFooter extends React.Component {
             />
           </a>
           <div className="flex-grow-1" />
-            <div className="mb-2">
-              <LanguageSelectorSlot />
-            </div>
+          <div className="mb-2">
+            <LanguageSelectorSlot />
+          </div>
         </div>
       </footer>
     );

src/components/Footer.test.jsx

@@ -3,15 +3,19 @@ import React, { useMemo } from 'react';
 import renderer from 'react-test-renderer';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider, changeUserSessionLanguage } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
 
-import Footer from './Footer';
 import FooterSlot from '../plugin-slots/FooterSlot';
 import StudioFooterHelpSectionSlot from '../plugin-slots/StudioFooterHelpSectionSlot';
 
-const FooterWithContext = ({ locale = 'es' }) => {
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  changeUserSessionLanguage: jest.fn(),
+}));
+
+const FooterWithContext = ({ locale = 'en' }) => {
   const contextValue = useMemo(() => ({
     authenticatedUser: null,
     config: {
@@ -31,64 +35,24 @@ const FooterWithContext = ({ locale = 'es' }) => {
   );
 };
 
-const { LANGUAGE_PREFERENCE_COOKIE_NAME } = process.env;
-const FooterWithLanguageSelector = ({ authenticatedUser = null }) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser,
-    config: {
-      ENABLE_FOOTER_LANG_SELECTOR: true,
-      LANGUAGE_PREFERENCE_COOKIE_NAME,
-      LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
-      LMS_BASE_URL: process.env.LMS_BASE_URL,
-      SITE_SUPPORTED_LANGUAGES: ['es', 'en'],
-    },
-  }), [authenticatedUser]);
-
-  return (
-    <IntlProvider locale="en">
-      <AppContext.Provider
-        value={contextValue}
-      >
-        <Footer />
-      </AppContext.Provider>
-    </IntlProvider>
-  );
-};
-
 describe('<Footer />', () => {
-  describe('renders correctly', () => {
-    it('renders without a language selector', () => {
-      const tree = renderer
-        .create(<FooterWithContext locale="en" />)
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-    it('renders without a language selector in es', () => {
-      const tree = renderer
-        .create(<FooterWithContext locale="es" />)
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-    it('renders with a language selector', () => {
-      initializeMockApp();
-      const tree = renderer
-        .create(<FooterWithLanguageSelector />)
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
+  beforeEach(() => { initializeMockApp(); });
+
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<FooterWithContext />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
   });
 
-  describe('handles language switching', () => {
-    it('calls onLanguageSelected prop when a language is changed', async () => {
-      const user = userEvent.setup();
-      const mockHandleLanguageSelected = jest.fn();
-      render(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
+  it('handles language switching', async () => {
+    const user = userEvent.setup();
+    render(<FooterWithContext />);
 
-      await user.selectOptions(screen.getByRole('combobox'), 'es');
-      await user.click(screen.getByTestId('site-footer-submit-btn'));
+    await user.click(screen.getByRole('button'), 'English');
+    await user.click(screen.getByRole('button', { name: 'Español (Latinoamérica)' }));
 
-      expect(mockHandleLanguageSelected).toHaveBeenCalledWith('es');
-    });
+    expect(changeUserSessionLanguage).toHaveBeenCalledWith('es-419');
   });
 });
 

src/components/LanguageSelector.jsx

@@ -1,6 +1,8 @@
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { changeUserSessionLanguage, getPrimaryLanguageSubtag, getSupportedLocaleList, getLocale } from '@edx/frontend-platform/i18n';
+import {
+  changeUserSessionLanguage, getPrimaryLanguageSubtag, getSupportedLocaleList, getLocale,
+} from '@edx/frontend-platform/i18n';
 import { Dropdown, Scrollable, useWindowSize } from '@openedx/paragon';
 import { Language } from '@openedx/paragon/icons';
 
@@ -10,18 +12,19 @@ const getLocaleName = (locale) => {
 };
 
 const LanguageSelector = ({
-  supportedLanguages = [], ...props
+  supportedLanguages = [],
 }) => {
   const [currentLocale, setLocale] = useState(getLocale());
   const { width } = useWindowSize();
   const options = supportedLanguages.length > 0 ? supportedLanguages : getSupportedLocaleList();
-  
-  const handleSelect = async (selectedLlocale) => {
-    if (currentLocale !== selectedLlocale) {
-      await changeUserSessionLanguage(selectedLlocale);
+
+  const handleSelect = async (selectedLocale) => {
+    if (currentLocale !== selectedLocale) {
+      await changeUserSessionLanguage(selectedLocale);
     }
-    setLocale(selectedLlocale);
+    setLocale(selectedLocale);
   };
+
   const currentLocaleLabel = useMemo(() => {
     if (width < 576) {
       return '';
@@ -43,20 +46,20 @@ const LanguageSelector = ({
         {currentLocaleLabel}
       </Dropdown.Toggle>
       <Dropdown.Menu>
-        <Scrollable style={{'max-height': '40vh'}}>
-        {options.map((locale) => (
-          <Dropdown.Item key={`lang-selector-${locale}`} eventKey={locale}>
-            {getLocaleName(locale)}
-          </Dropdown.Item>
-        ))}
+        <Scrollable style={{ maxHeight: '40vh' }}>
+          {options.map((locale) => (
+            <Dropdown.Item key={`lang-selector-${locale}`} eventKey={locale}>
+              {getLocaleName(locale)}
+            </Dropdown.Item>
+          ))}
         </Scrollable>
       </Dropdown.Menu>
     </Dropdown>
   );
 };
 
 LanguageSelector.propTypes = {
-  supportedLanguages: PropTypes.arrayOf(PropTypes.string), 
+  supportedLanguages: PropTypes.arrayOf(PropTypes.string),
 };
 
-export default LanguageSelector;
+export default LanguageSelector;

src/components/__snapshots__/Footer.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Footer /> renders correctly renders with a language selector 1`] = `
+exports[`<Footer /> renders  with language selector 1`] = `
 <footer
   className="footer d-flex border-top py-3 px-4"
   role="contentinfo"
@@ -69,7 +69,7 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
 </footer>
 `;
 
-exports[`<Footer /> renders correctly renders without a language selector 1`] = `
+exports[`<Footer /> renders correctly 1`] = `
 <footer
   className="footer d-flex border-top py-3 px-4"
   role="contentinfo"
@@ -95,36 +95,45 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
     <div
       className="flex-grow-1"
     />
-  </div>
-</footer>
-`;
-
-exports[`<Footer /> renders correctly renders without a language selector in es 1`] = `
-<footer
-  className="footer d-flex border-top py-3 px-4"
-  role="contentinfo"
->
-  <div
-    className="container-fluid d-flex"
-  >
-    <a
-      aria-label="edX Home"
-      className="d-block"
-      href="http://localhost:18000"
-    >
-      <img
-        alt="Powered by Open edX"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-        style={
-          {
-            "maxHeight": 45,
-          }
-        }
-      />
-    </a>
     <div
-      className="flex-grow-1"
-    />
+      className="mb-2"
+    >
+      <div
+        className="pgn__dropdown pgn__dropdown-light dropdown"
+        data-testid="dropdown"
+      >
+        <button
+          aria-expanded={false}
+          aria-haspopup={true}
+          className="dropdown-toggle btn btn-outline-primary btn-sm"
+          disabled={false}
+          id="lang-selector-dropdown"
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="pgn__icon pgn__icon__sm btn-icon-before"
+          >
+            <svg
+              aria-hidden={true}
+              fill="none"
+              focusable={false}
+              height={24}
+              role="img"
+              viewBox="0 0 24 24"
+              width={24}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2Zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8ZM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96ZM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26Zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16Zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8ZM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96ZM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2Zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56ZM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          English
+        </button>
+      </div>
+    </div>
   </div>
 </footer>
 `;

src/plugin-slots/LanguageSelectorSlot/index.jsx

@@ -3,14 +3,14 @@ import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import PropTypes from 'prop-types';
 import LanguageSelector from '../../components/LanguageSelector';
 
-const LanguageSelectorSlot = ({ supportedLanguages }) => (
+const LanguageSelectorSlot = ({ supportedLanguages = [] }) => (
   <PluginSlot id="org.openedx.frontend.layout.footer_lang_selector.v1" pluginProps={{ supportedLanguages }}>
     <LanguageSelector supportedLanguages={supportedLanguages} />
   </PluginSlot>
 );
 
 LanguageSelectorSlot.propTypes = {
-  supportedLanguages: PropTypes.arrayOf(PropTypes.string), 
+  supportedLanguages: PropTypes.arrayOf(PropTypes.string),
 };
 
 export default LanguageSelectorSlot;