mirror of https://github.com/sveltejs/svelte
parent
b6c7956b26
commit
d6f10c5421
@ -0,0 +1,27 @@
|
||||
<script>
|
||||
import { afterUpdate, onDestroy } from "svelte";
|
||||
|
||||
export let id;
|
||||
export let items;
|
||||
|
||||
let item = $items[id];
|
||||
let selected = true;
|
||||
|
||||
function onClick() {
|
||||
selected = !selected;
|
||||
items.set({});
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
console.log("onDestroy");
|
||||
});
|
||||
|
||||
afterUpdate(() => {
|
||||
console.log("afterUpdate");
|
||||
});
|
||||
</script>
|
||||
|
||||
<button on:click="{onClick}">Click Me</button>
|
||||
{#if selected}
|
||||
<div>{item.id}</div>
|
||||
{/if}
|
@ -0,0 +1,29 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip: true, // TODO: needs fixing
|
||||
|
||||
html: `
|
||||
<button>Click Me</button>
|
||||
<div>1</div>
|
||||
`,
|
||||
async test({ assert, target, window }) {
|
||||
const button = target.querySelector('button');
|
||||
const event = new window.MouseEvent('click');
|
||||
/**
|
||||
* @type {any[]}
|
||||
*/
|
||||
const messages = [];
|
||||
const log = console.log;
|
||||
console.log = (msg) => messages.push(msg);
|
||||
|
||||
flushSync(() => {
|
||||
// @ts-ignore
|
||||
button.dispatchEvent(event);
|
||||
});
|
||||
|
||||
console.log = log;
|
||||
assert.deepEqual(messages, ['afterUpdate', 'onDestroy']);
|
||||
}
|
||||
});
|
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { writable } from 'svelte/store';
|
||||
import Component from "./Component.svelte";
|
||||
|
||||
let items = writable({ 1: { id: 1 } });
|
||||
</script>
|
||||
|
||||
{#each Object.values($items) as item (item.id)}
|
||||
<Component id="{item.id}" {items} />
|
||||
{/each}
|
@ -0,0 +1,25 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip_if_ssr: true,
|
||||
|
||||
get props() {
|
||||
return { value: 'hello!' };
|
||||
},
|
||||
|
||||
html: `
|
||||
<p>hello!</p>
|
||||
<p>hello!</p>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.value = 'goodbye!';
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>goodbye!</p>
|
||||
<p>goodbye!</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import { afterUpdate } from 'svelte';
|
||||
|
||||
export let value;
|
||||
let mirror;
|
||||
|
||||
afterUpdate(() => {
|
||||
mirror = value;
|
||||
});
|
||||
</script>
|
||||
|
||||
<p>{value}</p>
|
||||
<p>{mirror}</p>
|
@ -0,0 +1,25 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip_if_ssr: true,
|
||||
|
||||
get props() {
|
||||
return { value: 'hello!' };
|
||||
},
|
||||
|
||||
html: `
|
||||
<p>hello!</p>
|
||||
<p>hello!</p>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.value = 'goodbye!';
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>goodbye!</p>
|
||||
<p>goodbye!</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import { afterUpdate } from 'svelte';
|
||||
|
||||
export let a;
|
||||
export let b;
|
||||
|
||||
export let value;
|
||||
|
||||
afterUpdate(() => {
|
||||
b.textContent = a.textContent;
|
||||
});
|
||||
</script>
|
||||
|
||||
<p bind:this={a}>{value}</p>
|
||||
<p bind:this={b}></p>
|
@ -0,0 +1,61 @@
|
||||
// @ts-nocheck
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip: true, // TODO: needs fixing
|
||||
|
||||
get props() {
|
||||
return {
|
||||
things: [
|
||||
{ id: 1, name: 'a' },
|
||||
{ id: 2, name: 'b' },
|
||||
{ id: 3, name: 'c' },
|
||||
{ id: 4, name: 'd' },
|
||||
{ id: 5, name: 'e' }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
html: `
|
||||
<div>a</div>
|
||||
<div>b</div>
|
||||
<div>c</div>
|
||||
<div>d</div>
|
||||
<div>e</div>
|
||||
`,
|
||||
|
||||
test({ assert, component, target, raf }) {
|
||||
let divs = target.querySelectorAll('div');
|
||||
divs.forEach((div) => {
|
||||
div.getBoundingClientRect = function () {
|
||||
const index = [...this.parentNode.children].indexOf(this);
|
||||
const top = index * 30;
|
||||
|
||||
return {
|
||||
left: 0,
|
||||
right: 100,
|
||||
top,
|
||||
bottom: top + 20
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
component.things = [
|
||||
{ id: 5, name: 'e' },
|
||||
{ id: 2, name: 'b' },
|
||||
{ id: 3, name: 'c' },
|
||||
{ id: 4, name: 'd' },
|
||||
{ id: 1, name: 'a' }
|
||||
];
|
||||
|
||||
divs = target.querySelectorAll('div');
|
||||
assert.ok(~divs[0].style.animation.indexOf('__svelte'));
|
||||
assert.equal(divs[1].style.animation, '');
|
||||
assert.equal(divs[2].style.animation, '');
|
||||
assert.equal(divs[3].style.animation, '');
|
||||
assert.ok(~divs[4].style.animation.indexOf('__svelte'));
|
||||
|
||||
raf.tick(100);
|
||||
assert.deepEqual([divs[0].style.animation, divs[4].style.animation], ['', '']);
|
||||
}
|
||||
});
|
@ -0,0 +1,17 @@
|
||||
<script>
|
||||
export let things;
|
||||
|
||||
function flip(node, animation, params) {
|
||||
const dx = animation.from.left - animation.to.left;
|
||||
const dy = animation.from.top - animation.to.top;
|
||||
|
||||
return {
|
||||
duration: 100,
|
||||
css: (t, u) => `transform: translate(${u + dx}px, ${u * dy}px)`
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each things as thing (thing.id)}
|
||||
<div animate:flip>{thing.name}</div>
|
||||
{/each}
|
@ -0,0 +1,91 @@
|
||||
// @ts-nocheck
|
||||
import { ok, test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip: true, // TODO: needs fixing
|
||||
|
||||
get props() {
|
||||
return {
|
||||
things: [
|
||||
{ id: 1, name: 'a' },
|
||||
{ id: 2, name: 'b' },
|
||||
{ id: 3, name: 'c' },
|
||||
{ id: 4, name: 'd' },
|
||||
{ id: 5, name: 'e' }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
html: `
|
||||
<div>a</div>
|
||||
<div>b</div>
|
||||
<div>c</div>
|
||||
<div>d</div>
|
||||
<div>e</div>
|
||||
`,
|
||||
|
||||
test({ assert, component, window, raf }) {
|
||||
let divs = window.document.querySelectorAll('div');
|
||||
divs.forEach((div) => {
|
||||
div.getBoundingClientRect = function () {
|
||||
const index = [...this.parentNode.children].indexOf(this);
|
||||
const top = index * 30;
|
||||
|
||||
return {
|
||||
left: 0,
|
||||
right: 100,
|
||||
top,
|
||||
bottom: top + 20
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
component.things = [
|
||||
{ id: 5, name: 'e' },
|
||||
{ id: 2, name: 'b' },
|
||||
{ id: 3, name: 'c' },
|
||||
{ id: 4, name: 'd' },
|
||||
{ id: 1, name: 'a' }
|
||||
];
|
||||
|
||||
divs = window.document.querySelectorAll('div');
|
||||
assert.equal(divs[0].dy, 120);
|
||||
assert.equal(divs[4].dy, -120);
|
||||
|
||||
raf.tick(50);
|
||||
assert.equal(divs[0].dy, 108);
|
||||
assert.equal(divs[4].dy, -60);
|
||||
|
||||
raf.tick(100);
|
||||
assert.equal(divs[0].dy, 48);
|
||||
assert.equal(divs[4].dy, 0);
|
||||
|
||||
raf.tick(150);
|
||||
assert.equal(divs[0].dy, 0);
|
||||
assert.equal(divs[4].dy, 0);
|
||||
|
||||
component.things = [
|
||||
{ id: 1, name: 'a' },
|
||||
{ id: 2, name: 'b' },
|
||||
{ id: 3, name: 'c' },
|
||||
{ id: 4, name: 'd' },
|
||||
{ id: 5, name: 'e' }
|
||||
];
|
||||
|
||||
divs = document.querySelectorAll('div');
|
||||
assert.equal(divs[0].dy, 120);
|
||||
assert.equal(divs[4].dy, -120);
|
||||
|
||||
raf.tick(200);
|
||||
assert.equal(divs[0].dy, 108);
|
||||
assert.equal(divs[4].dy, -60);
|
||||
|
||||
raf.tick(250);
|
||||
assert.equal(divs[0].dy, 48);
|
||||
assert.equal(divs[4].dy, 0);
|
||||
|
||||
raf.tick(300);
|
||||
assert.equal(divs[0].dy, 0);
|
||||
assert.equal(divs[4].dy, 0);
|
||||
}
|
||||
});
|
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
export let things;
|
||||
|
||||
function flip(node, animation, params) {
|
||||
const dx = animation.from.left - animation.to.left;
|
||||
const dy = animation.from.top - animation.to.top;
|
||||
|
||||
return {
|
||||
delay: params.delay,
|
||||
duration: 100,
|
||||
tick: (t, u) => {
|
||||
node.dx = u * dx;
|
||||
node.dy = u * dy;
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each things as thing, i (thing.id)}
|
||||
<div animate:flip="{{delay: i * 10}}">{thing.name}</div>
|
||||
{/each}
|
@ -0,0 +1,61 @@
|
||||
// @ts-nocheck
|
||||
import { ok, test } from '../../test';
|
||||
|
||||
export default test({
|
||||
get props() {
|
||||
return {
|
||||
things: [
|
||||
{ id: 1, name: 'a' },
|
||||
{ id: 2, name: 'b' },
|
||||
{ id: 3, name: 'c' },
|
||||
{ id: 4, name: 'd' },
|
||||
{ id: 5, name: 'e' }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
html: `
|
||||
<div>a</div>
|
||||
<div>b</div>
|
||||
<div>c</div>
|
||||
<div>d</div>
|
||||
<div>e</div>
|
||||
`,
|
||||
|
||||
test({ assert, component, raf }) {
|
||||
let divs = document.querySelectorAll('div');
|
||||
divs.forEach((div) => {
|
||||
div.getBoundingClientRect = function () {
|
||||
const index = [...this.parentNode.children].indexOf(this);
|
||||
const top = index * 30;
|
||||
|
||||
return {
|
||||
left: 0,
|
||||
right: 100,
|
||||
top,
|
||||
bottom: top + 20
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
component.things = [
|
||||
{ id: 5, name: 'e' },
|
||||
{ id: 2, name: 'b' },
|
||||
{ id: 3, name: 'c' },
|
||||
{ id: 4, name: 'd' },
|
||||
{ id: 1, name: 'a' }
|
||||
];
|
||||
|
||||
divs = document.querySelectorAll('div');
|
||||
assert.equal(divs[0].dy, 120);
|
||||
assert.equal(divs[4].dy, -120);
|
||||
|
||||
raf.tick(50);
|
||||
assert.equal(divs[0].dy, 60);
|
||||
assert.equal(divs[4].dy, -60);
|
||||
|
||||
raf.tick(100);
|
||||
assert.equal(divs[0].dy, 0);
|
||||
assert.equal(divs[4].dy, 0);
|
||||
}
|
||||
});
|
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
export let things;
|
||||
|
||||
export function linear(t) {
|
||||
return t;
|
||||
}
|
||||
|
||||
function flip(node, animation, params) {
|
||||
const dx = animation.from.left - animation.to.left;
|
||||
const dy = animation.from.top - animation.to.top;
|
||||
|
||||
return {
|
||||
duration: 100,
|
||||
easing: linear,
|
||||
tick: (t, u) => {
|
||||
node.dx = u * dx;
|
||||
node.dy = u * dy;
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each things as thing (thing.id)}
|
||||
<div animate:flip>{thing.name}</div>
|
||||
{/each}
|
@ -0,0 +1,82 @@
|
||||
// @ts-nocheck
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
get props() {
|
||||
return {
|
||||
things: [
|
||||
{ id: 1, name: 'a' },
|
||||
{ id: 2, name: 'b' },
|
||||
{ id: 3, name: 'c' },
|
||||
{ id: 4, name: 'd' },
|
||||
{ id: 5, name: 'e' }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
html: `
|
||||
<div>a</div>
|
||||
<div>b</div>
|
||||
<div>c</div>
|
||||
<div>d</div>
|
||||
<div>e</div>
|
||||
`,
|
||||
|
||||
test({ assert, component, raf }) {
|
||||
let divs = document.querySelectorAll('div');
|
||||
divs.forEach((div) => {
|
||||
div.getBoundingClientRect = function () {
|
||||
const index = [...this.parentNode.children].indexOf(this);
|
||||
const top = index * 30;
|
||||
|
||||
return {
|
||||
left: 0,
|
||||
right: 100,
|
||||
top,
|
||||
bottom: top + 20
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
component.things = [
|
||||
{ id: 5, name: 'e' },
|
||||
{ id: 2, name: 'b' },
|
||||
{ id: 3, name: 'c' },
|
||||
{ id: 4, name: 'd' },
|
||||
{ id: 1, name: 'a' }
|
||||
];
|
||||
|
||||
divs = document.querySelectorAll('div');
|
||||
assert.equal(divs[0].dy, 120);
|
||||
assert.equal(divs[4].dy, -120);
|
||||
|
||||
raf.tick(50);
|
||||
assert.equal(divs[0].dy, 60);
|
||||
assert.equal(divs[4].dy, -60);
|
||||
|
||||
raf.tick(100);
|
||||
assert.equal(divs[0].dy, 0);
|
||||
assert.equal(divs[4].dy, 0);
|
||||
|
||||
component.things = [
|
||||
{ id: 1, name: 'a' },
|
||||
{ id: 2, name: 'b' },
|
||||
{ id: 3, name: 'c' },
|
||||
{ id: 4, name: 'd' },
|
||||
{ id: 5, name: 'e' }
|
||||
];
|
||||
|
||||
divs = document.querySelectorAll('div');
|
||||
|
||||
assert.equal(divs[0].dy, 120);
|
||||
assert.equal(divs[4].dy, -120);
|
||||
|
||||
raf.tick(150);
|
||||
assert.equal(divs[0].dy, 60);
|
||||
assert.equal(divs[4].dy, -60);
|
||||
|
||||
raf.tick(200);
|
||||
assert.equal(divs[0].dy, 0);
|
||||
assert.equal(divs[4].dy, 0);
|
||||
}
|
||||
});
|
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
export let things;
|
||||
|
||||
function flip(node, animation, params) {
|
||||
const dx = animation.from.left - animation.to.left;
|
||||
const dy = animation.from.top - animation.to.top;
|
||||
|
||||
return {
|
||||
duration: 100,
|
||||
tick: (t, u) => {
|
||||
node.dx = u * dx;
|
||||
node.dy = u * dy;
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each things as thing (thing.id)}
|
||||
<div animate:flip>{thing.name}</div>
|
||||
{/each}
|
@ -0,0 +1,24 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip: true, // TODO: needs fixing
|
||||
|
||||
html: `
|
||||
<page horizontalAlignment="center">
|
||||
<button textWrap="true" text="button"></button>
|
||||
<text wordWrap="true"></text>
|
||||
</page>
|
||||
`,
|
||||
skip_if_hydrate: true,
|
||||
|
||||
compileOptions: {
|
||||
namespace: 'foreign'
|
||||
},
|
||||
test({ assert, target }) {
|
||||
// @ts-ignore
|
||||
const attr = (/** @type {string} */ sel) => target.querySelector(sel).attributes[0].name;
|
||||
assert.equal(attr('page'), 'horizontalAlignment');
|
||||
assert.equal(attr('button'), 'textWrap');
|
||||
assert.equal(attr('text'), 'wordWrap');
|
||||
}
|
||||
});
|
@ -0,0 +1,4 @@
|
||||
<page horizontalAlignment="center">
|
||||
<button textWrap="true" text="button" />
|
||||
<text wordWrap="true" />
|
||||
</page>
|
@ -0,0 +1,19 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip: true, // TODO: needs fixing
|
||||
|
||||
html: `
|
||||
<page horizontalAlignment="center">
|
||||
<button textWrap="true" text="button">
|
||||
</page>
|
||||
`,
|
||||
skip_if_hydrate: true,
|
||||
|
||||
test({ assert, target }) {
|
||||
// @ts-ignore
|
||||
const attr = (/** @type {string} */ sel) => target.querySelector(sel).attributes[0].name;
|
||||
assert.equal(attr('page'), 'horizontalAlignment');
|
||||
assert.equal(attr('button'), 'textWrap');
|
||||
}
|
||||
});
|
@ -0,0 +1,4 @@
|
||||
<svelte:options namespace="foreign" />
|
||||
<page horizontalAlignment="center">
|
||||
<button textWrap="true" text="button">
|
||||
</page>
|
@ -0,0 +1,11 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip: true, // TODO: needs fixing
|
||||
|
||||
skip_if_ssr: true,
|
||||
skip_if_hydrate: true,
|
||||
html: `
|
||||
<my-custom-inheritance-element>Hello World!</my-custom-inheritance-element>
|
||||
`
|
||||
});
|
@ -0,0 +1,33 @@
|
||||
<script>
|
||||
class MyCustomElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this._obj = null;
|
||||
this._text = null;
|
||||
}
|
||||
|
||||
set text(text) {
|
||||
this._text = text;
|
||||
this.render();
|
||||
}
|
||||
|
||||
set camelCase(obj) {
|
||||
this._obj = obj;
|
||||
this.render();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.innerHTML = 'Hello ' + this._obj.text + this._text;
|
||||
}
|
||||
}
|
||||
|
||||
class Extended extends MyCustomElement {}
|
||||
|
||||
window.customElements.define('my-custom-inheritance-element', Extended);
|
||||
</script>
|
||||
|
||||
<my-custom-inheritance-element camelCase={{ text: 'World' }} text="!" />
|
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import { beforeUpdate } from 'svelte';
|
||||
|
||||
export let item;
|
||||
export let foo = 'XX';
|
||||
|
||||
beforeUpdate(() => {
|
||||
foo = item;
|
||||
});
|
||||
</script>
|
||||
|
||||
<span>{foo}</span>
|
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import Item from './Item.svelte';
|
||||
|
||||
export let items = [3, 2, 1];
|
||||
|
||||
export function update() {
|
||||
items = [1, 2, 3, 4, 5];
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each items as item}
|
||||
<Item item={item} />
|
||||
{/each}
|
@ -0,0 +1,28 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip: true, // TODO: needs fixing
|
||||
|
||||
skip_if_ssr: true,
|
||||
|
||||
html: `
|
||||
<span>3</span>
|
||||
<span>2</span>
|
||||
<span>1</span>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target }) {
|
||||
await component.list.update();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>5</span>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export let list;
|
||||
|
||||
import List from './List.svelte';
|
||||
</script>
|
||||
|
||||
<List bind:this={list}/>
|
@ -0,0 +1,25 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip_if_ssr: true,
|
||||
|
||||
get props() {
|
||||
return { value: 'hello!' };
|
||||
},
|
||||
|
||||
html: `
|
||||
<p>hello!</p>
|
||||
<p>hello!</p>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.value = 'goodbye!';
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>goodbye!</p>
|
||||
<p>goodbye!</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import { beforeUpdate } from 'svelte';
|
||||
|
||||
export let value;
|
||||
let mirror;
|
||||
|
||||
beforeUpdate(() => {
|
||||
mirror = value;
|
||||
});
|
||||
</script>
|
||||
|
||||
<p>{value}</p>
|
||||
<p>{mirror}</p>
|
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
const tasks = ["do laundry", "do taxes", "cook food", "watch the kids"];
|
||||
</script>
|
||||
|
||||
<slot {tasks} />
|
||||
|
@ -0,0 +1,28 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<select>
|
||||
<option value='do laundry'>do laundry</option>
|
||||
<option value='do taxes'>do taxes</option>
|
||||
<option value='cook food'>cook food</option>
|
||||
<option value='watch the kids'>watch the kids</option>
|
||||
</select>
|
||||
<p>1</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const select = target.querySelector('select');
|
||||
const options = target.querySelectorAll('option');
|
||||
|
||||
assert.equal(component.tasks_touched, 1);
|
||||
|
||||
const change = new window.Event('change');
|
||||
options[1].selected = true;
|
||||
// @ts-ignore
|
||||
await select.dispatchEvent(change);
|
||||
|
||||
assert.equal(component.selected, options[1].value);
|
||||
assert.equal(component.tasks_touched, 1);
|
||||
}
|
||||
});
|
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
import Parent from "./Parent.svelte";
|
||||
export let selected;
|
||||
export let tasks = ['do nothing'];
|
||||
export let tasks_touched = 0;
|
||||
|
||||
$: {
|
||||
tasks, tasks_touched++;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Parent let:tasks={tasks}>
|
||||
<select bind:value={selected}>
|
||||
{#each tasks as task}
|
||||
<option value={task}>{task}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</Parent>
|
||||
<p>{tasks_touched}</p>
|
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
const tasks = ["do laundry", "do taxes", "cook food", "watch the kids"];
|
||||
</script>
|
||||
|
||||
<slot {tasks} />
|
||||
|
@ -0,0 +1,24 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<select>
|
||||
<option value='do laundry'>do laundry</option>
|
||||
<option value='do taxes'>do taxes</option>
|
||||
<option value='cook food'>cook food</option>
|
||||
<option value='watch the kids'>watch the kids</option>
|
||||
</select>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const select = target.querySelector('select');
|
||||
const options = target.querySelectorAll('option');
|
||||
|
||||
const change = new window.Event('change');
|
||||
options[1].selected = true;
|
||||
// @ts-ignore
|
||||
await select.dispatchEvent(change);
|
||||
|
||||
assert.equal(component.selected, options[1].value);
|
||||
}
|
||||
});
|
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import Parent from "./Parent.svelte";
|
||||
export let selected;
|
||||
</script>
|
||||
|
||||
<Parent let:tasks={tasks}>
|
||||
<select bind:value={selected}>
|
||||
{#each tasks as task}
|
||||
<option value={task}>{task}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</Parent>
|
Loading…
Reference in new issue