refactor: upgraded frontend-build to v12 & resolved eslint issues

This commit is contained in:
Bilal Qamar
2022-10-26 18:35:10 +05:00
committed by GitHub
parent 8183143ae5
commit 4527baef5a
5 changed files with 34507 additions and 28874 deletions

View File

@@ -1,3 +1,4 @@
// eslint-disable-next-line import/no-extraneous-dependencies
const { createConfig } = require('@edx/frontend-build');
module.exports = createConfig('eslint');

63245
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -34,7 +34,7 @@
"homepage": "https://github.com/openedx/frontend-component-footer#readme",
"devDependencies": {
"@edx/brand": "npm:@edx/brand-openedx@1.1.0",
"@edx/frontend-build": "9.2.2",
"@edx/frontend-build": "12.3.0",
"@edx/frontend-platform": "3.0.1",
"@edx/paragon": "19.25.3",
"enzyme": "3.11.0",

View File

@@ -23,14 +23,6 @@ class SiteFooter extends React.Component {
this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this);
}
getLocalePrefix(locale) {
const twoLetterPrefix = locale.substring(0, 2).toLowerCase();
if (twoLetterPrefix === 'en') {
return '';
}
return `/${twoLetterPrefix}`;
}
externalLinkClickHandler(event) {
const label = event.currentTarget.getAttribute('href');
const eventName = EVENT_NAMES.FOOTER_LINK;

View File

@@ -1,4 +1,5 @@
import React from 'react';
/* eslint-disable react/prop-types */
import React, { useMemo } from 'react';
import renderer from 'react-test-renderer';
import { mount } from 'enzyme';
import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -6,71 +7,69 @@ import { AppContext } from '@edx/frontend-platform/react';
import Footer from './Footer';
const FooterWithContext = ({ locale = 'es' }) => {
const contextValue = useMemo(() => ({
authenticatedUser: null,
config: {
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
LMS_BASE_URL: process.env.LMS_BASE_URL,
},
}), []);
return (
<IntlProvider locale={locale}>
<AppContext.Provider
value={contextValue}
>
<Footer />
</AppContext.Provider>
</IntlProvider>
);
};
const FooterWithLanguageSelector = ({ languageSelected = () => {} }) => {
const contextValue = useMemo(() => ({
authenticatedUser: null,
config: {
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
LMS_BASE_URL: process.env.LMS_BASE_URL,
},
}), []);
return (
<IntlProvider locale="en">
<AppContext.Provider
value={contextValue}
>
<Footer
onLanguageSelected={languageSelected}
supportedLanguages={[
{ label: 'English', value: 'en' },
{ label: 'Español', value: 'es' },
]}
/>
</AppContext.Provider>
</IntlProvider>
);
};
describe('<Footer />', () => {
describe('renders correctly', () => {
it('renders without a language selector', () => {
const tree = renderer
.create((
<IntlProvider locale="en">
<AppContext.Provider
value={{
authenticatedUser: null,
config: {
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
LMS_BASE_URL: process.env.LMS_BASE_URL,
},
}}
>
<Footer />
</AppContext.Provider>
</IntlProvider>
))
.create(<FooterWithContext locale="en" />)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders without a language selector in es', () => {
const tree = renderer
.create((
<IntlProvider locale="es">
<AppContext.Provider
value={{
authenticatedUser: null,
config: {
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
LMS_BASE_URL: process.env.LMS_BASE_URL,
},
}}
>
<Footer />
</AppContext.Provider>
</IntlProvider>
))
.create(<FooterWithContext locale="es" />)
.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders with a language selector', () => {
const tree = renderer
.create((
<IntlProvider locale="en">
<AppContext.Provider
value={{
authenticatedUser: null,
config: {
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
LMS_BASE_URL: process.env.LMS_BASE_URL,
},
}}
>
<Footer
onLanguageSelected={() => {}}
supportedLanguages={[
{ label: 'English', value: 'en' },
{ label: 'Español', value: 'es' },
]}
/>
</AppContext.Provider>
</IntlProvider>
))
.create(<FooterWithLanguageSelector />)
.toJSON();
expect(tree).toMatchSnapshot();
});
@@ -79,27 +78,7 @@ describe('<Footer />', () => {
describe('handles language switching', () => {
it('calls onLanguageSelected prop when a language is changed', () => {
const mockHandleLanguageSelected = jest.fn();
const wrapper = mount((
<IntlProvider locale="en">
<AppContext.Provider
value={{
authenticatedUser: null,
config: {
LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
LMS_BASE_URL: process.env.LMS_BASE_URL,
},
}}
>
<Footer
onLanguageSelected={mockHandleLanguageSelected}
supportedLanguages={[
{ label: 'English', value: 'en' },
{ label: 'Español', value: 'es' },
]}
/>
</AppContext.Provider>
</IntlProvider>
));
const wrapper = mount(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
wrapper.find('form').simulate('submit', {
target: {