Update to React 0.14 #79

rolyatmax · 2015-10-22T16:24:40Z

Splitting this out from #78.

rolyatmax · 2015-10-22T17:21:04Z

@AlanFoster Take a look and let me know what you think!

AlanFoster · 2015-10-23T12:16:14Z

Still waiting on Travis integration to be enabled unfortunately, so running tests is a manual process for now. #83 is keeping track of this however.

After a rebase on master, are all tests green?

rolyatmax · 2015-10-23T12:23:31Z

Ah, I see - are there instructions for how to run the tests?

AlanFoster · 2015-10-23T12:54:44Z

@rolyatmax I've just updated the readme file now under #86. Ping me if you need any help

rolyatmax · 2015-10-23T14:34:35Z

@AlanFoster et al

Running tests - a couple failing tests which all seem to be related to changes in findAllInRenderedTree: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#breaking-changes

My best guess is that they have something to do with this line: https://github.com/onefinestay/react-daterange-picker/blob/master/src/calendar/tests/CalendarDate.spec.js#L64

All tests using the DocumentRenderer are failing.

I don't have a ton of experience with using React's Test Utils though. Any thoughts?

Pushing up my latest, and here's the test output:

SUMMARY:
✔ 192 tests completed
✖ 7 tests failed

FAILED TESTS:
  The CalendarDate Component
    handles touch events
      ✖ by calling props.onHighlightDate after an interaction
        PhantomJS 1.9.8 (Mac OS X 0.0.0)
      Error: Invariant Violation: findAllInRenderedTree(...): instance must be a composite component
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:1573
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20231
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20277
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20287
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:179
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:400
      Expected spy unknown to have been called.
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:408

      ✖ by calling props.onSelectDate after an interaction
        PhantomJS 1.9.8 (Mac OS X 0.0.0)
      Error: Invariant Violation: findAllInRenderedTree(...): instance must be a composite component
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:1573
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20231
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20277
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20287
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:179
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:400
      Expected spy unknown to have been called.
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:412

    handles mouse events
      ✖ by calling props.onHighlightDate after a mouse enter
        PhantomJS 1.9.8 (Mac OS X 0.0.0)
      Error: Invariant Violation: findAllInRenderedTree(...): instance must be a composite component
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:1573
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20231
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20277
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20287
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:179
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:424
      TypeError: 'undefined' is not an object (evaluating 'domComponentOrNode.tagName')
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20536
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:429

      ✖ by calling props.onSelectDate after mouse down + mouse leave
        PhantomJS 1.9.8 (Mac OS X 0.0.0)
      Error: Invariant Violation: findAllInRenderedTree(...): instance must be a composite component
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:1573
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20231
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20277
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20287
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:179
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:424
      TypeError: 'undefined' is not an object (evaluating 'domComponentOrNode.tagName')
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20461
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:434

      ✖ by calling props.onUnHighlightDate after a mouse leave
        PhantomJS 1.9.8 (Mac OS X 0.0.0)
      Error: Invariant Violation: findAllInRenderedTree(...): instance must be a composite component
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:1573
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20231
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20277
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20287
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:179
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:424
      TypeError: 'undefined' is not an object (evaluating 'domComponentOrNode.tagName')
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20536
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:440

      ✖ by calling props.onSelectDate after mouse down + mouse up
        PhantomJS 1.9.8 (Mac OS X 0.0.0)
      Error: Invariant Violation: findAllInRenderedTree(...): instance must be a composite component
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:1573
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20231
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20277
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20287
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:179
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:424
      TypeError: 'undefined' is not an object (evaluating 'domComponentOrNode.tagName')
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20461
          at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:445

  The Legend component
    ✖ creates extra lis based on the props.stateDefinitions
      PhantomJS 1.9.8 (Mac OS X 0.0.0)
    Error: Invariant Violation: findAllInRenderedTree(...): instance must be a composite component
        at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:1573
        at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20231
        at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:20277
        at /Users/taylorbaldwin/sites/react-daterange-picker/src/tests.webpack.js:41504

rolyatmax · 2015-10-23T14:40:54Z

Also, haven't been able to get tests passing on current master 😕 hahaha - but that might be because there's something wrong with my setup.

AlanFoster · 2015-10-23T16:07:30Z

@rolyatmax They unfortunately fail currently because the package.json file is too leniant, it should be updated to only allow React 0.12.x or 0.13.x; ie running npm install react@0.13.3 and npm run test should yield passing tests.

To get the tests running with 0.14.x however; Would you be okay updating

  this.renderedComponent = TestUtils.findRenderedDOMComponentWithTag(renderedTable, 'td');

to be

this.renderedComponent = ReactDOM.findDOMNode(TestUtils.findRenderedComponentWithType(renderedTable, CalendarDate));

rolyatmax · 2015-10-23T16:12:04Z

Can do! I'll submit updates shortly! :-)

On Oct 23, 2015, at 12:07 PM, Alan Foster notifications@github.com wrote:

@rolyatmax They unfortunately fail currently because the package.json file is too leniant, it should be updated to only allow React 0.12.x or 0.13.x; ie running npm install react@0.13.3 and npm run test should yield passing tests.

To get the tests running with 0.14.x however; Would you be okay updating

this.renderedComponent = TestUtils.findRenderedDOMComponentWithTag(renderedTable, 'td');
to be

this.renderedComponent = ReactDOM.findDOMNode(TestUtils.findRenderedComponentWithType(renderedTable, CalendarDate));
—
Reply to this email directly or view it on GitHub.

AlanFoster · 2015-10-23T16:36:24Z

@rolyatmax Awesome, thanks :)

rolyatmax · 2015-10-23T18:12:22Z

@AlanFoster Hmmm - that doesn't seem to be working for me. Have you pulled this down and tried those changes? Sorry I'm not more help - I'm not terribly familiar with the TestUtils.

thathenderson · 2015-10-23T21:18:10Z

@rolyatmax @AlanFoster It looks like TestUtils.renderIntoDocument now returns a DOM node (react#4692), and findRenderedComponentWithType and findRenderedDOMComponentWithTag both expect a ReactComponent to traverse.

Playing around with it on my own, I had success simply using getElementsByTagName on the rendered <table> instead of relying on TestUtils:

this.renderedComponent = renderedTable.getElementsByTagName("td")[0];

I also noticed the 'creates extra lis based on the props.stateDefinitions' test in the Legend spec was failing. Doing the following seemed to fix it:

var lis = ReactDOM.findDOMNode(this.renderedComponent);
expect(lis.childNodes.length).toBe(3);

var spans = lis.childNodes[1].getElementsByTagName('span');
expect(spans.length).toBe(2);

expect(spans[0].style.backgroundColor).toBe('blue');
expect(spans[1].textContent).toBe('abc');

rolyatmax · 2015-10-23T21:42:07Z

❤️ ❤️ @thathenderson ❤️ ❤️

This is great. Thanks!!

Squashed some updates into that last commit.

Tests and linting both pass.

SUMMARY:
✔ 199 tests completed

@AlanFoster Let me know what you think

stevewillard · 2015-10-25T00:04:01Z

Any chance we can get this merged in?

damountie · 2015-10-26T10:36:06Z

Testing this has been complicated for me by unrelated React 0.14-upgrade stuff elsewhere in my project's code-base; but as much as I am able to test, this PR seems good for me and worth merging. 👍

AlanFoster · 2015-10-26T11:38:48Z

src/tests/Legend.spec.js

-    expect(lis.length).toBe(3);
-    var spans = TestUtils.scryRenderedDOMComponentsWithTag(lis[1], 'span');
+
+    var lis = ReactDOM.findDOMNode(this.renderedComponent);


❓ Won't this.renderedComponent already be a DOM Node at this point; can we delete the findDOMNode call?

thathenderson · 2015-10-26T13:51:59Z

Sorry, as @AlanFoster pointed out, I missed something. renderIntoDocument returns a DOM node only when the rendered component is wrapped in a DOM node. That's why I originally included findDOMNode.

You can refactor it to remove findDOMNode and the ReactDOM dependency if you wrap <Legend /> in a div:

this.useDocumentRenderer = (props) => {
  const domComponent = TestUtils.renderIntoDocument(<div>{getLegend(props)}</div>);
  this.renderedComponent = domComponent.childNodes[0];
};

rolyatmax · 2015-10-26T14:43:37Z

@AlanFoster @thathenderson Take a look at that updated last commit and let me know how that looks.

All tests and linting are passing.

thathenderson · 2015-10-26T15:22:22Z

Looks great to me!

AlanFoster · 2015-10-27T10:21:24Z

@rolyatmax Could you rebase against master please, there's a small merge conflict to resolve

rolyatmax · 2015-10-27T13:55:14Z

@AlanFoster rebased

AlanFoster · 2015-10-27T14:01:53Z

@rolyatmax Perfect, thanks. All green on travis now too 👍
I'll try to get all of this work merged and deployed today / tomorrow. Thanks for the great work!

rolyatmax · 2015-10-27T14:24:16Z

@AlanFoster 👍 👍 👍 👍

rolyatmax · 2015-10-28T13:05:23Z

Rebased again to resolve conflicts. All tests and linting pass.

stevewillard · 2015-10-29T18:31:38Z

Any chance for a merge? Looking to upgrade our version of React, but this is holding us back

zoopoetics · 2015-11-01T23:31:06Z

+1 for merge :) We're also upgrading to React 0.14, and this is the only dependency holding us back.

AlanFoster · 2015-11-03T00:47:04Z

For visibility I plan to merge #99 before releasing 0.12.2, then I shall be merging this PR with the intent of a 1.0.0 release.

Would appreciate a rebase for this PR 👍

rolyatmax · 2015-11-03T02:27:29Z

@AlanFoster rebased!

stevewillard · 2015-11-05T19:30:41Z

@rolyatmax can you rebase again? Looks like 0.12.2/1.0.0 are close to be ready

rolyatmax · 2015-11-05T21:55:07Z

Rebased - and added a commit to remove an unused var in the gulpfile to pass linting.

Tests/linting both pass.

Update to React 0.14

AlanFoster · 2015-11-07T22:00:49Z

Thanks for all the work on this PR guys, v0.12.2 is now released - so let's get this merged in now! 👍

nnarhinen · 2015-11-12T11:52:52Z

Can you push to NPM too?

rolyatmax mentioned this pull request Oct 22, 2015

Update to React 0.14 #78

Closed

This was referenced Oct 22, 2015

Only call React.initializeTouchEvents if that React property exists #76

Closed

Remove initializeTouchEvents to allow for basic compatibility with 0.… #73

Closed

React 0.14 compatible #77

Closed

rolyatmax force-pushed the tb-react014 branch from bfdd97d to 3da3452 Compare October 22, 2015 17:08

This was referenced Oct 22, 2015

Build updates #81

Merged

Doesn't work with react 0.14 #82

Closed

rolyatmax force-pushed the tb-react014 branch from 3da3452 to 50778b6 Compare October 23, 2015 12:20

rolyatmax force-pushed the tb-react014 branch from 50778b6 to 95e67c0 Compare October 23, 2015 14:38

rolyatmax force-pushed the tb-react014 branch from 95e67c0 to ff170b1 Compare October 23, 2015 21:41

AlanFoster reviewed Oct 26, 2015
View reviewed changes

rolyatmax force-pushed the tb-react014 branch from ff170b1 to 5267a4c Compare October 26, 2015 14:42

robin-anil mentioned this pull request Oct 26, 2015

Changes that allow the library to run in React 0.14 #90

Closed

AlanFoster mentioned this pull request Oct 27, 2015

Release 1.0.0 #92

Closed

rolyatmax force-pushed the tb-react014 branch 3 times, most recently from 5267a4c to bbde573 Compare October 27, 2015 13:53

