fix: adjust test output

pull/16017/head
paoloricciuti 4 months ago
parent 6af745e781
commit f1269353b3

@ -1,9 +1,9 @@
import { test } from '../../test'; import { test } from '../../test';
export default test({ export default test({
html: ` ssrHtml: `
<select> <select>
<option value="[object Object]">wheeee</option> <option selected="" value="[object Object]">wheeee</option>
</select> </select>
` `
}); });

@ -17,9 +17,9 @@ export default test({
return { tasks, selected: tasks[0] }; return { tasks, selected: tasks[0] };
}, },
html: ` ssrHtml: `
<select> <select>
<option value='[object Object]'>put your left leg in</option> <option selected="" value='[object Object]'>put your left leg in</option>
<option value='[object Object]'>your left leg out</option> <option value='[object Object]'>your left leg out</option>
<option value='[object Object]'>in, out, in, out</option> <option value='[object Object]'>in, out, in, out</option>
<option value='[object Object]'>shake it all about</option> <option value='[object Object]'>shake it all about</option>
@ -36,7 +36,28 @@ export default test({
<p>shake it all about</p> <p>shake it all about</p>
`, `,
async test({ assert, component, target, window }) { async test({ assert, component, target, window, variant }) {
assert.htmlEqual(
target.innerHTML,
`
<select>
<option ${variant === 'hydrate' ? 'selected="" ' : ''}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>
`
);
const input = target.querySelector('input'); const input = target.querySelector('input');
const select = target.querySelector('select'); const select = target.querySelector('select');
const options = target.querySelectorAll('option'); const options = target.querySelectorAll('option');
@ -57,7 +78,7 @@ export default test({
target.innerHTML, target.innerHTML,
` `
<select> <select>
<option value='[object Object]'>put your left leg in</option> <option ${variant === 'hydrate' ? 'selected="" ' : ''}value='[object Object]'>put your left leg in</option>
<option value='[object Object]'>your left leg out</option> <option value='[object Object]'>your left leg out</option>
<option value='[object Object]'>in, out, in, out</option> <option value='[object Object]'>in, out, in, out</option>
<option value='[object Object]'>shake it all about</option> <option value='[object Object]'>shake it all about</option>
@ -94,7 +115,7 @@ export default test({
target.innerHTML, target.innerHTML,
` `
<select> <select>
<option value='[object Object]'>put your left leg in</option> <option ${variant === 'hydrate' ? 'selected="" ' : ''}value='[object Object]'>put your left leg in</option>
<option value='[object Object]'>your left leg out</option> <option value='[object Object]'>your left leg out</option>
<option value='[object Object]'>in, out, in, out</option> <option value='[object Object]'>in, out, in, out</option>
<option value='[object Object]'>shake it all about</option> <option value='[object Object]'>shake it all about</option>

@ -6,17 +6,29 @@ export default test({
return { values: [1, 2, 3], foo: 2 }; return { values: [1, 2, 3], foo: 2 };
}, },
html: ` ssrHtml: `
<select> <select>
<option value="1">1</option> <option value="1">1</option>
<option value="2">2</option> <option selected="" value="2">2</option>
<option value="3">3</option> <option value="3">3</option>
</select> </select>
<p>foo: 2</p> <p>foo: 2</p>
`, `,
test({ assert, component, target, window }) { test({ assert, component, target, window, variant }) {
assert.htmlEqual(
target.innerHTML,
`
<select>
<option value="1">1</option>
<option ${variant === 'hydrate' ? 'selected="" ' : ''}value="2">2</option>
<option value="3">3</option>
</select>
<p>foo: 2</p>
`
);
const select = target.querySelector('select'); const select = target.querySelector('select');
ok(select); ok(select);
const options = [...target.querySelectorAll('option')]; const options = [...target.querySelectorAll('option')];
@ -36,7 +48,7 @@ export default test({
` `
<select> <select>
<option value="1">1</option> <option value="1">1</option>
<option value="2">2</option> <option ${variant === 'hydrate' ? 'selected="" ' : ''}value="2">2</option>
<option value="3">3</option> <option value="3">3</option>
</select> </select>

@ -1,15 +1,15 @@
import { test } from '../../test'; import { test } from '../../test';
export default test({ export default test({
html: ` ssrHtml: `
<select> <select>
<option value='hullo'>Hullo</option> <option selected="" value='hullo'>Hullo</option>
<option value='world'>World</option> <option value='world'>World</option>
</select> </select>
<select> <select>
<option value='hullo'>Hullo</option> <option value='hullo'>Hullo</option>
<option value='world'>World</option> <option selected="" value='world'>World</option>
</select> </select>
`, `,
@ -19,7 +19,21 @@ export default test({
}; };
}, },
test({ assert, component, target, window }) { test({ assert, component, target, window, variant }) {
assert.htmlEqual(
target.innerHTML,
`
<select>
<option ${variant === 'hydrate' ? 'selected="" ' : ''}value='hullo'>Hullo</option>
<option value='world'>World</option>
</select>
<select>
<option value='hullo'>Hullo</option>
<option ${variant === 'hydrate' ? 'selected="" ' : ''}value='world'>World</option>
</select>
`
);
const selects = [...target.querySelectorAll('select')]; const selects = [...target.querySelectorAll('select')];
const change = new window.Event('change'); const change = new window.Event('change');

@ -2,27 +2,28 @@ import { flushSync } from 'svelte';
import { ok, test } from '../../test'; import { ok, test } from '../../test';
export default test({ export default test({
html: ` test({ assert, target, variant }) {
<select> assert.htmlEqual(
<option selected="" value="a">A</option> target.innerHTML,
<option value="b">B</option> `
</select> <select>
selected: a <option${variant === 'hydrate' ? ' selected=""' : ''} value="a">A</option$>
`, <option value="b">B</option>
</select>
test({ assert, target }) { selected: a
`
);
const select = target.querySelector('select'); const select = target.querySelector('select');
ok(select); ok(select);
const event = new window.Event('change'); const event = new window.Event('change');
select.value = 'b'; select.value = 'b';
select.dispatchEvent(event); select.dispatchEvent(event);
flushSync(); flushSync();
assert.htmlEqual( assert.htmlEqual(
target.innerHTML, target.innerHTML,
` `
<select> <select>
<option value="a">A</option> <option${variant === 'hydrate' ? ' selected=""' : ''} value="a">A</option$>
<option value="b">B</option> <option value="b">B</option>
</select> </select>
selected: b selected: b

@ -3,8 +3,14 @@
let checkbox = $state(true); let checkbox = $state(true);
let radio_group = $state('a'); let radio_group = $state('a');
let checkbox_group = $state(['a']); let checkbox_group = $state(['a']);
let select = $state('b'); // this will be ssrd
let select = $state('a');
let textarea = $state('textarea'); let textarea = $state('textarea');
$effect(()=>{
// changing the value of `select` on mount
select = 'b';
})
</script> </script>
<p>{JSON.stringify({ text, checkbox, radio_group, checkbox_group, select, textarea })}</p> <p>{JSON.stringify({ text, checkbox, radio_group, checkbox_group, select, textarea })}</p>

Loading…
Cancel
Save