File tree Expand file tree Collapse file tree 2 files changed +67
-0
lines changed
packages/svelte/tests/runtime-runes/samples/bind-group-nested-data Expand file tree Collapse file tree 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