Test fixture updates

- Pull in React from window global - Add field to TestCase for fix PR links - Update some styles
facebook · Feb 13, 2017 · 050bf3c · 050bf3c
1 parent ed88f18
commit 050bf3c
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 48 deletions.
diff --git a/fixtures/dom/src/components/Fixture.js b/fixtures/dom/src/components/Fixture.js
@@ -1,4 +1,4 @@
-import React from 'react';
+const React = window.React;
 
 const propTypes = {
   children: React.PropTypes.node.isRequired,
@@ -17,7 +17,7 @@ class Fixture extends React.Component {
 }
 
 Fixture.propTypes = propTypes;
-// 
+//
 // Fixture.Result = class extends React.Component {
 //   render() {
 //     const { children, passes } = this.props;

diff --git a/fixtures/dom/src/components/TestCase.js b/fixtures/dom/src/components/TestCase.js
@@ -2,22 +2,13 @@ import cn from 'classnames';
 import semver from 'semver';
 import React from 'react';
 import { parse } from 'query-string';
+import { semverString } from './propTypes'
 
 const propTypes = {
   children: React.PropTypes.node.isRequired,
   title: React.PropTypes.node.isRequired,
-  minimumVersion: (props, ...args) => {
-    let { minimumVersion } = props;
-
-    let error = React.PropTypes.string(props, ...args);
-    if (!error && minimumVersion != null && !semver.valid(minimumVersion))
-      error = new Error(
-        '`minimumVersion` should be a valid "semantic version" matching ' +
-        'an existing React version'
-      );
-
-    return error || null;
-  }
+  resolvedIn: semverString,
+  resolvedBy: React.PropTypes.string
 };
 
 class TestCase extends React.Component {
@@ -39,7 +30,8 @@ class TestCase extends React.Component {
     const {
       title,
       description,
-      minimumVersion,
+      resolvedIn,
+      resolvedBy,
       affectedBrowsers,
       children,
     } = this.props;
@@ -49,9 +41,9 @@ class TestCase extends React.Component {
     const { version } = parse(window.location.search);
     const isTestRelevant = (
       !version ||
-      !minimumVersion ||
-      semver.gte(version, minimumVersion)
-    )
+      !resolvedIn ||
+      semver.gte(version, resolvedIn)
+    );
 
     complete = !isTestRelevant || complete;
 
@@ -65,36 +57,57 @@ class TestCase extends React.Component {
         <h2 className="test-case__title type-subheading">
           <label>
             <input
-              type='checkbox'
+              className="test-case__title__check"
+              type="checkbox"
               checked={complete}
               onChange={this.handleChange}
             />
             {' '}{title}
           </label>
-          <dl className="test-case__details">
-            {minimumVersion && (
-              <dt>First supported version: </dt>)}
-            {minimumVersion && (
-              <dd><code>{minimumVersion}</code></dd>)}
-
-            {affectedBrowsers &&
-              <dt>Affected browsers: </dt>}
-            {affectedBrowsers &&
-              <dd>{affectedBrowsers}</dd>
-            }
-          </dl>
         </h2>
 
-        <p>{description}</p>
+        <dl className="test-case__details">
+          {resolvedIn && (
+            <dt>First supported in: </dt>)}
+          {resolvedIn && (
+             <dd>
+               <a href={'https://github.com/facebook/react/tag/v' + resolvedIn}>
+                 <code>{resolvedIn}</code>
+               </a>
+             </dd>
+           )}
+
+          {resolvedBy && (
+            <dt>Fixed by: </dt>)}
+          {resolvedBy && (
+            <dd>
+              <a href={'https://github.com/facebook/react/pull/' + resolvedBy}>
+                <code>{resolvedBy}</code>
+              </a>
+            </dd>
+          )}
+
+          {affectedBrowsers &&
+            <dt>Affected browsers: </dt>}
+          {affectedBrowsers &&
+            <dd>{affectedBrowsers}</dd>
+          }
+        </dl>
+
+        <p className="test-case__desc">
+          {description}
+        </p>
 
+        <div className="test-case__body">
+          {!isTestRelevant &&(
+             <p className="test-case__invalid-version">
+               <strong>Note:</strong> This test case was fixed in a later version of React.
+               This test is not expected to pass for the selected version, and that's ok!
+             </p>
+           )}
 
-        {!isTestRelevant &&(
-          <p className="test-case__invalid-version">
-            <strong>Note:</strong> This test case was fixed in a later version of React.
-            This test is not expected to pass for the selected version, and that's ok!
-          </p>
-        )}
-        {children}
+          {children}
+        </div>
       </section>
     );
   }

diff --git a/fixtures/dom/src/components/fixtures/input-change-events/index.js b/fixtures/dom/src/components/fixtures/input-change-events/index.js
@@ -38,7 +38,7 @@ class InputChangeEvents extends React.Component {
             Radio inputs should only fire change events when the checked
             state changes.
           `}
-          minimumVersion="16.0.0"
+          resolvedIn="16.0.0"
         >
           <TestCase.Steps>
             <li>Click on the Radio input (or label text)</li>
@@ -57,7 +57,8 @@ class InputChangeEvents extends React.Component {
             Text inputs with placeholders should not trigger changes
             when the placeholder is altered
           `}
-          minimumVersion="15.0.0"
+          resolvedIn="15.0.0"
+          resolvedBy="#5004"
           affectedBrowsers="IE9+"
         >
           <TestCase.Steps>

diff --git a/fixtures/dom/src/components/propTypes.js b/fixtures/dom/src/components/propTypes.js
@@ -0,0 +1,16 @@
+import semver from 'semver';
+
+const React = window.React;
+
+export function semverString (props, propName, componentName) {
+  let version = props[propName];
+
+  let error = React.PropTypes.string(...arguments);
+  if (!error && version != null && !semver.valid(version))
+    error = new Error(
+      `\`${propName}\` should be a valid "semantic version" matching ` +
+      'an existing React version'
+    );
+
+  return error || null;
+};
diff --git a/fixtures/dom/src/style.css b/fixtures/dom/src/style.css
@@ -131,7 +131,30 @@ li {
   border-radius: 0.2rem;
   border: 1px solid #d9d9d9;
   margin: 3.2rem 0 3.2rem;
-  padding: 2rem;
+}
+
+.test-case__title {
+  padding: 10px 15px 8px;
+  line-height: 16px;
+  font-size: 18px;
+  border-bottom: 1px dashed #d9d9d9;
+  margin: 0 0 -1px;
+}
+
+.test-case__title__check {
+  display: inline-block;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+.test-case__body {
+  padding: 0 15px;
+}
+
+.test-case__desc {
+  font-style: italic;
+  margin: 15px 0;
+  padding: 0 15px;
 }
 
 .test-case--complete {
@@ -143,23 +166,30 @@ li {
 }
 
 .test-case__details {
-  font-size: 75%;
+  border-bottom: 1px dashed #d9d9d9;
+  font-size: 80%;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
   margin: 0;
+  padding: 0 15px;
 }
 
 .test-case__details > * {
   display: inline-block;
 }
 
+.test-case__details > dt,
+.test-case__details > dd {
+  padding: 8px 0 6px;
+}
+
 .test-case__details > dt {
   color: #464a4c;
-  font-style: italic;
+  font-weight: 600;
 }
 
-
 .test-case__details > dd {
   margin-left: 1rem;
-  color: #8949b9;
 }
 
 .test-case__details > dd + dt {
@@ -173,8 +203,8 @@ li {
 }
 
 .test-fixture {
-  padding: 2rem;
-  margin: 0 -2rem -2rem;
+  padding: 20px;
+  margin: 0 -15px; /* opposite of .test-case padding */
   background-color: #f4f4f4;
   border-top: 1px solid #d9d9d9;
 }