mirror of https://github.com/sveltejs/svelte
add updating guard to binding callback (#5126)
parent
5b80874cd4
commit
ec0f79c5af
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
export let value = '';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value />
|
@ -0,0 +1,61 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
<div></div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
let count = 0;
|
||||||
|
component.callback = () => {
|
||||||
|
count++;
|
||||||
|
};
|
||||||
|
|
||||||
|
const [input1, input2] = target.querySelectorAll("input");
|
||||||
|
|
||||||
|
input1.value = "1";
|
||||||
|
await input1.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
<div>1</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
assert.equal(input1.value, "1");
|
||||||
|
assert.equal(input2.value, "1");
|
||||||
|
assert.equal(count, 1);
|
||||||
|
|
||||||
|
input2.value = "123";
|
||||||
|
await input2.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
<div>123</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
assert.equal(input1.value, "123");
|
||||||
|
assert.equal(input2.value, "123");
|
||||||
|
assert.equal(count, 2);
|
||||||
|
|
||||||
|
input1.value = "456";
|
||||||
|
await input1.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
<div>456</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
assert.equal(input1.value, "456");
|
||||||
|
assert.equal(input2.value, "456");
|
||||||
|
assert.equal(count, 3);
|
||||||
|
},
|
||||||
|
};
|
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import Input from './Input.svelte';
|
||||||
|
|
||||||
|
let value = writable({ value: '' });
|
||||||
|
|
||||||
|
export let callback = () => {};
|
||||||
|
|
||||||
|
value.subscribe(() => {
|
||||||
|
callback();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value={$value.value} />
|
||||||
|
|
||||||
|
<Input bind:value={$value.value}/>
|
||||||
|
|
||||||
|
<div>{$value.value}</div>
|
Loading…
Reference in new issue