Skip to content

Commit 6c02962

Browse files
BilalQamar95BilalQamar95
authored
refactor: updated frontend-build & resolved eslint issues
1 parent acaf98f commit 6c02962

15 files changed

Lines changed: 13869 additions & 12267 deletions

‎.eslintrc.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// eslint-disable-next-line import/no-extraneous-dependencies
12
const { createConfig } = require('@edx/frontend-build');
23

3-
module.exports = createConfig('eslint');
4+
module.exports = createConfig('eslint');

‎package-lock.json‎

Lines changed: 13669 additions & 12042 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,18 @@
3434
"homepage": "https://github.com/openedx/frontend-component-header#readme",
3535
"devDependencies": {
3636
"@edx/brand": "npm:@edx/brand-openedx@1.1.0",
37-
"@edx/frontend-build": "11.0.2",
37+
"@edx/frontend-build": "12.3.0",
3838
"@edx/frontend-platform": "2.6.2",
3939
"@edx/paragon": "19.25.3",
40+
"@testing-library/dom": "8.19.0",
41+
"@testing-library/jest-dom": "5.16.5",
42+
"@testing-library/react": "10.4.9",
4043
"codecov": "3.8.3",
4144
"enzyme": "3.11.0",
4245
"enzyme-adapter-react-16": "1.15.6",
4346
"husky": "7.0.4",
47+
"jest": "28.1.3",
48+
"jest-chain": "1.1.6",
4449
"prop-types": "15.8.1",
4550
"react": "16.14.0",
4651
"react-dom": "16.14.0",
@@ -49,22 +54,17 @@
4954
"react-test-renderer": "16.14.0",
5055
"reactifex": "1.1.1",
5156
"redux": "4.2.0",
52-
"redux-saga": "1.1.3",
53-
"@testing-library/dom": "8.19.0",
54-
"@testing-library/jest-dom": "5.16.5",
55-
"jest": "28.1.3",
56-
"jest-chain": "1.1.6",
57-
"@testing-library/react": "10.4.9"
57+
"redux-saga": "1.1.3"
5858
},
5959
"dependencies": {
60-
"babel-polyfill": "6.26.0",
61-
"react-responsive": "8.2.0",
62-
"react-transition-group": "4.4.5",
6360
"@fortawesome/fontawesome-svg-core": "1.2.36",
6461
"@fortawesome/free-brands-svg-icons": "5.15.4",
6562
"@fortawesome/free-regular-svg-icons": "5.15.4",
6663
"@fortawesome/free-solid-svg-icons": "5.15.4",
67-
"@fortawesome/react-fontawesome": "^0.2.0"
64+
"@fortawesome/react-fontawesome": "^0.2.0",
65+
"babel-polyfill": "6.26.0",
66+
"react-responsive": "8.2.0",
67+
"react-transition-group": "4.4.5"
6868
},
6969
"peerDependencies": {
7070
"@edx/frontend-platform": "^2.0.0",

‎src/Avatar.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
33

44
import { AvatarIcon } from './Icons';
55

6-
function Avatar({
6+
const Avatar = ({
77
size,
88
src,
99
alt,
1010
className,
11-
}) {
11+
}) => {
1212
const avatar = src ? (
1313
<img className="d-block w-100 h-100" src={src} alt={alt} />
1414
) : (
@@ -23,7 +23,7 @@ function Avatar({
2323
{avatar}
2424
</span>
2525
);
26-
}
26+
};
2727

2828
Avatar.propTypes = {
2929
src: PropTypes.string,

‎src/Header.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
3030
}, 'Header additional config');
3131
});
3232

