mirror of https://github.com/sveltejs/svelte
Rich Harris
8 years ago
committed by
GitHub
commit
02ea3e7a44
@ -1,2 +1 @@
|
||||
--bail
|
||||
test/test.js
|
||||
@ -0,0 +1 @@
|
||||
<p>{{title}}</p>
|
||||
@ -0,0 +1,24 @@
|
||||
export default {
|
||||
data: {
|
||||
titles: [{ name: 'b' }, { name: 'c' }]
|
||||
},
|
||||
|
||||
html: `
|
||||
<p>b</p>
|
||||
<p>c</p>
|
||||
`,
|
||||
|
||||
test (assert, component, target) {
|
||||
component.set({
|
||||
titles: [{ name: 'a' }, { name: 'b' }, { name: 'c' }]
|
||||
});
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>a</p>
|
||||
<p>b</p>
|
||||
<p>c</p>
|
||||
`);
|
||||
|
||||
component.destroy();
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
{{#each titles as title @name}}
|
||||
<Nested title="{{title.name}}"/>
|
||||
{{/each}}
|
||||
|
||||
<script>
|
||||
import Nested from './Nested.html';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Nested
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,18 @@
|
||||
export default {
|
||||
data: {
|
||||
foo: [1],
|
||||
a: 42
|
||||
},
|
||||
|
||||
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.equal(component.snapshot, 42);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
{{#each foo as bar}}
|
||||
<button on:click='baz(a)'>click me</button>
|
||||
{{/each}}
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
baz(a) {
|
||||
this.snapshot = a;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,35 @@
|
||||
export default {
|
||||
data: {
|
||||
visible: true,
|
||||
things: ['a', 'b', 'c', 'd']
|
||||
},
|
||||
|
||||
test (assert, component, target, window, raf) {
|
||||
raf.tick(50);
|
||||
assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
|
||||
assert.equal(component.introCount, 4);
|
||||
|
||||
raf.tick(100);
|
||||
assert.equal(component.introCount, 0);
|
||||
|
||||
component.set({ visible: false });
|
||||
|
||||
raf.tick(150);
|
||||
assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
|
||||
assert.equal(component.outroCount, 4);
|
||||
|
||||
raf.tick(200);
|
||||
assert.equal(component.outroCount, 0);
|
||||
|
||||
component.set({ visible: true });
|
||||
component.on('intro.start', () => {
|
||||
throw new Error(`intro.start should fire during set(), not after`);
|
||||
});
|
||||
|
||||
raf.tick(250);
|
||||
assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
|
||||
assert.equal(component.introCount, 4);
|
||||
|
||||
component.destroy();
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,45 @@
|
||||
{{#each things as thing}}
|
||||
{{#if visible}}
|
||||
<p transition:foo>{{thing}}</p>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
|
||||
<script>
|
||||
export default {
|
||||
transitions: {
|
||||
foo: function ( node, params ) {
|
||||
return {
|
||||
duration: 100,
|
||||
tick: t => {
|
||||
node.foo = t;
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
oncreate() {
|
||||
this.intros = [];
|
||||
this.outros = [];
|
||||
this.introCount = 0;
|
||||
this.outroCount = 0;
|
||||
|
||||
this.on('intro.start', ({ node }) => {
|
||||
this.intros.push(node.textContent);
|
||||
this.introCount += 1;
|
||||
});
|
||||
|
||||
this.on('intro.end', () => {
|
||||
this.introCount -= 1;
|
||||
});
|
||||
|
||||
this.on('outro.start', ({ node }) => {
|
||||
this.outros.push(node.textContent);
|
||||
this.outroCount += 1;
|
||||
});
|
||||
|
||||
this.on('outro.end', () => {
|
||||
this.outroCount -= 1;
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in new issue