Unverified Commit 20003d63 authored by Saturnino Abril's avatar Saturnino Abril Committed by GitHub
Browse files

[MM-10609] Add function to save after removing the team icon (#1245)



* add function to save after removing the team icon
Signed-off-by: default avatarSaturnino Abril <saturnino.abril@gmail.com>

* added test snapshots
Signed-off-by: default avatarSaturnino Abril <saturnino.abril@gmail.com>
parent 85d0c2c2
......@@ -66,8 +66,6 @@ export default class SettingPicture extends Component {
} else {
this.props.onSubmit(e);
}
this.setState({removeSrc: false});
}
handleRemoveSrc = (e) => {
......@@ -227,7 +225,7 @@ export default class SettingPicture extends Component {
fileInputDisabled = true;
} else {
let confirmButtonClass = 'btn btn-sm';
if (this.props.submitActive) {
if (this.props.submitActive || this.state.removeSrc) {
confirmButtonClass += ' btn-primary';
} else {
confirmButtonClass += ' btn-inactive disabled';
......
......@@ -276,7 +276,11 @@ export default class GeneralTab extends React.Component {
serverError: error.message,
});
} else {
this.setState({loadingIcon: false});
this.setState({
loadingIcon: false,
submitActive: false,
});
this.updateSection('');
}
}
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/SettingItemMin should match snapshot with active Save button 1`] = `
<ul
className="section-max form-horizontal"
>
<li
className="col-xs-12 section-title"
>
Profile Picture
</li>
<li
className="col-xs-offset-3 col-xs-8"
>
<ul
className="setting-list"
>
<li
className="setting-list-item"
>
<img
alt="profile image"
className="profile-img"
src="http://localhost:8065/api/v4/users/src_id"
/>
</li>
<li
className="setting-list-item padding-top x2"
>
<FormattedMessage
defaultMessage="Upload a picture in BMP, JPG or PNG format."
id="setting_picture.help.profile"
values={Object {}}
/>
</li>
<li
className="setting-list-item"
>
<hr />
<FormError
error={null}
errors={
Array [
"",
"",
]
}
type="modal"
/>
<div
className="btn btn-sm btn-primary btn-file sel-btn"
disabled={false}
>
<FormattedMessage
defaultMessage="Select"
id="setting_picture.select"
values={Object {}}
/>
<input
accept=".jpg,.png,.bmp"
disabled={false}
onChange={[Function]}
type="file"
/>
</div>
<a
className="btn btn-sm btn-primary"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Save"
id="setting_picture.save"
values={Object {}}
/>
</a>
<a
className="btn btn-sm theme"
href="#"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Cancel"
id="setting_picture.cancel"
values={Object {}}
/>
</a>
</li>
</ul>
</li>
</ul>
`;
exports[`components/SettingItemMin should match snapshot with active Save button 2`] = `
<ul
className="section-max form-horizontal"
>
<li
className="col-xs-12 section-title"
>
Profile Picture
</li>
<li
className="col-xs-offset-3 col-xs-8"
>
<ul
className="setting-list"
>
<li
className="setting-list-item padding-top x2"
>
<FormattedMessage
defaultMessage="Upload a picture in BMP, JPG or PNG format."
id="setting_picture.help.profile"
values={Object {}}
/>
</li>
<li
className="setting-list-item"
>
<hr />
<FormError
error={null}
errors={
Array [
"",
"",
]
}
type="modal"
/>
<div
className="btn btn-sm btn-primary btn-file sel-btn"
disabled={false}
>
<FormattedMessage
defaultMessage="Select"
id="setting_picture.select"
values={Object {}}
/>
<input
accept=".jpg,.png,.bmp"
disabled={false}
onChange={[Function]}
type="file"
/>
</div>
<a
className="btn btn-sm btn-primary"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Save"
id="setting_picture.save"
values={Object {}}
/>
</a>
<a
className="btn btn-sm theme"
href="#"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Cancel"
id="setting_picture.cancel"
values={Object {}}
/>
</a>
</li>
</ul>
</li>
</ul>
`;
exports[`components/SettingItemMin should match snapshot, on loading picture 1`] = `
<ul
className="section-max form-horizontal"
>
<li
className="col-xs-12 section-title"
>
Profile Picture
</li>
<li
className="col-xs-offset-3 col-xs-8"
>
<ul
className="setting-list"
>
<li
className="setting-list-item"
>
<img
alt="profile image"
className="profile-img"
src="http://localhost:8065/api/v4/users/src_id"
/>
</li>
<li
className="setting-list-item padding-top x2"
>
<FormattedMessage
defaultMessage="Upload a picture in BMP, JPG or PNG format."
id="setting_picture.help.profile"
values={Object {}}
/>
</li>
<li
className="setting-list-item"
>
<hr />
<FormError
error={null}
errors={
Array [
"",
"",
]
}
type="modal"
/>
<div
className="btn btn-sm btn-primary btn-file sel-btn"
disabled={true}
>
<span
className="icon fa fa-refresh icon--rotate"
/>
<FormattedMessage
defaultMessage="Select"
id="setting_picture.select"
values={Object {}}
/>
<input
accept=".jpg,.png,.bmp"
disabled={true}
onChange={[Function]}
type="file"
/>
</div>
<img
className="spinner"
src={null}
/>
<a
className="btn btn-sm theme"
href="#"
onClick={[Function]}
>
<FormattedMessage
defaultMessage="Cancel"
id="setting_picture.cancel"
values={Object {}}
/>
</a>
</li>
</ul>
</li>
</ul>
`;
exports[`components/SettingItemMin should match snapshot, profile picture on file 1`] = `
<ul
className="section-max form-horizontal"
......
......@@ -54,6 +54,30 @@ describe('components/SettingItemMin', () => {
expect(wrapper).toMatchSnapshot();
});
test('should match snapshot, on loading picture', () => {
const props = {...baseProps, loadingPicture: true};
const wrapper = shallow(
<SettingPicture {...props}/>
);
expect(wrapper).toMatchSnapshot();
});
test('should match snapshot with active Save button', () => {
const props = {...baseProps, submitActive: true};
const wrapper = shallow(
<SettingPicture {...props}/>
);
wrapper.setState({removeSrc: false});
expect(wrapper).toMatchSnapshot();
wrapper.setProps({submitActive: false});
wrapper.setState({removeSrc: true});
expect(wrapper).toMatchSnapshot();
});
test('should match state and call props.updateSection on handleCancel', () => {
const props = {...baseProps, updateSection: jest.fn()};
const wrapper = shallow(
......@@ -70,7 +94,7 @@ describe('components/SettingItemMin', () => {
expect(wrapper.state('removeSrc')).toEqual(false);
});
test('should match state and call props.onRemove on handleSave', () => {
test('should call props.onRemove on handleSave', () => {
const props = {...baseProps, onRemove: jest.fn()};
const wrapper = shallow(
<SettingPicture {...props}/>
......@@ -81,9 +105,6 @@ describe('components/SettingItemMin', () => {
wrapper.instance().handleSave(evt);
expect(props.onRemove).toHaveBeenCalledTimes(1);
expect(props.onRemove).toHaveBeenCalledWith(evt);
wrapper.update();
expect(wrapper.state('removeSrc')).toEqual(false);
});
test('should match state and call props.onSubmit on handleSave', () => {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment