Skip to content

Commit bff912e

Browse files
gaearongaearon
committed
Add manual build fixtures
1 parent 0e6f784 commit bff912e

30 files changed

+465
-0
lines changed

‎fixtures/README.md

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Manual Testing Fixtures
2+
3+
This folder exists for **React contributors** only.
4+
If you use React you don't need to worry about it.
5+
6+
These fixtures verify that the built React distributions are usable in different environments.
7+
**They are not running automatically.** (At least not yet, feel free to contribute to automate them.)
8+
9+
Run them when you make changes to how we package React, ReactDOM, and addons.
10+
11+
## How to Run
12+
13+
First, build React and the fixtures:
14+
15+
```
16+
cd react
17+
npm run build
18+
19+
cd fixtures
20+
node build-all.js
21+
```
22+
23+
Then run a local server at the root of the repo, e.g.
24+
25+
```
26+
npm i -g pushstate-server
27+
cd ..
28+
pushstate-server .
29+
```
30+
31+
(Too complicated? Send a PR to simplify this :-).
32+
33+
Then open the corresponding URLs, for example:
34+
35+
```
36+
open http://localhost:9000/fixtures/globals.html
37+
open http://localhost:9000/fixtures/requirejs.html
38+
open http://localhost:9000/fixtures/systemjs.html
39+
open http://localhost:9000/fixtures/browserify/index.html
40+
open http://localhost:9000/fixtures/rjs/index.html
41+
open http://localhost:9000/fixtures/systemjs-builder/index.html
42+
open http://localhost:9000/fixtures/webpack/index.html
43+
open http://localhost:9000/fixtures/webpack-alias/index.html
44+
```
45+
46+
You should see two things:
47+
48+
* "Hello World" fading in with an animation.
49+
* No errors in the console.

‎fixtures/browserify/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
output.js

‎fixtures/browserify/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<html>
2+
<body>
3+
<style>
4+
.example-appear {
5+
opacity: 0.01;
6+
}
7+
8+
.example-appear.example-appear-active {
9+
opacity: 1;
10+
transition: opacity .5s ease-in;
11+
}
12+
</style>
13+
<div id="container"></div>
14+
<script src="output.js"></script>
15+
</body>
16+
</html>

‎fixtures/browserify/input.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
var React = require('react')
2+
var CSSTransitionGroup = require('react-addons-css-transition-group')
3+
var ReactDOM = require('react-dom');
4+
5+
ReactDOM.render(
6+
React.createElement(CSSTransitionGroup, {
7+
transitionName: 'example',
8+
transitionAppear: true,
9+
transitionAppearTimeout: 500,
10+
transitionEnterTimeout: 0,
11+
transitionLeaveTimeout: 0,
12+
}, React.createElement('h1', null,
13+
'Hello World!'
14+
)),
15+
document.getElementById('container')
16+
);

‎fixtures/browserify/package.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "webpack-test",
3+
"private": true,
4+
"dependencies": {
5+
"browserify": "^13.3.0"
6+
},
7+
"scripts": {
8+
"build": "rm output.js && NODE_PATH=../../build/packages browserify ./input.js -o output.js"
9+
}
10+
}

‎fixtures/build-all.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
var fs = require('fs');
2+
var path = require('path');
3+
var { spawnSync } = require('child_process');
4+
5+
var fixtureDirs = fs.readdirSync(__dirname).filter((file) => {
6+
return fs.statSync(path.join(__dirname, file)).isDirectory();
7+
});
8+
9+
var cmdArgs = [
10+
{cmd: 'npm', args: ['install']},
11+
{cmd: 'npm', args: ['run', 'build']}
12+
];
13+
14+
for (const dir of fixtureDirs) {
15+
for (const cmdArg of cmdArgs) {
16+
const opts = {
17+
cwd: path.join(__dirname, dir),
18+
stdio: 'inherit'
19+
};
20+
let result = spawnSync(cmdArg.cmd, cmdArg.args, opts);
21+
if (result.status !== 0) {
22+
throw new Error('Failed to build fixtures.');
23+
}
24+
}
25+
}
26+
27+
console.log('-------------------------');
28+
console.log('All fixtures were built!');
29+
console.log('Now make sure to open each HTML file in this directory and each index.html in subdirectories.');
30+
console.log('-------------------------');

