Skip to content

Commit

Permalink
feat(react): upgrade to react 0.14
Browse files Browse the repository at this point in the history 
[#105522640]
  • Loading branch information
August Toman-Yih committed Nov 4, 2015
1 parent da2408d commit 42ab37f
Show file tree
Hide file tree
Showing 63 changed files with 352 additions and 291 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ Seem overwhelming? It's time to talk with a front-end dev on the Pivotal team on
}
});

React.render(<MyTestPage />, document.getElementById('root'));
ReactDOM.render(<MyTestPage />, document.getElementById('root'));
```

HTML
Expand Down
4 changes: 2 additions & 2 deletions hologram/lib/jsx_script_tag.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ def self.build_script_tag(div_id, code, opts={})
<script>
(function() {
#{js_code}
React.render(
ReactDOM.render(
reactElement,
document.getElementById('#{div_id}')
);
Expand All @@ -21,7 +21,7 @@ def self.build_script_tag(div_id, code, opts={})
<<-JS
<script type="text/jsx">
(function() {
React.render(
ReactDOM.render(
#{code.strip},
document.getElementById('#{div_id}')
);
Expand Down
9 changes: 6 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,9 @@
"phantomjs-polyfill": "0.0.1",
"proxyquire": "^1.5.0",
"pui-cursor": "^1.4.0",
"react": "0.13.3",
"react": "0.14.2",
"react-a11y": "pivotal-cf/react-a11y#separator-fix-dist",
"react-bootstrap": "0.25.1",
"react-bootstrap": "0.27.1",
"react-fa": "^4.0.0",
"require-dir": "^0.3.0",
"rimraf": "^2.4.3",
Expand Down Expand Up @@ -174,7 +174,10 @@
"pui-react-tabs": "2.1.0-alpha.1",
"pui-react-tooltip": "2.1.0-alpha.1",
"pui-react-typography": "2.1.0-alpha.1",
"raf": "^3.1.0"
"raf": "^3.1.0",
"react-addons-clone-with-props": "^0.14.2",
"react-addons-test-utils": "^0.14.2",
"react-dom": "^0.14.2"
},
"scripts": {
"test": "gulp ci --fatal",
Expand Down
29 changes: 15 additions & 14 deletions spec/pivotal-ui-react/alerts/alerts_spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
require('../spec_helper');
const ReactDOM = require('react-dom');

describe('Alert', function() {
var SuccessAlert;
Expand All @@ -7,11 +8,11 @@ describe('Alert', function() {
});

afterEach(function() {
React.unmountComponentAtNode(root);
ReactDOM.unmountComponentAtNode(root);
});

it('passes down the className, id, and style properties', () => {
React.render(<SuccessAlert className="foo" id="bar" style={{fontSize: '200px'}}>alert body</SuccessAlert>, root);
ReactDOM.render(<SuccessAlert className="foo" id="bar" style={{fontSize: '200px'}}>alert body</SuccessAlert>, root);

expect('#root .alert').toHaveClass('foo');
expect('#root .alert').toHaveProp('id', 'bar');
Expand All @@ -20,7 +21,7 @@ describe('Alert', function() {

describe('when dismissable is set to true', function() {
beforeEach(function() {
React.render(<SuccessAlert dismissable={true}>alert body</SuccessAlert>, root);
ReactDOM.render(<SuccessAlert dismissable={true}>alert body</SuccessAlert>, root);
});

it('has a close button', function() {
Expand All @@ -36,7 +37,7 @@ describe('Alert', function() {
describe('when dismissable is set to a callback', function() {
beforeEach(function() {
this.callback = jasmine.createSpy('dismissable callback');
React.render(<SuccessAlert dismissable={this.callback}>alert body</SuccessAlert>, root);
ReactDOM.render(<SuccessAlert dismissable={this.callback}>alert body</SuccessAlert>, root);
});

it('has a close button', function() {
Expand All @@ -60,11 +61,11 @@ describe('Alert', function() {

describe('when dismissable is not present', function() {
beforeEach(function() {
React.render(<SuccessAlert>alert body</SuccessAlert>, root);
ReactDOM.render(<SuccessAlert>alert body</SuccessAlert>, root);
});

afterEach(function() {
React.unmountComponentAtNode(root);
ReactDOM.unmountComponentAtNode(root);
});

it('does not have a close button', function() {
Expand All @@ -77,11 +78,11 @@ describe('SuccessAlert', function() {
describe('when withIcon is set to true', function() {
beforeEach(function() {
var SuccessAlert = require('../../../src/pivotal-ui-react/alerts/alerts').SuccessAlert;
React.render(<SuccessAlert withIcon>alert body</SuccessAlert>, root);
ReactDOM.render(<SuccessAlert withIcon>alert body</SuccessAlert>, root);
});

afterEach(function() {
React.unmountComponentAtNode(root);
ReactDOM.unmountComponentAtNode(root);
});

it('renders an icon in the alert', function() {
Expand All @@ -98,11 +99,11 @@ describe('InfoAlert', function() {
describe('when withIcon is set to true', function() {
beforeEach(function() {
var InfoAlert = require('../../../src/pivotal-ui-react/alerts/alerts').InfoAlert;
React.render(<InfoAlert withIcon>alert body</InfoAlert>, root);
ReactDOM.render(<InfoAlert withIcon>alert body</InfoAlert>, root);
});

afterEach(function() {
React.unmountComponentAtNode(root);
ReactDOM.unmountComponentAtNode(root);
});

it('renders an icon in the alert', function() {
Expand All @@ -119,11 +120,11 @@ describe('WarningAlert', function() {
describe('when withIcon is set to true', function() {
beforeEach(function() {
var WarningAlert = require('../../../src/pivotal-ui-react/alerts/alerts').WarningAlert;
React.render(<WarningAlert withIcon>alert body</WarningAlert>, root);
ReactDOM.render(<WarningAlert withIcon>alert body</WarningAlert>, root);
});

afterEach(function() {
React.unmountComponentAtNode(root);
ReactDOM.unmountComponentAtNode(root);
});

it('renders an icon in the alert', function() {
Expand All @@ -140,11 +141,11 @@ describe('ErrorAlert', function() {
describe('when withIcon is set to true', function() {
beforeEach(function() {
var ErrorAlert = require('../../../src/pivotal-ui-react/alerts/alerts').ErrorAlert;
React.render(<ErrorAlert withIcon>alert body</ErrorAlert>, root);
ReactDOM.render(<ErrorAlert withIcon>alert body</ErrorAlert>, root);
});

afterEach(function() {
React.unmountComponentAtNode(root);
ReactDOM.unmountComponentAtNode(root);
});

it('renders an icon in the alert', function() {
Expand Down
97 changes: 80 additions & 17 deletions spec/pivotal-ui-react/autocomplete/autocomplete_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,55 @@ describe('Autocomplete', function() {
Autocomplete = require('../../../src/pivotal-ui-react/autocomplete/autocomplete').Autocomplete;
AutocompleteInput = require('../../../src/pivotal-ui-react/autocomplete/autocomplete').AutocompleteInput;
pickSpy = jasmine.createSpy('pick');
subject = React.render(<Autocomplete {...{onPick: pickSpy, onInitializeItems} }/>, root);
jasmine.clock().tick(1);
});

afterEach(function() {
React.unmountComponentAtNode(root);
ReactDOM.unmountComponentAtNode(root);
jasmine.clock().tick(1);
});

it('renders', function() {
ReactDOM.render(<Autocomplete />, root);
expect('.autocomplete').toExist();
});

it('caps length of displayed list using max items prop', function() {
subject.setProps({maxItems: 2});
subject.showList();
expect('.autocomplete-item').toHaveLength(2);
describe('when maxItems is provided', function() {
it('caps length of displayed list', function() {
subject = ReactDOM.render(
<Autocomplete {...{
onPick: pickSpy,
onInitializeItems,
maxItems: 2
} }/>,
root
);
jasmine.clock().tick(1);

subject.showList();
expect('.autocomplete-item').toHaveLength(2);
});
});

describe('when the user starts to type into the input', function() {
var context;

beforeEach(function() {
var Context = React.createClass({
getInitialState() {
return {
onInitializeItems
};
},
render() {
return (
<Autocomplete onPick={pickSpy} onInitializeItems={this.state.onInitializeItems}/>
);
}
});

context = ReactDOM.render(<Context/>, root);
jasmine.clock().tick(1);

$('.autocomplete input').val('wat').simulate('change');
});

Expand All @@ -46,7 +74,7 @@ describe('Autocomplete', function() {

describe('when the user attempts to re-initialize the searchable items', function() {
beforeEach(function() {
subject.setProps({onInitializeItems: (done) => done([])});
context.setState({onInitializeItems: (done) => done([])});
});

it('does not actually let you change the list', function() {
Expand Down Expand Up @@ -115,7 +143,18 @@ describe('Autocomplete', function() {

describe('when one of the autocomplete items is the currently selected option', function() {
beforeEach(function() {
subject.setProps({selectedSuggestion: 'watson'});
subject = ReactDOM.render(
<Autocomplete {...{
onPick: pickSpy,
onInitializeItems,
selectedSuggestion: 'watson'
} }/>,
root
);

jasmine.clock().tick(1);

$('.autocomplete input').val('wat').simulate('change');
});

it('sets the selected class to the autocomplete item', function() {
Expand Down Expand Up @@ -200,7 +239,14 @@ describe('Autocomplete', function() {

describe('when a initial value is provided', function() {
beforeEach(function() {
subject.setProps({value: 'advil'});
subject = ReactDOM.render(
<Autocomplete {...{
onPick: pickSpy,
onInitializeItems,
value: 'advil'
} }/>,
root
);
});

it('defaults to that value being selected', function() {
Expand All @@ -212,7 +258,15 @@ describe('Autocomplete', function() {
var cb;
beforeEach(function() {
var search = (value, callback) => { cb = callback; };
subject.setProps({onSearch: search});
subject = ReactDOM.render(
<Autocomplete {...{
onPick: pickSpy,
onInitializeItems,
onSearch: search
} }/>,
root
);

$('.autocomplete input').val('zo').simulate('change');
});

Expand All @@ -224,8 +278,8 @@ describe('Autocomplete', function() {

describe('when custom props are provided', function() {
beforeEach(function() {
React.unmountComponentAtNode(root);
subject = React.render(
ReactDOM.unmountComponentAtNode(root);
subject = ReactDOM.render(
<Autocomplete {...{
onPick: pickSpy,
onInitializeItems,
Expand All @@ -249,7 +303,16 @@ describe('Autocomplete', function() {

describe('when a custom filter function is provided', function() {
beforeEach(function() {
subject.setProps({onFilter: (stuffs) => stuffs.filter((stuff) => stuff.value.indexOf('e') !== -1 )});
subject = ReactDOM.render(
<Autocomplete {...{
onPick: pickSpy,
onInitializeItems,
onFilter: (stuffs) => stuffs.filter((stuff) => stuff.value.indexOf('e') !== -1 )
} }/>,
root
);
jasmine.clock().tick(1);

subject.showList();
});

Expand All @@ -263,9 +326,9 @@ describe('Autocomplete', function() {
describe('when an asynchronous onInitializeItems is provided', function() {
var cb;
beforeEach(function() {
React.unmountComponentAtNode(root);
ReactDOM.unmountComponentAtNode(root);
onInitializeItems = (callback) => { cb = callback; };
subject = React.render(<Autocomplete {...{onInitializeItems}}/>, root);
subject = ReactDOM.render(<Autocomplete {...{onInitializeItems}}/>, root);
});

it('still populates the list properly', function() {
Expand All @@ -275,4 +338,4 @@ describe('Autocomplete', function() {
expect('.autocomplete-list').toContainText('betty');
});
});
});
});
4 changes: 2 additions & 2 deletions spec/pivotal-ui-react/back-to-top/back-to-top_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ describe('BackToTop', function() {

beforeEach(function(done) {
BackToTop = require('../../../src/pivotal-ui-react/back-to-top/back-to-top').BackToTop;
React.render(<BackToTop className="foo" id="bar" style={{fontSize: '200px'}}/>, root);
ReactDOM.render(<BackToTop className="foo" id="bar" style={{fontSize: '200px'}}/>, root);

jasmine.clock().uninstall();
setTimeout(function() {
Expand All @@ -39,7 +39,7 @@ describe('BackToTop', function() {
});

afterEach(function() {
React.unmountComponentAtNode(root);
ReactDOM.unmountComponentAtNode(root);
});

it('passes down the className, id, and style properties', () => {
Expand Down
Loading

1 comment on commit 42ab37f

@atomanyih
Copy link
Contributor

Choose a reason for hiding this comment

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

fixes #304 #271

Please sign in to comment.