Skip to content

Commit

Permalink
fix: tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@igobranco
igobranco committed Dec 11, 2024
1 parent 65c9812 commit 6aa732e
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 78 deletions.
29 changes: 18 additions & 11 deletions src/components/Footer.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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');
});
});
});
67 changes: 35 additions & 32 deletions src/components/LanguageSelector.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" data-testid="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 data-testid="language-selector-menu">
{options.map(({ value, label }) => (
<Dropdown.Item key={value} eventKey={value} onSelect={handleChange}>
{label}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</>
</Dropdown.Menu>
</Dropdown>
);
};

Expand All @@ -92,4 +91,8 @@ LanguageSelector.propTypes = {
})).isRequired,
};

LanguageSelector.defaultProps = {
compact: false,
};

export default injectIntl(LanguageSelector);
71 changes: 36 additions & 35 deletions src/components/__snapshots__/Footer.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
class="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="language-selector"
>
<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>
Expand Down

0 comments on commit 6aa732e

Please sign in to comment.