File tree 2 files changed +55
-0
lines changed
packages/svelte/tests/runtime-runes/samples/each-keyed-child-effect 2 files changed +55
-0
lines changed Original file line number Diff line number Diff line change
1
+ import { flushSync } from 'svelte' ;
2
+ import { ok , test } from '../../test' ;
3
+
4
+ let ascending = `
5
+ <button>reverse</button>
6
+ <p>1</p>
7
+ <p>(1)</p>
8
+ <p>2</p>
9
+ <p>(2)</p>
10
+ <p>3</p>
11
+ <p>(3)</p>
12
+ ` ;
13
+
14
+ let descending = `
15
+ <button>reverse</button>
16
+ <p>3</p>
17
+ <p>(3)</p>
18
+ <p>2</p>
19
+ <p>(2)</p>
20
+ <p>1</p>
21
+ <p>(1)</p>
22
+ ` ;
23
+
24
+ export default test ( {
25
+ html : ascending ,
26
+
27
+ async test ( { assert, target } ) {
28
+ const btn = target . querySelector ( 'button' ) ;
29
+ ok ( btn ) ;
30
+
31
+ flushSync ( ( ) => btn . click ( ) ) ;
32
+ assert . htmlEqual ( target . innerHTML , descending ) ;
33
+
34
+ flushSync ( ( ) => btn . click ( ) ) ;
35
+ assert . htmlEqual ( target . innerHTML , ascending ) ;
36
+
37
+ flushSync ( ( ) => btn . click ( ) ) ;
38
+ assert . htmlEqual ( target . innerHTML , descending ) ;
39
+
40
+ flushSync ( ( ) => btn . click ( ) ) ;
41
+ assert . htmlEqual ( target . innerHTML , ascending ) ;
42
+ }
43
+ } ) ;
Original file line number Diff line number Diff line change
1
+ <script >
2
+ let array = $state ([1 , 2 , 3 ]);
3
+ </script >
4
+
5
+ <button onclick ={() => array .reverse ()}>reverse</button >
6
+
7
+ {#each array as item (item )}
8
+ <p >{item }</p >
9
+ {#if true }
10
+ <p >({item })</p >
11
+ {/if }
12
+ {/each }
You can’t perform that action at this time.
0 commit comments