mirror of https://github.com/sveltejs/svelte
commit
3c99785c07
@ -1,43 +1,48 @@
|
|||||||
export default {
|
export default {
|
||||||
data: {
|
data: {
|
||||||
count: 42
|
count: 42,
|
||||||
},
|
},
|
||||||
|
|
||||||
html: `
|
html: `
|
||||||
<input type='number'>
|
<input type=number>
|
||||||
<p>number 42</p>
|
<p>number 42</p>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
test ( assert, component, target, window ) {
|
ssrHtml: `
|
||||||
const input = target.querySelector( 'input' );
|
<input type=number value=42>
|
||||||
assert.equal( input.value, '42' );
|
<p>number 42</p>
|
||||||
|
`,
|
||||||
|
|
||||||
const event = new window.Event( 'input' );
|
test(assert, component, target, window) {
|
||||||
|
const input = target.querySelector('input');
|
||||||
|
assert.equal(input.value, '42');
|
||||||
|
|
||||||
|
const event = new window.Event('input');
|
||||||
|
|
||||||
input.value = '43';
|
input.value = '43';
|
||||||
input.dispatchEvent( event );
|
input.dispatchEvent(event);
|
||||||
|
|
||||||
assert.equal( component.get().count, 43 );
|
assert.equal(component.get().count, 43);
|
||||||
assert.htmlEqual( target.innerHTML, `
|
assert.htmlEqual(target.innerHTML, `
|
||||||
<input type='number'>
|
<input type='number'>
|
||||||
<p>number 43</p>
|
<p>number 43</p>
|
||||||
` );
|
`);
|
||||||
|
|
||||||
component.set({ count: 44 });
|
component.set({ count: 44 });
|
||||||
assert.equal( input.value, '44' );
|
assert.equal(input.value, '44');
|
||||||
assert.htmlEqual( target.innerHTML, `
|
assert.htmlEqual(target.innerHTML, `
|
||||||
<input type='number'>
|
<input type='number'>
|
||||||
<p>number 44</p>
|
<p>number 44</p>
|
||||||
` );
|
`);
|
||||||
|
|
||||||
// empty string should be treated as undefined
|
// empty string should be treated as undefined
|
||||||
input.value = '';
|
input.value = '';
|
||||||
input.dispatchEvent( event );
|
input.dispatchEvent(event);
|
||||||
|
|
||||||
assert.equal( component.get().count, undefined );
|
assert.equal(component.get().count, undefined);
|
||||||
assert.htmlEqual( target.innerHTML, `
|
assert.htmlEqual(target.innerHTML, `
|
||||||
<input type='number'>
|
<input type='number'>
|
||||||
<p>undefined undefined</p>
|
<p>undefined undefined</p>
|
||||||
` );
|
`);
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,33 +1,38 @@
|
|||||||
export default {
|
export default {
|
||||||
data: {
|
data: {
|
||||||
count: 42
|
count: 42,
|
||||||
},
|
},
|
||||||
|
|
||||||
html: `
|
html: `
|
||||||
<input type='range'>
|
<input type=range>
|
||||||
<p>number 42</p>
|
<p>number 42</p>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
test ( assert, component, target, window ) {
|
ssrHtml: `
|
||||||
const input = target.querySelector( 'input' );
|
<input type=range value=42>
|
||||||
assert.equal( input.value, '42' );
|
<p>number 42</p>
|
||||||
|
`,
|
||||||
|
|
||||||
const event = new window.Event( 'change' );
|
test(assert, component, target, window) {
|
||||||
|
const input = target.querySelector('input');
|
||||||
|
assert.equal(input.value, '42');
|
||||||
|
|
||||||
|
const event = new window.Event('change');
|
||||||
|
|
||||||
input.value = '43';
|
input.value = '43';
|
||||||
input.dispatchEvent( event );
|
input.dispatchEvent(event);
|
||||||
|
|
||||||
assert.equal( component.get().count, 43 );
|
assert.equal(component.get().count, 43);
|
||||||
assert.htmlEqual( target.innerHTML, `
|
assert.htmlEqual(target.innerHTML, `
|
||||||
<input type='range'>
|
<input type='range'>
|
||||||
<p>number 43</p>
|
<p>number 43</p>
|
||||||
` );
|
`);
|
||||||
|
|
||||||
component.set({ count: 44 });
|
component.set({ count: 44 });
|
||||||
assert.equal( input.value, '44' );
|
assert.equal(input.value, '44');
|
||||||
assert.htmlEqual( target.innerHTML, `
|
assert.htmlEqual(target.innerHTML, `
|
||||||
<input type='range'>
|
<input type='range'>
|
||||||
<p>number 44</p>
|
<p>number 44</p>
|
||||||
` );
|
`);
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,33 +1,38 @@
|
|||||||
export default {
|
export default {
|
||||||
data: {
|
data: {
|
||||||
count: 42
|
count: 42,
|
||||||
},
|
},
|
||||||
|
|
||||||
html: `
|
html: `
|
||||||
<input type='range'>
|
<input type=range>
|
||||||
<p>number 42</p>
|
<p>number 42</p>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
test ( assert, component, target, window ) {
|
ssrHtml: `
|
||||||
const input = target.querySelector( 'input' );
|
<input type=range value=42>
|
||||||
assert.equal( input.value, '42' );
|
<p>number 42</p>
|
||||||
|
`,
|
||||||
|
|
||||||
const event = new window.Event( 'input' );
|
test(assert, component, target, window) {
|
||||||
|
const input = target.querySelector('input');
|
||||||
|
assert.equal(input.value, '42');
|
||||||
|
|
||||||
|
const event = new window.Event('input');
|
||||||
|
|
||||||
input.value = '43';
|
input.value = '43';
|
||||||
input.dispatchEvent( event );
|
input.dispatchEvent(event);
|
||||||
|
|
||||||
assert.equal( component.get().count, 43 );
|
assert.equal(component.get().count, 43);
|
||||||
assert.htmlEqual( target.innerHTML, `
|
assert.htmlEqual(target.innerHTML, `
|
||||||
<input type='range'>
|
<input type='range'>
|
||||||
<p>number 43</p>
|
<p>number 43</p>
|
||||||
` );
|
`);
|
||||||
|
|
||||||
component.set({ count: 44 });
|
component.set({ count: 44 });
|
||||||
assert.equal( input.value, '44' );
|
assert.equal(input.value, '44');
|
||||||
assert.htmlEqual( target.innerHTML, `
|
assert.htmlEqual(target.innerHTML, `
|
||||||
<input type='range'>
|
<input type='range'>
|
||||||
<p>number 44</p>
|
<p>number 44</p>
|
||||||
` );
|
`);
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,29 +1,69 @@
|
|||||||
export default {
|
export default {
|
||||||
data: {
|
data: {
|
||||||
items: [
|
items: ['one', 'two', 'three'],
|
||||||
'one',
|
|
||||||
'two',
|
|
||||||
'three'
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
html: `<div><input><p>one</p></div><div><input><p>two</p></div><div><input><p>three</p></div><!---->`,
|
|
||||||
test ( assert, component, target, window ) {
|
html: `
|
||||||
const inputs = [ ...target.querySelectorAll( 'input' ) ];
|
<div>
|
||||||
|
<input><p>one</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input><p>two</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input><p>three</p>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
ssrHtml: `
|
||||||
|
<div>
|
||||||
|
<input value=one><p>one</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input value=two><p>two</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input value=three><p>three</p>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test(assert, component, target, window) {
|
||||||
|
const inputs = [...target.querySelectorAll('input')];
|
||||||
const items = component.get().items;
|
const items = component.get().items;
|
||||||
const event = new window.Event( 'input' );
|
const event = new window.Event('input');
|
||||||
|
|
||||||
assert.equal( inputs[0].value, 'one' );
|
assert.equal(inputs[0].value, 'one');
|
||||||
|
|
||||||
inputs[1].value = 'four';
|
inputs[1].value = 'four';
|
||||||
inputs[1].dispatchEvent( event );
|
inputs[1].dispatchEvent(event);
|
||||||
|
|
||||||
assert.equal( items[1], 'four' );
|
assert.equal(items[1], 'four');
|
||||||
assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>three</p></div><!---->` );
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>
|
||||||
|
<input><p>one</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input><p>four</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input><p>three</p>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
items[2] = 'five';
|
items[2] = 'five';
|
||||||
|
|
||||||
component.set({ items });
|
component.set({ items });
|
||||||
assert.equal( inputs[2].value, 'five' );
|
assert.equal(inputs[2].value, 'five');
|
||||||
assert.equal( target.innerHTML, `<div><input><p>one</p></div><div><input><p>four</p></div><div><input><p>five</p></div><!---->` );
|
assert.htmlEqual(target.innerHTML, `
|
||||||
}
|
<div>
|
||||||
|
<input><p>one</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input><p>four</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input><p>five</p>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,29 +1,43 @@
|
|||||||
export default {
|
export default {
|
||||||
data: {
|
data: {
|
||||||
user: {
|
user: {
|
||||||
name: 'alice'
|
name: 'alice',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
html: `<input>\n<p>hello alice</p>`,
|
html: `
|
||||||
|
<input>
|
||||||
|
<p>hello alice</p>
|
||||||
|
`,
|
||||||
|
|
||||||
test ( assert, component, target, window ) {
|
ssrHtml: `
|
||||||
const input = target.querySelector( 'input' );
|
<input value=alice>
|
||||||
|
<p>hello alice</p>
|
||||||
|
`,
|
||||||
|
|
||||||
assert.equal( input.value, 'alice' );
|
test(assert, component, target, window) {
|
||||||
|
const input = target.querySelector('input');
|
||||||
|
|
||||||
const event = new window.Event( 'input' );
|
assert.equal(input.value, 'alice');
|
||||||
|
|
||||||
|
const event = new window.Event('input');
|
||||||
|
|
||||||
input.value = 'bob';
|
input.value = 'bob';
|
||||||
input.dispatchEvent( event );
|
input.dispatchEvent(event);
|
||||||
|
|
||||||
assert.equal( target.innerHTML, `<input>\n<p>hello bob</p>` );
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<input>
|
||||||
|
<p>hello bob</p>
|
||||||
|
`);
|
||||||
|
|
||||||
const user = component.get().user;
|
const user = component.get().user;
|
||||||
user.name = 'carol';
|
user.name = 'carol';
|
||||||
|
|
||||||
component.set({ user });
|
component.set({ user });
|
||||||
assert.equal( input.value, 'carol' );
|
assert.equal(input.value, 'carol');
|
||||||
assert.equal( target.innerHTML, `<input>\n<p>hello carol</p>` );
|
assert.htmlEqual(target.innerHTML, `
|
||||||
}
|
<input>
|
||||||
|
<p>hello carol</p>
|
||||||
|
`);
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,10 +1,24 @@
|
|||||||
export default {
|
export default {
|
||||||
nestedTransitions: true,
|
nestedTransitions: true,
|
||||||
|
|
||||||
html: '<div>A wild component appears</div><p>x</p><input type="text">',
|
html: `
|
||||||
|
<div>A wild component appears</div>
|
||||||
|
<p>x</p>
|
||||||
|
<input type=text>
|
||||||
|
`,
|
||||||
|
|
||||||
|
ssrHtml: `
|
||||||
|
<div>A wild component appears</div>
|
||||||
|
<p>x</p>
|
||||||
|
<input type=text value=x>
|
||||||
|
`,
|
||||||
|
|
||||||
test(assert, component, target) {
|
test(assert, component, target) {
|
||||||
component.set({ x: 'y' });
|
component.set({ x: 'y' });
|
||||||
assert.htmlEqual(target.innerHTML, '<div>A wild component appears</div><p>y</p><input type="text">');
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>A wild component appears</div>
|
||||||
|
<p>y</p>
|
||||||
|
<input type=text>
|
||||||
|
`);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -0,0 +1 @@
|
|||||||
|
<input value='bar'>
|
@ -0,0 +1,8 @@
|
|||||||
|
<input bind:value=foo >
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return { foo: 'bar' };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
Loading…
Reference in new issue