Skip to content

Commit 9cbcd99

Browse files
dcoadcoa
committed
fix: update test and linter
1 parent c2d3ccc commit 9cbcd99

File tree

5 files changed

+84
-108
lines changed

5 files changed

+84
-108
lines changed

‎src/components/Footer.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ class SiteFooter extends React.Component {
3939
logo,
4040
intl,
4141
} = this.props;
42-
const { config, authenticatedUser } = this.context;
42+
const { config } = this.context;
4343
return (
4444
<footer
4545
role="contentinfo"
@@ -58,9 +58,9 @@ class SiteFooter extends React.Component {
5858
/>
5959
</a>
6060
<div className="flex-grow-1" />
61-
<div className="mb-2">
62-
<LanguageSelectorSlot />
63-
</div>
61+
<div className="mb-2">
62+
<LanguageSelectorSlot />
63+
</div>
6464
</div>
6565
</footer>
6666
);

‎src/components/Footer.test.jsx‎

Lines changed: 20 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,19 @@ import React, { useMemo } from 'react';
33
import renderer from 'react-test-renderer';
44
import { render, screen } from '@testing-library/react';
55
import userEvent from '@testing-library/user-event';
6-
import { IntlProvider } from '@edx/frontend-platform/i18n';
6+
import { IntlProvider, changeUserSessionLanguage } from '@edx/frontend-platform/i18n';
77
import { AppContext } from '@edx/frontend-platform/react';
88
import { initializeMockApp } from '@edx/frontend-platform/testing';
99

10-
import Footer from './Footer';
1110
import FooterSlot from '../plugin-slots/FooterSlot';
1211
import StudioFooterHelpSectionSlot from '../plugin-slots/StudioFooterHelpSectionSlot';
1312

14-
const FooterWithContext = ({ locale = 'es' }) => {
13+
jest.mock('@edx/frontend-platform/i18n', () => ({
14+
...jest.requireActual('@edx/frontend-platform/i18n'),
15+
changeUserSessionLanguage: jest.fn(),
16+
}));
17+
18+
const FooterWithContext = ({ locale = 'en' }) => {
1519
const contextValue = useMemo(() => ({
1620
authenticatedUser: null,
1721
config: {
@@ -31,64 +35,24 @@ const FooterWithContext = ({ locale = 'es' }) => {
3135
);
3236
};
3337

34-
const { LANGUAGE_PREFERENCE_COOKIE_NAME } = process.env;
35-
const FooterWithLanguageSelector = ({ authenticatedUser = null }) => {
36-
const contextValue = useMemo(() => ({
37-
authenticatedUser,
38-
config: {
39-
ENABLE_FOOTER_LANG_SELECTOR: true,
40-
LANGUAGE_PREFERENCE_COOKIE_NAME,
41-
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
42-
LMS_BASE_URL: process.env.LMS_BASE_URL,
43-
SITE_SUPPORTED_LANGUAGES: ['es', 'en'],
44-
},
45-
}), [authenticatedUser]);
46-
47-
return (
48-
<IntlProvider locale="en">
49-
<AppContext.Provider
50-
value={contextValue}
51-
>
52-
<Footer />
53-
</AppContext.Provider>
54-
</IntlProvider>
55-
);
56-
};
57-
5838
describe('<Footer />', () => {
59-
describe('renders correctly', () => {
60-
it('renders without a language selector', () => {
61-
const tree = renderer
62-
.create(<FooterWithContext locale="en" />)
63-
.toJSON();
64-
expect(tree).toMatchSnapshot();
65-
});
66-
it('renders without a language selector in es', () => {
67-
const tree = renderer
68-
.create(<FooterWithContext locale="es" />)
69-
.toJSON();
70-
expect(tree).toMatchSnapshot();
71-
});
72-
it('renders with a language selector', () => {
73-
initializeMockApp();
74-
const tree = renderer
75-
.create(<FooterWithLanguageSelector />)
76-
.toJSON();
77-
expect(tree).toMatchSnapshot();
78-
});
39+
beforeEach(() => { initializeMockApp(); });
40+
41+
it('renders correctly', () => {
42+
const tree = renderer
43+
.create(<FooterWithContext />)
44+
.toJSON();
45+
expect(tree).toMatchSnapshot();
7946
});
8047

81-
describe('handles language switching', () => {
82-
it('calls onLanguageSelected prop when a language is changed', async () => {
83-
const user = userEvent.setup();
84-
const mockHandleLanguageSelected = jest.fn();
85-
render(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
48+
it('handles language switching', async () => {
49+
const user = userEvent.setup();
50+
render(<FooterWithContext />);
8651

87-
await user.selectOptions(screen.getByRole('combobox'), 'es');
88-
await user.click(screen.getByTestId('site-footer-submit-btn'));
52+
await user.click(screen.getByRole('button'), 'English');
53+
await user.click(screen.getByRole('button', { name: 'Español (Latinoamérica)' }));
8954

90-
expect(mockHandleLanguageSelected).toHaveBeenCalledWith('es');
91-
});
55+
expect(changeUserSessionLanguage).toHaveBeenCalledWith('es-419');
9256
});
9357
});
9458

‎src/components/LanguageSelector.jsx‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { useMemo, useState } from 'react';
22
import PropTypes from 'prop-types';
3-
import { changeUserSessionLanguage, getPrimaryLanguageSubtag, getSupportedLocaleList, getLocale } from '@edx/frontend-platform/i18n';
3+
import {
4+
changeUserSessionLanguage, getPrimaryLanguageSubtag, getSupportedLocaleList, getLocale,
5+
} from '@edx/frontend-platform/i18n';
46
import { Dropdown, Scrollable, useWindowSize } from '@openedx/paragon';
57
import { Language } from '@openedx/paragon/icons';
68

@@ -10,18 +12,19 @@ const getLocaleName = (locale) => {
1012
};
1113

1214
const LanguageSelector = ({
13-
supportedLanguages = [], ...props
15+
supportedLanguages = [],
1416
}) => {
1517
const [currentLocale, setLocale] = useState(getLocale());
1618
const { width } = useWindowSize();
1719
const options = supportedLanguages.length > 0 ? supportedLanguages : getSupportedLocaleList();
18-
19-
const handleSelect = async (selectedLlocale) => {
20-
if (currentLocale !== selectedLlocale) {
21-
await changeUserSessionLanguage(selectedLlocale);
20+
21+
const handleSelect = async (selectedLocale) => {
22+
if (currentLocale !== selectedLocale) {
23+
await changeUserSessionLanguage(selectedLocale);
2224
}
23-
setLocale(selectedLlocale);
25+
setLocale(selectedLocale);
2426
};
27+
2528
const currentLocaleLabel = useMemo(() => {
2629
if (width < 576) {
2730
return '';
@@ -43,20 +46,20 @@ const LanguageSelector = ({
4346
{currentLocaleLabel}
4447
</Dropdown.Toggle>
4548
<Dropdown.Menu>
46-
<Scrollable style={{'max-height': '40vh'}}>
47-
{options.map((locale) => (
48-
<Dropdown.Item key={`lang-selector-${locale}`} eventKey={locale}>
49-
{getLocaleName(locale)}
50-
</Dropdown.Item>
51-
))}
49+
<Scrollable style={{ maxHeight: '40vh' }}>
50+
{options.map((locale) => (
51+
<Dropdown.Item key={`lang-selector-${locale}`} eventKey={locale}>
52+
{getLocaleName(locale)}
53+
</Dropdown.Item>
54+
))}
5255
</Scrollable>
5356
</Dropdown.Menu>
5457
</Dropdown>
5558
);
5659
};
5760

5861
LanguageSelector.propTypes = {
59-
supportedLanguages: PropTypes.arrayOf(PropTypes.string),
62+
supportedLanguages: PropTypes.arrayOf(PropTypes.string),
6063
};
6164

62-
export default LanguageSelector;
65+
export default LanguageSelector;

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

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`<Footer /> renders correctly renders with a language selector 1`] = `
3+
exports[`<Footer /> renders with language selector 1`] = `
44
<footer
55
className="footer d-flex border-top py-3 px-4"
66
role="contentinfo"
@@ -69,7 +69,7 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
6969
</footer>
7070
`;
7171

72-
exports[`<Footer /> renders correctly renders without a language selector 1`] = `
72+
exports[`<Footer /> renders correctly 1`] = `
7373
<footer
7474
className="footer d-flex border-top py-3 px-4"
7575
role="contentinfo"
@@ -95,36 +95,45 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
9595
<div
9696
className="flex-grow-1"
9797
/>
98-
</div>
99-
</footer>
100-
`;
101-
102-
exports[`<Footer /> renders correctly renders without a language selector in es 1`] = `
103-
<footer
104-
className="footer d-flex border-top py-3 px-4"
105-
role="contentinfo"
106-
>
107-
<div
108-
className="container-fluid d-flex"
109-
>
110-
<a
111-
aria-label="edX Home"
112-
className="d-block"
113-
href="http://localhost:18000"
114-
>
115-
<img
116-
alt="Powered by Open edX"
117-
src="https://edx-cdn.org/v3/default/logo-trademark.svg"
118-
style={
119-
{
120-
"maxHeight": 45,
121-
}
122-
}
123-
/>
124-
</a>
12598
<div
126-
className="flex-grow-1"
127-
/>
99+
className="mb-2"
100+
>
101+
<div
102+
className="pgn__dropdown pgn__dropdown-light dropdown"
103+
data-testid="dropdown"
104+
>
105+
<button
106+
aria-expanded={false}
107+
aria-haspopup={true}
108+
className="dropdown-toggle btn btn-outline-primary btn-sm"
109+
disabled={false}
110+
id="lang-selector-dropdown"
111+
onClick={[Function]}
112+
type="button"
113+
>
114+
<span
115+
className="pgn__icon pgn__icon__sm btn-icon-before"
116+
>
117+
<svg
118+
aria-hidden={true}
119+
fill="none"
120+
focusable={false}
121+
height={24}
122+
role="img"
123+
viewBox="0 0 24 24"
124+
width={24}
125+
xmlns="http://www.w3.org/2000/svg"
126+
>
127+
<path
128+
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"
129+
fill="currentColor"
130+
/>
131+
</svg>
132+
</span>
133+
English
134+
</button>
135+
</div>
136+
</div>
128137
</div>
129138
</footer>
130139
`;

‎src/plugin-slots/LanguageSelectorSlot/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import { PluginSlot } from '@openedx/frontend-plugin-framework';
33
import PropTypes from 'prop-types';
44
import LanguageSelector from '../../components/LanguageSelector';
55

6-
const LanguageSelectorSlot = ({ supportedLanguages }) => (
6+
const LanguageSelectorSlot = ({ supportedLanguages = [] }) => (
77
<PluginSlot id="org.openedx.frontend.layout.footer_lang_selector.v1" pluginProps={{ supportedLanguages }}>
88
<LanguageSelector supportedLanguages={supportedLanguages} />
99
</PluginSlot>
1010
);
1111

1212
LanguageSelectorSlot.propTypes = {
13-
supportedLanguages: PropTypes.arrayOf(PropTypes.string),
13+
supportedLanguages: PropTypes.arrayOf(PropTypes.string),
1414
};
1515

1616
export default LanguageSelectorSlot;

0 commit comments

Comments
 (0)