mirror of https://github.com/sveltejs/svelte
parent
1ef7601d69
commit
0bb40196db
@ -0,0 +1,44 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<input>
|
||||||
|
<div></div>
|
||||||
|
<div>simple</div>
|
||||||
|
<button>click me</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const input = target.querySelector('input');
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
|
||||||
|
const inputEvent = new window.InputEvent('input');
|
||||||
|
const clickEvent = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
input.value = 'foo';
|
||||||
|
await input.dispatchEvent(inputEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<input>
|
||||||
|
<div>foo</div>
|
||||||
|
<div>foo</div>
|
||||||
|
<button>click me</button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await button.dispatchEvent(clickEvent);
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<input>
|
||||||
|
<div>foo</div>
|
||||||
|
<div>clicked</div>
|
||||||
|
<button>click me</button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
input.value = 'bar';
|
||||||
|
await input.dispatchEvent(inputEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<input>
|
||||||
|
<div>bar</div>
|
||||||
|
<div>bar</div>
|
||||||
|
<button>click me</button>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,20 @@
|
|||||||
|
<script>
|
||||||
|
import {writable} from 'svelte/store';
|
||||||
|
|
||||||
|
function action(node, binding) {
|
||||||
|
return {
|
||||||
|
update: (value) => s.set(value),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let s = writable("simple");
|
||||||
|
let v = "";
|
||||||
|
|
||||||
|
function click() {
|
||||||
|
s.set('clicked');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input bind:value={v} use:action={v}>
|
||||||
|
<div>{v}</div>
|
||||||
|
<div>{$s}</div>
|
||||||
|
<button on:click={click}>click me</button>
|
@ -0,0 +1,44 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div></div>
|
||||||
|
<div>simple</div>
|
||||||
|
<input>
|
||||||
|
<button>click me</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const input = target.querySelector('input');
|
||||||
|
const button = target.querySelector('button');
|
||||||
|
|
||||||
|
const inputEvent = new window.InputEvent('input');
|
||||||
|
const clickEvent = new window.MouseEvent('click');
|
||||||
|
|
||||||
|
input.value = 'foo';
|
||||||
|
await input.dispatchEvent(inputEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>foo</div>
|
||||||
|
<div>foo</div>
|
||||||
|
<input>
|
||||||
|
<button>click me</button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await button.dispatchEvent(clickEvent);
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>foo</div>
|
||||||
|
<div>clicked</div>
|
||||||
|
<input>
|
||||||
|
<button>click me</button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
input.value = 'bar';
|
||||||
|
await input.dispatchEvent(inputEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>bar</div>
|
||||||
|
<div>bar</div>
|
||||||
|
<input>
|
||||||
|
<button>click me</button>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,20 @@
|
|||||||
|
<script>
|
||||||
|
import {writable} from 'svelte/store';
|
||||||
|
|
||||||
|
function action(node, binding) {
|
||||||
|
return {
|
||||||
|
update: (value) => s.set(value),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let s = writable("simple");
|
||||||
|
let v = "";
|
||||||
|
|
||||||
|
function click() {
|
||||||
|
s.set('clicked');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>{v}</div>
|
||||||
|
<div>{$s}</div>
|
||||||
|
<input bind:value={v} use:action={v}>
|
||||||
|
<button on:click={click}>click me</button>
|
Loading…
Reference in new issue