diff --git a/app/screens/settings/notification_settings/__snapshots__/notification_settings.test.js.snap b/app/screens/settings/notification_settings/__snapshots__/notification_settings.test.js.snap new file mode 100644 index 000000000..c2a10b8d2 --- /dev/null +++ b/app/screens/settings/notification_settings/__snapshots__/notification_settings.test.js.snap @@ -0,0 +1,391 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NotificationSettings should match snapshot 1`] = ` +NotificationSettings { + "context": Object { + "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], + "onError": [Function], + "textComponent": "span", + "timeZone": null, + }, + }, + "goToNotificationSettingsAutoResponder": [Function], + "goToNotificationSettingsEmail": [Function], + "goToNotificationSettingsMentions": [Function], + "goToNotificationSettingsMobile": [Function], + "handlePress": [Function], + "props": Object { + "actions": Object { + "updateMe": [MockFunction], + }, + "componentId": "component-id", + "currentUser": Object { + "id": "current_user_id", + }, + "currentUserStatus": "status", + "enableAutoResponder": 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], + "onError": [Function], + "textComponent": "span", + "timeZone": null, + }, + "isLandscape": false, + "theme": Object { + "awayIndicator": "#ffbc42", + "buttonBg": "#166de0", + "buttonColor": "#ffffff", + "centerChannelBg": "#ffffff", + "centerChannelColor": "#3d3c40", + "codeTheme": "github", + "dndIndicator": "#f74343", + "errorTextColor": "#fd5960", + "linkColor": "#2389d7", + "mentionBj": "#ffffff", + "mentionColor": "#145dbf", + "mentionHighlightBg": "#ffe577", + "mentionHighlightLink": "#166de0", + "newMessageSeparator": "#ff8800", + "onlineIndicator": "#06d6a0", + "sidebarBg": "#145dbf", + "sidebarHeaderBg": "#1153ab", + "sidebarHeaderTextColor": "#ffffff", + "sidebarText": "#ffffff", + "sidebarTextActiveBorder": "#579eff", + "sidebarTextActiveColor": "#ffffff", + "sidebarTextHoverBg": "#4578bf", + "sidebarUnreadText": "#ffffff", + "type": "Mattermost", + }, + "updateMeRequest": Object {}, + }, + "refs": Object {}, + "saveAutoResponder": [Function], + "saveNotificationProps": [Function], + "setState": [Function], + "shouldSaveAutoResponder": [Function], + "state": null, + "updater": Updater { + "_callbacks": Array [], + "_renderer": ReactShallowRenderer { + "_context": Object { + "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], + "onError": [Function], + "textComponent": "span", + "timeZone": null, + }, + }, + "_didScheduleRenderPhaseUpdate": false, + "_dispatcher": Object { + "readContext": [Function], + "useCallback": [Function], + "useContext": [Function], + "useDebugValue": [Function], + "useEffect": [Function], + "useImperativeHandle": [Function], + "useLayoutEffect": [Function], + "useMemo": [Function], + "useReducer": [Function], + "useRef": [Function], + "useState": [Function], + }, + "_element": , + "_firstWorkInProgressHook": null, + "_forcedUpdate": false, + "_instance": [Circular], + "_isReRender": false, + "_newState": null, + "_numberOfReRenders": 0, + "_renderPhaseUpdates": null, + "_rendered": + + + + + + + + + , + "_rendering": false, + "_updater": [Circular], + "_workInProgressHook": null, + }, + }, +} +`; diff --git a/app/screens/settings/notification_settings/notification_settings.js b/app/screens/settings/notification_settings/notification_settings.js index 5082b4c2a..9c832cd07 100644 --- a/app/screens/settings/notification_settings/notification_settings.js +++ b/app/screens/settings/notification_settings/notification_settings.js @@ -3,7 +3,7 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; -import {injectIntl, intlShape} from 'react-intl'; +import {intlShape} from 'react-intl'; import { Alert, Platform, @@ -23,14 +23,13 @@ import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/ut import {t} from 'app/utils/i18n'; import {goToScreen} from 'app/actions/navigation'; -class NotificationSettings extends PureComponent { +export default class NotificationSettings extends PureComponent { static propTypes = { actions: PropTypes.shape({ updateMe: PropTypes.func.isRequired, }), componentId: PropTypes.string, currentUser: PropTypes.object.isRequired, - intl: intlShape.isRequired, theme: PropTypes.object.isRequired, updateMeRequest: PropTypes.object.isRequired, currentUserStatus: PropTypes.string.isRequired, @@ -38,12 +37,17 @@ class NotificationSettings extends PureComponent { isLandscape: PropTypes.bool.isRequired, }; + static contextTypes = { + intl: intlShape.isRequired, + }; + componentWillReceiveProps(nextProps) { if (this.props.theme !== nextProps.theme) { setNavigatorStyles(this.props.componentId, nextProps.theme); } - const {updateMeRequest, intl} = nextProps; + const {updateMeRequest} = nextProps; + const {intl} = this.context; if (this.props.updateMeRequest !== updateMeRequest && updateMeRequest.status === RequestStatus.FAILURE) { Alert.alert( intl.formatMessage({ @@ -63,7 +67,8 @@ class NotificationSettings extends PureComponent { }); goToNotificationSettingsAutoResponder = () => { - const {currentUser, intl} = this.props; + const {currentUser} = this.props; + const {intl} = this.context; const screen = 'NotificationSettingsAutoResponder'; const title = intl.formatMessage({ id: 'mobile.notification_settings.auto_responder_short', @@ -78,7 +83,7 @@ class NotificationSettings extends PureComponent { }; goToNotificationSettingsEmail = () => { - const {intl} = this.props; + const {intl} = this.context; const screen = 'NotificationSettingsEmail'; const title = intl.formatMessage({ id: 'mobile.notification_settings.email_title', @@ -89,7 +94,8 @@ class NotificationSettings extends PureComponent { }; goToNotificationSettingsMentions = () => { - const {currentUser, intl} = this.props; + const {currentUser} = this.props; + const {intl} = this.context; const screen = 'NotificationSettingsMentions'; const title = intl.formatMessage({ id: 'mobile.notification_settings.mentions_replies', @@ -104,7 +110,8 @@ class NotificationSettings extends PureComponent { }; goToNotificationSettingsMobile = () => { - const {currentUser, intl} = this.props; + const {currentUser} = this.props; + const {intl} = this.context; const screen = 'NotificationSettingsMobile'; const title = intl.formatMessage({ id: 'mobile.notification_settings.mobile_title', @@ -127,14 +134,13 @@ class NotificationSettings extends PureComponent { saveNotificationProps = (notifyProps) => { const {currentUser} = this.props; - const {user_id: userId} = notifyProps; - const previousProps = { + const updatedProps = { ...getNotificationProps(currentUser), - user_id: userId, + ...notifyProps, }; - if (!deepEqual(previousProps, notifyProps)) { - this.props.actions.updateMe({notify_props: notifyProps}); + if (!deepEqual(updatedProps, notifyProps)) { + this.props.actions.updateMe({notify_props: updatedProps}); } }; @@ -158,7 +164,7 @@ class NotificationSettings extends PureComponent { }; saveAutoResponder = (notifyProps) => { - const {intl} = this.props; + const {intl} = this.context; if (!notifyProps.auto_responder_message || notifyProps.auto_responder_message === '') { notifyProps.auto_responder_message = intl.formatMessage({ @@ -265,5 +271,3 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { }, }; }); - -export default injectIntl(NotificationSettings); diff --git a/app/screens/settings/notification_settings/notification_settings.test.js b/app/screens/settings/notification_settings/notification_settings.test.js new file mode 100644 index 000000000..96cacca59 --- /dev/null +++ b/app/screens/settings/notification_settings/notification_settings.test.js @@ -0,0 +1,50 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; + +import Preferences from 'mattermost-redux/constants/preferences'; + +import {shallowWithIntl} from 'test/intl-test-helper'; + +import NotificationSettings from './notification_settings.js'; + +describe('NotificationSettings', () => { + const baseProps = { + actions: { + updateMe: jest.fn(), + }, + componentId: 'component-id', + currentUser: {id: 'current_user_id'}, + theme: Preferences.THEMES.default, + updateMeRequest: {}, + currentUserStatus: 'status', + enableAutoResponder: false, + isLandscape: false, + }; + + test('should match snapshot', () => { + const wrapper = shallowWithIntl( + + ); + + expect(wrapper.instance()).toMatchSnapshot(); + }); + + test('should include previous notification props when saving new ones', () => { + baseProps.currentUser.notify_props = {previous: 'previous'}; + const wrapper = shallowWithIntl( + + ); + + const instance = wrapper.instance(); + const newProps = {new: 'new'}; + instance.saveNotificationProps(newProps); + expect(baseProps.actions.updateMe).toHaveBeenCalledWith({ + notify_props: { + ...baseProps.currentUser.notify_props, + ...newProps, + }, + }); + }); +});