diff --git a/packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/Component.svelte b/packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/Component.svelte new file mode 100644 index 0000000000..e38a0fff64 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/Component.svelte @@ -0,0 +1,27 @@ + + + +{#if selected} +
{item.id}
+{/if} diff --git a/packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/_config.js b/packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/_config.js new file mode 100644 index 0000000000..328d67cb2c --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/_config.js @@ -0,0 +1,29 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + skip: true, // TODO: needs fixing + + html: ` + +
1
+ `, + 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']); + } +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/main.svelte b/packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/main.svelte new file mode 100644 index 0000000000..7f99ce0f38 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/main.svelte @@ -0,0 +1,10 @@ + + +{#each Object.values($items) as item (item.id)} + +{/each} diff --git a/packages/svelte/tests/runtime-legacy/samples/after-render-prevents-loop/_config.js b/packages/svelte/tests/runtime-legacy/samples/after-render-prevents-loop/_config.js new file mode 100644 index 0000000000..d562d943b9 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/after-render-prevents-loop/_config.js @@ -0,0 +1,25 @@ +import { test } from '../../test'; + +export default test({ + skip_if_ssr: true, + + get props() { + return { value: 'hello!' }; + }, + + html: ` +

hello!

+

hello!

+ `, + + test({ assert, component, target }) { + component.value = 'goodbye!'; + assert.htmlEqual( + target.innerHTML, + ` +

goodbye!

+

goodbye!

+ ` + ); + } +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/after-render-prevents-loop/main.svelte b/packages/svelte/tests/runtime-legacy/samples/after-render-prevents-loop/main.svelte new file mode 100644 index 0000000000..688a25b124 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/after-render-prevents-loop/main.svelte @@ -0,0 +1,13 @@ + + +

{value}

+

{mirror}

diff --git a/packages/svelte/tests/runtime-legacy/samples/after-render-triggers-update/_config.js b/packages/svelte/tests/runtime-legacy/samples/after-render-triggers-update/_config.js new file mode 100644 index 0000000000..d562d943b9 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/after-render-triggers-update/_config.js @@ -0,0 +1,25 @@ +import { test } from '../../test'; + +export default test({ + skip_if_ssr: true, + + get props() { + return { value: 'hello!' }; + }, + + html: ` +

hello!

+

hello!

+ `, + + test({ assert, component, target }) { + component.value = 'goodbye!'; + assert.htmlEqual( + target.innerHTML, + ` +

goodbye!

+

goodbye!

+ ` + ); + } +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/after-render-triggers-update/main.svelte b/packages/svelte/tests/runtime-legacy/samples/after-render-triggers-update/main.svelte new file mode 100644 index 0000000000..3f4c15cd96 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/after-render-triggers-update/main.svelte @@ -0,0 +1,15 @@ + + +

{value}

+

diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js new file mode 100644 index 0000000000..848da78b2d --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js @@ -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: ` +
a
+
b
+
c
+
d
+
e
+ `, + + 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], ['', '']); + } +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-css/main.svelte b/packages/svelte/tests/runtime-legacy/samples/animation-css/main.svelte new file mode 100644 index 0000000000..bd3647d73c --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/animation-css/main.svelte @@ -0,0 +1,17 @@ + + +{#each things as thing (thing.id)} +
{thing.name}
+{/each} diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-js-delay/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-js-delay/_config.js new file mode 100644 index 0000000000..a72aed883b --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/animation-js-delay/_config.js @@ -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: ` +
a
+
b
+
c
+
d
+
e
+ `, + + 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); + } +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-js-delay/main.svelte b/packages/svelte/tests/runtime-legacy/samples/animation-js-delay/main.svelte new file mode 100644 index 0000000000..c29394fa67 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/animation-js-delay/main.svelte @@ -0,0 +1,21 @@ + + +{#each things as thing, i (thing.id)} +
{thing.name}
+{/each} diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-js-easing/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-js-easing/_config.js new file mode 100644 index 0000000000..5b7ed1c732 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/animation-js-easing/_config.js @@ -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: ` +
a
+
b
+
c
+
d
+
e
+ `, + + 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); + } +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-js-easing/main.svelte b/packages/svelte/tests/runtime-legacy/samples/animation-js-easing/main.svelte new file mode 100644 index 0000000000..b376452e15 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/animation-js-easing/main.svelte @@ -0,0 +1,25 @@ + + +{#each things as thing (thing.id)} +
{thing.name}
+{/each} diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-js/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-js/_config.js new file mode 100644 index 0000000000..3606f7d17b --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/animation-js/_config.js @@ -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: ` +
a
+
b
+
c
+
d
+
e
+ `, + + 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); + } +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-js/main.svelte b/packages/svelte/tests/runtime-legacy/samples/animation-js/main.svelte new file mode 100644 index 0000000000..4d060dd140 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/animation-js/main.svelte @@ -0,0 +1,20 @@ + + +{#each things as thing (thing.id)} +
{thing.name}
+{/each} diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/_config.js new file mode 100644 index 0000000000..5672a7d75a --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/_config.js @@ -0,0 +1,24 @@ +import { test } from '../../test'; + +export default test({ + skip: true, // TODO: needs fixing + + html: ` + + + + + `, + 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'); + } +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte b/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte new file mode 100644 index 0000000000..52b3e646e1 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte @@ -0,0 +1,4 @@ + +