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.

1 files changed, 215 insertions, 0 deletions

diff --git a/webapp/tests/components/admin_console/request_button/request_button.test.jsx b/webapp/tests/components/admin_console/request_button/request_button.test.jsx
new file mode 100644
index 000000000..3b3f4b40b
--- /dev/null
+++ b/webapp/tests/components/admin_console/request_button/request_button.test.jsx
@@ -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();
+    });
+});