mirror of https://github.com/sveltejs/svelte
Rich Harris
8 years ago
commit
451ea0068c
@ -0,0 +1,18 @@
|
||||
import { Node } from '../interfaces';
|
||||
|
||||
export default function clone(node: Node) {
|
||||
const cloned = {};
|
||||
|
||||
for (const key in node) {
|
||||
const value = node[key];
|
||||
if (Array.isArray(value)) {
|
||||
cloned[key] = value.map(clone);
|
||||
} else if (value && typeof value === 'object') {
|
||||
cloned[key] = clone(value);
|
||||
} else {
|
||||
cloned[key] = value;
|
||||
}
|
||||
}
|
||||
|
||||
return cloned;
|
||||
}
|
||||
@ -0,0 +1,91 @@
|
||||
const tasks = [
|
||||
{ description: 'put your left leg in', done: false },
|
||||
{ description: 'your left leg out', done: false },
|
||||
{ description: 'in, out, in, out', done: false },
|
||||
{ description: 'shake it all about', done: false }
|
||||
];
|
||||
|
||||
export default {
|
||||
'skip-ssr': true,
|
||||
allowES2015: true,
|
||||
|
||||
data: {
|
||||
tasks,
|
||||
selected: tasks[0]
|
||||
},
|
||||
|
||||
html: `
|
||||
<select>
|
||||
<option value='[object Object]'>put your left leg in</option>
|
||||
<option value='[object Object]'>your left leg out</option>
|
||||
<option value='[object Object]'>in, out, in, out</option>
|
||||
<option value='[object Object]'>shake it all about</option>
|
||||
</select>
|
||||
|
||||
<label>
|
||||
<input type='checkbox'> put your left leg in
|
||||
</label>
|
||||
|
||||
<h2>Pending tasks</h2>
|
||||
<p>put your left leg in</p>
|
||||
<p>your left leg out</p>
|
||||
<p>in, out, in, out</p>
|
||||
<p>shake it all about</p>
|
||||
`,
|
||||
|
||||
test(assert, component, target, window) {
|
||||
const input = target.querySelector('input');
|
||||
const select = target.querySelector('select');
|
||||
const options = target.querySelectorAll('option');
|
||||
|
||||
const change = new window.Event('change');
|
||||
|
||||
input.checked = true;
|
||||
input.dispatchEvent(change);
|
||||
|
||||
assert.ok(component.get('tasks')[0].done);
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<select>
|
||||
<option value='[object Object]'>put your left leg in</option>
|
||||
<option value='[object Object]'>your left leg out</option>
|
||||
<option value='[object Object]'>in, out, in, out</option>
|
||||
<option value='[object Object]'>shake it all about</option>
|
||||
</select>
|
||||
|
||||
<label>
|
||||
<input type='checkbox'> put your left leg in
|
||||
</label>
|
||||
|
||||
<h2>Pending tasks</h2>
|
||||
<p>your left leg out</p>
|
||||
<p>in, out, in, out</p>
|
||||
<p>shake it all about</p>
|
||||
`);
|
||||
|
||||
options[1].selected = true;
|
||||
select.dispatchEvent(change);
|
||||
assert.equal(component.get('selected'), tasks[1]);
|
||||
assert.ok(!input.checked);
|
||||
|
||||
input.checked = true;
|
||||
input.dispatchEvent(change);
|
||||
|
||||
assert.ok(component.get('tasks')[1].done);
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<select>
|
||||
<option value='[object Object]'>put your left leg in</option>
|
||||
<option value='[object Object]'>your left leg out</option>
|
||||
<option value='[object Object]'>in, out, in, out</option>
|
||||
<option value='[object Object]'>shake it all about</option>
|
||||
</select>
|
||||
|
||||
<label>
|
||||
<input type='checkbox'> your left leg out
|
||||
</label>
|
||||
|
||||
<h2>Pending tasks</h2>
|
||||
<p>in, out, in, out</p>
|
||||
<p>shake it all about</p>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,14 @@
|
||||
<select bind:value='selected'>
|
||||
{{#each tasks as task}}
|
||||
<option value='{{task}}'>{{task.description}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
|
||||
<label>
|
||||
<input type='checkbox' bind:checked='selected.done'> {{selected.description}}
|
||||
</label>
|
||||
|
||||
<h2>Pending tasks</h2>
|
||||
{{#each tasks.filter(t => !t.done) as task}}
|
||||
<p>{{task.description}}</p>
|
||||
{{/each}}
|
||||
@ -0,0 +1,25 @@
|
||||
export default {
|
||||
'skip-ssr': true, // TODO would be nice to fix this in SSR as well
|
||||
|
||||
html: `
|
||||
<p>selected: a</p>
|
||||
|
||||
<select>
|
||||
<option>a</option>
|
||||
<option>b</option>
|
||||
<option>c</option>
|
||||
</select>
|
||||
|
||||
<p>selected: a</p>
|
||||
`,
|
||||
|
||||
test ( assert, component, target ) {
|
||||
const select = target.querySelector( 'select' );
|
||||
const options = [ ...target.querySelectorAll( 'option' ) ];
|
||||
|
||||
assert.equal( select.value, 'a' );
|
||||
assert.ok( options[0].selected );
|
||||
|
||||
component.destroy();
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
<p>selected: {{selected}}</p>
|
||||
|
||||
<select bind:value='selected'>
|
||||
<option>a</option>
|
||||
<option>b</option>
|
||||
<option>c</option>
|
||||
</select>
|
||||
|
||||
<p>selected: {{selected}}</p>
|
||||
@ -0,0 +1,22 @@
|
||||
<div class="level1">
|
||||
{{#each values as value}}
|
||||
<h4>level 1 #{{value}}</h4>
|
||||
<Level2 condition="{{value % 2}}">
|
||||
<Level3>
|
||||
<span>And more stuff goes in here</span>
|
||||
</Level3>
|
||||
</Level2>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import Level2 from './Level2.html';
|
||||
import Level3 from './Level3.html';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Level2,
|
||||
Level3
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,8 @@
|
||||
<div class="level2" ref:wat>
|
||||
<h4>level 2</h4>
|
||||
{{#if condition}}
|
||||
<span>TRUE! {{yield}}</span>
|
||||
{{else}}
|
||||
<span>FALSE! {{yield}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
<div class="level3" ref:thingy>
|
||||
<h4>level 3</h4>
|
||||
{{yield}}
|
||||
</div>
|
||||
@ -0,0 +1,9 @@
|
||||
export default {
|
||||
data: {
|
||||
values: [1, 2, 3, 4]
|
||||
},
|
||||
|
||||
test(assert, component) {
|
||||
component.set({ values: [2, 3] });
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
<Level1 :values/>
|
||||
|
||||
<script>
|
||||
import Level1 from './Level1.html';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Level1
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue