Add manual build fixtures

facebook · Jan 5, 2017 · bff912e · bff912e
1 parent 0e6f784
commit bff912e
Show file tree

Hide file tree

Showing 30 changed files with 465 additions and 0 deletions.
diff --git a/fixtures/README.md b/fixtures/README.md
@@ -0,0 +1,49 @@
+# Manual Testing Fixtures
+
+This folder exists for **React contributors** only.  
+If you use React you don't need to worry about it.
+
+These fixtures verify that the built React distributions are usable in different environments.  
+**They are not running automatically.** (At least not yet, feel free to contribute to automate them.)
+
+Run them when you make changes to how we package React, ReactDOM, and addons.
+
+## How to Run
+
+First, build React and the fixtures:
+
+```
+cd react
+npm run build
+
+cd fixtures
+node build-all.js
+```
+
+Then run a local server at the root of the repo, e.g.
+
+```
+npm i -g pushstate-server
+cd ..
+pushstate-server .
+```
+
+(Too complicated? Send a PR to simplify this :-).
+
+Then open the corresponding URLs, for example:
+
+```
+open http://localhost:9000/fixtures/globals.html
+open http://localhost:9000/fixtures/requirejs.html
+open http://localhost:9000/fixtures/systemjs.html
+open http://localhost:9000/fixtures/browserify/index.html
+open http://localhost:9000/fixtures/rjs/index.html
+open http://localhost:9000/fixtures/systemjs-builder/index.html
+open http://localhost:9000/fixtures/webpack/index.html
+open http://localhost:9000/fixtures/webpack-alias/index.html
+```
+
+You should see two things:
+
+* "Hello World" fading in with an animation.
+* No errors in the console.
diff --git a/fixtures/browserify/.gitignore b/fixtures/browserify/.gitignore
@@ -0,0 +1 @@
+output.js
diff --git a/fixtures/browserify/index.html b/fixtures/browserify/index.html
@@ -0,0 +1,16 @@
+<html>
+  <body>
+    <style>
+      .example-appear {
+        opacity: 0.01;
+      }
+
+      .example-appear.example-appear-active {
+        opacity: 1;
+        transition: opacity .5s ease-in;
+      }
+    </style>
+    <div id="container"></div>
+    <script src="output.js"></script>
+  </body>
+</html>
diff --git a/fixtures/browserify/input.js b/fixtures/browserify/input.js
@@ -0,0 +1,16 @@
+var React = require('react')
+var CSSTransitionGroup = require('react-addons-css-transition-group')
+var ReactDOM = require('react-dom');
+
+ReactDOM.render(
+  React.createElement(CSSTransitionGroup, {
+    transitionName: 'example',
+    transitionAppear: true,
+    transitionAppearTimeout: 500,
+    transitionEnterTimeout: 0,
+    transitionLeaveTimeout: 0,
+  }, React.createElement('h1', null,
+    'Hello World!'
+  )),
+  document.getElementById('container')
+);
diff --git a/fixtures/browserify/package.json b/fixtures/browserify/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "webpack-test",
+  "private": true,
+  "dependencies": {
+    "browserify": "^13.3.0"
+  },
+  "scripts": {
+    "build": "rm output.js && NODE_PATH=../../build/packages browserify ./input.js -o output.js"
+  }
+}
diff --git a/fixtures/build-all.js b/fixtures/build-all.js
@@ -0,0 +1,30 @@
+var fs = require('fs');
+var path = require('path');
+var { spawnSync } = require('child_process');
+
+var fixtureDirs = fs.readdirSync(__dirname).filter((file) => {
+  return fs.statSync(path.join(__dirname, file)).isDirectory();
+});
+
+var cmdArgs = [
+  {cmd: 'npm', args: ['install']},
+  {cmd: 'npm', args: ['run', 'build']}
+];
+
+for (const dir of fixtureDirs) {
+  for (const cmdArg of cmdArgs) {
+    const opts = {
+      cwd: path.join(__dirname, dir),
+      stdio: 'inherit'
+    };
+    let result = spawnSync(cmdArg.cmd, cmdArg.args, opts);
+    if (result.status !== 0) {
+      throw new Error('Failed to build fixtures.');
+    }
+  }
+}
+
+console.log('-------------------------');
+console.log('All fixtures were built!');
+console.log('Now make sure to open each HTML file in this directory and each index.html in subdirectories.');
+console.log('-------------------------');
diff --git a/fixtures/globals.html b/fixtures/globals.html
@@ -0,0 +1,32 @@
+<html>
+  <body>
+    <script src="../build/react-with-addons.js"></script>
+    <script src="../build/react-dom.js"></script>
+    <style>
+      .example-appear {
+        opacity: 0.01;
+      }
+
+      .example-appear.example-appear-active {
+        opacity: 1;
+        transition: opacity .5s ease-in;
+      }
+    </style>
+    <div id="container"></div>
+    <script>
+      var CSSTransitionGroup = React.addons.CSSTransitionGroup;
+      ReactDOM.render(
+        React.createElement(CSSTransitionGroup, {
+          transitionName: 'example',
+          transitionAppear: true,
+          transitionAppearTimeout: 500,
+          transitionEnterTimeout: 0,
+          transitionLeaveTimeout: 0,
+        }, React.createElement('h1', null,
+          'Hello World!'
+        )),
+        document.getElementById('container')
+      );
+    </script>
+  </body>
+</html>
diff --git a/fixtures/requirejs.html b/fixtures/requirejs.html
@@ -0,0 +1,40 @@
+<html>
+  <body>
+    <script src="https://unpkg.com/requirejs@2.3.2/require.js"></script>
+    <style>
+      .example-appear {
+        opacity: 0.01;
+      }
+
+      .example-appear.example-appear-active {
+        opacity: 1;
+        transition: opacity .5s ease-in;
+      }
+    </style>
+    <div id="container"></div>
+    <script>
+      requirejs.config({
+        paths: {
+          react: '../build/react-with-addons',
+          'react-dom': '../build/react-dom'
+        }
+      });
+
+      require(['react', 'react-dom'], function(React, ReactDOM) {
+        var CSSTransitionGroup = React.addons.CSSTransitionGroup;
+        ReactDOM.render(
+          React.createElement(CSSTransitionGroup, {
+            transitionName: 'example',
+            transitionAppear: true,
+            transitionAppearTimeout: 500,
+            transitionEnterTimeout: 0,
+            transitionLeaveTimeout: 0,
+          }, React.createElement('h1', null,
+            'Hello World!'
+          )),
+          document.getElementById('container')
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/fixtures/rjs/.gitignore b/fixtures/rjs/.gitignore
@@ -0,0 +1 @@
+output.js
diff --git a/fixtures/rjs/config.js b/fixtures/rjs/config.js
@@ -0,0 +1,10 @@
+({
+  baseUrl: '.',
+  name: 'input',
+  out: 'output.js',
+  optimize: 'none',
+  paths: {
+    react: '../../build/react-with-addons',
+    'react-dom': '../../build/react-dom'
+  }
+})
diff --git a/fixtures/rjs/index.html b/fixtures/rjs/index.html
@@ -0,0 +1,17 @@
+<html>
+  <body>
+    <style>
+      .example-appear {
+        opacity: 0.01;
+      }
+
+      .example-appear.example-appear-active {
+        opacity: 1;
+        transition: opacity .5s ease-in;
+      }
+    </style>
+    <div id="container"></div>
+    <script src="https://unpkg.com/requirejs@2.3.2/require.js"></script>
+    <script src="output.js"></script>
+  </body>
+</html>
diff --git a/fixtures/rjs/input.js b/fixtures/rjs/input.js
@@ -0,0 +1,15 @@
+require(['react', 'react-dom'], function(React, ReactDOM) {
+  var CSSTransitionGroup = React.addons.CSSTransitionGroup;
+  ReactDOM.render(
+    React.createElement(CSSTransitionGroup, {
+      transitionName: 'example',
+      transitionAppear: true,
+      transitionAppearTimeout: 500,
+      transitionEnterTimeout: 0,
+      transitionLeaveTimeout: 0,
+    }, React.createElement('h1', null,
+      'Hello World!'
+    )),
+    document.getElementById('container')
+  );
+});
diff --git a/fixtures/rjs/package.json b/fixtures/rjs/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "rjs-test",
+  "private": true,
+  "dependencies": {
+    "requirejs": "^2.3.2"
+  },
+  "scripts": {
+    "build": "rm output.js && r.js -o config.js"
+  }
+}
diff --git a/fixtures/systemjs-builder/.gitignore b/fixtures/systemjs-builder/.gitignore
@@ -0,0 +1 @@
+output.js
diff --git a/fixtures/systemjs-builder/build.js b/fixtures/systemjs-builder/build.js
@@ -0,0 +1,15 @@
+var path = require("path");
+var Builder = require('systemjs-builder');
+
+// optional constructor options
+var builder = new Builder('/', './config.js');
+
+builder
+.buildStatic('./input.js', './output.js')
+.then(function() {
+  console.log('Build complete');
+})
+.catch(function(err) {
+  console.log('Build error');
+  console.log(err);
+});
diff --git a/fixtures/systemjs-builder/config.js b/fixtures/systemjs-builder/config.js
@@ -0,0 +1,6 @@
+System.config({
+  paths: {
+    react: '../../build/react-with-addons.js',
+    'react-dom': '../../build/react-dom.js'
+  }
+});
diff --git a/fixtures/systemjs-builder/index.html b/fixtures/systemjs-builder/index.html
@@ -0,0 +1,16 @@
+<html>
+  <body>
+    <style>
+      .example-appear {
+        opacity: 0.01;
+      }
+
+      .example-appear.example-appear-active {
+        opacity: 1;
+        transition: opacity .5s ease-in;
+      }
+    </style>
+    <div id="container"></div>
+    <script src="output.js"></script>
+  </body>
+</html>
diff --git a/fixtures/systemjs-builder/input.js b/fixtures/systemjs-builder/input.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+var CSSTransitionGroup = React.addons.CSSTransitionGroup;
+ReactDOM.render(
+  React.createElement(CSSTransitionGroup, {
+    transitionName: 'example',
+    transitionAppear: true,
+    transitionAppearTimeout: 500,
+    transitionEnterTimeout: 0,
+    transitionLeaveTimeout: 0,
+  }, React.createElement('h1', null,
+    'Hello World!'
+  )),
+  document.getElementById('container')
+);
diff --git a/fixtures/systemjs-builder/package.json b/fixtures/systemjs-builder/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "systemjs-builder-test",
+  "private": true,
+  "dependencies": {
+    "systemjs-builder": "^0.15.34"
+  },
+  "scripts": {
+    "build": "rm output.js && node build.js"
+  }
+}
diff --git a/fixtures/systemjs.html b/fixtures/systemjs.html
@@ -0,0 +1,46 @@
+<html>
+  <body>
+    <script src="https://unpkg.com/systemjs@0.19.41/dist/system.js"></script>
+    <style>
+      .example-appear {
+        opacity: 0.01;
+      }
+
+      .example-appear.example-appear-active {
+        opacity: 1;
+        transition: opacity .5s ease-in;
+      }
+    </style>
+    <div id="container"></div>
+    <script>
+      System.config({
+        paths: {
+          react: '../build/react-with-addons.js',
+          'react-dom': '../build/react-dom.js'
+        }
+      });
+
+      Promise.all([
+        System.import("react"),
+        System.import("react-dom")
+      ]).then(function (deps) {
+        var React = deps[0];
+        var ReactDOM = deps[1];
+
+        var CSSTransitionGroup = React.addons.CSSTransitionGroup;
+        ReactDOM.render(
+          React.createElement(CSSTransitionGroup, {
+            transitionName: 'example',
+            transitionAppear: true,
+            transitionAppearTimeout: 500,
+            transitionEnterTimeout: 0,
+            transitionLeaveTimeout: 0,
+          }, React.createElement('h1', null,
+            'Hello World!'
+          )),
+          document.getElementById('container')
+        );
+      });
+    </script>
+  </body>
+</html>
diff --git a/fixtures/webpack-alias/.gitignore b/fixtures/webpack-alias/.gitignore
@@ -0,0 +1 @@
+output.js