mirror of
https://github.com/hanzoai/forum.git
synced 2026-09-30 21:51:19 +00:00
Jarek RadoszandGitHub
7bce40879c
Instead of
```hbs
{{on "input" (action this.foo value="target.value")}}
{{on "input" (action (mut this.bar) value="target.value")}}
```
you can use:
```hbs
{{on "input" (with-event-value this.foo)}}
{{on "input" (with-event-value (fn (mut this.bar)))}}
```
or in gjs:
```gjs
import { fn } from "@ember/helper";
import { on } from "@ember/modifier";
import withEventValue from "discourse/helpers/with-event-value";
…
{{on "input" (withEventValue (fn (mut this.bar)))}}
```
54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
import { fillIn, render } from "@ember/test-helpers";
|
|
import { hbs } from "ember-cli-htmlbars";
|
|
import { module, test } from "qunit";
|
|
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
|
|
|
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" (with-event-value (fn (mut this.charCounterContent)))}}></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");
|
|
});
|
|
});
|