facebook · flarnie · May 3, 2017
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.development.js
+public/react-dom.development.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,23 @@
+{
+  "name": "react-fixtures",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.9.5"
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "query-string": "^4.2.3",
+    "prop-types": "^15.5.6",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1",
+    "semver": "^5.3.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "prestart": "cp ../../build/dist/{react,react-dom}.development.js public/",
+    "build": "react-scripts build && cp build/index.html build/200.html",
+    "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,33 @@
+<!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="https://unpkg.com/prop-types@15.5.6/prop-types.js"></script>
+    <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.development.js';
+var DOM_PATH = 'react-dom.development.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 compatibility.
+  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,18 @@
+const React = window.React;
+import Header from './Header';
+import Fixtures from './fixtures';
+
+import '../style.css';
+
+function App () {
+  return (
+    <div>
+      <Header />
+      <div className="container" >
+        <Fixtures />
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/fixtures/dom/src/components/Fixture.js b/fixtures/dom/src/components/Fixture.js
@@ -0,0 +1,22 @@
+const PropTypes = window.PropTypes;
+const React = window.React;
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+class Fixture extends React.Component {
+  render() {
+    const { children } = this.props;
+
+    return (
+      <div className="test-fixture">
+        {children}
+      </div>
+    );
+  }
+}
+
+Fixture.propTypes = propTypes;
+
+export default Fixture
diff --git a/fixtures/dom/src/components/FixtureSet.js b/fixtures/dom/src/components/FixtureSet.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  title: PropTypes.node.isRequired,
+  description: PropTypes.node.isRequired,
+};
+
+class FixtureSet extends React.Component {
+
+  render() {
+    const { title, description, children } = this.props;
+
+    return (
+      <div>
+        <h1>{title}</h1>
+        {description  && (
+          <p>{description}</p>
+        )}
+
+        {children}
+      </div>
+    );
+  }
+}
+
+FixtureSet.propTypes = propTypes;
+
+export default FixtureSet
diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
@@ -0,0 +1,73 @@
+import { parse, stringify } from 'query-string';
+import getVersionTags from '../tags';
+const React = window.React;
+
+class Header extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    const query = parse(window.location.search);
+    const version = query.version || 'local';
+    const versions = [version];
+    this.state = { version, versions };
+  }
+  componentWillMount() {
+    getVersionTags()
+      .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="/number-inputs">Number Input</option>
+              <option value="/password-inputs">Password Input</option>
+              <option value="/selects">Selects</option>
+              <option value="/textareas">Textareas</option>
+              <option value="/input-change-events">Input change events</option>
+              <option value="/buttons">Buttons</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;