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.

Sign up for GitHub

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

Jump to bottom

Make tests use ReactTestUtils.renderIntoDocument #1522

Closed
wants to merge 5 commits into from
Closed

Make tests use ReactTestUtils.renderIntoDocument #1522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
25fac67
LinkedStateMixin test
danielschonfeld May 13, 2014
e3a1cc3
ReactServerRendering test
danielschonfeld May 13, 2014
38617d4
ReactTransitionGroup test
danielschonfeld May 13, 2014
86339bb
ReactCSSTransitionGroup test
danielschonfeld May 13, 2014
92f45f9
ReactDOMComponent tests
danielschonfeld May 13, 2014
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
15 changes: 8 additions & 7 deletions src/addons/link/__tests__/LinkedStateMixin-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/**
/**
Copy link
Contributor

Choose a reason for hiding this comment

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

An oopsie! :)

* Copyright 2013-2014 Facebook, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
Expand All @@ -25,11 +25,13 @@ describe('LinkedStateMixin', function() {
var LinkedStateMixin;
var React;
var ReactLink;
var ReactTestUtils;

beforeEach(function() {
LinkedStateMixin = require('LinkedStateMixin');
React = require('React');
ReactLink = require('ReactLink');
ReactTestUtils = require('ReactTestUtils');
});

it('should create a ReactLink for state', function() {
Expand All @@ -44,13 +46,12 @@ describe('LinkedStateMixin', function() {
return <span>value is {this.state.value}</span>;
}
});
var container = document.createElement('div');
var component = React.renderComponent(<Component />, container);
var link = component.linkState('value');
expect(component.state.value).toBe('initial value');
var instance = ReactTestUtils.renderIntoDocument(<Component />);
var link = instance.linkState('value');
expect(instance.state.value).toBe('initial value');
expect(link.value).toBe('initial value');
link.requestChange('new value');
expect(component.state.value).toBe('new value');
expect(component.linkState('value').value).toBe('new value');
expect(instance.state.value).toBe('new value');
expect(instance.linkState('value').value).toBe('new value');
});
});
98 changes: 54 additions & 44 deletions src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,29 +21,32 @@

var React;
var ReactCSSTransitionGroup;
var ReactTestUtils;
var ReactMount;
var mocks;

// Most of the real functionality is covered in other unit tests, this just
// makes sure we're wired up correctly.
describe('ReactCSSTransitionGroup', function() {
var container;

beforeEach(function() {
React = require('React');
ReactCSSTransitionGroup = require('ReactCSSTransitionGroup');
ReactTestUtils = require('ReactTestUtils');
ReactMount = require('ReactMount');
mocks = require('mocks');

container = document.createElement('div');
});

it('should warn after time with no transitionend', function() {
var a = React.renderComponent(
var instance = ReactTestUtils.renderIntoDocument(
<ReactCSSTransitionGroup transitionName="yolo">
<span key="one" id="one" />
</ReactCSSTransitionGroup>,
container
</ReactCSSTransitionGroup>
);
expect(a.getDOMNode().childNodes.length).toBe(1);

var container = ReactMount.findReactContainerForID(instance._rootNodeID);

expect(instance.getDOMNode().childNodes.length).toBe(1);

setTimeout.mock.calls.length = 0;

Expand All @@ -53,9 +56,9 @@ describe('ReactCSSTransitionGroup', function() {
</ReactCSSTransitionGroup>,
container
);
expect(a.getDOMNode().childNodes.length).toBe(2);
expect(a.getDOMNode().childNodes[0].id).toBe('two');
expect(a.getDOMNode().childNodes[1].id).toBe('one');
expect(instance.getDOMNode().childNodes.length).toBe(2);
expect(instance.getDOMNode().childNodes[0].id).toBe('two');
expect(instance.getDOMNode().childNodes[1].id).toBe('one');

console.warn = mocks.getMockFunction();

Expand All @@ -68,40 +71,45 @@ describe('ReactCSSTransitionGroup', function() {
}
}

expect(a.getDOMNode().childNodes.length).toBe(2);
expect(instance.getDOMNode().childNodes.length).toBe(2);
expect(console.warn.mock.calls.length).toBe(1);
});

it('should keep both sets of DOM nodes around', function() {
var a = React.renderComponent(
var instance = ReactTestUtils.renderIntoDocument(
<ReactCSSTransitionGroup transitionName="yolo">
<span key="one" id="one" />
</ReactCSSTransitionGroup>,
container
</ReactCSSTransitionGroup>
);
expect(a.getDOMNode().childNodes.length).toBe(1);

var container = ReactMount.findReactContainerForID(instance._rootNodeID);
expect(instance.getDOMNode().childNodes.length).toBe(1);

React.renderComponent(
<ReactCSSTransitionGroup transitionName="yolo">
<span key="two" id="two" />
</ReactCSSTransitionGroup>,
container
);
expect(a.getDOMNode().childNodes.length).toBe(2);
expect(a.getDOMNode().childNodes[0].id).toBe('two');
expect(a.getDOMNode().childNodes[1].id).toBe('one');

expect(instance.getDOMNode().childNodes.length).toBe(2);
expect(instance.getDOMNode().childNodes[0].id).toBe('two');
expect(instance.getDOMNode().childNodes[1].id).toBe('one');
});

it('should switch transitionLeave from false to true', function() {
var a = React.renderComponent(
var instance = ReactTestUtils.renderIntoDocument(
<ReactCSSTransitionGroup
transitionName="yolo"
transitionEnter={false}
transitionLeave={false}>
<span key="one" id="one" />
</ReactCSSTransitionGroup>,
container
</ReactCSSTransitionGroup>
);
expect(a.getDOMNode().childNodes.length).toBe(1);

var container = ReactMount.findReactContainerForID(instance._rootNodeID);
expect(instance.getDOMNode().childNodes.length).toBe(1);

React.renderComponent(
<ReactCSSTransitionGroup
transitionName="yolo"
Expand All @@ -111,7 +119,7 @@ describe('ReactCSSTransitionGroup', function() {
</ReactCSSTransitionGroup>,
container
);
expect(a.getDOMNode().childNodes.length).toBe(1);
expect(instance.getDOMNode().childNodes.length).toBe(1);
React.renderComponent(
<ReactCSSTransitionGroup
transitionName="yolo"
Expand All @@ -121,36 +129,36 @@ describe('ReactCSSTransitionGroup', function() {
</ReactCSSTransitionGroup>,
container
);
expect(a.getDOMNode().childNodes.length).toBe(2);
expect(a.getDOMNode().childNodes[0].id).toBe('three');
expect(a.getDOMNode().childNodes[1].id).toBe('two');
expect(instance.getDOMNode().childNodes.length).toBe(2);
expect(instance.getDOMNode().childNodes[0].id).toBe('three');
expect(instance.getDOMNode().childNodes[1].id).toBe('two');
});

it('should work with no children', function() {
React.renderComponent(
ReactTestUtils.renderIntoDocument(
<ReactCSSTransitionGroup transitionName="yolo">
</ReactCSSTransitionGroup>,
container
</ReactCSSTransitionGroup>
);
});

it('should work with a null child', function() {
React.renderComponent(
ReactTestUtils.renderIntoDocument(
<ReactCSSTransitionGroup transitionName="yolo">
{[null]}
</ReactCSSTransitionGroup>,
container
</ReactCSSTransitionGroup>
);
});

it('should transition from one to null', function() {
var a = React.renderComponent(
var instance = ReactTestUtils.renderIntoDocument(
<ReactCSSTransitionGroup transitionName="yolo">
<span key="one" id="one" />
</ReactCSSTransitionGroup>,
container
</ReactCSSTransitionGroup>
);
expect(a.getDOMNode().childNodes.length).toBe(1);

var container = ReactMount.findReactContainerForID(instance._rootNodeID);
expect(instance.getDOMNode().childNodes.length).toBe(1);

React.renderComponent(
<ReactCSSTransitionGroup transitionName="yolo">
{null}
Expand All @@ -159,26 +167,28 @@ describe('ReactCSSTransitionGroup', function() {
);
// (Here, we expect the original child to stick around but test that no
// exception is thrown)
expect(a.getDOMNode().childNodes.length).toBe(1);
expect(a.getDOMNode().childNodes[0].id).toBe('one');
expect(instance.getDOMNode().childNodes.length).toBe(1);
expect(instance.getDOMNode().childNodes[0].id).toBe('one');
});

it('should transition from false to one', function() {
var a = React.renderComponent(
var instance = ReactTestUtils.renderIntoDocument(
<ReactCSSTransitionGroup transitionName="yolo">
{false}
</ReactCSSTransitionGroup>,
container
</ReactCSSTransitionGroup>
);
expect(a.getDOMNode().childNodes.length).toBe(0);

var container = ReactMount.findReactContainerForID(instance._rootNodeID);
expect(instance.getDOMNode().childNodes.length).toBe(0);

React.renderComponent(
<ReactCSSTransitionGroup transitionName="yolo">
<span key="one" id="one" />
</ReactCSSTransitionGroup>,
container
);
expect(a.getDOMNode().childNodes.length).toBe(1);
expect(a.getDOMNode().childNodes[0].id).toBe('one');
expect(instance.getDOMNode().childNodes.length).toBe(1);
expect(instance.getDOMNode().childNodes[0].id).toBe('one');
});

});
11 changes: 5 additions & 6 deletions src/addons/transitions/__tests__/ReactTransitionGroup-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,18 @@

var React;
var ReactTransitionGroup;
var ReactTestUtils;
var mocks;

// Most of the real functionality is covered in other unit tests, this just
// makes sure we're wired up correctly.
describe('ReactTransitionGroup', function() {
var container;

beforeEach(function() {
React = require('React');
ReactTransitionGroup = require('ReactTransitionGroup');
ReactTestUtils = require('ReactTestUtils');
mocks = require('mocks');

container = document.createElement('div');
});


Expand Down Expand Up @@ -79,7 +78,7 @@ describe('ReactTransitionGroup', function() {
}
});

var instance = React.renderComponent(<Component />, container);
var instance = ReactTestUtils.renderIntoDocument(<Component />);
expect(log).toEqual(['didMount']);

instance.setState({count: 2}, function() {
Expand Down Expand Up @@ -136,7 +135,7 @@ describe('ReactTransitionGroup', function() {
}
});

var instance = React.renderComponent(<Component />, container);
var instance = ReactTestUtils.renderIntoDocument(<Component />);
expect(log).toEqual(['didMount']);
instance.setState({count: 2});
expect(log).toEqual(['didMount', 'didMount', 'willEnter']);
Expand Down Expand Up @@ -195,7 +194,7 @@ describe('ReactTransitionGroup', function() {
}
});

var instance = React.renderComponent(<Component />, container);
var instance = ReactTestUtils.renderIntoDocument(<Component />);
expect(log).toEqual(['didMount']);
instance.setState({count: 2});
expect(log).toEqual(['didMount', 'didMount', 'willEnter']);
Expand Down
4 changes: 2 additions & 2 deletions src/browser/server/__tests__/ReactServerRendering-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,8 +180,8 @@ describe('ReactServerRendering', function() {
}
});

var element = document.createElement('div');
React.renderComponent(<TestComponent />, element);
var instance = ReactTestUtils.renderIntoDocument(<TestComponent />);
var element = ReactMount.findReactContainerForID(instance._rootNodeID);

var lastMarkup = element.innerHTML;

Expand Down
26 changes: 9 additions & 17 deletions src/browser/ui/__tests__/ReactDOMComponent-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,20 +347,17 @@ describe('ReactDOMComponent', function() {

describe('updateComponent', function() {
var React;
var container;
var ReactTestUtils;

beforeEach(function() {
React = require('React');
container = document.createElement('div');
ReactTestUtils = require('ReactTestUtils');
});

it("should validate against multiple children props", function() {
React.renderComponent(<div></div>, container);

expect(function() {
React.renderComponent(
<div children="" dangerouslySetInnerHTML={{__html: ''}}></div>,
container
ReactTestUtils.renderIntoDocument(
<div children="" dangerouslySetInnerHTML={{__html: ''}}></div>
);
}).toThrow(
'Invariant Violation: Can only set one of `children` or ' +
Expand All @@ -369,10 +366,8 @@ describe('ReactDOMComponent', function() {
});

it("should validate against invalid styles", function() {
React.renderComponent(<div></div>, container);

expect(function() {
React.renderComponent(<div style={1}></div>, container);
ReactTestUtils.renderIntoDocument(<div style={1}></div>);
}).toThrow(
'Invariant Violation: The `style` prop expects a mapping from style ' +
'properties to values, not a string.'
Expand All @@ -385,20 +380,17 @@ describe('ReactDOMComponent', function() {
var React = require('React');
var ReactEventEmitter = require('ReactEventEmitter');
var ReactMount = require('ReactMount');

var container = document.createElement('div');
document.documentElement.appendChild(container);
var ReactTestUtils = require('ReactTestUtils');

var callback = function() {};
var instance = <div onClick={callback} />;
instance = React.renderComponent(instance, container);
var instance = ReactTestUtils.renderIntoDocument(<div onClick={callback} />);

var rootNode = instance.getDOMNode();
var rootNodeID = ReactMount.getID(rootNode);
var rootNodeID = instance._rootNodeID;
expect(
ReactEventEmitter.getListener(rootNodeID, 'onClick')
).toBe(callback);

var container = ReactMount.findReactContainerForID(rootNodeID);
React.unmountComponentAtNode(container);

expect(
Expand Down