Add form reset fixture for selects

Author: Brandon Dail

fixtures/dom/src/components/fixtures/selects/index.js

@@ -7,11 +7,23 @@ const ReactDOM = window.ReactDOM;
 class SelectFixture extends React.Component {
   state = {value: ''};
   _nestedDOMNode = null;
+  _singleFormDOMNode = null;
+  _multipleFormDOMNode = null;
 
   onChange = event => {
     this.setState({value: event.target.value});
   };
 
+  resetSingleOptionForm = event => {
+    event.preventDefault();
+    this._singleFormDOMNode.reset();
+  };
+
+  resetMultipleOptionForm = event => {
+    event.preventDefault();
+    this._multipleFormDOMNode.reset();
+  };
+
   componentDidMount() {
     this._renderNestedSelect();
   }
@@ -100,6 +112,49 @@ class SelectFixture extends React.Component {
             </select>
           </div>
         </TestCase>
+
+        <TestCase title="A single select being reset">
+          <TestCase.Steps>
+            <li>Open the select</li>
+            <li>Select "baz" or "foo"</li>
+            <li>Click the "Reset" button</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            The select should be reset to the inital value, "bar"
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <form ref={n => (this._singleFormDOMNode = n)}>
+              <select defaultValue="bar">
+                <option value="foo">foo</option>
+                <option value="bar">bar</option>
+                <option value="baz">baz</option>
+              </select>
+              <button onClick={this.resetSingleOptionForm}>Reset</button>
+            </form>
+          </div>
+        </TestCase>
+
+        <TestCase title="A multiple select being reset">
+          <TestCase.Steps>
+            <li>Select any combination of options</li>
+            <li>Click the "Reset" button</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            The select should be reset to the initial values "foo" and "baz"
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <form ref={n => (this._multipleFormDOMNode = n)}>
+              <select multiple defaultValue={['foo', 'baz']}>
+                <option value="foo">foo</option>
+                <option value="bar">bar</option>
+                <option value="baz">baz</option>
+              </select>
+              <button onClick={this.resetMultipleOptionForm}>Reset</button>
+            </form>
+          </div>
+        </TestCase>
       </FixtureSet>
     );
   }