feat: Initial react integration (#265)

* feat(rum-react): initial react integration

* chore(rum-react): run e2e tests

* chore(rum): add history API e2e tests

Minor refactoring

* fix rum and rum-react tests

* avoid changing the transaction type on reuse

add lazy loading components test to rum-react

* chore: fix react dependencies

minor fixes

* chore: refactor babel configs

add build:main script
TransactionService should check the transaction type onEnd
Improve e2e tests

* check options.canReuse before reusing transaction

* address review comments

.eslintrc.js

@@ -19,7 +19,7 @@ module.exports = {
     es6: true,
     browser: true
   },
-  extends: ['plugin:prettier/recommended'],
+  extends: ['plugin:prettier/recommended', 'plugin:react/recommended'],
   parser: 'babel-eslint',
   plugins: ['standard', 'rulesdir'],
   rules: {
@@ -31,6 +31,7 @@ module.exports = {
       {
         license: LICENSE_HEADER
       }
-    ]
+    ],
+    'react/prop-types': 0
   }
 }

.travis.yml

@@ -40,6 +40,10 @@ jobs:
       env:
         - STACK_VERSION=6.5.0
         - SCOPE=@elastic/apm-rum
+    - stage: test
+      env:
+        - STACK_VERSION=6.5.0
+        - SCOPE=@elastic/apm-rum-react
     - stage: test
       env:
         - STACK_VERSION=6.6.0
@@ -48,6 +52,10 @@ jobs:
       env:
         - STACK_VERSION=6.6.0
         - SCOPE=@elastic/apm-rum
+    - stage: test
+      env:
+        - STACK_VERSION=6.6.0
+        - SCOPE=@elastic/apm-rum-react
     - stage: test
       env:
         - STACK_VERSION=7.0.0
@@ -56,6 +64,10 @@ jobs:
       env:
         - STACK_VERSION=7.0.0
         - SCOPE=@elastic/apm-rum
+    - stage: test
+      env:
+        - STACK_VERSION=7.0.0
+        - SCOPE=@elastic/apm-rum-react
     - stage: test
       script: npm run build-docs
       name: 'Build Docs'

babel.node.js

@@ -23,20 +23,9 @@
  *
  */
 
+const { getBabelConfig } = require('./dev-utils/babel')
+
 module.exports = function(api) {
   api.cache(true)
-  return {
-    comments: false,
-    presets: [
-      [
-        '@babel/preset-env',
-        {
-          targets: {
-            node: '8.0.0'
-          },
-          loose: true
-        }
-      ]
-    ]
-  }
+  return getBabelConfig()
 }

dev-utils/babel.js

@@ -0,0 +1,46 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2017-present, Elasticsearch BV
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ */
+
+function getBabelConfig() {
+  return {
+    comments: false,
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: '8.0.0'
+          },
+          loose: true
+        }
+      ]
+    ],
+    plugins: []
+  }
+}
+
+module.exports = {
+  getBabelConfig
+}

dev-utils/run-script.js

@@ -30,7 +30,6 @@ const {
   runE2eTests: runE2eTestsUtils,
   buildE2eBundles: buildE2eBundlesUtils
 } = require('./test-utils')
-
 const runAll = require('npm-run-all')
 
 const { startTestServers } = require('./test-servers')

dev-utils/webdriver.js

@@ -105,23 +105,32 @@ function isLogEntryATestFailure(entry, whitelist) {
   return result
 }
 
-function getWebdriveBaseConfig(path) {
+function getWebdriveBaseConfig(
+  path,
+  specs = './test/e2e/**/*.e2e-spec.js',
+  capabilities
+) {
   const { tunnelIdentifier, username, accessKey } = getSauceConnectOptions()
 
-  /**
-   * Skip the ios platform on E2E tests because of script
-   * timeout issue in Appium
-   */
-  const capabilities = getBrowserList()
-    .filter(({ platformName }) => platformName !== 'iOS')
-    .map(capability => ({
-      tunnelIdentifier,
-      ...capability
-    }))
+  if (!capabilities) {
+    /**
+     * Skip the ios platform on E2E tests because of script
+     * timeout issue in Appium
+     */
+
+    capabilities = getBrowserList().filter(
+      ({ platformName }) => platformName !== 'iOS'
+    )
+  }
+
+  capabilities = capabilities.map(capability => ({
+    tunnelIdentifier,
+    ...capability
+  }))
 
   return {
     runner: 'local',
-    specs: glob.sync(join(path, './test/e2e/**/*.e2e-spec.js')),
+    specs: glob.sync(join(path, specs)),
     maxInstancesPerCapability: 3,
     services: ['sauce'],
     user: username,
@@ -158,6 +167,104 @@ function getWebdriveBaseConfig(path) {
   }
 }
 
+function waitForApmServerCalls(errorCount = 0, transactionCount = 0) {
+  console.log(
+    `Waiting for minimum ${errorCount} Errors and ${transactionCount} Transactions.`
+  )
+  const serverCalls = browser.executeAsync(
+    function(errorCount, transactionCount, done) {
+      var apmServerMock = window.elasticApm.serviceFactory.getService(
+        'ApmServer'
+      )
+
+      function checkCalls() {
+        var serverCalls = apmServerMock.calls
+
+        var validCalls = true
+
+        if (errorCount) {
+          validCalls =
+            validCalls &&
+            serverCalls.sendErrors &&
+            serverCalls.sendErrors.length >= errorCount
+        }
+        if (transactionCount) {
+          validCalls =
+            validCalls &&
+            serverCalls.sendTransactions &&
+            serverCalls.sendTransactions.length >= transactionCount
+        }
+
+        if (validCalls) {
+          console.log('calls', serverCalls)
+          var promises = []
+
+          if (serverCalls.sendErrors) {
+            promises = promises.concat(
+              serverCalls.sendErrors.map(function(s) {
+                return s.returnValue
+              })
+            )
+          }
+          if (serverCalls.sendTransactions) {
+            promises = promises.concat(
+              serverCalls.sendTransactions.map(function(s) {
+                return s.returnValue
+              })
+            )
+          }
+
+          Promise.all(promises)
+            .then(function() {
+              function mapCall(c) {
+                return { args: c.args, mocked: c.mocked }
+              }
+              try {
+                var calls = {
+                  sendErrors: serverCalls.sendErrors
+                    ? serverCalls.sendErrors.map(mapCall)
+                    : undefined,
+                  sendTransactions: serverCalls.sendTransactions
+                    ? serverCalls.sendTransactions.map(mapCall)
+                    : undefined
+                }
+                done(calls)
+              } catch (e) {
+                throw e
+              }
+            })
+            .catch(function(reason) {
+              console.log('reason', reason)
+              try {
+                done({ error: reason.message || JSON.stringify(reason) })
+              } catch (e) {
+                done({
+                  error: 'Failed serializing rejection reason: ' + e.message
+                })
+              }
+            })
+        }
+      }
+
+      checkCalls()
+      apmServerMock.subscription.subscribe(checkCalls)
+    },
+    errorCount,
+    transactionCount
+  )
+
+  if (!serverCalls) {
+    throw new Error('serverCalls is undefined!')
+  }
+
+  console.log(JSON.stringify(serverCalls, null, 2))
+  if (serverCalls.error) {
+    fail(serverCalls.error)
+  }
+
+  return serverCalls
+}
+
 module.exports = {
   allowSomeBrowserErrors: function allowSomeBrowserErrors(whitelist, done) {
     if (typeof done === 'function') {
@@ -187,5 +294,6 @@ module.exports = {
     }
   },
   isChrome,
-  getWebdriveBaseConfig
+  getWebdriveBaseConfig,
+  waitForApmServerCalls
 }