facebook · aweary · Jan 9, 2017 · Dec 16, 2016 · Dec 16, 2016 · Dec 16, 2016
diff --git a/.gitignore b/.gitignore
@@ -19,6 +19,8 @@ docs/downloads/*.zip
 docs/vendor/bundle
 examples/shared/*.js
 examples/**/bundle.js
+fixtures/dom/public/react-dom.js
+fixtures/dom/public/react.js
 test/the-files-to-test.generated.js
 *.log*
 chrome-user-data

diff --git a/fixtures/brunch/package.json b/fixtures/brunch/package.json
diff --git a/fixtures/dom/.gitignore b/fixtures/dom/.gitignore
@@ -0,0 +1,17 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+public/react.js
+public/react-dom.js
+
+# misc
+.DS_Store
+.env
+npm-debug.log
diff --git a/fixtures/dom/README.md b/fixtures/dom/README.md
@@ -0,0 +1,17 @@
+# DOM Fixtures
+
+A set of DOM test cases for quickly identifying browser issues.
+
+## Setup
+
+To reference a local build of React, first run `npm run build` at the root
+of the React project. Then:
+
+```
+cd fixtures/dom
+npm install
+npm start
+```
+
+The `start` command runs a script that copies over the local build of react into
+the public directory.
diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "react-fixtures",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.8.4"
+  },
+  "dependencies": {
+    "query-string": "^4.2.3",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "prestart": "cp ../../build/{react,react-dom}.js public/",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/fixtures/dom/public/favicon.ico b/fixtures/dom/public/favicon.ico
diff --git a/fixtures/dom/public/index.html b/fixtures/dom/public/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+    <script src="react-loader.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/fixtures/dom/public/react-loader.js b/fixtures/dom/public/react-loader.js
@@ -0,0 +1,43 @@
+/**
+ * Take a version from the window query string and load a specific
+ * version of React.
+ *
+ * @example
+ * http://localhost:3000?version=15.4.1
+ * (Loads React 15.4.1)
+ */
+
+var REACT_PATH = 'react.js';
+var DOM_PATH = 'react-dom.js';
+
+function parseQuery(qstr) {
+  var query = {};
+
+  var a = qstr.substr(1).split('&');
+
+  for (var i = 0; i < a.length; i++) {
+    var b = a[i].split('=');
+
+    query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || '');
+  }
+
+  return query;
+}
+
+var query = parseQuery(window.location.search);
+var version = query.version || 'local';
+
+if (version !== 'local') {
+  REACT_PATH = 'https://unpkg.com/react@' + version + '/dist/react.min.js';
+  DOM_PATH = 'https://unpkg.com/react-dom@' + version + '/dist/react-dom.min.js';
+}
+
+document.write('<script src="' + REACT_PATH + '"></script>');
+
+// Versions earlier than 14 do not use ReactDOM
+if (version === 'local' || parseFloat(version, 10) > 0.13) {
+  document.write('<script src="' + DOM_PATH + '"></script>');
+} else {
+  // Aliasing React to ReactDOM for compatability.
+  document.write('<script>ReactDOM = React</script>');
+}
diff --git a/fixtures/dom/src/components/App.js b/fixtures/dom/src/components/App.js
@@ -0,0 +1,20 @@
+const React = window.React;
+import Header from './Header';
+import Fixtures from './fixtures';
+
+import '../style.css';
+
+const App = React.createClass({
+  render() {
+    return (
+      <div>
+        <Header />
+        <div className="container" >
+          <Fixtures />
+        </div>
+      </div>
+    );
+  },
+});
+
+export default App;
diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
@@ -0,0 +1,68 @@
+import { parse, stringify } from 'query-string';
+const React = window.React;
+
+const Header = React.createClass({
+  getInitialState() {
+    const query = parse(window.location.search);
+    const version = query.version || 'local';
+    const versions = [version];
+    return { version, versions };
+  },
+  componentWillMount() {
+    fetch('https://api.github.com/repos/facebook/react/tags', { mode: 'cors' })
+      .then(res => res.json())
+      .then(tags => {
+        let versions = tags.map(tag => tag.name.slice(1));
+        versions = ['local', ...versions];
+        this.setState({ versions });
+      });
+  },
+  handleVersionChange(event) {
+    const query = parse(window.location.search);
+    query.version = event.target.value;
+    if (query.version === 'local') {
+      delete query.version;
+    }
+    window.location.search = stringify(query);
+  },
+  handleFixtureChange(event) {
+    window.location.pathname = event.target.value;
+  },
+  render() {
+    return (
+    <header className="header">
+      <div className="header__inner">
+        <span className="header__logo">
+          <img src="https://facebook.github.io/react/img/logo.svg" alt="" width="32" height="32" />
+          React Sandbox (v{React.version})
+        </span>
+
+        <div className="header-controls">
+          <label htmlFor="example">
+            <span className="sr-only">Select an example</span>
+            <select value={window.location.pathname} onChange={this.handleFixtureChange}>
+              <option value="/">Select a Fixture</option>
+              <option value="/range-inputs">Range Inputs</option>
+              <option value="/text-inputs">Text Inputs</option>
+              <option value="/selects">Selects</option>
+              <option value="/textareas">Textareas</option>
+            </select>
+          </label>
+          <label htmlFor="react_version">
+            <span className="sr-only">Select a version to test</span>
+            <select
+              value={this.state.version}
+              onChange={this.handleVersionChange}>
+                {this.state.versions.map(version => (
+                  <option key={version} value={version}>{version}</option>
+                ))}
+            </select>
+          </label>
+        </div>
+      </div>
+    </header>
+    );
+  },
+});
+
+export default Header;
diff --git a/fixtures/dom/src/components/fixtures/index.js b/fixtures/dom/src/components/fixtures/index.js
@@ -0,0 +1,28 @@
+const React = window.React;
+import RangeInputFixtures from './range-inputs';
+import TextInputFixtures from './text-inputs';
+import SelectFixtures from './selects';
+import TextAreaFixtures from './textareas/';
+
+/**
+ * A simple routing component that renders the appropriate
+ * fixture based on the location pathname.
+ */
+const FixturesPage = React.createClass({
+  render() {
+    switch (window.location.pathname) {
+      case '/text-inputs':
+        return <TextInputFixtures />;
+      case '/range-inputs':
+        return <RangeInputFixtures />;
+      case '/selects':
+        return <SelectFixtures />;
+      case '/textareas':
+        return <TextAreaFixtures />;
+      default:
+        return <p>Please select a test fixture.</p>;
+    }
+  },
+});
+
+module.exports = FixturesPage;
diff --git a/fixtures/dom/src/components/fixtures/range-inputs/index.js b/fixtures/dom/src/components/fixtures/range-inputs/index.js
@@ -0,0 +1,28 @@
+const React = window.React;
+
+const RangeInputs = React.createClass({
+  getInitialState() {
+    return { value: 0.5 };
+  },
+  onChange(event) {
+    this.setState({ value: event.target.value });
+  },
+  render() {
+    return (
+      <form>
+        <fieldset>
+          <legend>Controlled</legend>
+          <input type="range" value={this.state.value} onChange={this.onChange} />
+          <span className="hint">Value: {this.state.value}</span>
+        </fieldset>
+
+        <fieldset>
+          <legend>Uncontrolled</legend>
+          <input type="range" defaultValue={0.5} />
+        </fieldset>
+      </form>
+    );
+  },
+});
+
+export default RangeInputs;
diff --git a/fixtures/dom/src/components/fixtures/selects/index.js b/fixtures/dom/src/components/fixtures/selects/index.js
@@ -0,0 +1,37 @@
+const React = window.React;
+
+const SelectFixture = React.createClass({
+  getInitialState() {
+    return { value: '' };
+  },
+  onChange(event) {
+    this.setState({ value: event.target.value });
+  },
+  render() {
+    return (
+      <form>
+        <fieldset>
+          <legend>Controlled</legend>
+          <select value={this.state.value} onChange={this.onChange}>
+            <option value="">Select a color</option>
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+            <option value="green">Green</option>
+          </select>
+          <span className="hint">Value: {this.state.value}</span>
+        </fieldset>
+        <fieldset>
+          <legend>Uncontrolled</legend>
+          <select defaultValue="">
+            <option value="">Select a color</option>
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+            <option value="gree">Green</option>
+          </select>
+        </fieldset>
+      </form>
+    );
+  },
+});
+
+export default SelectFixture;