From 3280a1974d68c0b6709d32ee16120db943a26743 Mon Sep 17 00:00:00 2001
From: Zirro <code@zirro.se>
Date: Mon, 1 May 2017 20:31:13 +0200
Subject: [PATCH] Use .querySelector(':checked'), enable several <select> tests

---
 src/generators/dom/visitors/Element/Binding.js         |  4 ++--
 .../samples/binding-select-initial-value/_config.js    |  2 --
 .../samples/binding-select-initial-value/main.html     |  6 +++---
 .../runtime/samples/binding-select-multiple/_config.js | 10 +++++-----
 test/runtime/samples/binding-select/_config.js         |  6 ++++--
 test/runtime/samples/select-change-handler/_config.js  |  2 --
 .../samples/select-one-way-bind-object/_config.js      |  2 --
 7 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/generators/dom/visitors/Element/Binding.js b/src/generators/dom/visitors/Element/Binding.js
index 2ca07f3f2e..83d415cb74 100644
--- a/src/generators/dom/visitors/Element/Binding.js
+++ b/src/generators/dom/visitors/Element/Binding.js
@@ -30,7 +30,7 @@ export default function visitBinding ( generator, block, state, node, attribute
 	// <select> special case
 	if ( node.name === 'select' ) {
 		if ( !isMultipleSelect ) {
-			setter = `var selectedOption = ${state.parentNode}.selectedOptions[0] || ${state.parentNode}.options[0];\n${setter}`;
+			setter = `var selectedOption = ${state.parentNode}.querySelector(':checked') || ${state.parentNode}.options[0];\n${setter}`;
 		}
 
 		const value = block.getUniqueName( 'value' );
@@ -160,7 +160,7 @@ function getBindingEventName ( node, attribute ) {
 function getBindingValue ( generator, block, state, node, attribute, isMultipleSelect, bindingGroup, type ) {
 	// <select multiple bind:value='selected>
 	if ( isMultipleSelect ) {
-		return `[].map.call( ${state.parentNode}.selectedOptions, function ( option ) { return option.__value; })`;
+		return `[].map.call( ${state.parentNode}.querySelectorAll(':checked'), function ( option ) { return option.__value; })`;
 	}
 
 	// <select bind:value='selected>
diff --git a/test/runtime/samples/binding-select-initial-value/_config.js b/test/runtime/samples/binding-select-initial-value/_config.js
index f6b685fd7e..99a7129262 100644
--- a/test/runtime/samples/binding-select-initial-value/_config.js
+++ b/test/runtime/samples/binding-select-initial-value/_config.js
@@ -1,6 +1,4 @@
 export default {
-	skip: true, // selectedOptions doesn't work in JSDOM???
-
 	html: `
 		<p>selected: b</p>
 
diff --git a/test/runtime/samples/binding-select-initial-value/main.html b/test/runtime/samples/binding-select-initial-value/main.html
index d7d02194c8..ea15402240 100644
--- a/test/runtime/samples/binding-select-initial-value/main.html
+++ b/test/runtime/samples/binding-select-initial-value/main.html
@@ -1,9 +1,9 @@
 <p>selected: {{selected}}</p>
 
 <select bind:value='selected'>
-	<option value="a">a</option>
-	<option value="b">b</option>
-	<option value="c">c</option>
+	<option>a</option>
+	<option>b</option>
+	<option>c</option>
 </select>
 
 <p>selected: {{selected}}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-multiple/_config.js b/test/runtime/samples/binding-select-multiple/_config.js
index 89b0da9658..ec4f3dfe4e 100644
--- a/test/runtime/samples/binding-select-multiple/_config.js
+++ b/test/runtime/samples/binding-select-multiple/_config.js
@@ -1,12 +1,12 @@
 export default {
-	skip: true, // selectedOptions doesn't work in JSDOM???
+	skip: true, // JSDOM
 
 	data: {
 		selected: [ 'two', 'three' ]
 	},
 
 	html: `
-		<select>
+		<select multiple>
 			<option>one</option>
 			<option>two</option>
 			<option>three</option>
@@ -26,7 +26,7 @@ export default {
 
 		assert.deepEqual( component.get( 'selected' ), [ 'three' ] );
 		assert.htmlEqual( target.innerHTML, `
-			<select>
+			<select multiple>
 				<option>one</option>
 				<option>two</option>
 				<option>three</option>
@@ -40,7 +40,7 @@ export default {
 
 		assert.deepEqual( component.get( 'selected' ), [ 'one', 'three' ] );
 		assert.htmlEqual( target.innerHTML, `
-			<select>
+			<select multiple>
 				<option>one</option>
 				<option>two</option>
 				<option>three</option>
@@ -56,7 +56,7 @@ export default {
 		assert.ok( !options[2].selected );
 
 		assert.htmlEqual( target.innerHTML, `
-			<select>
+			<select multiple>
 				<option>one</option>
 				<option>two</option>
 				<option>three</option>
diff --git a/test/runtime/samples/binding-select/_config.js b/test/runtime/samples/binding-select/_config.js
index 85cf6e9e1a..7fce00f327 100644
--- a/test/runtime/samples/binding-select/_config.js
+++ b/test/runtime/samples/binding-select/_config.js
@@ -1,6 +1,4 @@
 export default {
-	skip: true, // selectedOptions doesn't work in JSDOM???
-
 	html: `
 		<p>selected: one</p>
 
@@ -13,6 +11,10 @@ export default {
 		<p>selected: one</p>
 	`,
 
+	data: {
+		selected: 'one'
+	},
+
 	test ( assert, component, target, window ) {
 		const select = target.querySelector( 'select' );
 		const options = [ ...target.querySelectorAll( 'option' ) ];
diff --git a/test/runtime/samples/select-change-handler/_config.js b/test/runtime/samples/select-change-handler/_config.js
index 560061a09c..015c8182b4 100644
--- a/test/runtime/samples/select-change-handler/_config.js
+++ b/test/runtime/samples/select-change-handler/_config.js
@@ -1,6 +1,4 @@
 export default {
-	skip: true, // JSDOM
-
 	data: {
 		options: [ { id: 'a' }, { id: 'b' }, { id: 'c' } ],
 		selected: 'b'
diff --git a/test/runtime/samples/select-one-way-bind-object/_config.js b/test/runtime/samples/select-one-way-bind-object/_config.js
index 946eaabceb..0d7ddaccad 100644
--- a/test/runtime/samples/select-one-way-bind-object/_config.js
+++ b/test/runtime/samples/select-one-way-bind-object/_config.js
@@ -1,8 +1,6 @@
 const items = [ {}, {} ];
 
 export default {
-	skip: true, // JSDOM quirks
-
 	'skip-ssr': true,
 
 	data: {