[MM-18172] Added state for message length such that alerts for long length aren't fired too often - cherry-pick (#3225)

* [MM-18172] Added state for message length such that alerts for long length aren't fired too often (#3218)

* [MM-18172] Added state for message length such that alerts for long length aren't fired too often

* Added a test

* Naming change

* Merge'd

* Merge'd
This commit is contained in:
Devin Binnie 2019-09-05 09:39:39 -04:00 committed by GitHub
parent 90f6fd6cb8
commit f530c227b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 13 deletions

View file

@ -2,6 +2,7 @@
// See LICENSE.txt for license information.
import React from 'react';
import {Alert} from 'react-native';
import {shallowWithIntl} from 'test/intl-test-helper';
import Preferences from 'mattermost-redux/constants/preferences';
@ -13,6 +14,12 @@ import PostTextbox from './post_textbox.ios';
jest.mock('NativeEventEmitter');
jest.mock('Alert', () => {
return {
alert: jest.fn(),
};
});
describe('PostTextBox', () => {
const baseProps = {
actions: {
@ -88,6 +95,21 @@ describe('PostTextBox', () => {
expect(baseProps.actions.handlePostDraftChanged).toHaveBeenCalledTimes(1);
});
test('should not send multiple alerts when message is too long', () => {
const wrapper = shallowWithIntl(
<PostTextbox {...baseProps}/>
);
const instance = wrapper.instance();
const longString = [...Array(baseProps.maxMessageLength + 2).keys()].map(() => Math.random().toString(36).slice(0, 1)).join('');
instance.handleTextChange(longString);
instance.handleTextChange(longString.slice(1));
expect(Alert.alert).toBeCalled();
expect(Alert.alert).toHaveBeenCalledTimes(1);
});
describe('send button', () => {
test('should initially disable and hide the send button', () => {
const wrapper = shallowWithIntl(

View file

@ -94,6 +94,7 @@ export default class PostTextBoxBase extends PureComponent {
sendingMessage: false,
top: 0,
value: props.value,
longMessageAlertShown: false,
};
}
@ -171,19 +172,25 @@ export default class PostTextBoxBase extends PureComponent {
const valueLength = value.trim().length;
if (valueLength > maxMessageLength) {
Alert.alert(
intl.formatMessage({
id: 'mobile.message_length.title',
defaultMessage: 'Message Length',
}),
intl.formatMessage({
id: 'mobile.message_length.message',
defaultMessage: 'Your current message is too long. Current character count: {max}/{count}',
}, {
max: maxMessageLength,
count: valueLength,
})
);
// Check if component is already aware message is too long
if (!this.state.longMessageAlertShown) {
Alert.alert(
intl.formatMessage({
id: 'mobile.message_length.title',
defaultMessage: 'Message Length',
}),
intl.formatMessage({
id: 'mobile.message_length.message',
defaultMessage: 'Your current message is too long. Current character count: {max}/{count}',
}, {
max: maxMessageLength,
count: valueLength,
})
);
this.setState({longMessageAlertShown: true});
}
} else if (this.state.longMessageAlertShown) {
this.setState({longMessageAlertShown: false});
}
};