Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve e2e-kitchensink and Jest coverage #1484

Closed
wants to merge 10 commits into from
Closed
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-scripts/fixtures/kitchensink/.babelrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"presets": ["latest"]
"presets": ["react-app"]
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{
"dependencies": {
"babel-preset-latest": "6.16.0",
"babel-register": "6.22.0",
"babel-polyfill": "6.20.0",
"chai": "3.5.0",
Expand Down
49 changes: 31 additions & 18 deletions packages/react-scripts/fixtures/kitchensink/src/App.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,36 @@
import React from 'react';
import React, { Component, PropTypes, createElement } from 'react';

class BuiltEmitter extends React.Component {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You've got Component imported now, maybe use it here instead of React.Component?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My mistake. Thanks!

constructor(props) {
super(props)

this.callWhenDone = done => done();
static propTypes = {
feature: PropTypes.func.isRequired
}

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

// Class components must call this.props.onReady when they're ready for the test.
// We will assume functional components are ready immediately after mounting.
if (!Component.isPrototypeOf(feature)) {
this.handleReady();
}
}

render() {
const feature = React.cloneElement(React.Children.only(this.props.children), {
setCallWhenDone: done => {
this.callWhenDone = done;
}
});
handleReady() {
document.dispatchEvent(new Event('ReactFeatureDidMount'));
}

return <div>{feature}</div>;
render() {
const {
props: { feature },
handleReady
} = this;
return (
<div>
{createElement(feature, {
onReady: handleReady
})}
</div>
);
}
}

Expand Down Expand Up @@ -105,9 +117,7 @@ class App extends React.Component {
case 'unknown-ext-inclusion':
require.ensure([], () => this.setFeature(require('./features/webpack/UnknownExtInclusion').default));
break;
default:
this.setFeature(null);
break;
default: throw new Error('Unknown feature!');
}
}

Expand All @@ -116,8 +126,11 @@ class App extends React.Component {
}

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

Expand Down
8 changes: 0 additions & 8 deletions packages/react-scripts/fixtures/kitchensink/src/App.test.js

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
import React from 'react'
import React, { Component, PropTypes } from 'react'
import load from 'absoluteLoad'

export default class extends React.Component {
export default class extends Component {
static propTypes = {
onReady: PropTypes.func.isRequired
}

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.done());
this.setState({ users });
}

componentDidUpdate() {
this.props.onReady();
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import NodePath from './NodePath';
describe('NODE_PATH', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<NodePath />, div);
return new Promise(resolve => {
ReactDOM.render(<NodePath onReady={resolve} />, div);
});
});
});
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React, { Component, PropTypes } from 'react'

function load() {
return [
Expand All @@ -9,21 +9,23 @@ function load() {
];
}

export default class extends React.Component {
export default class extends Component {
static propTypes = {
onReady: PropTypes.func.isRequired
}

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.done());
this.setState({ users });
}

componentDidUpdate() {
this.props.onReady();
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import ArrayDestructuring from './ArrayDestructuring';
describe('array destructuring', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<ArrayDestructuring />, div);
return new Promise(resolve => {
ReactDOM.render(<ArrayDestructuring onReady={resolve} />, div);
});
});
});
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React, { Component, PropTypes } from 'react'

function load(users) {
return [
Expand All @@ -9,21 +9,23 @@ function load(users) {
];
}

export default class extends React.Component {
export default class extends Component {
static propTypes = {
onReady: PropTypes.func.isRequired
}

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.done());
this.setState({ users });
}

componentDidUpdate() {
this.props.onReady();
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import ArraySpread from './ArraySpread';
describe('array spread', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<ArraySpread />, div);
return new Promise(resolve => {
ReactDOM.render(<ArraySpread onReady={resolve} />, div);
});
});
});
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React, { Component, PropTypes } from 'react'

async function load() {
return [
Expand All @@ -9,21 +9,23 @@ async function load() {
];
}

export default class extends React.Component {
export default class extends Component {
static propTypes = {
onReady: PropTypes.func.isRequired
}

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.done());
this.setState({ users });
}

componentDidUpdate() {
this.props.onReady();
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import AsyncAwait from './AsyncAwait';
describe('async/await', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<AsyncAwait />, div);
return new Promise(resolve => {
ReactDOM.render(<AsyncAwait onReady={resolve} />, div);
});
});
});
Original file line number Diff line number Diff line change
@@ -1,13 +1,21 @@
import React from 'react'
import React, { Component, PropTypes } from 'react'

export default class extends Component {
static propTypes = {
onReady: PropTypes.func.isRequired
}

export default class extends React.Component {
users = [
{ id: 1, name: '1' },
{ id: 2, name: '2' },
{ id: 3, name: '3' },
{ id: 4, name: '4' }
];

componentDidMount() {
this.props.onReady()
}

render() {
return (
<div id="feature-class-properties">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import ClassProperties from './ClassProperties';
describe('class properties', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<ClassProperties />, div);
return new Promise(resolve => {
ReactDOM.render(<ClassProperties onReady={resolve} />, div);
});
});
});
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React, { Component, PropTypes } from 'react'

function load(prefix) {
return [
Expand All @@ -9,21 +9,23 @@ function load(prefix) {
];
}

export default class extends React.Component {
export default class extends Component {
static propTypes = {
onReady: PropTypes.func.isRequired
}

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.done());
this.setState({ users });
}

componentDidUpdate() {
this.props.onReady();
}

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import ComputedProperties from './ComputedProperties';
describe('computed properties', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<ComputedProperties />, div);
return new Promise(resolve => {
ReactDOM.render(<ComputedProperties onReady={resolve} />, div);
});
});
});
Loading