Refactor system console buttons into RequestButton component. (#6808)
Since I was going to make yet another button for the ElasticSearch test config button, I refactored all of them to use a single common component and tidied that component up and gave it some unit tests.
Этот коммит содержится в:
George Goldberg
коммит произвёл
Christopher Speller
Christopher Speller
родитель
f54aee1ef5
Коммит
0a3bb8fdb1
@@ -0,0 +1,496 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/admin_console/request_button/request_button.jsx should match snapshot 1`] = `
|
||||
<div
|
||||
className="form-group reload-config"
|
||||
>
|
||||
<div
|
||||
className="col-sm-offset-4 col-sm-8"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
className="btn btn-default"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Button Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="help-text"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Help Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/admin_console/request_button/request_button.jsx should match snapshot with request error 1`] = `
|
||||
<RequestButton
|
||||
buttonText={
|
||||
<FormattedMessage
|
||||
defaultMessage="Button Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
disabled={false}
|
||||
errorMessage={
|
||||
Object {
|
||||
"defaultMessage": "Error Message: {error}",
|
||||
"id": "error.message",
|
||||
}
|
||||
}
|
||||
helpText={
|
||||
<FormattedMessage
|
||||
defaultMessage="Help Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
includeDetailedError={true}
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"textComponent": "span",
|
||||
}
|
||||
}
|
||||
requestAction={[Function]}
|
||||
saveNeeded={false}
|
||||
showSuccessMessage={true}
|
||||
successMessage={
|
||||
Object {
|
||||
"defaultMessage": "Test Successful",
|
||||
"id": "admin.requestButton.requestSuccess",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="form-group reload-config"
|
||||
>
|
||||
<div
|
||||
className="col-sm-offset-4 col-sm-8"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
className="btn btn-default"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Button Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
>
|
||||
<span>
|
||||
Button Text
|
||||
</span>
|
||||
</FormattedMessage>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
className="alert alert-warning"
|
||||
>
|
||||
<i
|
||||
className="fa fa-warning"
|
||||
/>
|
||||
<FormattedMessage
|
||||
defaultMessage="Error Message: {error}"
|
||||
id="error.message"
|
||||
values={
|
||||
Object {
|
||||
"error": "__message__ - __detailed_error__",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span>
|
||||
Error Message: __message__ - __detailed_error__
|
||||
</span>
|
||||
</FormattedMessage>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="help-text"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Help Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
>
|
||||
<span>
|
||||
Help Text
|
||||
</span>
|
||||
</FormattedMessage>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</RequestButton>
|
||||
`;
|
||||
|
||||
exports[`components/admin_console/request_button/request_button.jsx should match snapshot with request error 2`] = `
|
||||
<RequestButton
|
||||
buttonText={
|
||||
<FormattedMessage
|
||||
defaultMessage="Button Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
disabled={false}
|
||||
errorMessage={
|
||||
Object {
|
||||
"defaultMessage": "Error Message: {error}",
|
||||
"id": "error.message",
|
||||
}
|
||||
}
|
||||
helpText={
|
||||
<FormattedMessage
|
||||
defaultMessage="Help Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
includeDetailedError={false}
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"textComponent": "span",
|
||||
}
|
||||
}
|
||||
requestAction={[Function]}
|
||||
saveNeeded={false}
|
||||
showSuccessMessage={true}
|
||||
successMessage={
|
||||
Object {
|
||||
"defaultMessage": "Test Successful",
|
||||
"id": "admin.requestButton.requestSuccess",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="form-group reload-config"
|
||||
>
|
||||
<div
|
||||
className="col-sm-offset-4 col-sm-8"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
className="btn btn-default"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Button Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
>
|
||||
<span>
|
||||
Button Text
|
||||
</span>
|
||||
</FormattedMessage>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
className="alert alert-warning"
|
||||
>
|
||||
<i
|
||||
className="fa fa-warning"
|
||||
/>
|
||||
<FormattedMessage
|
||||
defaultMessage="Error Message: {error}"
|
||||
id="error.message"
|
||||
values={
|
||||
Object {
|
||||
"error": "__message__",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span>
|
||||
Error Message: __message__
|
||||
</span>
|
||||
</FormattedMessage>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="help-text"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Help Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
>
|
||||
<span>
|
||||
Help Text
|
||||
</span>
|
||||
</FormattedMessage>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</RequestButton>
|
||||
`;
|
||||
|
||||
exports[`components/admin_console/request_button/request_button.jsx should match snapshot with successMessage 1`] = `
|
||||
<RequestButton
|
||||
buttonText={
|
||||
<FormattedMessage
|
||||
defaultMessage="Button Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
disabled={false}
|
||||
errorMessage={
|
||||
Object {
|
||||
"defaultMessage": "Test Failure: {error}",
|
||||
"id": "admin.requestButton.requestFailure",
|
||||
}
|
||||
}
|
||||
helpText={
|
||||
<FormattedMessage
|
||||
defaultMessage="Help Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
includeDetailedError={false}
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"textComponent": "span",
|
||||
}
|
||||
}
|
||||
requestAction={[Function]}
|
||||
saveNeeded={false}
|
||||
showSuccessMessage={true}
|
||||
successMessage={
|
||||
Object {
|
||||
"defaultMessage": "Success Message",
|
||||
"id": "success.message",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="form-group reload-config"
|
||||
>
|
||||
<div
|
||||
className="col-sm-offset-4 col-sm-8"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
className="btn btn-default"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Button Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
>
|
||||
<span>
|
||||
Button Text
|
||||
</span>
|
||||
</FormattedMessage>
|
||||
</button>
|
||||
<div>
|
||||
<div
|
||||
className="alert alert-success"
|
||||
>
|
||||
<i
|
||||
className="fa fa-success"
|
||||
/>
|
||||
<FormattedMessage
|
||||
defaultMessage="Success Message"
|
||||
id="success.message"
|
||||
values={Object {}}
|
||||
>
|
||||
<span>
|
||||
Success Message
|
||||
</span>
|
||||
</FormattedMessage>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="help-text"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Help Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
>
|
||||
<span>
|
||||
Help Text
|
||||
</span>
|
||||
</FormattedMessage>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</RequestButton>
|
||||
`;
|
||||
|
||||
exports[`components/admin_console/request_button/request_button.jsx should match snapshot with successMessage 2`] = `
|
||||
<RequestButton
|
||||
buttonText={
|
||||
<FormattedMessage
|
||||
defaultMessage="Button Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
disabled={false}
|
||||
errorMessage={
|
||||
Object {
|
||||
"defaultMessage": "Test Failure: {error}",
|
||||
"id": "admin.requestButton.requestFailure",
|
||||
}
|
||||
}
|
||||
helpText={
|
||||
<FormattedMessage
|
||||
defaultMessage="Help Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
includeDetailedError={false}
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"textComponent": "span",
|
||||
}
|
||||
}
|
||||
requestAction={[Function]}
|
||||
saveNeeded={false}
|
||||
showSuccessMessage={false}
|
||||
successMessage={
|
||||
Object {
|
||||
"defaultMessage": "Success Message",
|
||||
"id": "success.message",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="form-group reload-config"
|
||||
>
|
||||
<div
|
||||
className="col-sm-offset-4 col-sm-8"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
className="btn btn-default"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Button Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
>
|
||||
<span>
|
||||
Button Text
|
||||
</span>
|
||||
</FormattedMessage>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="help-text"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Help Text"
|
||||
id="test"
|
||||
values={Object {}}
|
||||
>
|
||||
<span>
|
||||
Help Text
|
||||
</span>
|
||||
</FormattedMessage>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</RequestButton>
|
||||
`;
|
||||
@@ -0,0 +1,215 @@
|
||||
// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
|
||||
// See License.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
|
||||
import {shallow} from 'enzyme';
|
||||
import {mountWithIntl} from 'tests/helpers/intl-test-helper.jsx';
|
||||
|
||||
import RequestButton from 'components/admin_console/request_button/request_button.jsx';
|
||||
|
||||
describe('components/admin_console/request_button/request_button.jsx', () => {
|
||||
test('should match snapshot', () => {
|
||||
const emptyFunction = jest.fn();
|
||||
|
||||
const wrapper = shallow(
|
||||
<RequestButton
|
||||
requestAction={emptyFunction}
|
||||
helpText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Help Text'
|
||||
/>
|
||||
}
|
||||
buttonText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Button Text'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should call saveConfig and request actions when saveNeeded is true', () => {
|
||||
const requestActionSuccess = jest.fn((success) => success());
|
||||
const saveConfigActionSuccess = jest.fn((success) => success());
|
||||
|
||||
const wrapper = mountWithIntl(
|
||||
<RequestButton
|
||||
requestAction={requestActionSuccess}
|
||||
helpText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Help Text'
|
||||
/>
|
||||
}
|
||||
buttonText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Button Text'
|
||||
/>
|
||||
}
|
||||
saveNeeded={false}
|
||||
saveConfigAction={saveConfigActionSuccess}
|
||||
/>
|
||||
);
|
||||
|
||||
wrapper.find('button').first().simulate('click');
|
||||
|
||||
expect(requestActionSuccess.mock.calls.length).toBe(1);
|
||||
expect(saveConfigActionSuccess.mock.calls.length).toBe(0);
|
||||
});
|
||||
|
||||
test('should call only request action when saveNeeded is false', () => {
|
||||
const requestActionSuccess = jest.fn((success) => success());
|
||||
const saveConfigActionSuccess = jest.fn((success) => success());
|
||||
|
||||
const wrapper = mountWithIntl(
|
||||
<RequestButton
|
||||
requestAction={requestActionSuccess}
|
||||
helpText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Help Text'
|
||||
/>
|
||||
}
|
||||
buttonText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Button Text'
|
||||
/>
|
||||
}
|
||||
saveNeeded={true}
|
||||
saveConfigAction={saveConfigActionSuccess}
|
||||
/>
|
||||
);
|
||||
|
||||
wrapper.find('button').first().simulate('click');
|
||||
|
||||
expect(requestActionSuccess.mock.calls.length).toBe(1);
|
||||
expect(saveConfigActionSuccess.mock.calls.length).toBe(1);
|
||||
});
|
||||
|
||||
test('should match snapshot with successMessage', () => {
|
||||
const requestActionSuccess = jest.fn((success) => success());
|
||||
|
||||
// Success & showSuccessMessage=true
|
||||
const wrapper1 = mountWithIntl(
|
||||
<RequestButton
|
||||
requestAction={requestActionSuccess}
|
||||
helpText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Help Text'
|
||||
/>
|
||||
}
|
||||
buttonText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Button Text'
|
||||
/>
|
||||
}
|
||||
showSuccessMessage={true}
|
||||
successMessage={{
|
||||
id: 'success.message',
|
||||
defaultMessage: 'Success Message'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
wrapper1.find('button').first().simulate('click');
|
||||
expect(wrapper1).toMatchSnapshot();
|
||||
|
||||
// Success & showSuccessMessage=false
|
||||
const wrapper2 = mountWithIntl(
|
||||
<RequestButton
|
||||
requestAction={requestActionSuccess}
|
||||
helpText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Help Text'
|
||||
/>
|
||||
}
|
||||
buttonText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Button Text'
|
||||
/>
|
||||
}
|
||||
showSuccessMessage={false}
|
||||
successMessage={{
|
||||
id: 'success.message',
|
||||
defaultMessage: 'Success Message'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
wrapper2.find('button').first().simulate('click');
|
||||
|
||||
expect(wrapper2).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should match snapshot with request error', () => {
|
||||
const requestActionFailure = jest.fn((success, error) => error({
|
||||
message: '__message__',
|
||||
detailed_error: '__detailed_error__'
|
||||
}));
|
||||
|
||||
// Error & includeDetailedError=true
|
||||
const wrapper1 = mountWithIntl(
|
||||
<RequestButton
|
||||
requestAction={requestActionFailure}
|
||||
helpText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Help Text'
|
||||
/>
|
||||
}
|
||||
buttonText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Button Text'
|
||||
/>
|
||||
}
|
||||
includeDetailedError={true}
|
||||
errorMessage={{
|
||||
id: 'error.message',
|
||||
defaultMessage: 'Error Message: {error}'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
wrapper1.find('button').first().simulate('click');
|
||||
expect(wrapper1).toMatchSnapshot();
|
||||
|
||||
// Error & includeDetailedError=false
|
||||
const wrapper2 = mountWithIntl(
|
||||
<RequestButton
|
||||
requestAction={requestActionFailure}
|
||||
helpText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Help Text'
|
||||
/>
|
||||
}
|
||||
buttonText={
|
||||
<FormattedMessage
|
||||
id='test'
|
||||
defaultMessage='Button Text'
|
||||
/>
|
||||
}
|
||||
errorMessage={{
|
||||
id: 'error.message',
|
||||
defaultMessage: 'Error Message: {error}'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
wrapper2.find('button').first().simulate('click');
|
||||
|
||||
expect(wrapper2).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
Ссылка в новой задаче
Block a user