File tree 2 files changed +67
-0
lines changed
packages/svelte/tests/runtime-runes/samples/bind-group-nested-data 2 files changed +67
-0
lines changed Original file line number Diff line number Diff line change
1
+ import { test } from '../../test' ;
2
+
3
+ export default test ( {
4
+ async test ( { assert, target, window, component } ) {
5
+ const checkboxes = /** @type {NodeListOf<HTMLInputElement> } */ (
6
+ target . querySelectorAll ( 'input[type="checkbox"]' )
7
+ ) ;
8
+
9
+ assert . isFalse ( checkboxes [ 0 ] . checked ) ;
10
+ assert . isTrue ( checkboxes [ 1 ] . checked ) ;
11
+ assert . isFalse ( checkboxes [ 2 ] . checked ) ;
12
+
13
+ await checkboxes [ 1 ] . click ( ) ;
14
+
15
+ const noChecked = target . querySelector ( '#output' ) ?. innerHTML ;
16
+ assert . equal ( noChecked , '' ) ;
17
+
18
+ await checkboxes [ 1 ] . click ( ) ;
19
+
20
+ const oneChecked = target . querySelector ( '#output' ) ?. innerHTML ;
21
+ assert . equal ( oneChecked , 'Mint choc chip' ) ;
22
+ }
23
+ } ) ;
Original file line number Diff line number Diff line change
1
+ <script lang =" ts" >
2
+ import { writable } from ' svelte/store' ;
3
+
4
+ let menu = [' Cookies and cream' , ' Mint choc chip' , ' Raspberry ripple' ];
5
+ let order = writable ({ flavours: [' Mint choc chip' ], scoops: 1 });
6
+ </script >
7
+
8
+ <form method =" POST" >
9
+ <h2 >Size</h2 >
10
+
11
+ <label >
12
+ <input type ="radio" bind:group ={$order .scoops } name ="scoops" value ={1 } />
13
+ One scoop
14
+ </label >
15
+
16
+ <label >
17
+ <input type ="radio" bind:group ={$order .scoops } name ="scoops" value ={2 } />
18
+ Two scoops
19
+ </label >
20
+
21
+ <label >
22
+ <input type ="radio" bind:group ={$order .scoops } name ="scoops" value ={3 } />
23
+ Three scoops
24
+ </label >
25
+
26
+ <h2 >Flavours</h2 >
27
+
28
+ {#each menu as flavour }
29
+ <label >
30
+ <input
31
+ type =" checkbox"
32
+ bind:group ={$order .flavours }
33
+ name =" flavours"
34
+ value ={flavour }
35
+ />
36
+ {flavour }
37
+ </label >
38
+ {/each }
39
+ </form >
40
+
41
+ <div >
42
+ <h2 >Current flavours</h2 >
43
+ <span id ="output" >{$order .flavours .join (' +' )}</span >
44
+ </div >
You can’t perform that action at this time.
0 commit comments