diff options
author | George Goldberg <george@gberg.me> | 2017-07-04 08:00:17 +0100 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2017-07-04 00:00:17 -0700 |
commit | 0a3bb8fdb10f2ce72e5e975a35fc7d22637265f9 (patch) | |
tree | 3a3c7dfed0830d9e3a945f862c60d99f15074ca1 /webapp/tests/components/admin_console/request_button | |
parent | f54aee1ef5466fdf11803cd75be3b7267e68540f (diff) | |
download | chat-0a3bb8fdb10f2ce72e5e975a35fc7d22637265f9.tar.gz chat-0a3bb8fdb10f2ce72e5e975a35fc7d22637265f9.tar.bz2 chat-0a3bb8fdb10f2ce72e5e975a35fc7d22637265f9.zip |
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.
Diffstat (limited to 'webapp/tests/components/admin_console/request_button')
-rw-r--r-- | webapp/tests/components/admin_console/request_button/__snapshots__/request_button.test.jsx.snap | 496 | ||||
-rw-r--r-- | webapp/tests/components/admin_console/request_button/request_button.test.jsx | 215 |
2 files changed, 711 insertions, 0 deletions
diff --git a/webapp/tests/components/admin_console/request_button/__snapshots__/request_button.test.jsx.snap b/webapp/tests/components/admin_console/request_button/__snapshots__/request_button.test.jsx.snap new file mode 100644 index 000000000..108384950 --- /dev/null +++ b/webapp/tests/components/admin_console/request_button/__snapshots__/request_button.test.jsx.snap @@ -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> +`; 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(); + }); +}); |