33-
function Header({ intl }) {
33+
const Header = ({ intl }) => {
3434
const { authenticatedUser, config } = useContext(AppContext);
3535

3636
const mainMenu = [
@@ -110,7 +110,7 @@ function Header({ intl }) {
110110
</Responsive>
111111
</>
112112
);
113-
}
113+
};
114114

115115
Header.propTypes = {
116116
intl: intlShape.isRequired,

‎src/Header.test.jsx‎

Lines changed: 67 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react/prop-types */
12
import React from 'react';
23
import { IntlProvider } from '@edx/frontend-platform/i18n';
34
import TestRenderer from 'react-test-renderer';
@@ -6,119 +7,95 @@ import { Context as ResponsiveContext } from 'react-responsive';
67

78
import Header from './index';
89

10+
const HeaderComponent = ({ width, contextValue }) => (
11+
<ResponsiveContext.Provider value={width}>
12+
<IntlProvider locale="en" messages={{}}>
13+
<AppContext.Provider
14+
value={contextValue}
15+
>
16+
<Header />
17+
</AppContext.Provider>
18+
</IntlProvider>
19+
</ResponsiveContext.Provider>
20+
);
21+
922
describe('<Header />', () => {
1023
it('renders correctly for anonymous desktop', () => {
11-
const component = (
12-
<ResponsiveContext.Provider value={{ width: 1280 }}>
13-
<IntlProvider locale="en" messages={{}}>
14-
<AppContext.Provider
15-
value={{
16-
authenticatedUser: null,
17-
config: {
18-
LMS_BASE_URL: process.env.LMS_BASE_URL,
19-
SITE_NAME: process.env.SITE_NAME,
20-
LOGIN_URL: process.env.LOGIN_URL,
21-
LOGOUT_URL: process.env.LOGOUT_URL,
22-
LOGO_URL: process.env.LOGO_URL,
23-
},
24-
}}
25-
>
26-
<Header />
27-
</AppContext.Provider>
28-
</IntlProvider>
29-
</ResponsiveContext.Provider>
30-
);
24+
const contextValue = {
25+
authenticatedUser: null,
26+
config: {
27+
LMS_BASE_URL: process.env.LMS_BASE_URL,
28+
SITE_NAME: process.env.SITE_NAME,
29+
LOGIN_URL: process.env.LOGIN_URL,
30+
LOGOUT_URL: process.env.LOGOUT_URL,
31+
LOGO_URL: process.env.LOGO_URL,
32+
},
33+
};
34+
const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
3135

3236
const wrapper = TestRenderer.create(component);
3337

3438
expect(wrapper.toJSON()).toMatchSnapshot();
3539
});
3640

3741
it('renders correctly for authenticated desktop', () => {
38-
const component = (
39-
<ResponsiveContext.Provider value={{ width: 1280 }}>
40-
<IntlProvider locale="en" messages={{}}>
41-
<AppContext.Provider
42-
value={{
43-
authenticatedUser: {
44-
userId: 'abc123',
45-
username: 'edX',
46-
roles: [],
47-
administrator: false,
48-
},
49-
config: {
50-
LMS_BASE_URL: process.env.LMS_BASE_URL,
51-
SITE_NAME: process.env.SITE_NAME,
52-
LOGIN_URL: process.env.LOGIN_URL,
53-
LOGOUT_URL: process.env.LOGOUT_URL,
54-
LOGO_URL: process.env.LOGO_URL,
55-
},
56-
}}
57-
>
58-
<Header />
59-
</AppContext.Provider>
60-
</IntlProvider>
61-
</ResponsiveContext.Provider>
62-
);
42+
const contextValue = {
43+
authenticatedUser: {
44+
userId: 'abc123',
45+
username: 'edX',
46+
roles: [],
47+
administrator: false,
48+
},
49+
config: {
50+
LMS_BASE_URL: process.env.LMS_BASE_URL,
51+
SITE_NAME: process.env.SITE_NAME,
52+
LOGIN_URL: process.env.LOGIN_URL,
53+
LOGOUT_URL: process.env.LOGOUT_URL,
54+
LOGO_URL: process.env.LOGO_URL,
55+
},
56+
};
57+
const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;
6358

6459
const wrapper = TestRenderer.create(component);
6560

6661
expect(wrapper.toJSON()).toMatchSnapshot();
6762
});
6863

6964
it('renders correctly for anonymous mobile', () => {
70-
const component = (
71-
<ResponsiveContext.Provider value={{ width: 500 }}>
72-
<IntlProvider locale="en" messages={{}}>
73-
<AppContext.Provider
74-
value={{
75-
authenticatedUser: null,
76-
config: {
77-
LMS_BASE_URL: process.env.LMS_BASE_URL,
78-
SITE_NAME: process.env.SITE_NAME,
79-
LOGIN_URL: process.env.LOGIN_URL,
80-
LOGOUT_URL: process.env.LOGOUT_URL,
81-
LOGO_URL: process.env.LOGO_URL,
82-
},
83-
}}
84-
>
85-
<Header />
86-
</AppContext.Provider>
87-
</IntlProvider>
88-
</ResponsiveContext.Provider>
89-
);
65+
const contextValue = {
66+
authenticatedUser: null,
67+
config: {
68+
LMS_BASE_URL: process.env.LMS_BASE_URL,
69+
SITE_NAME: process.env.SITE_NAME,
70+
LOGIN_URL: process.env.LOGIN_URL,
71+
LOGOUT_URL: process.env.LOGOUT_URL,
72+
LOGO_URL: process.env.LOGO_URL,
73+
},
74+
};
75+
const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;
9076

9177
const wrapper = TestRenderer.create(component);
9278

9379
expect(wrapper.toJSON()).toMatchSnapshot();
9480
});
9581

9682
it('renders correctly for authenticated mobile', () => {
97-
const component = (
98-
<ResponsiveContext.Provider value={{ width: 500 }}>
99-
<IntlProvider locale="en" messages={{}}>
100-
<AppContext.Provider
101-
value={{
102-
authenticatedUser: {
103-
userId: 'abc123',
104-
username: 'edX',
105-
roles: [],
106-
administrator: false,
107-
},
108-
config: {
109-
LMS_BASE_URL: process.env.LMS_BASE_URL,
110-
SITE_NAME: process.env.SITE_NAME,
111-
LOGIN_URL: process.env.LOGIN_URL,
112-
LOGOUT_URL: process.env.LOGOUT_URL,
113-
LOGO_URL: process.env.LOGO_URL,
114-
},
115-
}}
116-
>
117-
<Header />
118-
</AppContext.Provider>
119-
</IntlProvider>
120-
</ResponsiveContext.Provider>
121-
);
83+
const contextValue = {
84+
authenticatedUser: {
85+
userId: 'abc123',
86+
username: 'edX',
87+
roles: [],
88+
administrator: false,
89+
},
90+
config: {
91+
LMS_BASE_URL: process.env.LMS_BASE_URL,
92+
SITE_NAME: process.env.SITE_NAME,
93+
LOGIN_URL: process.env.LOGIN_URL,
94+
LOGOUT_URL: process.env.LOGOUT_URL,
95+
LOGO_URL: process.env.LOGO_URL,
96+
},
97+
};
98+
const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;
12299

123100
const wrapper = TestRenderer.create(component);
124101

‎src/Icons.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
export const MenuIcon = props => (
3+
export const MenuIcon = (props) => (
44
<svg
55
width="24px"
66
height="24px"
@@ -14,7 +14,7 @@ export const MenuIcon = props => (
1414
</svg>
1515
);
1616

17-
export const AvatarIcon = props => (
17+
export const AvatarIcon = (props) => (
1818
<svg
1919
width="24px"
2020
height="24px"
@@ -29,7 +29,7 @@ export const AvatarIcon = props => (
2929
</svg>
3030
);
3131

32-
export const CaretIcon = props => (
32+
export const CaretIcon = (props) => (
3333
<svg
3434
width="16px"
3535
height="16px"

‎src/Logo.jsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33

4-
function Logo({ src, alt, ...attributes }) {
5-
return (
6-
<img src={src} alt={alt} {...attributes} />
7-
);
8-
}
4+
const Logo = ({ src, alt, ...attributes }) => (
5+
<img src={src} alt={alt} {...attributes} />
6+
);
97

108
Logo.propTypes = {
119
src: PropTypes.string.isRequired,
1210
alt: PropTypes.string.isRequired,
1311
};
1412

15-
function LinkedLogo({
13+
const LinkedLogo = ({
1614
href,
1715
src,
1816
alt,
1917
...attributes
20-
}) {
21-
return (
22-
<a href={href} {...attributes}>
23-
<img className="d-block" src={src} alt={alt} />
24-
</a>
25-
);
26-
}
18+
}) => (
19+
<a href={href} {...attributes}>
20+
<img className="d-block" src={src} alt={alt} />
21+
</a>
22+
);
2723

2824
LinkedLogo.propTypes = {
2925
href: PropTypes.string.isRequired,

‎src/Menu/Menu.jsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@ import React from 'react';
22
import { CSSTransition } from 'react-transition-group';
33
import PropTypes from 'prop-types';
44

5-
function MenuTrigger({ tag, className, ...attributes }) {
6-
return React.createElement(tag, {
7-
className: `menu-trigger ${className}`,
8-
...attributes,
9-
});
10-
}
5+
const MenuTrigger = ({ tag, className, ...attributes }) => React.createElement(tag, {
6+
className: `menu-trigger ${className}`,
7+
...attributes,
8+
});
119
MenuTrigger.propTypes = {
1210
tag: PropTypes.string,
1311
className: PropTypes.string,
@@ -18,12 +16,10 @@ MenuTrigger.defaultProps = {
1816
};
1917
const MenuTriggerType = <MenuTrigger />.type;
2018

21-
function MenuContent({ tag, className, ...attributes }) {
22-
return React.createElement(tag, {
23-
className: ['menu-content', className].join(' '),
24-
...attributes,
25-
});
26-
}
19+
const MenuContent = ({ tag, className, ...attributes }) => React.createElement(tag, {
20+
className: ['menu-content', className].join(' '),
21+
...attributes,
22+
});
2723
MenuContent.propTypes = {
2824
tag: PropTypes.string,
2925
className: PropTypes.string,

0 commit comments

Comments
 (0)