Andal.LND/frontend-app-profile
6
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #589 from openedx/bilalqamar95/frontend-build-upgrade

Browse Source 
Upgraded frontend-build version to v12
This commit is contained in:
Thomas Tracy
2022-09-20 16:13:58 -04:00
committed by GitHub
parent 011c4ef356 4a40868afa
commit d7d6cd8ad4
9 changed files with 4578 additions and 11592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.js
View File

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

15700
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -63,8 +63,8 @@
"devDependencies": {
"@commitlint/cli": "13.2.1",
"@commitlint/config-angular": "13.2.0",
"@edx/frontend-build": "9.2.2",
"@edx/reactifex": "2.1.1",
"@edx/frontend-build": "12.0.3",
"codecov": "3.8.3",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.6",

62
src/profile/ProfilePage.jsx
View File

@@ -68,6 +68,30 @@ class ProfilePage extends React.Component {
});
}
handleSaveProfilePhoto(formData) {
this.props.saveProfilePhoto(this.context.authenticatedUser.username, formData);
}
handleDeleteProfilePhoto() {
this.props.deleteProfilePhoto(this.context.authenticatedUser.username);
}
handleClose(formId) {
this.props.closeForm(formId);
}
handleOpen(formId) {
this.props.openForm(formId);
}
handleSubmit(formId) {
this.props.saveProfile(formId, this.context.authenticatedUser.username);
}
handleChange(name, value) {
this.props.updateDraft(name, value);
}
getRecordsUrl(context) {
let recordsUrl = null;
@@ -93,30 +117,6 @@ class ProfilePage extends React.Component {
return this.props.match.params.username === this.context.authenticatedUser.username;
}
handleSaveProfilePhoto(formData) {
this.props.saveProfilePhoto(this.context.authenticatedUser.username, formData);
}
handleDeleteProfilePhoto() {
this.props.deleteProfilePhoto(this.context.authenticatedUser.username);
}
handleClose(formId) {
this.props.closeForm(formId);
}
handleOpen(formId) {
this.props.openForm(formId);
}
handleSubmit(formId) {
this.props.saveProfile(formId, this.context.authenticatedUser.username);
}
handleChange(name, value) {
this.props.updateDraft(name, value);
}
// Inserted into the DOM in two places (for responsive layout)
renderViewMyRecordsButton() {
if (!(this.state.viewMyRecordsUrl && this.isAuthenticatedUserProfile())) {
@@ -135,14 +135,12 @@ class ProfilePage extends React.Component {
const { dateJoined } = this.props;
return (
<>
<span data-hj-suppress>
<h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
<DateJoined date={dateJoined} />
{this.isYOBDisabled() && <UsernameDescription />}
<hr className="d-none d-md-block" />
</span>
</>
<span data-hj-suppress>
<h1 className="h2 mb-0 font-weight-bold">{this.props.match.params.username}</h1>
<DateJoined date={dateJoined} />
{this.isYOBDisabled() && <UsernameDescription />}
<hr className="d-none d-md-block" />
</span>
);
}

284
src/profile/ProfilePage.test.jsx
View File

@@ -5,6 +5,7 @@ import { AppContext } from '@edx/frontend-platform/react';
import { configure as configureI18n, IntlProvider } from '@edx/frontend-platform/i18n';
import { mount } from 'enzyme';
import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';
import renderer from 'react-test-renderer';
import configureMockStore from 'redux-mock-store';
@@ -15,10 +16,10 @@ import ProfilePage from './ProfilePage';
const mockStore = configureMockStore([thunk]);
const storeMocks = {
loadingApp: require('./__mocks__/loadingApp.mockStore.js'),
viewOwnProfile: require('./__mocks__/viewOwnProfile.mockStore.js'),
viewOtherProfile: require('./__mocks__/viewOtherProfile.mockStore.js'),
savingEditedBio: require('./__mocks__/savingEditedBio.mockStore.js'),
loadingApp: require('./__mocks__/loadingApp.mockStore'),
viewOwnProfile: require('./__mocks__/viewOwnProfile.mockStore'),
viewOtherProfile: require('./__mocks__/viewOtherProfile.mockStore'),
savingEditedBio: require('./__mocks__/savingEditedBio.mockStore'),
};
const requiredProfilePageProps = {
fetchUserAccount: () => {},
@@ -65,82 +66,83 @@ beforeEach(() => {
analytics.sendTrackingLogEvent.mockReset();
});
function ProfilePageWrapper({
contextValue, store, match, requiresParentalConsent,
}) {
return (
<AppContext.Provider
value={contextValue}
>
<IntlProvider locale="en">
<Provider store={store}>
<ProfilePage {...requiredProfilePageProps} match={match} requiresParentalConsent={requiresParentalConsent} />
</Provider>
</IntlProvider>
</AppContext.Provider>
);
}
ProfilePageWrapper.defaultProps = {
match: { params: { username: 'staff' } },
requiresParentalConsent: null,
};
ProfilePageWrapper.propTypes = {
contextValue: PropTypes.shape({}).isRequired,
store: PropTypes.shape({}).isRequired,
match: PropTypes.shape({}),
requiresParentalConsent: PropTypes.bool,
};
describe('<ProfilePage />', () => {
describe('Renders correctly in various states', () => {
it('app loading', () => {
const component = (
<AppContext.Provider
value={{
authenticatedUser: { userId: null, username: null, administrator: false },
config: getConfig(),
}}
>
<IntlProvider locale="en">
<Provider store={mockStore(storeMocks.loadingApp)}>
<ProfilePage {...requiredProfilePageProps} />
</Provider>
</IntlProvider>
</AppContext.Provider>
);
const contextValue = {
authenticatedUser: { userId: null, username: null, administrator: false },
config: getConfig(),
};
const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.loadingApp)} />;
const tree = renderer.create(component).toJSON();
expect(tree).toMatchSnapshot();
});
it('viewing own profile', () => {
const component = (
<AppContext.Provider
value={{
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
}}
>
<IntlProvider locale="en">
<Provider store={mockStore(storeMocks.viewOwnProfile)}>
<ProfilePage {...requiredProfilePageProps} />
</Provider>
</IntlProvider>
</AppContext.Provider>
);
const contextValue = {
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
};
const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeMocks.viewOwnProfile)} />;
const tree = renderer.create(component).toJSON();
expect(tree).toMatchSnapshot();
});
it('viewing other profile', () => {
const contextValue = {
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
};
const component = (
<AppContext.Provider
value={{
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
}}
>
<IntlProvider locale="en">
<Provider store={mockStore(storeMocks.viewOtherProfile)}>
<ProfilePage
{...requiredProfilePageProps}
match={{ params: { username: 'verified' } }} // Override default match
/>
</Provider>
</IntlProvider>
</AppContext.Provider>
<ProfilePageWrapper
contextValue={contextValue}
store={mockStore(storeMocks.viewOtherProfile)}
match={{ params: { username: 'verified' } }} // Override default match
/>
);
const tree = renderer.create(component).toJSON();
expect(tree).toMatchSnapshot();
});
it('while saving an edited bio', () => {
const contextValue = {
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
};
const component = (
<AppContext.Provider
value={{
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
}}
>
<IntlProvider locale="en">
<Provider store={mockStore(storeMocks.savingEditedBio)}>
<ProfilePage {...requiredProfilePageProps} />
</Provider>
</IntlProvider>
</AppContext.Provider>
<ProfilePageWrapper
contextValue={contextValue}
store={mockStore(storeMocks.savingEditedBio)}
/>
);
const tree = renderer.create(component).toJSON();
expect(tree).toMatchSnapshot();
@@ -149,19 +151,15 @@ describe('<ProfilePage />', () => {
it('while saving an edited bio with error', () => {
const storeData = JSON.parse(JSON.stringify(storeMocks.savingEditedBio));
storeData.profilePage.errors.bio = { userMessage: 'bio error' };
const contextValue = {
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
};
const component = (
<AppContext.Provider
value={{
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
}}
>
<IntlProvider locale="en">
<Provider store={mockStore(storeData)}>
<ProfilePage {...requiredProfilePageProps} />
</Provider>
</IntlProvider>
</AppContext.Provider>
<ProfilePageWrapper
contextValue={contextValue}
store={mockStore(storeData)}
/>
);
const tree = renderer.create(component).toJSON();
expect(tree).toMatchSnapshot();
@@ -171,19 +169,15 @@ describe('<ProfilePage />', () => {
const storeData = JSON.parse(JSON.stringify(storeMocks.savingEditedBio));
storeData.profilePage.errors.country = { userMessage: 'country error' };
storeData.profilePage.currentlyEditingField = 'country';
const contextValue = {
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
};
const component = (
<AppContext.Provider
value={{
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
}}
>
<IntlProvider locale="en">
<Provider store={mockStore(storeData)}>
<ProfilePage {...requiredProfilePageProps} />
</Provider>
</IntlProvider>
</AppContext.Provider>
<ProfilePageWrapper
contextValue={contextValue}
store={mockStore(storeData)}
/>
);
const tree = renderer.create(component).toJSON();
expect(tree).toMatchSnapshot();
@@ -193,19 +187,15 @@ describe('<ProfilePage />', () => {
const storeData = JSON.parse(JSON.stringify(storeMocks.savingEditedBio));
storeData.profilePage.errors.levelOfEducation = { userMessage: 'education error' };
storeData.profilePage.currentlyEditingField = 'levelOfEducation';
const contextValue = {
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
};
const component = (
<AppContext.Provider
value={{
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
}}
>
<IntlProvider locale="en">
<Provider store={mockStore(storeData)}>
<ProfilePage {...requiredProfilePageProps} />
</Provider>
</IntlProvider>
</AppContext.Provider>
<ProfilePageWrapper
contextValue={contextValue}
store={mockStore(storeData)}
/>
);
const tree = renderer.create(component).toJSON();
expect(tree).toMatchSnapshot();
@@ -215,19 +205,15 @@ describe('<ProfilePage />', () => {
const storeData = JSON.parse(JSON.stringify(storeMocks.savingEditedBio));
storeData.profilePage.errors.languageProficiencies = { userMessage: 'preferred language error' };
storeData.profilePage.currentlyEditingField = 'languageProficiencies';
const contextValue = {
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
};
const component = (
<AppContext.Provider
value={{
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
}}
>
<IntlProvider locale="en">
<Provider store={mockStore(storeData)}>
<ProfilePage {...requiredProfilePageProps} />
</Provider>
</IntlProvider>
</AppContext.Provider>
<ProfilePageWrapper
contextValue={contextValue}
store={mockStore(storeData)}
/>
);
const tree = renderer.create(component).toJSON();
expect(tree).toMatchSnapshot();
@@ -237,19 +223,15 @@ describe('<ProfilePage />', () => {
const config = getConfig();
config.CREDENTIALS_BASE_URL = '';
const contextValue = {
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
};
const component = (
<AppContext.Provider
value={{
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config,
}}
>
<IntlProvider locale="en">
<Provider store={mockStore(storeMocks.viewOwnProfile)}>
<ProfilePage {...requiredProfilePageProps} />
</Provider>
</IntlProvider>
</AppContext.Provider>
<ProfilePageWrapper
contextValue={contextValue}
store={mockStore(storeMocks.viewOwnProfile)}
/>
);
const tree = renderer.create(component).toJSON();
expect(tree).toMatchSnapshot();
@@ -258,19 +240,16 @@ describe('<ProfilePage />', () => {
const storeData = JSON.parse(JSON.stringify(storeMocks.viewOwnProfile));
storeData.userAccount.requiresParentalConsent = true;
storeData.profilePage.account.requiresParentalConsent = true;
const contextValue = {
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: { ...getConfig(), COLLECT_YEAR_OF_BIRTH: true },
};
const component = (
<AppContext.Provider
value={{
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: { ...getConfig(), COLLECT_YEAR_OF_BIRTH: true },
}}
>
<IntlProvider locale="en">
<Provider store={mockStore(storeData)}>
<ProfilePage {...requiredProfilePageProps} requiresParentalConsent />
</Provider>
</IntlProvider>
</AppContext.Provider>
<ProfilePageWrapper
contextValue={contextValue}
store={mockStore(storeData)}
requiresParentalConsent
/>
);
const wrapper = mount(component);
wrapper.update();
@@ -280,20 +259,11 @@ describe('<ProfilePage />', () => {
it('test photo error alert', () => {
const storeData = JSON.parse(JSON.stringify(storeMocks.viewOwnProfile));
storeData.profilePage.errors.photo = { userMessage: 'error' };
const component = (
<AppContext.Provider
value={{
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: { ...getConfig(), COLLECT_YEAR_OF_BIRTH: true },
}}
>
<IntlProvider locale="en">
<Provider store={mockStore(storeData)}>
<ProfilePage {...requiredProfilePageProps} />
</Provider>
</IntlProvider>
</AppContext.Provider>
);
const contextValue = {
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: { ...getConfig(), COLLECT_YEAR_OF_BIRTH: true },
};
const component = <ProfilePageWrapper contextValue={contextValue} store={mockStore(storeData)} />;
const wrapper = mount(component);
wrapper.update();
@@ -303,22 +273,16 @@ describe('<ProfilePage />', () => {
describe('handles analytics', () => {
it('calls sendTrackingLogEvent when mounting', () => {
const contextValue = {
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
};
const component = (
<AppContext.Provider
value={{
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
config: getConfig(),
}}
>
<IntlProvider locale="en">
<Provider store={mockStore(storeMocks.loadingApp)}>
<ProfilePage
{...requiredProfilePageProps}
match={{ params: { username: 'test-username' } }}
/>
</Provider>
</IntlProvider>
</AppContext.Provider>
<ProfilePageWrapper
contextValue={contextValue}
store={mockStore(storeMocks.loadingApp)}
match={{ params: { username: 'test-username' } }}
/>
);
const wrapper = mount(component);
wrapper.update();

2
src/profile/data/reducers.js
View File

@@ -24,7 +24,7 @@ export const initialState = {
isAuthenticatedUserProfile: false,
};
const profilePage = (state = initialState, action) => {
const profilePage = (state = initialState, action = {}) => {
switch (action.type) {
case FETCH_PROFILE.BEGIN:
return {

26
src/profile/forms/SocialLinks.jsx
View File

@@ -65,19 +65,6 @@ class SocialLinks extends React.Component {
}
}
mergeWithDrafts(newSocialLink) {
const knownPlatforms = ['twitter', 'facebook', 'linkedin'];
const updated = [];
knownPlatforms.forEach((platform) => {
if (newSocialLink.platform === platform) {
updated.push(newSocialLink);
} else if (this.props.draftSocialLinksByPlatform[platform] !== undefined) {
updated.push(this.props.draftSocialLinksByPlatform[platform]);
}
});
return updated;
}
handleSubmit(e) {
e.preventDefault();
this.props.submitHandler(this.props.formId);
@@ -91,6 +78,19 @@ class SocialLinks extends React.Component {
this.props.openHandler(this.props.formId);
}
mergeWithDrafts(newSocialLink) {
const knownPlatforms = ['twitter', 'facebook', 'linkedin'];
const updated = [];
knownPlatforms.forEach((platform) => {
if (newSocialLink.platform === platform) {
updated.push(newSocialLink);
} else if (this.props.draftSocialLinksByPlatform[platform] !== undefined) {
updated.push(this.props.draftSocialLinksByPlatform[platform]);
}
});
return updated;
}
render() {
const {
socialLinks, visibilitySocialLinks, editMode, saveState, error, intl,

75
src/profile/forms/SocialLinks.test.jsx
View File

@@ -1,6 +1,6 @@
import { mount } from 'enzyme';
import PropTypes from 'prop-types';
import React from 'react';
import React, { useMemo } from 'react';
import { Provider } from 'react-redux';
import renderer from 'react-test-renderer';
import configureMockStore from 'redux-mock-store';
@@ -47,20 +47,23 @@ configureI18n({
messages,
});
const SocialLinksWrapper = props => (
<AppContext.Provider
value={{
authenticatedUser: { userId: null, username: null, administrator: false },
config: getConfig(),
}}
>
<IntlProvider locale="en">
<Provider store={props.store}>
<SocialLinks {...props} />
</Provider>
</IntlProvider>
</AppContext.Provider>
);
function SocialLinksWrapper(props) {
const contextValue = useMemo(() => ({
authenticatedUser: { userId: null, username: null, administrator: false },
config: getConfig(),
}), []);
return (
<AppContext.Provider
value={contextValue}
>
<IntlProvider locale="en">
<Provider store={props.store}>
<SocialLinks {...props} />
</Provider>
</IntlProvider>
</AppContext.Provider>
);
}
SocialLinksWrapper.defaultProps = {
store: mockStore(savingEditedBio),
@@ -70,6 +73,32 @@ SocialLinksWrapper.propTypes = {
store: PropTypes.shape({}),
};
function SocialLinksWrapperWithStore({ store }) {
const contextValue = useMemo(() => ({
authenticatedUser: { userId: null, username: null, administrator: false },
config: getConfig(),
}), []);
return (
<AppContext.Provider
value={contextValue}
>
<IntlProvider locale="en">
<Provider store={mockStore(store)}>
<SocialLinks {...defaultProps} formId="bio" />
</Provider>
</IntlProvider>
</AppContext.Provider>
);
}
SocialLinksWrapperWithStore.defaultProps = {
store: mockStore(savingEditedBio),
};
SocialLinksWrapperWithStore.propTypes = {
store: PropTypes.shape({}),
};
describe('<SocialLinks />', () => {
['certificates', 'bio', 'goals', 'socialLinks'].forEach(editMode => (
it(`calls social links with edit mode ${editMode}`, () => {
@@ -130,20 +159,8 @@ describe('<SocialLinks />', () => {
it('calls social links with error', () => {
const newStore = JSON.parse(JSON.stringify(savingEditedBio));
newStore.profilePage.errors.bio = { userMessage: 'error' };
const component = (
<AppContext.Provider
value={{
authenticatedUser: { userId: null, username: null, administrator: false },
config: getConfig(),
}}
>
<IntlProvider locale="en">
<Provider store={mockStore(newStore)}>
<SocialLinks {...defaultProps} formId="bio" />
</Provider>
</IntlProvider>
</AppContext.Provider>
);
const component = <SocialLinksWrapperWithStore store={newStore} />;
const wrapper = mount(component);
const socialLink = wrapper.find(SocialLinks);

16
src/profile/forms/elements/EditableItemHeader.jsx
View File

@@ -13,15 +13,13 @@ function EditableItemHeader({
headingId,
}) {
return (
<>
<div className="editable-item-header mb-2">
<h2 className="edit-section-header" id={headingId}>
{content}
{showEditButton ? <EditButton style={{ marginTop: '-.35rem' }} className="float-right px-0" onClick={onClickEdit} /> : null}
</h2>
{showVisibility ? <p className="mb-0"><Visibility to={visibility} /></p> : null}
</div>
</>
<div className="editable-item-header mb-2">
<h2 className="edit-section-header" id={headingId}>
{content}
{showEditButton ? <EditButton style={{ marginTop: '-.35rem' }} className="float-right px-0" onClick={onClickEdit} /> : null}
</h2>
{showVisibility ? <p className="mb-0"><Visibility to={visibility} /></p> : null}
</div>
);
}