Commit c9d8840d authored by lisakycho's avatar lisakycho Committed by Jesse Hallam
Browse files

Adding emoji after word limit is reached will give warning message. (#1139)

* Adding emoji after word limit is reached will give warning message.

* New test case added for textbox.js
parent d63c22ff
......@@ -87,7 +87,6 @@ export default class Textbox extends React.Component {
}
handleChange = (e) => {
this.checkMessageLength(e.target.value);
this.props.onChange(e);
}
......@@ -174,6 +173,9 @@ export default class Textbox extends React.Component {
}
}
}
if (this.props.value !== nextProps.value) {
this.checkMessageLength(nextProps.value);
}
}
render() {
......
......@@ -126,6 +126,132 @@ exports[`components/TextBox should match snapshot with required props 1`] = `
</div>
`;
exports[`components/TextBox should throw error when new property is too long 1`] = `
<div
className="textarea-wrapper"
>
<SuggestionBox
className="form-control custom-textarea"
completeOnTab={true}
id="someid"
inputComponent={[Function]}
isRHS={false}
listComponent={[Function]}
listStyle="top"
onBlur={[Function]}
onChange={[Function]}
onHeightChange={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
openOnFocus={false}
openWhenEmpty={false}
placeholder="placeholder text"
popoverMentionKeyClick={false}
providers={
Array [
AtMentionProvider {
"channelId": undefined,
"disableDispatches": false,
"latestComplete": true,
"latestPrefix": "",
},
ChannelMentionProvider {
"disableDispatches": false,
"lastCompletedWord": "",
"lastPrefixWithNoResults": "",
"latestComplete": true,
"latestPrefix": "",
},
EmoticonProvider {},
]
}
renderDividers={true}
requiredCharacters={1}
spellCheck="true"
style={
Object {
"visibility": "visible",
}
}
value="some test text that exceeds char limit"
/>
<div
className="help__text hidden"
>
<div
className="help__format-text"
id="helpText"
style={
Object {
"opacity": "0.45",
"visibility": "visible",
}
}
>
<b>
<FormattedMessage
defaultMessage="**bold**"
id="textbox.bold"
values={Object {}}
/>
</b>
<i>
<FormattedMessage
defaultMessage="_italic_"
id="textbox.italic"
values={Object {}}
/>
</i>
<span>
~~
<strike>
<FormattedMessage
defaultMessage="strike"
id="textbox.strike"
values={Object {}}
/>
</strike>
~~
</span>
<span>
<FormattedMessage
defaultMessage="\`inline code\`"
id="textbox.inlinecode"
values={Object {}}
/>
</span>
<span>
<FormattedMessage
defaultMessage="\`\`\`preformatted\`\`\`"
id="textbox.preformatted"
values={Object {}}
/>
</span>
<span>
<FormattedMessage
defaultMessage=">quote"
id="textbox.quote"
values={Object {}}
/>
</span>
</div>
<a
className="textbox-help-link"
href="/help/messaging"
id="helpTextLink"
rel="noopener noreferrer"
target="_blank"
>
<FormattedMessage
defaultMessage="Help"
id="textbox.help"
values={Object {}}
/>
</a>
</div>
</div>
`;
exports[`components/TextBox should throw error when value is too long 1`] = `
<div
className="textarea-wrapper"
......@@ -173,10 +299,10 @@ exports[`components/TextBox should throw error when value is too long 1`] = `
"visibility": "visible",
}
}
value="some test text"
value="some test text that exceeds char limit"
/>
<div
className="help__text "
className="help__text hidden"
>
<div
className="help__format-text"
......
......@@ -4,8 +4,6 @@
import React from 'react';
import {shallow} from 'enzyme';
import TestHelper from 'tests/helpers/client-test-helper';
import Textbox from 'components/textbox.jsx';
describe('components/TextBox', () => {
......@@ -31,8 +29,34 @@ describe('components/TextBox', () => {
// this mock function should be called when the textbox value is too long
var gotError = false;
function handlePostError() {
gotError = true;
function handlePostError(msg) {
gotError = msg !== null;
}
const wrapper = shallow(
<Textbox
id='someid'
value='some test text that exceeds char limit'
onChange={emptyFunction}
onKeyPress={emptyFunction}
characterLimit={14}
createMessage='placeholder text'
supportsCommands={false}
handlePostError={handlePostError}
/>
);
expect(gotError).toEqual(true);
expect(wrapper).toMatchSnapshot();
});
test('should throw error when new property is too long', () => {
function emptyFunction() {} //eslint-disable-line no-empty-function
// this mock function should be called when the textbox value is too long
var gotError = false;
function handlePostError(msg) {
gotError = msg !== null;
}
const wrapper = shallow(
......@@ -41,14 +65,15 @@ describe('components/TextBox', () => {
value='some test text'
onChange={emptyFunction}
onKeyPress={emptyFunction}
characterLimit={4000}
characterLimit={14}
createMessage='placeholder text'
supportsCommands={false}
handlePostError={handlePostError}
/>
);
wrapper.find('#someid').value = TestHelper.randomString(4001);
wrapper.setProps({value: 'some test text that exceeds char limit'});
wrapper.update();
expect(gotError).toEqual(true);
expect(wrapper).toMatchSnapshot();
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment