msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into gh-1434

Browse Source
pull/1815/head
Rich Harris 6 years ago
parent b5945e13ea 3cf60cb4b8
commit 3c99785c07
36 changed files with 520 additions and 201 deletions
Show Stats Download Patch File Download Diff File

10
src/compile/render-ssr/handlers/Element.ts
Unescape View File

@ -120,6 +120,16 @@ export default function(node, renderer, options) {
}); });
} }
node.bindings.forEach(binding => {
const { name, value: { snippet } } = binding;
if (name === 'group') {
// TODO server-render group bindings
} else {
openingTag += ' ${(v => v ? ("' + name + '" + (v === true ? "" : "=" + JSON.stringify(v))) : "")(' + snippet + ')}';
}
});
if (addClassAttribute) { if (addClassAttribute) {
openingTag += `\${((v) => v ? ' class="' + v + '"' : '')([${classExpr}].join(' ').trim())}`; openingTag += `\${((v) => v ? ' class="' + v + '"' : '')([${classExpr}].join(' ').trim())}`;
} }

2
test/runtime/index.js
Unescape View File

@ -165,7 +165,7 @@ describe("runtime", () => {
}); });
} else { } else {
component.destroy(); component.destroy();
assert.equal(target.innerHTML, ""); assert.htmlEqual(target.innerHTML, "");
} }
}) })
.catch(err => { .catch(err => {

23
test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js
Unescape View File

@ -8,7 +8,28 @@ export default {
}, },
html: ` html: `
<div><input type="checkbox"><p>one</p></div><div><input type="checkbox"><p>two</p></div><div><input type="checkbox"><p>three</p></div> <div>
<input type="checkbox"><p>one</p>
</div>
<div>
<input type="checkbox"><p>two</p>
</div>
<div>
<input type="checkbox"><p>three</p>
</div>
<p>1 completed</p>
`,
ssrHtml: `
<div>
<input type="checkbox" checked><p>one</p>
</div>
<div>
<input type="checkbox"><p>two</p>
</div>
<div>
<input type="checkbox"><p>three</p>
</div>
<p>1 completed</p> <p>1 completed</p>
`, `,

10
test/runtime/samples/binding-input-checkbox/_config.js
Unescape View File

@ -3,7 +3,15 @@ export default {
foo: true foo: true
}, },
html: `<input type="checkbox">\n<p>true</p>`, html: `
<input type="checkbox">
<p>true</p>
`,
ssrHtml: `
<input type="checkbox" checked>
<p>true</p>
`,
test ( assert, component, target, window ) { test ( assert, component, target, window ) {
const input = target.querySelector( 'input' ); const input = target.querySelector( 'input' );

41
test/runtime/samples/binding-input-number/_config.js
Unescape View File

@ -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>
` ); `);
} },
}; };

33
test/runtime/samples/binding-input-range-change/_config.js
Unescape View File

@ -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>
` ); `);
} },
}; };

33
test/runtime/samples/binding-input-range/_config.js
Unescape View File

@ -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>
` ); `);
} },
}; };

72
test/runtime/samples/binding-input-text-contextual/_config.js
Unescape View File

@ -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>
`);
},
}; };

33
test/runtime/samples/binding-input-text-deconflicted/_config.js
Unescape View File

@ -1,8 +1,8 @@
export default { export default {
data: { data: {
component: { component: {
name: 'world' name: 'world',
} },
}, },
html: ` html: `
@ -10,26 +10,31 @@ export default {
<input> <input>
`, `,
test ( assert, component, target, window ) { ssrHtml: `
const input = target.querySelector( 'input' ); <h1>Hello world!</h1>
assert.equal( input.value, 'world' ); <input value=world>
`,
const event = new window.Event( 'input' ); test(assert, component, target, window) {
const input = target.querySelector('input');
assert.equal(input.value, 'world');
const event = new window.Event('input');
input.value = 'everybody'; input.value = 'everybody';
input.dispatchEvent( event ); input.dispatchEvent(event);
assert.equal( input.value, 'everybody' ); assert.equal(input.value, 'everybody');
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<h1>Hello everybody!</h1> <h1>Hello everybody!</h1>
<input> <input>
` ); `);
component.set({ component: { name: 'goodbye' } }); component.set({ component: { name: 'goodbye' } });
assert.equal( input.value, 'goodbye' ); assert.equal(input.value, 'goodbye');
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<h1>Hello goodbye!</h1> <h1>Hello goodbye!</h1>
<input> <input>
` ); `);
} },
}; };

41
test/runtime/samples/binding-input-text-deep-computed-dynamic/_config.js
Unescape View File

@ -4,8 +4,8 @@ export default {
obj: { obj: {
foo: 'a', foo: 'a',
bar: 'b', bar: 'b',
baz: 'c' baz: 'c',
} },
}, },
html: ` html: `
@ -13,43 +13,48 @@ export default {
<pre>{"foo":"a","bar":"b","baz":"c"}</pre> <pre>{"foo":"a","bar":"b","baz":"c"}</pre>
`, `,
test ( assert, component, target, window ) { ssrHtml: `
const input = target.querySelector( 'input' ); <input value=b>
const event = new window.Event( 'input' ); <pre>{"foo":"a","bar":"b","baz":"c"}</pre>
`,
assert.equal( input.value, 'b' ); test(assert, component, target, window) {
const input = target.querySelector('input');
const event = new window.Event('input');
assert.equal(input.value, 'b');
// edit bar // edit bar
input.value = 'e'; input.value = 'e';
input.dispatchEvent( event ); input.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<input> <input>
<pre>{"foo":"a","bar":"e","baz":"c"}</pre> <pre>{"foo":"a","bar":"e","baz":"c"}</pre>
` ); `);
// edit baz // edit baz
component.set({ prop: 'baz' }); component.set({ prop: 'baz' });
assert.equal( input.value, 'c' ); assert.equal(input.value, 'c');
input.value = 'f'; input.value = 'f';
input.dispatchEvent( event ); input.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<input> <input>
<pre>{"foo":"a","bar":"e","baz":"f"}</pre> <pre>{"foo":"a","bar":"e","baz":"f"}</pre>
` ); `);
// edit foo // edit foo
component.set({ prop: 'foo' }); component.set({ prop: 'foo' });
assert.equal( input.value, 'a' ); assert.equal(input.value, 'a');
input.value = 'd'; input.value = 'd';
input.dispatchEvent( event ); input.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<input> <input>
<pre>{"foo":"d","bar":"e","baz":"f"}</pre> <pre>{"foo":"d","bar":"e","baz":"f"}</pre>
` ); `);
} },
}; };

38
test/runtime/samples/binding-input-text-deep-computed/_config.js
Unescape View File

@ -2,29 +2,43 @@ export default {
data: { data: {
prop: 'name', prop: 'name',
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>
`);
},
}; };

49
test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/_config.js
Unescape View File

@ -1,11 +1,13 @@
export default { export default {
data: { data: {
prop: 'bar', prop: 'bar',
objects: [{ objects: [
foo: 'a', {
bar: 'b', foo: 'a',
baz: 'c' bar: 'b',
}] baz: 'c',
},
],
}, },
html: ` html: `
@ -13,43 +15,48 @@ export default {
<pre>{"foo":"a","bar":"b","baz":"c"}</pre> <pre>{"foo":"a","bar":"b","baz":"c"}</pre>
`, `,
test ( assert, component, target, window ) { ssrHtml: `
const input = target.querySelector( 'input' ); <input value=b>
const event = new window.Event( 'input' ); <pre>{"foo":"a","bar":"b","baz":"c"}</pre>
`,
assert.equal( input.value, 'b' ); test(assert, component, target, window) {
const input = target.querySelector('input');
const event = new window.Event('input');
assert.equal(input.value, 'b');
// edit bar // edit bar
input.value = 'e'; input.value = 'e';
input.dispatchEvent( event ); input.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<input> <input>
<pre>{"foo":"a","bar":"e","baz":"c"}</pre> <pre>{"foo":"a","bar":"e","baz":"c"}</pre>
` ); `);
// edit baz // edit baz
component.set({ prop: 'baz' }); component.set({ prop: 'baz' });
assert.equal( input.value, 'c' ); assert.equal(input.value, 'c');
input.value = 'f'; input.value = 'f';
input.dispatchEvent( event ); input.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<input> <input>
<pre>{"foo":"a","bar":"e","baz":"f"}</pre> <pre>{"foo":"a","bar":"e","baz":"f"}</pre>
` ); `);
// edit foo // edit foo
component.set({ prop: 'foo' }); component.set({ prop: 'foo' });
assert.equal( input.value, 'a' ); assert.equal(input.value, 'a');
input.value = 'd'; input.value = 'd';
input.dispatchEvent( event ); input.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<input> <input>
<pre>{"foo":"d","bar":"e","baz":"f"}</pre> <pre>{"foo":"d","bar":"e","baz":"f"}</pre>
` ); `);
} },
}; };

44
test/runtime/samples/binding-input-text-deep-contextual/_config.js
Unescape View File

@ -3,27 +3,47 @@ export default {
items: [ items: [
{ description: 'one' }, { description: 'one' },
{ description: 'two' }, { description: 'two' },
{ description: 'three' } { description: '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 ) {
const inputs = [ ...target.querySelectorAll( 'input' ) ];
assert.equal( inputs[0].value, 'one' ); html: `
<div><input><p>one</p></div>
<div><input><p>two</p></div>
<div><input><p>three</p></div>
`,
const event = new window.Event( 'input' ); 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')];
assert.equal(inputs[0].value, 'one');
const event = new window.Event('input');
inputs[1].value = 'four'; inputs[1].value = 'four';
inputs[1].dispatchEvent( event ); inputs[1].dispatchEvent(event);
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>
`);
const items = component.get().items; const items = component.get().items;
items[2].description = 'five'; items[2].description = '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>
`);
},
}; };

38
test/runtime/samples/binding-input-text-deep/_config.js
Unescape View File

@ -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>
`);
},
}; };

5
test/runtime/samples/binding-input-text/_config.js
Unescape View File

@ -8,6 +8,11 @@ export default {
<p>hello world</p> <p>hello world</p>
`, `,
ssrHtml: `
<input value="world">
<p>hello world</p>
`,
test(assert, component, target, window) { test(assert, component, target, window) {
const input = target.querySelector('input'); const input = target.querySelector('input');
assert.equal(input.value, 'world'); assert.equal(input.value, 'world');

10
test/runtime/samples/binding-select-implicit-option-value/_config.js
Unescape View File

@ -14,6 +14,16 @@ export default {
<p>foo: 2</p> <p>foo: 2</p>
`, `,
ssrHtml: `
<select value=2>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
<p>foo: 2</p>
`,
test(assert, component, target, window) { test(assert, component, target, window) {
const select = target.querySelector('select'); const select = target.querySelector('select');
const options = [...target.querySelectorAll('option')]; const options = [...target.querySelectorAll('option')];

26
test/runtime/samples/binding-select-initial-value/_config.js
Unescape View File

@ -11,17 +11,29 @@ export default {
<p>selected: b</p> <p>selected: b</p>
`, `,
ssrHtml: `
<p>selected: b</p>
<select value=b>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
</select>
<p>selected: b</p>
`,
data: { data: {
selected: 'b' selected: 'b',
}, },
test ( assert, component, target ) { test(assert, component, target) {
const select = target.querySelector( 'select' ); const select = target.querySelector('select');
const options = [ ...target.querySelectorAll( 'option' ) ]; const options = [...target.querySelectorAll('option')];
assert.equal( select.value, 'b' ); assert.equal(select.value, 'b');
assert.ok( options[1].selected ); assert.ok(options[1].selected);
component.destroy(); component.destroy();
} },
}; };

36
test/runtime/samples/binding-select/_config.js
Unescape View File

@ -11,24 +11,36 @@ export default {
<p>selected: one</p> <p>selected: one</p>
`, `,
ssrHtml: `
<p>selected: one</p>
<select value=one>
<option value='one'>one</option>
<option value='two'>two</option>
<option value='three'>three</option>
</select>
<p>selected: one</p>
`,
data: { data: {
selected: 'one' selected: 'one',
}, },
test ( assert, component, target, window ) { test(assert, component, target, window) {
const select = target.querySelector( 'select' ); const select = target.querySelector('select');
const options = [ ...target.querySelectorAll( 'option' ) ]; const options = [...target.querySelectorAll('option')];
assert.deepEqual( options, select.options ); assert.deepEqual(options, select.options);
assert.equal( component.get().selected, 'one' ); assert.equal(component.get().selected, 'one');
const change = new window.Event( 'change' ); const change = new window.Event('change');
options[1].selected = true; options[1].selected = true;
select.dispatchEvent( change ); select.dispatchEvent(change);
assert.equal( component.get().selected, 'two' ); assert.equal(component.get().selected, 'two');
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<p>selected: two</p> <p>selected: two</p>
<select> <select>
@ -38,8 +50,8 @@ export default {
</select> </select>
<p>selected: two</p> <p>selected: two</p>
` ); `);
component.set({ selected: 'three' }); component.set({ selected: 'three' });
} },
}; };

29
test/runtime/samples/binding-textarea/_config.js
Unescape View File

@ -1,6 +1,6 @@
export default { export default {
data: { data: {
value: 'some text' value: 'some text',
}, },
html: ` html: `
@ -8,25 +8,30 @@ export default {
<p>some text</p> <p>some text</p>
`, `,
test ( assert, component, target, window ) { ssrHtml: `
const textarea = target.querySelector( 'textarea' ); <textarea value="some text"></textarea>
assert.equal( textarea.value, 'some text' ); <p>some text</p>
`,
const event = new window.Event( 'input' ); test(assert, component, target, window) {
const textarea = target.querySelector('textarea');
assert.equal(textarea.value, 'some text');
const event = new window.Event('input');
textarea.value = 'hello'; textarea.value = 'hello';
textarea.dispatchEvent( event ); textarea.dispatchEvent(event);
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<textarea></textarea> <textarea></textarea>
<p>hello</p> <p>hello</p>
` ); `);
component.set({ value: 'goodbye' }); component.set({ value: 'goodbye' });
assert.equal( textarea.value, 'goodbye' ); assert.equal(textarea.value, 'goodbye');
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<textarea></textarea> <textarea></textarea>
<p>goodbye</p> <p>goodbye</p>
` ); `);
} },
}; };

23
test/runtime/samples/component-binding-deep/_config.js
Unescape View File

@ -4,19 +4,22 @@ export default {
<p>foo</p> <p>foo</p>
`, `,
test ( assert, component, target, window ) { ssrHtml: `
const event = new window.MouseEvent( 'input' ); <input value=foo>
const input = target.querySelector( 'input' ); <p>foo</p>
`,
test(assert, component, target, window) {
const event = new window.MouseEvent('input');
const input = target.querySelector('input');
input.value = 'blah'; input.value = 'blah';
input.dispatchEvent( event ); input.dispatchEvent(event);
assert.deepEqual( component.get().deep, { name: 'blah' } ); assert.deepEqual(component.get().deep, { name: 'blah' });
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<input> <input>
<p>blah</p> <p>blah</p>
` ); `);
},
component.destroy();
}
}; };

7
test/runtime/samples/component-binding-each-nested/_config.js
Unescape View File

@ -4,6 +4,13 @@ export default {
<p>foo, bar, baz</p> <p>foo, bar, baz</p>
`, `,
ssrHtml: `
<input value=foo>
<input value=bar>
<input value=baz>
<p>foo, bar, baz</p>
`,
test ( assert, component, target, window ) { test ( assert, component, target, window ) {
const event = new window.MouseEvent( 'input' ); const event = new window.MouseEvent( 'input' );
const inputs = target.querySelectorAll( 'input' ); const inputs = target.querySelectorAll( 'input' );

7
test/runtime/samples/component-binding-each/_config.js
Unescape View File

@ -4,6 +4,13 @@ export default {
<p>foo, bar, baz</p> <p>foo, bar, baz</p>
`, `,
ssrHtml: `
<input value=foo>
<input value=bar>
<input value=baz>
<p>foo, bar, baz</p>
`,
test ( assert, component, target, window ) { test ( assert, component, target, window ) {
const event = new window.MouseEvent( 'input' ); const event = new window.MouseEvent( 'input' );
const inputs = target.querySelectorAll( 'input' ); const inputs = target.querySelectorAll( 'input' );

8
test/runtime/samples/deconflict-component-refs/_config.js
Unescape View File

@ -7,6 +7,14 @@ export default {
</ul> </ul>
`, `,
ssrHtml: `
<ul>
<li><input value=foo></li>
<li>bar</li>
<li>baz</li>
</ul>
`,
data: { data: {
components: [ components: [
{ name: 'foo', edit: true }, { name: 'foo', edit: true },

6
test/runtime/samples/each-block-deconflict-name-context/_config.js
Unescape View File

@ -11,6 +11,12 @@ export default {
<input> <input>
`, `,
ssrHtml: `
<input value=x>
<input value=y>
<input value=z>
`,
test(assert, component, target, window) { test(assert, component, target, window) {
const inputs = target.querySelectorAll('input'); const inputs = target.querySelectorAll('input');

6
test/runtime/samples/each-block-destructured-object-binding/_config.js
Unescape View File

@ -9,6 +9,12 @@ export default {
<p>Doctor Who</p> <p>Doctor Who</p>
`, `,
ssrHtml: `
<input value=Doctor>
<input value=Who>
<p>Doctor Who</p>
`,
test(assert, component, target, window) { test(assert, component, target, window) {
const inputs = target.querySelectorAll('input'); const inputs = target.querySelectorAll('input');

17
test/runtime/samples/globals-not-overwritten-by-bindings/_config.js
Unescape View File

@ -16,6 +16,23 @@ export default {
</div> </div>
`, `,
ssrHtml: `
<div class="todo done">
<input type="checkbox" checked>
<input type="text" value="Buy some milk">
</div>
<div class="todo done">
<input type="checkbox" checked>
<input type="text" value="Do the laundry">
</div>
<div class="todo ">
<input type="checkbox">
<input type="text" value="Find life's true purpose">
</div>
`,
data: { data: {
todos: { todos: {
first: { first: {

18
test/runtime/samples/if-block-no-outro-else-with-outro/_config.js
Unescape View File

@ -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>
`);
}, },
}; };

8
test/runtime/samples/observe-binding-ignores-unchanged/_config.js
Unescape View File

@ -1,6 +1,12 @@
export default { export default {
html: ` html: `
<input type='number'> <input type=number>
<p>field1: 1</p>
<p>field2: 2</p>
`,
ssrHtml: `
<input type=number value=1>
<p>field1: 1</p> <p>field1: 1</p>
<p>field2: 2</p> <p>field2: 2</p>
`, `,

5
test/runtime/samples/spread-component-with-bind/_config.js
Unescape View File

@ -4,6 +4,11 @@ export default {
<input> <input>
`, `,
ssrHtml: `
<p>foo</p>
<input value=foo>
`,
test (assert, component, target, window) { test (assert, component, target, window) {
const input = target.querySelector('input'); const input = target.querySelector('input');

5
test/runtime/samples/store-binding/_config.js
Unescape View File

@ -12,6 +12,11 @@ export default {
<input> <input>
`, `,
ssrHtml: `
<h1>Hello world!</h1>
<input value=world>
`,
test(assert, component, target, window) { test(assert, component, target, window) {
const input = target.querySelector('input'); const input = target.querySelector('input');
const event = new window.Event('input'); const event = new window.Event('input');

5
test/runtime/samples/store-component-binding-deep/_config.js
Unescape View File

@ -14,6 +14,11 @@ export default {
<input> <input>
`, `,
ssrHtml: `
<h1>Hello world!</h1>
<input value=world>
`,
test(assert, component, target, window) { test(assert, component, target, window) {
const input = target.querySelector('input'); const input = target.querySelector('input');
const event = new window.Event('input'); const event = new window.Event('input');

15
test/runtime/samples/store-component-binding-each/_config.js
Unescape View File

@ -8,7 +8,16 @@ export default {
store, store,
html: ` html: `
<input><input><input> <input>
<input>
<input>
<p>foo, bar, baz</p>
`,
ssrHtml: `
<input value=foo>
<input value=bar>
<input value=baz>
<p>foo, bar, baz</p> <p>foo, bar, baz</p>
`, `,
@ -21,7 +30,9 @@ export default {
assert.deepEqual(store.get().a, ['blah', 'bar', 'baz']); assert.deepEqual(store.get().a, ['blah', 'bar', 'baz']);
assert.htmlEqual(target.innerHTML, ` assert.htmlEqual(target.innerHTML, `
<input><input><input> <input>
<input>
<input>
<p>blah, bar, baz</p> <p>blah, bar, baz</p>
`); `);

5
test/runtime/samples/store-component-binding/_config.js
Unescape View File

@ -12,6 +12,11 @@ export default {
<input> <input>
`, `,
ssrHtml: `
<h1>Hello world!</h1>
<input value=world>
`,
test(assert, component, target, window) { test(assert, component, target, window) {
const input = target.querySelector('input'); const input = target.querySelector('input');
const event = new window.Event('input'); const event = new window.Event('input');

4
test/server-side-rendering/index.js
Unescape View File

@ -120,7 +120,9 @@ describe("ssr", () => {
store: (config.store !== true) && config.store store: (config.store !== true) && config.store
}); });
if (config.html) { if (config.ssrHtml) {
assert.htmlEqual(html, config.ssrHtml);
} else if (config.html) {
assert.htmlEqual(html, config.html); assert.htmlEqual(html, config.html);
} }
} catch (err) { } catch (err) {

1
test/server-side-rendering/samples/bindings/_expected.html
Unescape View File

@ -0,0 +1 @@
<input value='bar'>

8
test/server-side-rendering/samples/bindings/main.html
Unescape View File

@ -0,0 +1,8 @@
<input bind:value=foo >
<script>
export default {
data() {
return { foo: 'bar' };
}
};
</script>
Write Preview
Loading…
Cancel
Save