mirror of https://github.com/sveltejs/svelte
Conduitry
5 years ago
commit
26cae1fc46
@ -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,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,15 @@
|
|||||||
|
<script>
|
||||||
|
let open = false;
|
||||||
|
function toggle() {
|
||||||
|
open = !open;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div on:click={toggle}>
|
||||||
|
<slot name="target" {open}></slot>
|
||||||
|
|
||||||
|
<!-- This actually isn't necessary to reproduce. -->
|
||||||
|
{#if open}
|
||||||
|
<slot name="content"></slot>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
// overflow bitmask + slot missing `let:`
|
||||||
|
export default {
|
||||||
|
html: `
|
||||||
|
<div>
|
||||||
|
<button slot="target">Toggle inside 1</button>
|
||||||
|
</div>
|
||||||
|
<button>Toggle outside</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
const button = target.querySelectorAll('button')[1];
|
||||||
|
const div = target.querySelector('div');
|
||||||
|
await div.dispatchEvent(new window.MouseEvent('click'));
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>
|
||||||
|
<button slot="target">Toggle inside 1</button>
|
||||||
|
<div slot="content">Open</div>
|
||||||
|
</div>
|
||||||
|
<button>Toggle outside</button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>
|
||||||
|
<button slot="target">Toggle inside 2</button>
|
||||||
|
<div slot="content">Open</div>
|
||||||
|
</div>
|
||||||
|
<button>Toggle outside</button>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<script>
|
||||||
|
import Slotted from './Slotted.svelte';
|
||||||
|
let lotsOfNumbers = Array.from({length: 50}, () => 1);
|
||||||
|
|
||||||
|
let [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, aa, ab, ac, ad, ae, af, ag, ah] = lotsOfNumbers;
|
||||||
|
|
||||||
|
let last = 1;
|
||||||
|
function toggle () {
|
||||||
|
last = 2;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Slotted>
|
||||||
|
<button slot="target">
|
||||||
|
Toggle inside {last}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div slot="content">
|
||||||
|
Open
|
||||||
|
</div>
|
||||||
|
</Slotted>
|
||||||
|
|
||||||
|
<button on:click={toggle}>Toggle outside</button>
|
||||||
@ -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,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