Skip to content

Commit

Permalink
E2e jsdom fix (facebook#1470)
Browse files Browse the repository at this point in the history
* E2E: run tests when react is ready

* Entangle e2e with callbacks

* Remove unused e2e lines
  • Loading branch information
EnoahNetzach authored and Daniel Figueiredo committed Feb 22, 2017
1 parent f97e402 commit c9912b9
Show file tree
Hide file tree
Showing 20 changed files with 124 additions and 72 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"dependencies": {
"babel-preset-latest": "6.16.0",
"babel-register": "6.18.0",
"babel-register": "6.22.0",
"babel-polyfill": "6.20.0",
"chai": "3.5.0",
"jsdom": "9.8.3",
Expand Down
23 changes: 7 additions & 16 deletions packages/react-scripts/fixtures/kitchensink/integration/initDOM.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@ const path = require('path')

let getMarkup
let resourceLoader
// this value could be tweaked in order to let the resource
// retriever get every file and jsdom execute react
let timeToWaitForJsToExecute

if (process.env.E2E_FILE) {
const file = path.isAbsolute(process.env.E2E_FILE)
Expand All @@ -21,8 +18,6 @@ if (process.env.E2E_FILE) {
null,
fs.readFileSync(path.join(path.dirname(file), resource.url.pathname), 'utf8')
)

timeToWaitForJsToExecute = 0
} else if (process.env.E2E_URL) {
getMarkup = () => new Promise(resolve => {
http.get(process.env.E2E_URL, (res) => {
Expand All @@ -32,11 +27,7 @@ if (process.env.E2E_FILE) {
})
})

resourceLoader = (resource, callback) => {
return resource.defaultFetch(callback)
}

timeToWaitForJsToExecute = 100
resourceLoader = (resource, callback) => resource.defaultFetch(callback)
} else {
it.only('can run jsdom (at least one of "E2E_FILE" or "E2E_URL" environment variables must be provided)', () => {
expect(new Error('This isn\'t the error you are looking for.')).toBeUndefined()
Expand All @@ -47,16 +38,16 @@ export default feature => new Promise(async resolve => {
const markup = await getMarkup()
const host = process.env.E2E_URL || 'http://localhost:3000'
const doc = jsdom.jsdom(markup, {
features : {
FetchExternalResources : ['script', 'css'],
ProcessExternalResources : ['script'],
features: {
FetchExternalResources: ['script', 'css'],
ProcessExternalResources: ['script'],
},
created: (_, win) => win.addEventListener('ReactFeatureDidMount', () => resolve(doc), true),
deferClose: true,
resourceLoader,
url: `${host}#${feature}`,
virtualConsole: jsdom.createVirtualConsole().sendTo(console),
})

doc.defaultView.addEventListener('load', () => {
setTimeout(() => resolve(doc), timeToWaitForJsToExecute)
}, false)
doc.close()
})
24 changes: 23 additions & 1 deletion packages/react-scripts/fixtures/kitchensink/src/App.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,27 @@
import React from 'react';

class BuiltEmitter extends React.Component {
constructor(props) {
super(props)

this.callWhenDone = done => done();
}

componentDidMount() {
this.callWhenDone(() => document.dispatchEvent(new Event('ReactFeatureDidMount')));
}

render() {
const feature = React.cloneElement(React.Children.only(this.props.children), {
setCallWhenDone: done => {
this.callWhenDone = done;
}
});

return <div>{feature}</div>;
}
}

class App extends React.Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -96,7 +118,7 @@ class App extends React.Component {

render() {
const Feature = this.state.feature;
return Feature ? <Feature /> : null;
return Feature ? <BuiltEmitter><Feature /></BuiltEmitter> : null;
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

async componentDidMount() {
const users = load();
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

async componentDidMount() {
const users = load();
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

async componentDidMount() {
const users = load([{ id: 42, name: '42' }]);
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

async componentDidMount() {
const users = await load();
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

async componentDidMount() {
const users = load('user_');
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

async componentDidMount() {
const users = load();
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

async componentDidMount() {
const users = load();
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

async componentDidMount() {
const { users } = await load();
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

Expand All @@ -20,7 +25,7 @@ export default class extends React.Component {
for (let user of load(4)) {
users.push(user);
}
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

async componentDidMount() {
const users = load();
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

async componentDidMount() {
const users = load({ age: 42 });
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

componentDidMount() {
load().then(users => {
this.setState({ users });
this.setState({ users }, () => this.done());
});
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

async componentDidMount() {
const users = load();
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

async componentDidMount() {
const users = load({ id: 0, user: { id: 42, name: '42' } });
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@ export default class extends React.Component {
constructor(props) {
super(props);

this.done = () => {};
this.props.setCallWhenDone && this.props.setCallWhenDone((done) => {
this.done = done;
});

this.state = { users: [] };
}

async componentDidMount() {
const users = load('user_');
this.setState({ users });
this.setState({ users }, () => this.done());
}

render() {
Expand Down
Loading

0 comments on commit c9912b9

Please sign in to comment.