pull/15844/head
Rich Harris 3 months ago
parent 8d20a9af09
commit 2ae79f364d

@ -1,4 +1,4 @@
import { flushSync, tick } from 'svelte'; import { flushSync, settled, tick } from 'svelte';
import { deferred } from '../../../../src/internal/shared/utils.js'; import { deferred } from '../../../../src/internal/shared/utils.js';
import { test } from '../../test'; import { test } from '../../test';
@ -19,6 +19,8 @@ export default test({
async test({ assert, target, component, logs }) { async test({ assert, target, component, logs }) {
d.resolve(42); d.resolve(42);
// TODO why is this necessary? why isn't `await tick()` enough?
await Promise.resolve(); await Promise.resolve();
await Promise.resolve(); await Promise.resolve();
await Promise.resolve(); await Promise.resolve();
@ -32,9 +34,6 @@ export default test({
assert.htmlEqual(target.innerHTML, '<p>42</p>'); assert.htmlEqual(target.innerHTML, '<p>42</p>');
component.num = 2; component.num = 2;
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await tick(); await tick();
assert.htmlEqual(target.innerHTML, '<p>84</p>'); assert.htmlEqual(target.innerHTML, '<p>84</p>');
@ -44,8 +43,6 @@ export default test({
assert.htmlEqual(target.innerHTML, '<p>84</p>'); assert.htmlEqual(target.innerHTML, '<p>84</p>');
d.resolve(43); d.resolve(43);
await Promise.resolve();
await Promise.resolve();
await tick(); await tick();
assert.htmlEqual(target.innerHTML, '<p>86</p>'); assert.htmlEqual(target.innerHTML, '<p>86</p>');

@ -1,16 +1,11 @@
import { flushSync } from 'svelte'; import { flushSync, tick } from 'svelte';
import { test } from '../../test'; import { test } from '../../test';
export default test({ export default test({
html: `<p>pending...</p>`, html: `<p>pending...</p>`,
async test({ assert, target }) { async test({ assert, target }) {
await Promise.resolve(); await tick();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
@ -30,10 +25,7 @@ export default test({
for (let i = 1; i < 5; i += 1) { for (let i = 1; i < 5; i += 1) {
shift.click(); shift.click();
await Promise.resolve(); await tick();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
assert.equal(p.innerHTML, `${i}: ${Math.min(i, 3)}`); assert.equal(p.innerHTML, `${i}: ${Math.min(i, 3)}`);
} }

@ -1,4 +1,4 @@
import { flushSync, tick } from 'svelte'; import { tick } from 'svelte';
import { test } from '../../test'; import { test } from '../../test';
export default test({ export default test({
@ -7,25 +7,21 @@ export default test({
async test({ assert, target }) { async test({ assert, target }) {
const [button1, button2, button3] = target.querySelectorAll('button'); const [button1, button2, button3] = target.querySelectorAll('button');
flushSync(() => button1.click()); button1.click();
await Promise.resolve();
await Promise.resolve();
await tick(); await tick();
flushSync();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
'<button>step 1</button><button>step 2</button><button>step 3</button><p>a</p><p>b</p><p>c</p>' '<button>step 1</button><button>step 2</button><button>step 3</button><p>a</p><p>b</p><p>c</p>'
); );
flushSync(() => button2.click()); button2.click();
await tick(); await tick();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
'<button>step 1</button><button>step 2</button><button>step 3</button><p>a</p><p>b</p><p>c</p>' '<button>step 1</button><button>step 2</button><button>step 3</button><p>a</p><p>b</p><p>c</p>'
); );
flushSync(() => button3.click()); button3.click();
await Promise.resolve();
await tick(); await tick();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,

@ -1,4 +1,4 @@
import { flushSync, tick } from 'svelte'; import { tick } from 'svelte';
import { deferred } from '../../../../src/internal/shared/utils.js'; import { deferred } from '../../../../src/internal/shared/utils.js';
import { test } from '../../test'; import { test } from '../../test';
@ -18,10 +18,7 @@ export default test({
async test({ assert, target, component }) { async test({ assert, target, component }) {
d.resolve(['a', 'b', 'c']); d.resolve(['a', 'b', 'c']);
await Promise.resolve();
await Promise.resolve();
await tick(); await tick();
flushSync();
assert.htmlEqual(target.innerHTML, '<p>a</p><p>b</p><p>c</p>'); assert.htmlEqual(target.innerHTML, '<p>a</p><p>b</p><p>c</p>');
d = deferred(); d = deferred();

@ -1,4 +1,4 @@
import { flushSync, tick } from 'svelte'; import { tick } from 'svelte';
import { test } from '../../test'; import { test } from '../../test';
export default test({ export default test({
@ -13,12 +13,7 @@ export default test({
}, },
async test({ assert, target }) { async test({ assert, target }) {
await Promise.resolve(); await tick();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
@ -31,10 +26,8 @@ export default test({
let [button] = target.querySelectorAll('button'); let [button] = target.querySelectorAll('button');
let [p] = target.querySelectorAll('p'); let [p] = target.querySelectorAll('p');
flushSync(() => button.click()); button.click();
await Promise.resolve(); await tick();
await Promise.resolve();
await Promise.resolve();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
` `
@ -43,10 +36,8 @@ export default test({
` `
); );
flushSync(() => button.click()); button.click();
await Promise.resolve(); await tick();
await Promise.resolve();
await Promise.resolve();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
` `
@ -55,10 +46,8 @@ export default test({
` `
); );
flushSync(() => button.click()); button.click();
await Promise.resolve(); await tick();
await Promise.resolve();
await Promise.resolve();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
` `
@ -69,15 +58,11 @@ export default test({
const [button1, button2] = target.querySelectorAll('button'); const [button1, button2] = target.querySelectorAll('button');
flushSync(() => button1.click()); button1.click();
await Promise.resolve(); await tick();
flushSync(() => button2.click()); button2.click();
await Promise.resolve(); await tick();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
[p] = target.querySelectorAll('p'); [p] = target.querySelectorAll('p');
@ -89,10 +74,8 @@ export default test({
` `
); );
flushSync(() => button1.click()); button1.click();
await Promise.resolve(); await tick();
await Promise.resolve();
await Promise.resolve();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
` `

@ -1,4 +1,4 @@
import { flushSync, tick } from 'svelte'; import { tick } from 'svelte';
import { test } from '../../test'; import { test } from '../../test';
export default test({ export default test({
@ -7,29 +7,24 @@ export default test({
async test({ assert, target }) { async test({ assert, target }) {
let [button1, button2, button3] = target.querySelectorAll('button'); let [button1, button2, button3] = target.querySelectorAll('button');
flushSync(() => button1.click()); button1.click();
await Promise.resolve(); await tick();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
flushSync();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
'<button>step 1</button><button>step 2</button><button>step 3</button><p>oops!</p><button data-id="reset">reset</button>' '<button>step 1</button><button>step 2</button><button>step 3</button><p>oops!</p><button data-id="reset">reset</button>'
); );
flushSync(() => button2.click()); button2.click();
const reset = /** @type {HTMLButtonElement} */ (target.querySelector('[data-id="reset"]')); const reset = /** @type {HTMLButtonElement} */ (target.querySelector('[data-id="reset"]'));
flushSync(() => reset.click()); reset.click();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
'<button>step 1</button><button>step 2</button><button>step 3</button><p>pending</p>' '<button>step 1</button><button>step 2</button><button>step 3</button><p>pending</p>'
); );
flushSync(() => button3.click()); button3.click();
await Promise.resolve();
await tick(); await tick();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,

@ -12,12 +12,9 @@ export default test({
async test({ assert, target, raf }) { async test({ assert, target, raf }) {
const [reset, hello, goodbye] = target.querySelectorAll('button'); const [reset, hello, goodbye] = target.querySelectorAll('button');
flushSync(() => hello.click()); hello.click();
raf.tick(0); raf.tick(0);
await Promise.resolve();
await Promise.resolve();
await tick(); await tick();
flushSync();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
` `
@ -28,7 +25,7 @@ export default test({
` `
); );
flushSync(() => reset.click()); reset.click();
raf.tick(0); raf.tick(0);
await tick(); await tick();
assert.htmlEqual( assert.htmlEqual(
@ -42,7 +39,7 @@ export default test({
` `
); );
flushSync(() => goodbye.click()); goodbye.click();
await Promise.resolve(); await Promise.resolve();
raf.tick(0); raf.tick(0);
await tick(); await tick();

@ -1,4 +1,4 @@
import { flushSync, tick } from 'svelte'; import { tick } from 'svelte';
import { deferred } from '../../../../src/internal/shared/utils.js'; import { deferred } from '../../../../src/internal/shared/utils.js';
import { test } from '../../test'; import { test } from '../../test';
@ -18,10 +18,7 @@ export default test({
async test({ assert, target, component }) { async test({ assert, target, component }) {
d.resolve('hello'); d.resolve('hello');
await Promise.resolve();
await Promise.resolve();
await tick(); await tick();
flushSync();
assert.htmlEqual(target.innerHTML, '<h1>hello</h1>'); assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
component.promise = (d = deferred()).promise; component.promise = (d = deferred()).promise;

@ -1,4 +1,4 @@
import { flushSync, tick } from 'svelte'; import { tick } from 'svelte';
import { deferred } from '../../../../src/internal/shared/utils.js'; import { deferred } from '../../../../src/internal/shared/utils.js';
import { test } from '../../test'; import { test } from '../../test';
@ -19,24 +19,21 @@ export default test({
async test({ assert, target }) { async test({ assert, target }) {
const [reset, t, f] = target.querySelectorAll('button'); const [reset, t, f] = target.querySelectorAll('button');
flushSync(() => t.click()); t.click();
await Promise.resolve();
await Promise.resolve();
await tick(); await tick();
flushSync();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
'<button>reset</button><button>true</button><button>false</button><h1>yes</h1>' '<button>reset</button><button>true</button><button>false</button><h1>yes</h1>'
); );
flushSync(() => reset.click()); reset.click();
await tick(); await tick();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
'<button>reset</button><button>true</button><button>false</button><h1>yes</h1>' '<button>reset</button><button>true</button><button>false</button><h1>yes</h1>'
); );
flushSync(() => f.click()); f.click();
await tick(); await tick();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,

@ -1,4 +1,4 @@
import { flushSync, tick } from 'svelte'; import { tick } from 'svelte';
import { deferred } from '../../../../src/internal/shared/utils.js'; import { deferred } from '../../../../src/internal/shared/utils.js';
import { test } from '../../test'; import { test } from '../../test';
@ -18,10 +18,7 @@ export default test({
async test({ assert, target, component }) { async test({ assert, target, component }) {
d.resolve(1); d.resolve(1);
await Promise.resolve();
await Promise.resolve();
await tick(); await tick();
flushSync();
assert.htmlEqual(target.innerHTML, '<h1>hello</h1>'); assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
const h1 = target.querySelector('h1'); const h1 = target.querySelector('h1');

@ -1,4 +1,4 @@
import { flushSync, settled, tick } from 'svelte'; import { tick } from 'svelte';
import { test } from '../../test'; import { test } from '../../test';
export default test({ export default test({
@ -7,10 +7,7 @@ export default test({
async test({ assert, target }) { async test({ assert, target }) {
const [both, a, b] = target.querySelectorAll('button'); const [both, a, b] = target.querySelectorAll('button');
await Promise.resolve(); await tick();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
@ -21,12 +18,10 @@ export default test({
` `
); );
flushSync(() => both.click()); both.click();
flushSync(() => b.click()); b.click();
await Promise.resolve(); await tick();
await Promise.resolve();
await Promise.resolve();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,

@ -5,12 +5,8 @@ export default test({
async test({ assert, target }) { async test({ assert, target }) {
const [a, b, reset1, reset2, resolve1, resolve2] = target.querySelectorAll('button'); const [a, b, reset1, reset2, resolve1, resolve2] = target.querySelectorAll('button');
flushSync(() => resolve1.click()); resolve1.click();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await tick(); await tick();
flushSync();
const p = /** @type {HTMLElement} */ (target.querySelector('#test')); const p = /** @type {HTMLElement} */ (target.querySelector('#test'));
@ -21,21 +17,13 @@ export default test({
flushSync(() => reset2.click()); flushSync(() => reset2.click());
flushSync(() => b.click()); flushSync(() => b.click());
flushSync(() => resolve2.click()); resolve2.click();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await tick(); await tick();
flushSync();
assert.htmlEqual(p.innerHTML, '1 + 2 = 3'); assert.htmlEqual(p.innerHTML, '1 + 2 = 3');
flushSync(() => resolve1.click()); resolve1.click();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await tick(); await tick();
flushSync();
assert.htmlEqual(p.innerHTML, '2 + 3 = 5'); assert.htmlEqual(p.innerHTML, '2 + 3 = 5');
} }

@ -1,4 +1,4 @@
import { flushSync, tick } from 'svelte'; import { tick } from 'svelte';
import { deferred } from '../../../../src/internal/shared/utils.js'; import { deferred } from '../../../../src/internal/shared/utils.js';
import { test } from '../../test'; import { test } from '../../test';
@ -18,10 +18,7 @@ export default test({
async test({ assert, target, component }) { async test({ assert, target, component }) {
d.resolve('hello'); d.resolve('hello');
await Promise.resolve();
await Promise.resolve();
await tick(); await tick();
flushSync();
assert.htmlEqual(target.innerHTML, '<h1>hello</h1>'); assert.htmlEqual(target.innerHTML, '<h1>hello</h1>');
d = deferred(); d = deferred();

@ -1,4 +1,4 @@
import { flushSync, tick } from 'svelte'; import { tick } from 'svelte';
import { test } from '../../test'; import { test } from '../../test';
export default test({ export default test({
@ -9,16 +9,7 @@ export default test({
html: `<button>a</button><button>b</button><p>pending</p>`, html: `<button>a</button><button>b</button><p>pending</p>`,
async test({ assert, target, warnings }) { async test({ assert, target, warnings }) {
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await tick(); await tick();
flushSync();
assert.htmlEqual(target.innerHTML, '<button>a</button><button>b</button><h1>3</h1>'); assert.htmlEqual(target.innerHTML, '<button>a</button><button>b</button><h1>3</h1>');
assert.deepEqual(warnings, ['Detected reactivity loss']); assert.deepEqual(warnings, ['Detected reactivity loss']);

Loading…
Cancel
Save