9c29d688e7
**This PR creates a new core reusable component wraps a character counter around any input.**
The component accepts the arguments: `max` (the maximum character limit), `value` (the value of text to be monitored).
It can be used for example, like so:
```hbs
<CharCounter @max="50" @value={{this.charCounterContent}}>
<textarea
placeholder={{i18n "styleguide.sections.char_counter.placeholder"}}
{{on "input" (action (mut this.charCounterContent) value="target.value")}}
class="styleguide--char-counter"></textarea>
</CharCounter>
```
**This PR also:**
1. Applies this component to the chat plugins edit channel's *Edit Description** modal, thereby replacing the simple text area which provided no visual indication when text exceeded the max allowed characters.
2. Adds an example to the `/styleguide` route
49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
import { module, test } from "qunit";
|
|
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
|
import { fillIn, render } from "@ember/test-helpers";
|
|
import { hbs } from "ember-cli-htmlbars";
|
|
|
|
module("Integration | Component | char-counter", function (hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
test("shows the number of characters", async function (assert) {
|
|
this.value = "Hello World";
|
|
this.max = 12;
|
|
|
|
await render(
|
|
hbs`<CharCounter @value={{this.value}} @max={{this.max}}></CharCounter>`
|
|
);
|
|
|
|
assert.dom(this.element).includesText("11/12");
|
|
});
|
|
|
|
test("updating value updates counter", async function (assert) {
|
|
this.max = 50;
|
|
|
|
await render(
|
|
hbs`<CharCounter @value={{this.charCounterContent}} @max={{this.max}}><textarea {{on "input" (action (mut this.charCounterContent) value="target.value")}}></textarea></CharCounter>`
|
|
);
|
|
|
|
assert
|
|
.dom(this.element)
|
|
.includesText("/50", "initial value appears as expected");
|
|
|
|
await fillIn("textarea", "Hello World, this is a longer string");
|
|
|
|
assert
|
|
.dom(this.element)
|
|
.includesText("36/50", "updated value appears as expected");
|
|
});
|
|
|
|
test("exceeding max length", async function (assert) {
|
|
this.max = 10;
|
|
this.value = "Hello World";
|
|
|
|
await render(
|
|
hbs`<CharCounter @value={{this.value}} @max={{this.max}}></CharCounter>`
|
|
);
|
|
|
|
assert.dom(".char-counter.exceeded").exists("exceeded class is applied");
|
|
});
|
|
});
|