rolyatmax mentioned this pull request Oct 27, 2015

Use React 0.14's stateless components #95

Closed

rolyatmax force-pushed the tb-react014 branch from bbde573 to 4ac5dca Compare October 28, 2015 13:04

rolyatmax force-pushed the tb-react014 branch from 4ac5dca to 889f574 Compare November 3, 2015 02:26

rolyatmax added 4 commits November 5, 2015 16:47

move to React 0.14

5c0b4a8

built files

13e7130

update tests to use react-addons-test-utils

164275a

remove unused var

85488c4

rolyatmax force-pushed the tb-react014 branch from 889f574 to 85488c4 Compare November 5, 2015 21:54

AlanFoster added a commit that referenced this pull request Nov 7, 2015

Merge pull request #79 from rolyatmax/tb-react014

4775969

Update to React 0.14

AlanFoster merged commit 4775969 into onefinestay:master Nov 7, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update to React 0.14 #79

Update to React 0.14 #79

rolyatmax commented Oct 22, 2015

rolyatmax commented Oct 22, 2015

AlanFoster commented Oct 23, 2015

rolyatmax commented Oct 23, 2015

AlanFoster commented Oct 23, 2015

rolyatmax commented Oct 23, 2015

rolyatmax commented Oct 23, 2015

AlanFoster commented Oct 23, 2015

rolyatmax commented Oct 23, 2015

AlanFoster commented Oct 23, 2015

rolyatmax commented Oct 23, 2015

thathenderson commented Oct 23, 2015

rolyatmax commented Oct 23, 2015

stevewillard commented Oct 25, 2015

damountie commented Oct 26, 2015

AlanFoster Oct 26, 2015

thathenderson commented Oct 26, 2015

rolyatmax commented Oct 26, 2015

thathenderson commented Oct 26, 2015

AlanFoster commented Oct 27, 2015

rolyatmax commented Oct 27, 2015

AlanFoster commented Oct 27, 2015

rolyatmax commented Oct 27, 2015

rolyatmax commented Oct 28, 2015

stevewillard commented Oct 29, 2015

zoopoetics commented Nov 1, 2015

AlanFoster commented Nov 3, 2015

rolyatmax commented Nov 3, 2015

stevewillard commented Nov 5, 2015

rolyatmax commented Nov 5, 2015

AlanFoster commented Nov 7, 2015

nnarhinen commented Nov 12, 2015

Update to React 0.14 #79

Update to React 0.14 #79

Conversation

rolyatmax commented Oct 22, 2015

rolyatmax commented Oct 22, 2015

AlanFoster commented Oct 23, 2015

rolyatmax commented Oct 23, 2015

AlanFoster commented Oct 23, 2015

rolyatmax commented Oct 23, 2015

rolyatmax commented Oct 23, 2015

AlanFoster commented Oct 23, 2015

rolyatmax commented Oct 23, 2015

AlanFoster commented Oct 23, 2015

rolyatmax commented Oct 23, 2015

thathenderson commented Oct 23, 2015

rolyatmax commented Oct 23, 2015

stevewillard commented Oct 25, 2015

damountie commented Oct 26, 2015

AlanFoster Oct 26, 2015

Choose a reason for hiding this comment

thathenderson commented Oct 26, 2015

rolyatmax commented Oct 26, 2015

thathenderson commented Oct 26, 2015

AlanFoster commented Oct 27, 2015

rolyatmax commented Oct 27, 2015

AlanFoster commented Oct 27, 2015

rolyatmax commented Oct 27, 2015

rolyatmax commented Oct 28, 2015

stevewillard commented Oct 29, 2015

zoopoetics commented Nov 1, 2015

AlanFoster commented Nov 3, 2015

rolyatmax commented Nov 3, 2015

stevewillard commented Nov 5, 2015

rolyatmax commented Nov 5, 2015

AlanFoster commented Nov 7, 2015

nnarhinen commented Nov 12, 2015