[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:
parent
90f6fd6cb8
commit
f530c227b2
2 changed files with 42 additions and 13 deletions
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue