feat: support [email protected]

convert tests to classes

package.json

@@ -42,11 +42,7 @@
     "karma-sauce-launcher": "^1.1.0",
     "karma-spec-reporter": "0.0.30",
     "proxyquireify": "^3.2.1",
-    "react": "~15.4.2",
-    "react-addons-test-utils": "~15.4.2",
-    "react-dom": "~15.4.2",
     "react-router": "^3.0.2",
-    "react-test-renderer": "~15.4.2",
     "redux": "^3.6.0",
     "run-sequence": "^1.2.2",
     "sauce-connect-launcher": "^1.2.0",

test/e2e/fetch/simple-fetch-app.js

@@ -2,11 +2,16 @@ import '../opbeat-e2e'
 import React from 'react'
 import ReactDOM from 'react-dom'
 
-var component = React.createClass({
-  getInitialState: function() {
-    return {fetchedData: {label: null}}
-  },
-  fetchData: function() {
+class component extends React.Component{
+  constructor() {
+    super()
+    this.state = {fetchedData: {label: null}}
+    this.fetchData = this.fetchData.bind(this)
+    this.fetchDataFireAndForget = this.fetchDataFireAndForget.bind(this)
+    this.failFetchData = this.failFetchData.bind(this)
+    this.failFetchDataWithCatch = this.failFetchDataWithCatch.bind(this)
+  }
+  fetchData() {
     window.opbeat.services.transactionService.startTransaction('fetchData', 'fake')
 
     fetch('./test.json')
@@ -19,13 +24,13 @@ var component = React.createClass({
       this.setState({fetchedDataLabel: json.label})
       trace.end()
     })
-  },
-  fetchDataFireAndForget: function() {
+  }
+  fetchDataFireAndForget() {
     window.opbeat.services.transactionService.startTransaction('fetchData', 'fake')
     fetch('/slow-response')
     this.setState({fetchedDataLabel: "Sent fire and forget"})
-  },
-  failFetchData: function() {
+  }
+  failFetchData() {
     window.opbeat.services.transactionService.startTransaction('failFetchData', 'fake')
     fetch('http://non-existing-host.opbeat/non-existing-file.json')
       .then((resp) => {
@@ -35,8 +40,8 @@ var component = React.createClass({
       var trace = window.opbeat.services.transactionService.startTrace('important reject trace', 'template.custom')
       trace.end()
     })
-  },
-  failFetchDataWithCatch: function() {
+  }
+  failFetchDataWithCatch() {
     window.opbeat.services.transactionService.startTransaction('failFetchDataWithCatch', 'fake')
     fetch('http://non-existing-host.opbeat/non-existing-file.json')
       .then((resp) => {
@@ -46,8 +51,8 @@ var component = React.createClass({
       var trace = window.opbeat.services.transactionService.startTrace('important catched trace', 'template.custom')
       trace.end()
     })
-  },
-  render: function() {
+  }
+  render() {
     const { fetchedDataLabel } = this.state
     return (
       <p>
@@ -60,7 +65,7 @@ var component = React.createClass({
       </p>
     )
   }
-})
+}
 
 function render() {
   ReactDOM.render(

test/e2e/package.json

@@ -18,12 +18,13 @@
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-1": "^6.16.0",
     "babel-preset-stage-2": "^6.13.0",
+    "create-react-class": "~15.5.2",
     "error-stack-parser": "^1.3.5",
     "loglevel": "^1.4.0",
     "offline-js": "^0.7.18",
-    "react": "~15.4.0",
-    "react-dom": "~15.4.0",
-    "react-router": "^2.7.0",
+    "react": "~15.5.4",
+    "react-dom": "~15.5.4",
+    "react-router": "^3.0.5",
     "react-router-redux": "^4.0.5",
     "redux": "^3.5.2",
     "redux-thunk": "^2.1.0",

test/e2e/react/simple_react_app.js

@@ -3,13 +3,13 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 
 
-var CompositeComponent = React.createClass({
-  render: function() {
+class CompositeComponent extends React.Component {
+  render () {
     return (
       <span>Composite component</span>
     )
   }
-})
+}
 
 class ES6Component extends React.Component {
   render() {

test/e2e/redux/simple_redux.js

@@ -86,26 +86,36 @@ function erroneousComponent(state, action) {
   return !state && action.type == 'SHOW_ERRONEOUS_COMPONENT'
 }
 
-var IncrDecr = React.createClass({
-  incrementIfOdd: function() {
+class IncrDecr extends React.Component {
+  constructor(){
+    super()
+    this.incrementIfOdd = this.incrementIfOdd.bind(this)
+    this.incrementAsync = this.incrementAsync.bind(this)
+    this.simpleThunkDispatcher = this.simpleThunkDispatcher.bind(this)
+    this.delayedDispatchThunk = this.delayedDispatchThunk.bind(this)
+    this.showErroneousComponent = this.showErroneousComponent.bind(this)
+
+  }
+
+  incrementIfOdd() {
     if (this.props.value % 2 !== 0) {
       this.props.onIncrement()
     }
-  },
-  incrementAsync: function () {
+  }
+  incrementAsync() {
     setTimeout(this.props.onIncrement, 1000)
-  },
-  simpleThunkDispatcher : function () {
+  }
+  simpleThunkDispatcher () {
     this.props.simpleThunkDispatcher()
-  },
-  delayedDispatchThunk : function (event) {
+  }
+  delayedDispatchThunk (event) {
     event.preventDefault()
     this.props.delayedDispatchThunk()
-  },
-  showErroneousComponent: function() {
+  }
+  showErroneousComponent () {
     store.dispatch(showErroneousComponent())
-  },
-  render: function() {
+  }
+  render () {
     const { value, erroneousComponent, onIncrement, onDecrement } = this.props
     return (
       <p>
@@ -143,7 +153,7 @@ var IncrDecr = React.createClass({
       </p>
     )
   }
-})
+}
 
 function render() {
   var state = store.getState()

test/react/components.jsx

@@ -1,28 +1,28 @@
 var React = require('react')
 var Link = require('react-router').Link
 
-var List = React.createClass({
-  render: function () {
+class List extends React.Component {
+  render() {
     return (
-        <ul>
-            <li className='item1' onClick={console.log('clicked')}>Item</li>
-            <li><Value value={nameJSX}/></li>
-            <li>Item</li>
-        </ul>
+      <ul>
+        <li className='item1' onClick={console.log('clicked')}>Item</li>
+        <li><Value value={nameJSX} /></li>
+        <li>Item</li>
+      </ul>
     )
   }
-})
+}
 
-var ListOfLists = React.createClass({
-  render: function () {
+class ListOfLists extends React.Component {
+  render() {
     return (
       <div>
         <List />
         <p id='paragraph'>Hello world!</p>
       </div>
     )
   }
-})
+}
 
 const nameJSX = (
   <div>
@@ -33,7 +33,7 @@ const nameJSX = (
   </div>
 )
 
-function Value ({value}) {
+function Value({ value }) {
   return <span>{value}</span>
 }
 

test/react/react.spec.js

@@ -35,6 +35,7 @@ if (React.version.split('.')[0] > 0) {
   // Only works for 15.0+ React
   describe('react: nodeName', function () {
     it('gets the correct name for nested components', function () {
+      debugger;
       var wrapper = mount(React.createElement(ListOfLists))
       var li = wrapper.find('li').node
       expect(nodeName(ComponentTree, li)).toBe('List ul li.item1')

test/react/router.spec.js

@@ -23,7 +23,9 @@ var Route = ReactRouter.Route
 var Redirect = ReactRouter.Redirect
 var utils = require('../../src/utils')
 
-var LoginComponent = React.createClass({
+var createReactClass = require('create-react-class')
+
+var LoginComponent = createReactClass({
   componentDidMount: function () {
     browserHistory.push('/new-path')
   },