fix: tests

fccn · Dec 11, 2024 · 9f91c58 · 9f91c58
1 parent 65c9812
commit 9f91c58
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 79 deletions.
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -138,7 +138,7 @@ class SiteFooter extends React.Component {
               </a>
               <FooterCopyrightSection intl={intl} />
               {config.ENABLE_FOOTER_LANG_SELECTOR && (
-                <div class="mb-2">
+                <div className="mb-2">
                   <LanguageSelector
                     options={parseEnvSettings(config.SITE_SUPPORTED_LANGUAGES)}
                     authenticatedUser={authenticatedUser}

diff --git a/src/components/Footer.test.jsx b/src/components/Footer.test.jsx
@@ -1,10 +1,13 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from 'react';
 import renderer from 'react-test-renderer';
-import { render, fireEvent, screen } from '@testing-library/react';
+import {
+  render, waitFor,
+} from '@testing-library/react';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
+import '@testing-library/jest-dom';
 
 import Footer from './Footer';
 
@@ -89,17 +92,21 @@ describe('<Footer />', () => {
       initializeMockApp();
       render(<FooterWithLanguageSelector />);
 
-      await fireEvent.submit(screen.getByTestId('site-footer-submit-btn'), {
-        target: {
-          elements: {
-            'site-footer-language-select': {
-              value: 'pt-pt',
-            },
-          },
-        },
+      await waitFor(() => {
+        document.querySelector('.language-selector');
+      });
+      expect(document.querySelectorAll('.language-selector').length).toBe(1);
+
+      document.querySelector('.language-selector>button').click();
+
+      Array.from(document.querySelectorAll('.dropdown-menu.show a')).filter((e) => e.innerHTML === 'Português')[0].click();
+
+      await waitFor(() => {
+        expect(patchPreferences).toHaveBeenCalledWith('user123', { prefLang: 'pt-pt' });
+      });
+      await waitFor(() => {
+        expect(postSetLang).toHaveBeenCalledWith('pt-pt');
       });
-      expect(patchPreferences).toHaveBeenCalledWith('user123', { prefLang: 'pt-pt' });
-      expect(postSetLang).toHaveBeenCalledWith('pt-pt');
     });
   });
 });
diff --git a/src/components/LanguageSelector.jsx b/src/components/LanguageSelector.jsx
@@ -25,58 +25,57 @@ const onLanguageSelected = async (username, selectedLanguageCode) => {
 };
 
 const LanguageSelector = ({
-  intl, options, authenticatedUser, compact, ...props
+  intl, options, authenticatedUser, compact,
 }) => {
-
   const languageLabel = (languageCode) => {
-    const option = options.find( ({ value, label }) => value === languageCode )
-    return option ? option.label : null
-  }
+    const option = options.find(({ value }) => value === languageCode);
+    return option ? option.label : null;
+  };
 
   const handleChange = (languageCode, event) => {
     const previousSiteLanguage = getLocale();
+    /* eslint-disable no-console */
     console.debug(previousSiteLanguage, languageCode, authenticatedUser);
 
     if (previousSiteLanguage !== languageCode) {
       onLanguageSelected(authenticatedUser?.username, languageCode);
     }
 
-    event.target.parentElement.parentElement.querySelector(".languageLabel").innerHTML = languageLabel(languageCode);
+    const languageLabelElement = event.target.parentElement.parentElement.querySelector('.languageLabel');
+    languageLabelElement.innerHTML = languageLabel(languageCode);
   };
 
-  const currentLangLabel = languageLabel(intl.locale)
-  const showLabel = !Boolean(compact || false);
+  const currentLangLabel = languageLabel(intl.locale);
+  const showLabel = !(compact || false);
 
   return (
-    <>
-      <Dropdown className="language-selector">
-        <Dropdown.Toggle variant="outline-primary">
-          <FontAwesomeIcon icon={faGlobe} />
-          {showLabel && (
-            currentLangLabel ? (
-              <span class="pl-1 languageLabel">
-                {currentLangLabel}
-              </span>
-            ) : (
-              <span class="pl-1">
-                <FormattedMessage
-                  id="footer.languageForm.select.label"
-                  defaultMessage="Choose Language"
-                  description="The label for the laguage select part of the language selection form."
-                />
-              </span>
-            )
-          )}
-        </Dropdown.Toggle>
-        <Dropdown.Menu>
+    <Dropdown className="language-selector">
+      <Dropdown.Toggle variant="outline-primary">
+        <FontAwesomeIcon icon={faGlobe} />
+        {showLabel && (
+          currentLangLabel ? (
+            <span className="pl-1 languageLabel">
+              {currentLangLabel}
+            </span>
+          ) : (
+            <span className="pl-1">
+              <FormattedMessage
+                id="footer.languageForm.select.label"
+                defaultMessage="Choose Language"
+                description="The label for the laguage select part of the language selection form."
+              />
+            </span>
+          )
+        )}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
         {options.map(({ value, label }) => (
           <Dropdown.Item key={value} eventKey={value} onSelect={handleChange}>
             {label}
           </Dropdown.Item>
         ))}
-        </Dropdown.Menu>
-      </Dropdown>
-    </>
+      </Dropdown.Menu>
+    </Dropdown>
   );
 };
 
@@ -92,4 +91,8 @@ LanguageSelector.propTypes = {
   })).isRequired,
 };
 
+LanguageSelector.defaultProps = {
+  compact: false,
+};
+
 export default injectIntl(LanguageSelector);
diff --git a/src/components/__snapshots__/Footer.test.jsx.snap b/src/components/__snapshots__/Footer.test.jsx.snap
@@ -36,46 +36,47 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
            - FCT|FCCN 
           All rights reserved
         </div>
-      </div>
-      <form
-        className="form-inline"
-        onSubmit={[Function]}
-      >
         <div
-          className="form-group"
+          className="mb-2"
         >
-          <label
-            className="d-inline-block m-0"
-            htmlFor="site-footer-language-select"
-          >
-            Choose Language
-          </label>
-          <select
-            className="form-control-sm mx-2"
-            defaultValue="en"
-            id="site-footer-language-select"
-            name="site-footer-language-select"
+          <div
+            className="pgn__dropdown pgn__dropdown-light language-selector dropdown"
+            data-testid="dropdown"
           >
-            <option
-              value="en"
+            <button
+              aria-expanded={false}
+              aria-haspopup={true}
+              className="dropdown-toggle btn btn-outline-primary"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
             >
-              English
-            </option>
-            <option
-              value="pt-pt"
-            >
-              Português
-            </option>
-          </select>
-          <button
-            className="btn btn-outline-primary btn-sm"
-            data-testid="site-footer-submit-btn"
-            type="submit"
-          >
-            Apply
-          </button>
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-globe "
+                data-icon="globe"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={{}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"
+                  fill="currentColor"
+                  style={{}}
+                />
+              </svg>
+              <span
+                className="pl-1 languageLabel"
+              >
+                English
+              </span>
+            </button>
+          </div>
         </div>
-      </form>
+      </div>
     </div>
   </section>
 </footer>