mirror of https://github.com/sveltejs/svelte
Rich Harris
8 years ago
commit
333568275b
@ -0,0 +1,18 @@
|
||||
<li>
|
||||
{{yield}}
|
||||
</li>
|
||||
|
||||
<script>
|
||||
const initialValues = {
|
||||
'id-0': 'zero',
|
||||
'id-1': 'one',
|
||||
'id-2': 'two',
|
||||
'id-3': 'three'
|
||||
};
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
this.set({ value: initialValues[this.get('id')] });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,33 @@
|
||||
export default {
|
||||
'skip-ssr': true,
|
||||
|
||||
data: {
|
||||
count: 3
|
||||
},
|
||||
|
||||
html: `
|
||||
<input type='number'>
|
||||
<ol>
|
||||
<li>id-2: value is two</li>
|
||||
<li>id-1: value is one</li>
|
||||
<li>id-0: value is zero</li>
|
||||
</ol>
|
||||
`,
|
||||
|
||||
test (assert, component, target, window) {
|
||||
const input = target.querySelector('input');
|
||||
|
||||
input.value = 4;
|
||||
input.dispatchEvent(new window.Event('input'));
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<input type='number'>
|
||||
<ol>
|
||||
<li>id-3: value is three</li>
|
||||
<li>id-2: value is two</li>
|
||||
<li>id-1: value is one</li>
|
||||
<li>id-0: value is zero</li>
|
||||
</ol>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,34 @@
|
||||
<input type='number' bind:value='count'>
|
||||
|
||||
<ol>
|
||||
{{#each ids as object @id}}
|
||||
<Nested bind:value='idToValue[object.id]' id='{{object.id}}'>
|
||||
{{object.id}}: value is {{idToValue[object.id]}}
|
||||
</Nested>
|
||||
{{/each}}
|
||||
</ol>
|
||||
|
||||
<script>
|
||||
import Nested from './Nested.html';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
idToValue: Object.create(null)
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
ids(count) {
|
||||
return new Array(count)
|
||||
.fill(null)
|
||||
.map((_, i) => ({ id: 'id-' + i}))
|
||||
.reverse();
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
Nested
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1 @@
|
||||
<button on:click='fire("foo", { answer: 42 })'>click me</button>
|
||||
@ -0,0 +1,18 @@
|
||||
export default {
|
||||
html: `
|
||||
<button>click me</button>
|
||||
`,
|
||||
|
||||
test (assert, component, target, window) {
|
||||
const button = target.querySelector('button');
|
||||
const event = new window.MouseEvent('click');
|
||||
|
||||
let answer;
|
||||
component.on('foo', event => {
|
||||
answer = event.answer;
|
||||
});
|
||||
|
||||
button.dispatchEvent(event);
|
||||
assert.equal(answer, 42);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
<Widget on:foo/>
|
||||
|
||||
<script>
|
||||
import Widget from './Widget.html';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Widget
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,13 @@
|
||||
export default {
|
||||
html: `
|
||||
<button>click me</button>
|
||||
`,
|
||||
|
||||
test (assert, component, target, window) {
|
||||
const button = target.querySelector('button');
|
||||
const event = new window.MouseEvent('click');
|
||||
|
||||
button.dispatchEvent(event);
|
||||
assert.ok(component.clicked);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
<button on:click>click me</button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
oncreate () {
|
||||
this.on('click', () => {
|
||||
this.clicked = true;
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,9 @@
|
||||
<div ref:element></div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
ondestroy() {
|
||||
this.refOnDestroy = this.refs.element;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,9 @@
|
||||
export default {
|
||||
test(assert, component, target) {
|
||||
const top = component.refs.top;
|
||||
const div = target.querySelector('div');
|
||||
|
||||
component.set({ visible: false });
|
||||
assert.equal(top.refOnDestroy, div);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,18 @@
|
||||
{{#if visible}}
|
||||
<Top ref:top></Top>
|
||||
{{/if}}
|
||||
|
||||
<script>
|
||||
import Top from './Top.html';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: true
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Top
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,8 @@
|
||||
[{
|
||||
"message": "'refs.inputx' does not exist (did you mean 'refs.input'?)",
|
||||
"pos": 36,
|
||||
"loc": {
|
||||
"line": 2,
|
||||
"column": 18
|
||||
}
|
||||
}]
|
||||
@ -0,0 +1,2 @@
|
||||
<input ref:input>
|
||||
<button on:click='refs.inputx.focus()'>focus input</button>
|
||||
@ -0,0 +1,2 @@
|
||||
<input ref:input>
|
||||
<button on:click='refs.input.focus()'>focus input</button>
|
||||
@ -0,0 +1 @@
|
||||
[]
|
||||
Loading…
Reference in new issue