Skip to content

Commit 42ab37f

Browse files
author
August Toman-Yih
committed
feat(react): upgrade to react 0.14
[#105522640]
1 parent da2408d commit 42ab37f

File tree

63 files changed

+352
-291
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+352
-291
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ Seem overwhelming? It's time to talk with a front-end dev on the Pivotal team on
147147
}
148148
});
149149

150-
React.render(<MyTestPage />, document.getElementById('root'));
150+
ReactDOM.render(<MyTestPage />, document.getElementById('root'));
151151
```
152152

153153
HTML

‎hologram/lib/jsx_script_tag.rb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ def self.build_script_tag(div_id, code, opts={})
1010
<script>
1111
(function() {
1212
#{js_code}
13-
React.render(
13+
ReactDOM.render(
1414
reactElement,
1515
document.getElementById('#{div_id}')
1616
);
@@ -21,7 +21,7 @@ def self.build_script_tag(div_id, code, opts={})
2121
<<-JS
2222
<script type="text/jsx">
2323
(function() {
24-
React.render(
24+
ReactDOM.render(
2525
#{code.strip},
2626
document.getElementById('#{div_id}')
2727
);

‎package.json

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,9 @@
7676
"phantomjs-polyfill": "0.0.1",
7777
"proxyquire": "^1.5.0",
7878
"pui-cursor": "^1.4.0",
79-
"react": "0.13.3",
79+
"react": "0.14.2",
8080
"react-a11y": "pivotal-cf/react-a11y#separator-fix-dist",
81-
"react-bootstrap": "0.25.1",
81+
"react-bootstrap": "0.27.1",
8282
"react-fa": "^4.0.0",
8383
"require-dir": "^0.3.0",
8484
"rimraf": "^2.4.3",
@@ -174,7 +174,10 @@
174174
"pui-react-tabs": "2.1.0-alpha.1",
175175
"pui-react-tooltip": "2.1.0-alpha.1",
176176
"pui-react-typography": "2.1.0-alpha.1",
177-
"raf": "^3.1.0"
177+
"raf": "^3.1.0",
178+
"react-addons-clone-with-props": "^0.14.2",
179+
"react-addons-test-utils": "^0.14.2",
180+
"react-dom": "^0.14.2"
178181
},
179182
"scripts": {
180183
"test": "gulp ci --fatal",

‎spec/pivotal-ui-react/alerts/alerts_spec.js

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
require('../spec_helper');
2+
const ReactDOM = require('react-dom');
23

34
describe('Alert', function() {
45
var SuccessAlert;
@@ -7,11 +8,11 @@ describe('Alert', function() {
78
});
89

910
afterEach(function() {
10-
React.unmountComponentAtNode(root);
11+
ReactDOM.unmountComponentAtNode(root);
1112
});
1213

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

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

2122
describe('when dismissable is set to true', function() {
2223
beforeEach(function() {
23-
React.render(<SuccessAlert dismissable={true}>alert body</SuccessAlert>, root);
24+
ReactDOM.render(<SuccessAlert dismissable={true}>alert body</SuccessAlert>, root);
2425
});
2526

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

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

6162
describe('when dismissable is not present', function() {
6263
beforeEach(function() {
63-
React.render(<SuccessAlert>alert body</SuccessAlert>, root);
64+
ReactDOM.render(<SuccessAlert>alert body</SuccessAlert>, root);
6465
});
6566

6667
afterEach(function() {
67-
React.unmountComponentAtNode(root);
68+
ReactDOM.unmountComponentAtNode(root);
6869
});
6970

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

8384
afterEach(function() {
84-
React.unmountComponentAtNode(root);
85+
ReactDOM.unmountComponentAtNode(root);
8586
});
8687

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

104105
afterEach(function() {
105-
React.unmountComponentAtNode(root);
106+
ReactDOM.unmountComponentAtNode(root);
106107
});
107108

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

125126
afterEach(function() {
126-
React.unmountComponentAtNode(root);
127+
ReactDOM.unmountComponentAtNode(root);
127128
});
128129

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

146147
afterEach(function() {
147-
React.unmountComponentAtNode(root);
148+
ReactDOM.unmountComponentAtNode(root);
148149
});
149150

150151
it('renders an icon in the alert', function() {

‎spec/pivotal-ui-react/autocomplete/autocomplete_spec.js

Lines changed: 80 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,55 @@ describe('Autocomplete', function() {
1010
Autocomplete = require('../../../src/pivotal-ui-react/autocomplete/autocomplete').Autocomplete;
1111
AutocompleteInput = require('../../../src/pivotal-ui-react/autocomplete/autocomplete').AutocompleteInput;
1212
pickSpy = jasmine.createSpy('pick');
13-
subject = React.render(<Autocomplete {...{onPick: pickSpy, onInitializeItems} }/>, root);
14-
jasmine.clock().tick(1);
1513
});
1614

1715
afterEach(function() {
18-
React.unmountComponentAtNode(root);
16+
ReactDOM.unmountComponentAtNode(root);
1917
jasmine.clock().tick(1);
2018
});
2119

2220
it('renders', function() {
21+
ReactDOM.render(<Autocomplete />, root);
2322
expect('.autocomplete').toExist();
2423
});
2524

26-
it('caps length of displayed list using max items prop', function() {
27-
subject.setProps({maxItems: 2});
28-
subject.showList();
29-
expect('.autocomplete-item').toHaveLength(2);
25+
describe('when maxItems is provided', function() {
26+
it('caps length of displayed list', function() {
27+
subject = ReactDOM.render(
28+
<Autocomplete {...{
29+
onPick: pickSpy,
30+
onInitializeItems,
31+
maxItems: 2
32+
} }/>,
33+
root
34+
);
35+
jasmine.clock().tick(1);
36+
37+
subject.showList();
38+
expect('.autocomplete-item').toHaveLength(2);
39+
});
3040
});
3141

3242
describe('when the user starts to type into the input', function() {
43+
var context;
44+
3345
beforeEach(function() {
46+
var Context = React.createClass({
47+
getInitialState() {
48+
return {
49+
onInitializeItems
50+
};
51+
},
52+
render() {
53+
return (
54+
<Autocomplete onPick={pickSpy} onInitializeItems={this.state.onInitializeItems}/>
55+
);
56+
}
57+
});
58+
59+
context = ReactDOM.render(<Context/>, root);
60+
jasmine.clock().tick(1);
61+
3462
$('.autocomplete input').val('wat').simulate('change');
3563
});
3664

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

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

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

116144
describe('when one of the autocomplete items is the currently selected option', function() {
117145
beforeEach(function() {
118-
subject.setProps({selectedSuggestion: 'watson'});
146+
subject = ReactDOM.render(
147+
<Autocomplete {...{
148+
onPick: pickSpy,
149+
onInitializeItems,
150+
selectedSuggestion: 'watson'
151+
} }/>,
152+
root
153+
);
154+
155+
jasmine.clock().tick(1);
156+
157+
$('.autocomplete input').val('wat').simulate('change');
119158
});
120159

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

201240
describe('when a initial value is provided', function() {
202241
beforeEach(function() {
203-
subject.setProps({value: 'advil'});
242+
subject = ReactDOM.render(
243+
<Autocomplete {...{
244+
onPick: pickSpy,
245+
onInitializeItems,
246+
value: 'advil'
247+
} }/>,
248+
root
249+
);
204250
});
205251

206252
it('defaults to that value being selected', function() {
@@ -212,7 +258,15 @@ describe('Autocomplete', function() {
212258
var cb;
213259
beforeEach(function() {
214260
var search = (value, callback) => { cb = callback; };
215-
subject.setProps({onSearch: search});
261+
subject = ReactDOM.render(
262+
<Autocomplete {...{
263+
onPick: pickSpy,
264+
onInitializeItems,
265+
onSearch: search
266+
} }/>,
267+
root
268+
);
269+
216270
$('.autocomplete input').val('zo').simulate('change');
217271
});
218272

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

225279
describe('when custom props are provided', function() {
226280
beforeEach(function() {
227-
React.unmountComponentAtNode(root);
228-
subject = React.render(
281+
ReactDOM.unmountComponentAtNode(root);
282+
subject = ReactDOM.render(
229283
<Autocomplete {...{
230284
onPick: pickSpy,
231285
onInitializeItems,
@@ -249,7 +303,16 @@ describe('Autocomplete', function() {
249303

250304
describe('when a custom filter function is provided', function() {
251305
beforeEach(function() {
252-
subject.setProps({onFilter: (stuffs) => stuffs.filter((stuff) => stuff.value.indexOf('e') !== -1 )});
306+
subject = ReactDOM.render(
307+
<Autocomplete {...{
308+
onPick: pickSpy,
309+
onInitializeItems,
310+
onFilter: (stuffs) => stuffs.filter((stuff) => stuff.value.indexOf('e') !== -1 )
311+
} }/>,
312+
root
313+
);
314+
jasmine.clock().tick(1);
315+
253316
subject.showList();
254317
});
255318

@@ -263,9 +326,9 @@ describe('Autocomplete', function() {
263326
describe('when an asynchronous onInitializeItems is provided', function() {
264327
var cb;
265328
beforeEach(function() {
266-
React.unmountComponentAtNode(root);
329+
ReactDOM.unmountComponentAtNode(root);
267330
onInitializeItems = (callback) => { cb = callback; };
268-
subject = React.render(<Autocomplete {...{onInitializeItems}}/>, root);
331+
subject = ReactDOM.render(<Autocomplete {...{onInitializeItems}}/>, root);
269332
});
270333

271334
it('still populates the list properly', function() {
@@ -275,4 +338,4 @@ describe('Autocomplete', function() {
275338
expect('.autocomplete-list').toContainText('betty');
276339
});
277340
});
278-
});
341+
});

‎spec/pivotal-ui-react/back-to-top/back-to-top_spec.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ describe('BackToTop', function() {
2727

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

3232
jasmine.clock().uninstall();
3333
setTimeout(function() {
@@ -39,7 +39,7 @@ describe('BackToTop', function() {
3939
});
4040

4141
afterEach(function() {
42-
React.unmountComponentAtNode(root);
42+
ReactDOM.unmountComponentAtNode(root);
4343
});
4444

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

0 commit comments

Comments
 (0)