mirror of https://github.com/sveltejs/svelte
Conduitry
5 years ago
commit
e72b3f367e
File diff suppressed because it is too large
Load Diff
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
question: Is svelte.dev down?
|
|
||||||
---
|
|
||||||
|
|
||||||
Probably not, but it's possible. If you can't seem to access any `.dev` sites, check out [this SuperUser question and answer](https://superuser.com/q/1413402).
|
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { Node } from 'estree';
|
||||||
|
|
||||||
|
export default function replace_object(node: Node, replacement: Node) {
|
||||||
|
if (node.type === 'Identifier') return replacement;
|
||||||
|
|
||||||
|
const ancestor = node;
|
||||||
|
let parent;
|
||||||
|
while (node.type === 'MemberExpression') {
|
||||||
|
parent = node;
|
||||||
|
node = node.object;
|
||||||
|
}
|
||||||
|
parent.object = replacement;
|
||||||
|
return ancestor;
|
||||||
|
}
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import {
|
||||||
|
SvelteComponent,
|
||||||
|
detach,
|
||||||
|
element,
|
||||||
|
init,
|
||||||
|
insert,
|
||||||
|
listen,
|
||||||
|
noop,
|
||||||
|
safe_not_equal
|
||||||
|
} from "svelte/internal";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let button;
|
||||||
|
let mounted;
|
||||||
|
let dispose;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
button = element("button");
|
||||||
|
},
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, button, anchor);
|
||||||
|
|
||||||
|
if (!mounted) {
|
||||||
|
dispose = listen(button, "click", /*click_handler*/ ctx[1]);
|
||||||
|
mounted = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
p: noop,
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d(detaching) {
|
||||||
|
if (detaching) detach(button);
|
||||||
|
mounted = false;
|
||||||
|
dispose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function instance($$self, $$props, $$invalidate) {
|
||||||
|
let foo;
|
||||||
|
|
||||||
|
function unreferenced() {
|
||||||
|
$$invalidate(0, foo = 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const click_handler = () => $$invalidate(0, foo = 2);
|
||||||
|
return [foo, click_handler];
|
||||||
|
}
|
||||||
|
|
||||||
|
class Component extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Component;
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
let foo;
|
||||||
|
function unreferenced () {
|
||||||
|
foo = 1;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<button on:click={() => foo = 2}></button>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"code": "css-syntax-error",
|
||||||
|
"message": ":global() must contain a selector",
|
||||||
|
"start": {
|
||||||
|
"line": 2,
|
||||||
|
"column": 1,
|
||||||
|
"character": 9
|
||||||
|
},
|
||||||
|
"pos": 9
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<style>
|
||||||
|
:global {}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
items: [],
|
||||||
|
selected: 'two'
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<select></select>
|
||||||
|
<p>selected: two</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
ssrHtml: `
|
||||||
|
<select value="two"></select>
|
||||||
|
<p>selected: two</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
component.items = [ 'one', 'two', 'three' ];
|
||||||
|
|
||||||
|
const options = target.querySelectorAll('option');
|
||||||
|
assert.ok(!options[0].selected);
|
||||||
|
assert.ok(options[1].selected);
|
||||||
|
assert.ok(!options[2].selected);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<select>
|
||||||
|
<option value='one'>one</option>
|
||||||
|
<option value='two'>two</option>
|
||||||
|
<option value='three'>three</option>
|
||||||
|
</select>
|
||||||
|
<p>selected: two</p>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
export let selected;
|
||||||
|
export let items;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<select bind:value={selected}>
|
||||||
|
{#each items as item}
|
||||||
|
<option>{item}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<p>selected: {selected || 'nothing'}</p>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
export let action;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div use:action />
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
export default {
|
||||||
|
test({ assert, component, raf }) {
|
||||||
|
assert.equal(component.count, 0);
|
||||||
|
|
||||||
|
component.arr = ["2"];
|
||||||
|
|
||||||
|
assert.equal(component.count, 1);
|
||||||
|
|
||||||
|
component.arr = ["1", "2"];
|
||||||
|
|
||||||
|
assert.equal(component.count, 2);
|
||||||
|
|
||||||
|
component.arr = ["2", "1"];
|
||||||
|
|
||||||
|
assert.equal(component.count, 2);
|
||||||
|
|
||||||
|
component.arr = [];
|
||||||
|
|
||||||
|
assert.equal(component.count, 0);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
import Component from "./Component.svelte";
|
||||||
|
export let arr = [];
|
||||||
|
export let count = 0;
|
||||||
|
function action(node, params) {
|
||||||
|
count += 1;
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
count -= 1;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each arr as item (item)}
|
||||||
|
<Component {action} />
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
Hello
|
||||||
|
<input />
|
||||||
|
`,
|
||||||
|
ssrHtml: `
|
||||||
|
Hello
|
||||||
|
<input value="Hello"/>
|
||||||
|
`,
|
||||||
|
async test({ assert, target, window }) {
|
||||||
|
const input = target.querySelector("input");
|
||||||
|
input.value = "abcd";
|
||||||
|
await input.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
abcd
|
||||||
|
<input />
|
||||||
|
`
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
let a = [
|
||||||
|
{ a: 'Hello' }
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each a as { a }}
|
||||||
|
{a}
|
||||||
|
<input bind:value={a} />
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>
|
||||||
|
Hello World
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Sapper App
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
ssrHtml: `
|
||||||
|
<div>
|
||||||
|
Hello World
|
||||||
|
<input value="Hello"/>
|
||||||
|
<input value="World"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Sapper App
|
||||||
|
<input value="Sapper"/>
|
||||||
|
<input value="App"/>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
async test({ assert, target, window }) {
|
||||||
|
const [input1, input2, input3, input4] = target.querySelectorAll("input");
|
||||||
|
input1.value = "Awesome";
|
||||||
|
await input1.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<div>
|
||||||
|
Awesome World
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Sapper App
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
input2.value = "Svelte";
|
||||||
|
await input2.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<div>
|
||||||
|
Awesome Svelte
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Sapper App
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
input3.value = "Foo";
|
||||||
|
await input3.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<div>
|
||||||
|
Awesome Svelte
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Foo App
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
input4.value = "Bar";
|
||||||
|
await input4.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<div>
|
||||||
|
Awesome Svelte
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Foo Bar
|
||||||
|
<input />
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<script>
|
||||||
|
let a = [
|
||||||
|
['Hello', 'World'],
|
||||||
|
['Sapper', 'App'],
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each a as a}
|
||||||
|
<div>
|
||||||
|
{a[0]} {a[1]}
|
||||||
|
<input bind:value={a[0]}>
|
||||||
|
<input bind:value={a[1]}>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>
|
||||||
|
b: Hello
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
<button>Button</button>
|
||||||
|
`,
|
||||||
|
ssrHtml: `
|
||||||
|
<div>
|
||||||
|
b: Hello
|
||||||
|
<input value="Hello" />
|
||||||
|
</div>
|
||||||
|
<button>Button</button>
|
||||||
|
`,
|
||||||
|
async test({ assert, target, window }) {
|
||||||
|
const input = target.querySelector("input");
|
||||||
|
const button = target.querySelector("button");
|
||||||
|
|
||||||
|
input.value = "Awesome";
|
||||||
|
await input.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<div>
|
||||||
|
b: Awesome
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
<button>Button</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
await button.dispatchEvent(new window.MouseEvent("click"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<div>
|
||||||
|
c: World
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
<button>Button</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
assert.equal(input.value, 'World');
|
||||||
|
|
||||||
|
input.value = "Svelte";
|
||||||
|
await input.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<div>
|
||||||
|
c: Svelte
|
||||||
|
<input />
|
||||||
|
</div>
|
||||||
|
<button>Button</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<script>
|
||||||
|
let a = [
|
||||||
|
{ a: { b: 'Hello', c: 'World' }, key: 'b' },
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each a as { a, key }}
|
||||||
|
<div>
|
||||||
|
{key}: {a[key]}
|
||||||
|
<input bind:value={a[key]}>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<button on:click={() => a[0].key = 'c'}>Button</button>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
Hello
|
||||||
|
<input />
|
||||||
|
`,
|
||||||
|
ssrHtml: `
|
||||||
|
Hello
|
||||||
|
<input value="Hello"/>
|
||||||
|
`,
|
||||||
|
async test({ assert, target, window }) {
|
||||||
|
const input = target.querySelector("input");
|
||||||
|
input.value = "abcd";
|
||||||
|
await input.dispatchEvent(new window.Event("input"));
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
abcd
|
||||||
|
<input />
|
||||||
|
`
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
let a = [
|
||||||
|
'Hello'
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each a as a}
|
||||||
|
{a}
|
||||||
|
<input bind:value={a} />
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<span class="content">foo</span>
|
||||||
|
<button>Test</button>
|
||||||
|
`,
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const button = target.querySelector("button");
|
||||||
|
|
||||||
|
const clickEvent = new window.MouseEvent("click");
|
||||||
|
await button.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<span class="content">bar</span>
|
||||||
|
<button>Test</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
let obj = {
|
||||||
|
prop: "foo"
|
||||||
|
};
|
||||||
|
|
||||||
|
let arr = [obj]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each arr as o}
|
||||||
|
<span class="content">{o.prop}</span>
|
||||||
|
<button on:click={ () => o = { ...o, prop: "bar" } }>Test</button>
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,97 @@
|
|||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<button>Add</button>
|
||||||
|
<span class="content">1</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">2</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">3</span>
|
||||||
|
<button>Test</button>
|
||||||
|
`,
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
let [incrementBtn, ...buttons] = target.querySelectorAll("button");
|
||||||
|
|
||||||
|
const clickEvent = new window.MouseEvent("click");
|
||||||
|
await buttons[0].dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>Add</button>
|
||||||
|
<span class="content">2</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">2</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">3</span>
|
||||||
|
<button>Test</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
await buttons[0].dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>Add</button>
|
||||||
|
<span class="content">4</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">2</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">3</span>
|
||||||
|
<button>Test</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
await buttons[2].dispatchEvent(clickEvent);
|
||||||
|
await buttons[2].dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>Add</button>
|
||||||
|
<span class="content">4</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">2</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">12</span>
|
||||||
|
<button>Test</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
await incrementBtn.dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>Add</button>
|
||||||
|
<span class="content">4</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">2</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">12</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">4</span>
|
||||||
|
<button>Test</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
[incrementBtn, ...buttons] = target.querySelectorAll("button");
|
||||||
|
|
||||||
|
await buttons[3].dispatchEvent(clickEvent);
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>Add</button>
|
||||||
|
<span class="content">4</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">2</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">12</span>
|
||||||
|
<button>Test</button>
|
||||||
|
<span class="content">8</span>
|
||||||
|
<button>Test</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
let obj = {
|
||||||
|
prop: "foo"
|
||||||
|
};
|
||||||
|
|
||||||
|
let arr = [1, 2, 3]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={() => arr = [...arr, arr.length + 1]}>Add</button>
|
||||||
|
{#each arr as o}
|
||||||
|
<span class="content">{o}</span>
|
||||||
|
<button on:click={() => { o *= 2; }}>Test</button>
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
raw: "<tr><td>1</td><td>2</td></tr>",
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>5</td><td>7</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1</td><td>2</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
`,
|
||||||
|
};
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
export let raw;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>5</td><td>7</td>
|
||||||
|
</tr>
|
||||||
|
{@html raw}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
let value;
|
||||||
|
let called = 0;
|
||||||
|
function callback(_value) {
|
||||||
|
called ++;
|
||||||
|
value = _value;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
callback,
|
||||||
|
},
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
assert.equal(called, 1);
|
||||||
|
|
||||||
|
const input = target.querySelector('input');
|
||||||
|
|
||||||
|
const event = new window.Event('input');
|
||||||
|
input.value = 'h';
|
||||||
|
await input.dispatchEvent(event);
|
||||||
|
|
||||||
|
assert.equal(called, 2);
|
||||||
|
assert.equal(value.length, 3);
|
||||||
|
assert.equal(value[0], 'h');
|
||||||
|
assert.equal(value[1], '2');
|
||||||
|
assert.equal(value[2], '3');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script>
|
||||||
|
const refs = ['1','2','3']
|
||||||
|
export let callback = () => {};
|
||||||
|
|
||||||
|
$: callback(refs);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each refs as ref}
|
||||||
|
<input bind:value={ref} />
|
||||||
|
{/each}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
export default {
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const [input1, input2] = target.querySelectorAll('input');
|
||||||
|
const select = target.querySelector('select');
|
||||||
|
const [option1, option2] = select.childNodes;
|
||||||
|
|
||||||
|
let selections = Array.from(select.selectedOptions);
|
||||||
|
assert.equal(selections.length, 2);
|
||||||
|
assert.ok(selections.includes(option1));
|
||||||
|
assert.ok(selections.includes(option2));
|
||||||
|
|
||||||
|
const event = new window.Event('change');
|
||||||
|
|
||||||
|
input1.checked = false;
|
||||||
|
await input1.dispatchEvent(event);
|
||||||
|
|
||||||
|
selections = Array.from(select.selectedOptions);
|
||||||
|
assert.equal(selections.length, 1);
|
||||||
|
assert.ok(!selections.includes(option1));
|
||||||
|
assert.ok(selections.includes(option2));
|
||||||
|
|
||||||
|
input2.checked = false;
|
||||||
|
await input2.dispatchEvent(event);
|
||||||
|
input1.checked = true;
|
||||||
|
await input1.dispatchEvent(event);
|
||||||
|
|
||||||
|
selections = Array.from(select.selectedOptions);
|
||||||
|
assert.equal(selections.length, 1);
|
||||||
|
assert.ok(selections.includes(option1));
|
||||||
|
assert.ok(!selections.includes(option2));
|
||||||
|
|
||||||
|
component.spread = { value: ['Hello', 'World'] };
|
||||||
|
|
||||||
|
selections = Array.from(select.selectedOptions);
|
||||||
|
assert.equal(selections.length, 2);
|
||||||
|
assert.ok(selections.includes(option1));
|
||||||
|
assert.ok(selections.includes(option2));
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
let value = ['Hello', 'World'];
|
||||||
|
export let spread = {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<select multiple {value} {...spread}>
|
||||||
|
<option>Hello</option>
|
||||||
|
<option>World</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<input type="checkbox" value="Hello" bind:group={value}>
|
||||||
|
<input type="checkbox" value="World" bind:group={value}>
|
||||||
Loading…
Reference in new issue