add more legacy tests (#10881)

* add more legacy tests

* add more tests

* ts
pull/10882/head
Dominic Gannaway 1 year ago committed by GitHub
parent b6c7956b26
commit d6f10c5421
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -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…
Cancel
Save