‎fixtures/globals.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<html>
2+
<body>
3+
<script src="../build/react-with-addons.js"></script>
4+
<script src="../build/react-dom.js"></script>
5+
<style>
6+
.example-appear {
7+
opacity: 0.01;
8+
}
9+
10+
.example-appear.example-appear-active {
11+
opacity: 1;
12+
transition: opacity .5s ease-in;
13+
}
14+
</style>
15+
<div id="container"></div>
16+
<script>
17+
var CSSTransitionGroup = React.addons.CSSTransitionGroup;
18+
ReactDOM.render(
19+
React.createElement(CSSTransitionGroup, {
20+
transitionName: 'example',
21+
transitionAppear: true,
22+
transitionAppearTimeout: 500,
23+
transitionEnterTimeout: 0,
24+
transitionLeaveTimeout: 0,
25+
}, React.createElement('h1', null,
26+
'Hello World!'
27+
)),
28+
document.getElementById('container')
29+
);
30+
</script>
31+
</body>
32+
</html>

‎fixtures/requirejs.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<html>
2+
<body>
3+
<script src="https://unpkg.com/[email protected]/require.js"></script>
4+
<style>
5+
.example-appear {
6+
opacity: 0.01;
7+
}
8+
9+
.example-appear.example-appear-active {
10+
opacity: 1;
11+
transition: opacity .5s ease-in;
12+
}
13+
</style>
14+
<div id="container"></div>
15+
<script>
16+
requirejs.config({
17+
paths: {
18+
react: '../build/react-with-addons',
19+
'react-dom': '../build/react-dom'
20+
}
21+
});
22+
23+
require(['react', 'react-dom'], function(React, ReactDOM) {
24+
var CSSTransitionGroup = React.addons.CSSTransitionGroup;
25+
ReactDOM.render(
26+
React.createElement(CSSTransitionGroup, {
27+
transitionName: 'example',
28+
transitionAppear: true,
29+
transitionAppearTimeout: 500,
30+
transitionEnterTimeout: 0,
31+
transitionLeaveTimeout: 0,
32+
}, React.createElement('h1', null,
33+
'Hello World!'
34+
)),
35+
document.getElementById('container')
36+
);
37+
});
38+
</script>
39+
</body>
40+
</html>

‎fixtures/rjs/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
output.js

‎fixtures/rjs/config.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
({
2+
baseUrl: '.',
3+
name: 'input',
4+
out: 'output.js',
5+
optimize: 'none',
6+
paths: {
7+
react: '../../build/react-with-addons',
8+
'react-dom': '../../build/react-dom'
9+
}
10+
})

‎fixtures/rjs/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<html>
2+
<body>
3+
<style>
4+
.example-appear {
5+
opacity: 0.01;
6+
}
7+
8+
.example-appear.example-appear-active {
9+
opacity: 1;
10+
transition: opacity .5s ease-in;
11+
}
12+
</style>
13+
<div id="container"></div>
14+
<script src="https://unpkg.com/[email protected]/require.js"></script>
15+
<script src="output.js"></script>
16+
</body>
17+
</html>

‎fixtures/rjs/input.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
require(['react', 'react-dom'], function(React, ReactDOM) {
2+
var CSSTransitionGroup = React.addons.CSSTransitionGroup;
3+
ReactDOM.render(
4+
React.createElement(CSSTransitionGroup, {
5+
transitionName: 'example',
6+
transitionAppear: true,
7+
transitionAppearTimeout: 500,
8+
transitionEnterTimeout: 0,
9+
transitionLeaveTimeout: 0,
10+
}, React.createElement('h1', null,
11+
'Hello World!'
12+
)),
13+
document.getElementById('container')
14+
);
15+
});

