mirror of https://github.com/sveltejs/svelte
parent
4d611b8e40
commit
f80082c58a
@ -0,0 +1,58 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
import { flushSync, tick } from 'svelte';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button id="step1">step1</button>
|
||||||
|
<button id="step2">step2</button>
|
||||||
|
<button id="step3">step3</button>
|
||||||
|
<p>0</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
const step1 = /** @type {HTMLButtonElement | null} */ (target.querySelector('#step1'));
|
||||||
|
const step2 = /** @type {HTMLButtonElement | null} */ (target.querySelector('#step2'));
|
||||||
|
const step3 = /** @type {HTMLButtonElement | null} */ (target.querySelector('#step3'));
|
||||||
|
|
||||||
|
// Step 1: hide and reset data
|
||||||
|
step1?.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button id="step1">step1</button>
|
||||||
|
<button id="step2">step2</button>
|
||||||
|
<button id="step3">step3</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
// Step 2: show again
|
||||||
|
step2?.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button id="step1">step1</button>
|
||||||
|
<button id="step2">step2</button>
|
||||||
|
<button id="step3">step3</button>
|
||||||
|
<p>0</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
// Step 3: update override - this should show 2, not 0 (the bug)
|
||||||
|
step3?.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button id="step1">step1</button>
|
||||||
|
<button id="step2">step2</button>
|
||||||
|
<button id="step3">step3</button>
|
||||||
|
<p>2</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,33 @@
|
|||||||
|
<script>
|
||||||
|
let show = $state(true);
|
||||||
|
let data = $state({ value: 0 });
|
||||||
|
let override = $state(null);
|
||||||
|
|
||||||
|
let derived1 = $derived(override ?? data.value);
|
||||||
|
let derived2 = $derived(derived1);
|
||||||
|
|
||||||
|
function step1() {
|
||||||
|
show = false;
|
||||||
|
data = { value: 0 };
|
||||||
|
}
|
||||||
|
|
||||||
|
function step2() {
|
||||||
|
show = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function step3() {
|
||||||
|
override = 1;
|
||||||
|
override = 2;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button id="step1" onclick={step1}>step1</button>
|
||||||
|
<button id="step2" onclick={step2}>step2</button>
|
||||||
|
<button id="step3" onclick={step3}>step3</button>
|
||||||
|
|
||||||
|
{#snippet dummy(value = 0)}{/snippet}
|
||||||
|
|
||||||
|
{#if show}
|
||||||
|
<p>{derived2}</p>
|
||||||
|
{@render dummy(derived2 ? 0 : 0)}
|
||||||
|
{/if}
|
Loading…
Reference in new issue