DOM fixture updates (#13368)

* Add home component. Async load fixtures.

This commit adds a homepage to the DOM fixtures that includes browser
testing information and asynchronously loads fixtures.

This should make it easier to find DOM testing information and keep
the payload size in check as we add more components to the fixtures.

* Update browser support fields

* Tweak select width

* Fix typo

* Report actual error when fixture fails to load

* Update browser information

* Update browserstack subscription info

* English

* Switch let for const in fixture loader

fixtures/dom/src/components/Header.js

@@ -35,11 +35,11 @@ class Header extends React.Component {
           <span className="header__logo">
             <img
               src={process.env.PUBLIC_URL + '/react-logo.svg'}
-              alt=""
-              width="32"
-              height="32"
+              alt="React"
+              width="20"
+              height="20"
             />
-            React Sandbox (v{React.version})
+            <a href="/">DOM Test Fixtures (v{React.version})</a>
           </span>
 
           <div className="header-controls">

fixtures/dom/src/components/fixtures/home.js

@@ -0,0 +1,117 @@
+const React = window.React;
+
+export default function Home() {
+  return (
+    <main>
+      <h1>DOM Test Fixtures</h1>
+      <p>
+        Use this site to test browser quirks and other behavior that can not be
+        captured through unit tests.
+      </p>
+      <section>
+        <h2>Tested Browsers</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>Browser</th>
+              <th>Versions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Chrome - Desktop</td>
+              <td>
+                49<sup>*</sup>, Latest
+              </td>
+            </tr>
+            <tr>
+              <td>Chrome - Android</td>
+              <td>Latest</td>
+            </tr>
+            <tr>
+              <td>Firefox Desktop</td>
+              <td>
+                <a href="https://www.mozilla.org/en-US/firefox/organizations/">
+                  ESR<sup>†</sup>
+                </a>, Latest
+              </td>
+            </tr>
+            <tr>
+              <td>Internet Explorer</td>
+              <td>9, 10, 11</td>
+            </tr>
+            <tr>
+              <td>Microsoft Edge</td>
+              <td>14, Latest</td>
+            </tr>
+            <tr>
+              <td>Safari - Desktop</td>
+              <td>7, Latest</td>
+            </tr>
+            <tr>
+              <td>Safari - iOS</td>
+              <td>7, Latest</td>
+            </tr>
+          </tbody>
+        </table>
+        <footer>
+          <small>* Chrome 49 is the last release for Windows XP.</small>
+          <br />
+          <small>
+            † Firefox Extended Support Release (ESR) is used by many
+            institutions.
+          </small>
+        </footer>
+      </section>
+      <section>
+        <h2>How do I test browsers I don't have access to?</h2>
+        <p>
+          Getting test coverage across all of these browsers can be difficult,
+          particularly for older versions of evergreen browsers. Fortunately
+          there are a handful of tools that make browser testing easy.
+        </p>
+        <section>
+          <h3>Paid services</h3>
+          <ul>
+            <li>
+              <a href="https://browserstack.com">BrowserStack</a>
+            </li>
+            <li>
+              <a href="https://saucelabs.com">Sauce Labs</a>
+            </li>
+            <li>
+              <a href="https://crossbrowsertesting.com/">CrossBrowserTesting</a>
+            </li>
+          </ul>
+          <p>
+            These services provide access to all browsers we test, however they
+            cost money. There is no obligation to pay for them. Maintainers have
+            access to a BrowserStack subscription; feel free to contact a
+            maintainer or mention browsers where extra testing is required.
+          </p>
+        </section>
+        <section>
+          <h3>Browser downloads</h3>
+          <p>A handful of browsers are available for download directly:</p>
+          <ul>
+            <li>
+              <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">
+                Internet Explorer (9-11) and MS Edge virtual machines
+              </a>
+            </li>
+            <li>
+              <a href="https://www.chromium.org/getting-involved/download-chromium#TOC-Downloading-old-builds-of-Chrome-Chromium">
+                Chromium snapshots (for older versions of Chrome)
+              </a>
+            </li>
+            <li>
+              <a href="https://www.mozilla.org/en-US/firefox/organizations/">
+                Firefox Extended Support Release (ESR)
+              </a>
+            </li>
+          </ul>
+        </section>
+      </section>
+    </main>
+  );
+}

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

@@ -1,63 +1,62 @@
-import RangeInputFixtures from './range-inputs';
-import TextInputFixtures from './text-inputs';
-import SelectFixtures from './selects';
-import TextAreaFixtures from './textareas';
-import InputChangeEvents from './input-change-events';
-import NumberInputFixtures from './number-inputs';
-import PasswordInputFixtures from './password-inputs';
-import ButtonFixtures from './buttons';
-import DateInputFixtures from './date-inputs';
-import ErrorHandling from './error-handling';
-import EventPooling from './event-pooling';
-import CustomElementFixtures from './custom-elements';
-import MediaEventsFixtures from './media-events';
-import PointerEventsFixtures from './pointer-events';
-import MouseEventsFixtures from './mouse-events';
-import SelectionEventsFixtures from './selection-events';
-
 const React = window.React;
+const fixturePath = window.location.pathname;
 
 /**
  * A simple routing component that renders the appropriate
  * fixture based on the location pathname.
  */
-function FixturesPage() {
-  switch (window.location.pathname) {
-    case '/text-inputs':
-      return <TextInputFixtures />;
-    case '/range-inputs':
-      return <RangeInputFixtures />;
-    case '/selects':
-      return <SelectFixtures />;
-    case '/textareas':
-      return <TextAreaFixtures />;
-    case '/input-change-events':
-      return <InputChangeEvents />;
-    case '/number-inputs':
-      return <NumberInputFixtures />;
-    case '/password-inputs':
-      return <PasswordInputFixtures />;
-    case '/buttons':
-      return <ButtonFixtures />;
-    case '/date-inputs':
-      return <DateInputFixtures />;
-    case '/error-handling':
-      return <ErrorHandling />;
-    case '/event-pooling':
-      return <EventPooling />;
-    case '/custom-elements':
-      return <CustomElementFixtures />;
-    case '/media-events':
-      return <MediaEventsFixtures />;
-    case '/pointer-events':
-      return <PointerEventsFixtures />;
-    case '/mouse-events':
-      return <MouseEventsFixtures />;
-    case '/selection-events':
-      return <SelectionEventsFixtures />;
-    default:
-      return <p>Please select a test fixture.</p>;
+class FixturesPage extends React.Component {
+  static defaultProps = {
+    fixturePath: fixturePath === '/' ? '/home' : fixturePath,
+  };
+
+  state = {
+    isLoading: true,
+    error: null,
+    Fixture: null,
+  };
+
+  componentDidMount() {
+    this.loadFixture();
+  }
+
+  async loadFixture() {
+    const {fixturePath} = this.props;
+
+    try {
+      const module = await import(`.${fixturePath}`);
+
+      this.setState({Fixture: module.default});
+    } catch (error) {
+      console.error(error);
+      this.setState({error});
+    } finally {
+      this.setState({isLoading: false});
+    }
+  }
+
+  render() {
+    const {Fixture, error, isLoading} = this.state;
+
+    if (isLoading) {
+      return null;
+    }
+
+    if (error) {
+      return <FixtureError error={error} />;
+    }
+
+    return <Fixture />;
   }
 }
 
+function FixtureError({error}) {
+  return (
+    <section>
+      <h2>Error loading fixture</h2>
+      <p>{error.message}</p>
+    </section>
+  );
+}
+
 export default FixturesPage;

fixtures/dom/src/style.css

@@ -4,14 +4,13 @@
   box-sizing: border-box;
 }
 
-html {
-  font-size: 10px;
-}
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Arimo", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
-  font-size: 1.4rem;
+  font-size: 15px;
+  line-height: 24px;
   margin: 0;
   padding: 0;
 }
@@ -26,17 +25,78 @@ button {
   padding: 6px 8px;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #171717;
+  font-weight: 600;
+}
+
+h1 {
+  font-size: 32px;
+  margin: 24px 0;
+}
+
+h2 {
+  font-size: 24px;
+  margin: 24px 0 16px;
+}
+
+h3 {
+  font-size: 18px;
+  margin: 8px 0 16px;
+}
+
+h4, h4, h5, h6 {
+  font-size: 16px;
+  margin: 0 0 16px;
+}
+
+code {
+  font-size: 90%;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:link:hover,
+a:link:focus {
+  text-decoration: underline;
+}
+
+textarea {
+  border-radius: 2px;
+  border: 1px solid #d9d9d9;
+  font-size: 12px;
+  min-height: 100px;
+  min-width: 300px;
+  padding: 8px;
+}
+
 .header {
-  background: #222;
+  background: #171717;
   box-shadow: inset 0 -1px 3px #000;
-  font-size: 1.6rem;
-  line-height: 3.2rem;
   overflow: hidden;
-  padding: .8rem 1.6rem;
+  padding: 8px;
+}
+
+.header a {
+  text-decoration: none;
+  color: white;
+}
+
+.header a:hover,
+.header a:focus{
+  text-decoration: underline;
 }
 
 .header select {
-  width: 12rem;
+  margin-left: 8px;
+  max-width: 150px;
 }
 
 .header__inner {
@@ -108,11 +168,11 @@ fieldset {
 
 ul,
 ol {
-  margin: 0 0 2rem 0;
+  margin: 0 0 16px 0;
 }
 
-li {
-  margin-bottom: 0.4rem;
+p {
+  margin: 16px 0;
 }
 
 .type-subheading {
@@ -130,11 +190,10 @@ li {
 .footnote {
   border-left: 4px solid #aaa;
   color: #444;
+  font-size: 14px;
   font-style: italic;
-  line-height: 1.5;
-  margin-bottom: 2.4rem;
-  margin-left: 0.4rem;
-  padding-left: 1.6rem;
+  margin-left: 8px;
+  padding-left: 16px;
 }
 
 .test-case {
@@ -222,3 +281,24 @@ li {
 .field-group {
   overflow: hidden;
 }
+
+table {
+  border: 1px solid #d9d9d9;
+  border-width: 1px 1px 1px 0;
+  border-collapse: collapse;
+  margin: 16px 0;
+  font-size: 14px;
+  line-height: 20px;
+  width: 100%;
+}
+
+td,
+th {
+  text-align: left;
+  border: 1px solid #d9d9d9;
+  padding: 6px;
+}
+
+tbody tr:nth-child(even) {
+  background: #f0f0f0;
+}