mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
commit
3da8562688
@ -0,0 +1,8 @@
|
||||
<div>
|
||||
<slot name="header1" />
|
||||
<slot name="-header2_" />
|
||||
<slot name="3header" />
|
||||
<slot name="_header4" />
|
||||
<slot name="header-5" />
|
||||
<slot name="header&5" />
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
html: `
|
||||
<div>
|
||||
<h1 slot="header1">Header 1</h1>
|
||||
<h2 slot="-header2_">Header 2</h2>
|
||||
<h3 slot="3header">Header 3</h3>
|
||||
<h4 slot="_header4">Header 4</h4>
|
||||
<h5 slot="header-5">Header 5</h5>
|
||||
<h5 slot="header&5">Header 5b</h5>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
</script>
|
||||
|
||||
<Nested>
|
||||
<h1 slot="header1">Header 1</h1>
|
||||
<h2 slot="-header2_">Header 2</h2>
|
||||
<h3 slot="3header">Header 3</h3>
|
||||
<h4 slot="_header4">Header 4</h4>
|
||||
<h5 slot="header-5">Header 5</h5>
|
||||
<h5 slot="header&5">Header 5b</h5>
|
||||
</Nested>
|
||||
@ -0,0 +1,35 @@
|
||||
export default {
|
||||
html: `
|
||||
<button>off</button>
|
||||
<button>on</button>
|
||||
<button>off</button>
|
||||
<p>on: 1</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const buttons = target.querySelectorAll('button');
|
||||
const event = new window.MouseEvent('click');
|
||||
|
||||
await buttons[0].dispatchEvent(event);
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<button>on</button>
|
||||
<button>on</button>
|
||||
<button>off</button>
|
||||
<p>on: 2</p>
|
||||
`);
|
||||
|
||||
await buttons[2].dispatchEvent(event);
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<button>on</button>
|
||||
<button>on</button>
|
||||
<button>on</button>
|
||||
<p>on: 3</p>
|
||||
`);
|
||||
|
||||
assert.deepEqual(component.switches, [
|
||||
{ on: true },
|
||||
{ on: true },
|
||||
{ on: true }
|
||||
]);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
export let switches = [
|
||||
{ on: false },
|
||||
{ on: true },
|
||||
{ on: false }
|
||||
];
|
||||
</script>
|
||||
|
||||
{#each switches as s}
|
||||
<button on:click="{() => s.on = !s.on}">
|
||||
{s.on ? 'on' : 'off'}
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
<p>on: {switches.filter(s => !!s.on).length}</p>
|
||||
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
$: $missingGlobal;
|
||||
</script>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
error: 'missingGlobal is not defined'
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
export let visible;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if visible}
|
||||
<slot/>
|
||||
{/if}
|
||||
</div>
|
||||
@ -0,0 +1,26 @@
|
||||
export default {
|
||||
props: {
|
||||
visible: false
|
||||
},
|
||||
|
||||
html: `
|
||||
<div></div>
|
||||
`,
|
||||
|
||||
test({ assert, component, target, window, raf }) {
|
||||
component.visible = true;
|
||||
const p = target.querySelector('p');
|
||||
assert.equal(p.foo, 0);
|
||||
|
||||
raf.tick(50);
|
||||
assert.equal(p.foo, 0.5);
|
||||
|
||||
component.visible = false;
|
||||
|
||||
raf.tick(75);
|
||||
assert.equal(p.foo, 0.25);
|
||||
|
||||
raf.tick(100);
|
||||
assert.equal(p.foo, 0);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
|
||||
export let visible;
|
||||
|
||||
function foo(node, params) {
|
||||
return {
|
||||
duration: 100,
|
||||
tick: t => {
|
||||
node.foo = t;
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<Nested {visible}>
|
||||
<p transition:foo>slotted</p>
|
||||
</Nested>
|
||||
@ -1,5 +1,7 @@
|
||||
<script>
|
||||
import hoistable_foo from '';
|
||||
let foo;
|
||||
</script>
|
||||
|
||||
<div use:hoistable_foo/>
|
||||
<div use:foo/>
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
<script>
|
||||
import hoistable_foo from '';
|
||||
let foo;
|
||||
</script>
|
||||
|
||||
{#each [] as x (x)}
|
||||
<div animate:hoistable_foo/>
|
||||
{/each}
|
||||
{#each [] as x (x)}
|
||||
<div animate:foo/>
|
||||
{/each}
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
<script>
|
||||
import { hoistable_foo, hoistable_bar, hoistable_baz } from '';
|
||||
let foo;
|
||||
let bar;
|
||||
let baz;
|
||||
</script>
|
||||
|
||||
<div in:hoistable_foo/>
|
||||
<div out:hoistable_bar/>
|
||||
<div transition:hoistable_baz/>
|
||||
<div in:foo/>
|
||||
<div out:bar/>
|
||||
<div transition:baz/>
|
||||
|
||||
Loading…
Reference in new issue