mirror of https://github.com/sveltejs/svelte
Dominic Gannaway
9 months ago
committed by
GitHub
parent
d6f10c5421
commit
fe7c45ba13
@ -0,0 +1 @@
|
||||
<p>does nothing</p>
|
||||
@ -0,0 +1,16 @@
|
||||
import { test } from '../../test';
|
||||
// @ts-nocheck
|
||||
|
||||
export default test({
|
||||
test({ assert, component }) {
|
||||
let count = 0;
|
||||
|
||||
// @ts-ignore
|
||||
component.$on('state', ({ changed }) => {
|
||||
if (changed.bar) count += 1;
|
||||
});
|
||||
|
||||
component.x = true;
|
||||
assert.equal(count, 0);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import Widget from './Widget.svelte';
|
||||
|
||||
export let x = false;
|
||||
export let bar = {
|
||||
baz: 42
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if x}
|
||||
<Widget bind:foo={bar.baz}/>
|
||||
{/if}
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Level2 from './Level2.svelte';
|
||||
import Level3 from './Level3.svelte';
|
||||
</script>
|
||||
|
||||
<Level2>
|
||||
<Level3 />
|
||||
</Level2>
|
||||
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
import Level3 from './Level3.svelte';
|
||||
</script>
|
||||
|
||||
<span>level 2</span>
|
||||
<slot></slot>
|
||||
@ -0,0 +1 @@
|
||||
<span>level 3</span>
|
||||
@ -0,0 +1,8 @@
|
||||
import { test } from '../../test';
|
||||
import { unmount } from 'svelte';
|
||||
|
||||
export default test({
|
||||
test({ component }) {
|
||||
unmount(component.l1);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import Level1 from './Level1.svelte';
|
||||
|
||||
export let l1;
|
||||
</script>
|
||||
|
||||
<Level1 bind:this={l1} />
|
||||
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
const value = getContext('foo');
|
||||
</script>
|
||||
|
||||
<div>Value in child component: {value}</div>
|
||||
@ -0,0 +1,8 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip_if_ssr: true,
|
||||
html: `
|
||||
<div><div>Value in child component: </div></div>
|
||||
`
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import { setContext, mount } from 'svelte';
|
||||
import ChildComponent from './ChildComponent.svelte';
|
||||
|
||||
setContext('foo', true);
|
||||
|
||||
function render(node) {
|
||||
mount(ChildComponent, {
|
||||
target: node,
|
||||
context: new Map()
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div use:render />
|
||||
@ -0,0 +1,9 @@
|
||||
import { test } from '../../test';
|
||||
import { unmount } from 'svelte';
|
||||
|
||||
export default test({
|
||||
test({ component }) {
|
||||
unmount(component);
|
||||
unmount(component);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1 @@
|
||||
<div/>
|
||||
@ -0,0 +1,10 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip: true, // TODO: needs fixing
|
||||
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
error: '{#each} only works with iterable values.'
|
||||
});
|
||||
@ -0,0 +1,3 @@
|
||||
{#each {} as item}
|
||||
<div>{item}</div>
|
||||
{/each}
|
||||
@ -0,0 +1,23 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip: true, // TODO: needs fixing, error message is wrong
|
||||
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
get props() {
|
||||
return { a: 42 };
|
||||
},
|
||||
|
||||
test({ assert, component }) {
|
||||
try {
|
||||
component.foo = 1;
|
||||
throw new Error('Expected an error');
|
||||
} catch (err) {
|
||||
// @ts-ignore
|
||||
assert.equal(err.message, "<Main>: Cannot set read-only property 'foo'");
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export let a;
|
||||
|
||||
export function foo() {
|
||||
return a + 1;
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<p>value(1) = {value}</p>
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
export let value;
|
||||
</script>
|
||||
|
||||
<p>value(2) = {value}</p>
|
||||
@ -0,0 +1,32 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<p>value(1) = 1</p>
|
||||
<button>Toggle Component</button>
|
||||
`,
|
||||
|
||||
async test({ assert, component, window, target }) {
|
||||
const button = target.querySelector('button');
|
||||
// @ts-ignore
|
||||
await button.dispatchEvent(new window.Event('click'));
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>value(2) = 2</p>
|
||||
<button>Toggle Component</button>
|
||||
`
|
||||
);
|
||||
assert.equal(component.n, 2);
|
||||
// @ts-ignore
|
||||
await button.dispatchEvent(new window.Event('click'));
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>value(1) = 3</p>
|
||||
<button>Toggle Component</button>
|
||||
`
|
||||
);
|
||||
assert.equal(component.n, 3);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import Comp1 from './Comp1.svelte';
|
||||
import Comp2 from './Comp2.svelte';
|
||||
|
||||
export let n = 0;
|
||||
let view = { comp: Comp1, fn: () => ++n };
|
||||
</script>
|
||||
|
||||
<svelte:component this={view.comp} value={view.fn()}/>
|
||||
|
||||
<button on:click={e => view.comp = view.comp === Comp1 ? Comp2 : Comp1}>Toggle Component</button>
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
export let value;
|
||||
export let foo;
|
||||
export let cb;
|
||||
</script>
|
||||
|
||||
<p>value(1) = {value}</p>
|
||||
<p>foo={foo}</p>
|
||||
<p>typeof cb={typeof cb}</p>
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
export let value;
|
||||
export let foo;
|
||||
export let cb;
|
||||
</script>
|
||||
|
||||
<p>value(2) = {value}</p>
|
||||
<p>foo={foo}</p>
|
||||
<p>typeof cb={typeof cb}</p>
|
||||
@ -0,0 +1,36 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<p>value(1) = 1</p>
|
||||
<p>foo=bar</p>
|
||||
<p>typeof cb=function</p>
|
||||
<button>Toggle Component</button>
|
||||
`,
|
||||
|
||||
async test({ assert, window, target }) {
|
||||
const button = target.querySelector('button');
|
||||
// @ts-ignore
|
||||
await button.dispatchEvent(new window.Event('click'));
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>value(2) = 2</p>
|
||||
<p>foo=bar</p>
|
||||
<p>typeof cb=function</p>
|
||||
<button>Toggle Component</button>
|
||||
`
|
||||
);
|
||||
// @ts-ignore
|
||||
await button.dispatchEvent(new window.Event('click'));
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>value(1) = 1</p>
|
||||
<p>foo=bar</p>
|
||||
<p>typeof cb=function</p>
|
||||
<button>Toggle Component</button>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
import Comp1 from './Comp1.svelte';
|
||||
import Comp2 from './Comp2.svelte';
|
||||
|
||||
let view = Comp1;
|
||||
|
||||
$: props = view === Comp1 ? { value: 1 } : { value: 2 };
|
||||
const bar = "bar";
|
||||
function cb() {}
|
||||
</script>
|
||||
|
||||
<svelte:component this={view} {...props} foo={bar} {cb} />
|
||||
|
||||
<button on:click={(e) => (view = view === Comp1 ? Comp2 : Comp1)}>Toggle Component</button>
|
||||
@ -0,0 +1,8 @@
|
||||
|
||||
<script>
|
||||
import { onDestroy } from 'svelte';
|
||||
|
||||
onDestroy(() => {
|
||||
console.log('destroy');
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,38 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
/**
|
||||
* @type {{ (...data: any[]): void; (message?: any, ...optionalParams: any[]): void; (...data: any[]): void; (message?: any, ...optionalParams: any[]): void; }}
|
||||
*/
|
||||
let log;
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<button>destroy component</button>
|
||||
`,
|
||||
|
||||
before_test() {
|
||||
log = console.log;
|
||||
},
|
||||
after_test() {
|
||||
console.log = log;
|
||||
},
|
||||
|
||||
async test({ assert, target, window }) {
|
||||
const button = target.querySelector('button');
|
||||
const event = new window.MouseEvent('click');
|
||||
/**
|
||||
* @type {any[]}
|
||||
*/
|
||||
const messages = [];
|
||||
console.log = (msg) => messages.push(msg);
|
||||
// @ts-ignore
|
||||
await button.dispatchEvent(event);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>destroy component</button>
|
||||
`
|
||||
);
|
||||
assert.deepEqual(messages, ['destroy']);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Empty from './Empty.svelte';
|
||||
let active = true;
|
||||
</script>
|
||||
|
||||
<button on:click='{() => active = false }'>destroy component</button>
|
||||
|
||||
<svelte:component this={active ? Empty : null} />
|
||||
@ -0,0 +1,33 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
get props() {
|
||||
return { items: ['foo', 'bar', 'baz'] };
|
||||
},
|
||||
|
||||
html: `
|
||||
<button>foo</button>
|
||||
<button>bar</button>
|
||||
<button>baz</button>
|
||||
`,
|
||||
|
||||
test({ assert, component, target, window }) {
|
||||
const buttons = target.querySelectorAll('button');
|
||||
const event = new window.MouseEvent('click');
|
||||
|
||||
/**
|
||||
* @type {any[]}
|
||||
*/
|
||||
const clicked = [];
|
||||
|
||||
component.$on('clicked', (/** @type {{ detail: { node: any; }; }} */ event) => {
|
||||
clicked.push(event.detail.node);
|
||||
});
|
||||
|
||||
buttons[1].dispatchEvent(event);
|
||||
|
||||
assert.equal(clicked.length, 1);
|
||||
assert.equal(clicked[0].nodeName, 'BUTTON');
|
||||
assert.equal(clicked[0].textContent, 'bar');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let items;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
|
||||
{#each items as item}
|
||||
<button on:click='{e => dispatch("clicked", { node: e.target })}'>{item}</button>
|
||||
{/each}
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
|
||||
<button on:click='{() => dispatch("foo", { answer: 42 })}'>click me</button>
|
||||
@ -0,0 +1,21 @@
|
||||
import { ok, test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<button>click me</button>
|
||||
`,
|
||||
|
||||
test({ assert, component, target, window }) {
|
||||
const button = target.querySelector('button');
|
||||
const event = new window.MouseEvent('click');
|
||||
|
||||
let answer;
|
||||
component.$on('foo', (/** @type {{ detail: { answer: any; }; }} */ event) => {
|
||||
answer = event.detail.answer;
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
button.dispatchEvent(event);
|
||||
assert.equal(answer, 42);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import Widget from './Widget.svelte';
|
||||
</script>
|
||||
|
||||
<Widget on:foo/>
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
|
||||
<button on:click='{() => dispatch("foo", { answer: 42 })}'>click me</button>
|
||||
@ -0,0 +1,21 @@
|
||||
import { ok, test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<button>click me</button>
|
||||
`,
|
||||
|
||||
test({ assert, component, target, window }) {
|
||||
const button = target.querySelector('button');
|
||||
const event = new window.MouseEvent('click');
|
||||
|
||||
let answer;
|
||||
component.$on('foo', (/** @type {{ detail: { answer: any; }; }} */ event) => {
|
||||
answer = event.detail.answer;
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
button.dispatchEvent(event);
|
||||
assert.equal(answer, 42);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import Widget from './Widget.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:component this={Widget} on:foo/>
|
||||
@ -0,0 +1,21 @@
|
||||
import { ok, test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<button>click me now</button>
|
||||
`,
|
||||
|
||||
test({ assert, component, target, window }) {
|
||||
const button = target.querySelector('button');
|
||||
const event = new window.Event('click-now');
|
||||
|
||||
let clicked;
|
||||
component.$on('click-now', () => {
|
||||
clicked = true;
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
button.dispatchEvent(event);
|
||||
assert.ok(clicked);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1 @@
|
||||
<button on:click-now>click me now</button>
|
||||
Loading…
Reference in new issue