‎fixtures/rjs/package.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "rjs-test",
3+
"private": true,
4+
"dependencies": {
5+
"requirejs": "^2.3.2"
6+
},
7+
"scripts": {
8+
"build": "rm output.js && r.js -o config.js"
9+
}
10+
}

‎fixtures/systemjs-builder/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
output.js

‎fixtures/systemjs-builder/build.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
var path = require("path");
2+
var Builder = require('systemjs-builder');
3+
4+
// optional constructor options
5+
var builder = new Builder('/', './config.js');
6+
7+
builder
8+
.buildStatic('./input.js', './output.js')
9+
.then(function() {
10+
console.log('Build complete');
11+
})
12+
.catch(function(err) {
13+
console.log('Build error');
14+
console.log(err);
15+
});

‎fixtures/systemjs-builder/config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
System.config({
2+
paths: {
3+
react: '../../build/react-with-addons.js',
4+
'react-dom': '../../build/react-dom.js'
5+
}
6+
});

‎fixtures/systemjs-builder/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<html>
2+
<body>
3+
<style>
4+
.example-appear {
5+
opacity: 0.01;
6+
}
7+
8+
.example-appear.example-appear-active {
9+
opacity: 1;
10+
transition: opacity .5s ease-in;
11+
}
12+
</style>
13+
<div id="container"></div>
14+
<script src="output.js"></script>
15+
</body>
16+
</html>

‎fixtures/systemjs-builder/input.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
var CSSTransitionGroup = React.addons.CSSTransitionGroup;
5+
ReactDOM.render(
6+
React.createElement(CSSTransitionGroup, {
7+
transitionName: 'example',
8+
transitionAppear: true,
9+
transitionAppearTimeout: 500,
10+
transitionEnterTimeout: 0,
11+
transitionLeaveTimeout: 0,
12+
}, React.createElement('h1', null,
13+
'Hello World!'
14+
)),
15+
document.getElementById('container')
16+
);

‎fixtures/systemjs-builder/package.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "systemjs-builder-test",
3+
"private": true,
4+
"dependencies": {
5+
"systemjs-builder": "^0.15.34"
6+
},
7+
"scripts": {
8+
"build": "rm output.js && node build.js"
9+
}
10+
}

‎fixtures/systemjs.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<html>
2+
<body>
3+
<script src="https://unpkg.com/[email protected]/dist/system.js"></script>
4+
<style>
5+
.example-appear {
6+
opacity: 0.01;
7+
}
8+
9+
.example-appear.example-appear-active {
10+
opacity: 1;
11+
transition: opacity .5s ease-in;
12+
}
13+
</style>
14+
<div id="container"></div>
15+
<script>
16+
System.config({
17+
paths: {
18+
react: '../build/react-with-addons.js',
19+
'react-dom': '../build/react-dom.js'
20+
}
21+
});
22+
23+
Promise.all([
24+
System.import("react"),
25+
System.import("react-dom")
26+
]).then(function (deps) {
27+
var React = deps[0];
28+
var ReactDOM = deps[1];
29+
30+
var CSSTransitionGroup = React.addons.CSSTransitionGroup;
31+
ReactDOM.render(
32+
React.createElement(CSSTransitionGroup, {
33+
transitionName: 'example',
34+
transitionAppear: true,
35+
transitionAppearTimeout: 500,
36+
transitionEnterTimeout: 0,
37+
transitionLeaveTimeout: 0,
38+
}, React.createElement('h1', null,
39+
'Hello World!'
40+
)),
41+
document.getElementById('container')
42+
);
43+
});
44+
</script>
45+
</body>
46+
</html>

‎fixtures/webpack-alias/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
output.js

0 commit comments

Comments
 (0)