From 0a3bb8fdb10f2ce72e5e975a35fc7d22637265f9 Mon Sep 17 00:00:00 2001 From: George Goldberg Date: Tue, 4 Jul 2017 08:00:17 +0100 Subject: 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. --- .../__snapshots__/request_button.test.jsx.snap | 496 +++++++++++++++++++++ .../request_button/request_button.test.jsx | 215 +++++++++ 2 files changed, 711 insertions(+) create mode 100644 webapp/tests/components/admin_console/request_button/__snapshots__/request_button.test.jsx.snap create mode 100644 webapp/tests/components/admin_console/request_button/request_button.test.jsx (limited to 'webapp/tests/components') 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`] = ` +
+
+
+ +
+
+ +
+
+
+`; + +exports[`components/admin_console/request_button/request_button.jsx should match snapshot with request error 1`] = ` + + } + disabled={false} + errorMessage={ + Object { + "defaultMessage": "Error Message: {error}", + "id": "error.message", + } + } + helpText={ + + } + 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", + } + } +> +
+
+
+ +
+
+ + + + Error Message: __message__ - __detailed_error__ + + +
+
+
+
+ + + Help Text + + +
+
+
+ +`; + +exports[`components/admin_console/request_button/request_button.jsx should match snapshot with request error 2`] = ` + + } + disabled={false} + errorMessage={ + Object { + "defaultMessage": "Error Message: {error}", + "id": "error.message", + } + } + helpText={ + + } + 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", + } + } +> +
+
+
+ +
+
+ + + + Error Message: __message__ + + +
+
+
+
+ + + Help Text + + +
+
+
+ +`; + +exports[`components/admin_console/request_button/request_button.jsx should match snapshot with successMessage 1`] = ` + + } + disabled={false} + errorMessage={ + Object { + "defaultMessage": "Test Failure: {error}", + "id": "admin.requestButton.requestFailure", + } + } + helpText={ + + } + 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", + } + } +> +
+
+
+ +
+
+ + + + Success Message + + +
+
+
+
+ + + Help Text + + +
+
+
+ +`; + +exports[`components/admin_console/request_button/request_button.jsx should match snapshot with successMessage 2`] = ` + + } + disabled={false} + errorMessage={ + Object { + "defaultMessage": "Test Failure: {error}", + "id": "admin.requestButton.requestFailure", + } + } + helpText={ + + } + 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", + } + } +> +
+
+
+ +
+
+ + + Help Text + + +
+
+
+ +`; 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( + + } + buttonText={ + + } + /> + ); + 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( + + } + buttonText={ + + } + 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( + + } + buttonText={ + + } + 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( + + } + buttonText={ + + } + showSuccessMessage={true} + successMessage={{ + id: 'success.message', + defaultMessage: 'Success Message' + }} + /> + ); + + wrapper1.find('button').first().simulate('click'); + expect(wrapper1).toMatchSnapshot(); + + // Success & showSuccessMessage=false + const wrapper2 = mountWithIntl( + + } + buttonText={ + + } + 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( + + } + buttonText={ + + } + 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( + + } + buttonText={ + + } + errorMessage={{ + id: 'error.message', + defaultMessage: 'Error Message: {error}' + }} + /> + ); + + wrapper2.find('button').first().simulate('click'); + + expect(wrapper2).toMatchSnapshot(); + }); +}); -- cgit v1.2.3-1-g7c22