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