Migration to Babel7 and @babel/preset-typescript

docs/development/core-development.asciidoc

@@ -15,4 +15,6 @@ include::core/development-modules.asciidoc[]
 
 include::core/development-elasticsearch.asciidoc[]
 
+include::core/development-unit-tests.asciidoc[]
+
 include::core/development-functional-tests.asciidoc[]

docs/development/core/development-unit-tests.asciidoc

@@ -0,0 +1,80 @@
+[[development-unit-tests]]
+=== Unit Testing
+
+We use unit tests to make sure that individual software units of Kibana perform as they were designed to.
+
+[float]
+==== Current Frameworks
+
+Kibana is migrating unit testing from `Mocha` to `Jest`. Legacy unit tests still exist in `Mocha` but all new unit tests should be written in `Jest`.
+
+[float]
+==== Mocha (legacy)
+
+Mocha tests are contained in `__tests__` directories.
+
+===== Running Mocha Unit Tests
+
+["source","shell"]
+-----------
+yarn test:mocha
+-----------
+
+==== Jest
+Jest tests are stored in the same directory as source code files with the `.test.{js,ts,tsx}` suffix.
+
+===== Running Jest Unit Tests
+
+["source","shell"]
+-----------
+yarn test:jest
+-----------
+
+===== Writing Jest Unit Tests
+
+In order to write those tests there are two main things you need to be aware of.
+The first one is the different between `jest.mock` and `jest.doMock` 
+and the second one our `jest mocks file pattern`. As we are running `js` and `ts`
+test files with `babel-jest` both techniques are needed
+specially for the tests implemented on Typescript in order to benefit from the 
+auto-inference types feature.
+
+
+====== Jest.mock vs Jest.doMock
+
+Both methods are essentially the same on their roots however the `jest.mock` 
+calls will get hoisted to the top of the file and can only reference variables 
+prefixed with `mock`. On the other hand, `jest.doMock` won't be hoisted and can 
+reference pretty much any variable we want, however we have to assure those referenced 
+variables are instantiated at the time we need them which lead us to the next 
+section where we'll talk about our jest mock files pattern.
+
+====== Jest Mock Files Pattern 
+
+Specially on typescript it is pretty common to have in unit tests 
+`jest.doMock` calls which reference for example imported types. Any error 
+will thrown from doing that however the test will fail. The reason behind that
+is because despite the `jest.doMock` isn't being hoisted by `babel-jest` the 
+import with the types we are referencing will be hoisted to the top and at the 
+time we'll call the function that variable would not be defined.
+
+In order to prevent that we develop a protocol that should be followed:
+
+- Each module could provide a standard mock in `mymodule.mock.ts` in case 
+there are other tests that could benefit from using definitions here. 
+This file would not have any `jest.mock` calls, just dummy objects.
+
+- Each test defines its mocks in `mymodule.test.mocks.ts`. This file 
+could import relevant mocks from the generalised module's mocks 
+file `(*.mock.ts)` and call `jest.mock` for each of them. If there is 
+any relevant dummy mock objects to generalise (and to be used by 
+other tests), the dummy objects could be defined directly on this file.
+
+- Each test would import its mocks from the test mocks 
+file mymodule.test.mocks.ts. `mymodule.test.ts` has an import 
+like: `import * as Mocks from './mymodule.test.mocks'`, 
+`import { mockX } from './mymodule.test.mocks'` 
+or just `import './mymodule.test.mocks'` if there isn't anything 
+exported to be used.
+
+

package.json

@@ -90,11 +90,13 @@
       "**/@types/*/**",
       "**/grunt-*",
       "**/grunt-*/**",
-      "x-pack/typescript",
-      "kbn_tp_*/**"
+      "x-pack/typescript"
     ]
   },
   "dependencies": {
+    "@babel/core": "^7.3.4",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/register": "^7.0.0",
     "@elastic/datemath": "5.0.2",
     "@elastic/eui": "9.5.0",
     "@elastic/filesaver": "1.1.2",
@@ -124,10 +126,7 @@
     "angular-sanitize": "1.6.5",
     "angular-sortable-view": "0.0.15",
     "autoprefixer": "^9.1.0",
-    "babel-core": "6.26.3",
-    "babel-loader": "7.1.5",
-    "babel-polyfill": "6.26.0",
-    "babel-register": "6.26.0",
+    "babel-loader": "8.0.5",
     "bluebird": "3.5.3",
     "boom": "^7.2.0",
     "brace": "0.11.1",
@@ -264,7 +263,7 @@
     "@octokit/rest": "^15.10.0",
     "@types/angular": "1.6.50",
     "@types/angular-mocks": "^1.7.0",
-    "@types/babel-core": "^6.25.5",
+    "@types/babel__core": "^7.1.0",
     "@types/bluebird": "^3.1.1",
     "@types/boom": "^7.2.0",
     "@types/chance": "^1.0.0",
@@ -276,7 +275,7 @@
     "@types/delete-empty": "^2.0.0",
     "@types/elasticsearch": "^5.0.30",
     "@types/enzyme": "^3.1.12",
-    "@types/eslint": "^4.16.2",
+    "@types/eslint": "^4.16.6",
     "@types/execa": "^0.9.0",
     "@types/fetch-mock": "7.2.1",
     "@types/getopts": "^2.0.0",
@@ -321,8 +320,8 @@
     "@types/zen-observable": "^0.8.0",
     "angular-mocks": "1.4.7",
     "archiver": "^3.0.0",
-    "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.6.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^24.1.0",
     "backport": "4.4.1",
     "chai": "3.5.0",
     "chance": "1.0.10",
@@ -336,17 +335,17 @@
     "enzyme-adapter-react-16": "^1.9.0",
     "enzyme-adapter-utils": "^1.10.0",
     "enzyme-to-json": "^3.3.4",
-    "eslint": "^5.6.0",
-    "eslint-config-prettier": "^3.1.0",
-    "eslint-plugin-babel": "^5.2.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jest": "^21.26.2",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-mocha": "^5.2.0",
+    "eslint": "^5.15.1",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jest": "^22.3.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-mocha": "^5.3.0",
     "eslint-plugin-no-unsanitized": "^3.0.2",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
-    "eslint-plugin-prettier": "^2.6.2",
-    "eslint-plugin-react": "^7.11.1",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-react": "^7.12.4",
     "faker": "1.1.0",
     "fetch-mock": "7.3.0",
     "geckodriver": "1.12.2",
@@ -357,7 +356,7 @@
     "grunt-karma": "2.0.0",
     "grunt-peg": "^2.0.1",
     "grunt-run": "0.7.0",
-    "gulp-babel": "^7.0.1",
+    "gulp-babel": "^8.0.0",
     "gulp-sourcemaps": "2.6.4",
     "has-ansi": "^3.0.0",
     "image-diff": "1.6.0",
@@ -403,9 +402,6 @@
     "supertest": "^3.1.0",
     "supertest-as-promised": "^4.0.2",
     "tree-kill": "^1.1.0",
-    "ts-jest": "^23.1.4",
-    "ts-loader": "^5.2.2",
-    "ts-node": "^7.0.1",
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.15.0",
     "tslint-microsoft-contrib": "^6.0.0",

packages/elastic-datemath/.babelrc

@@ -1,13 +1,16 @@
 {
-  "presets": [["env", {
-    "targets": {
-      "node": "current",
-      "browsers": [
-        "last 2 versions",
-        "> 5%",
-        "Safari 7",
-      ]
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "node": "current",
+        "browsers": [
+          "last 2 versions",
+          "> 5%",
+          "Safari 7"
+        ]
+      }
     }
-  }]],
+    ]
+  ],
   "plugins": ["add-module-exports"]
-}
+}

packages/elastic-datemath/package.json

@@ -11,9 +11,9 @@
     "kbn:watch": "yarn build --watch"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-preset-env": "^1.7.0",
+    "@babel/cli": "^7.2.3",
+    "@babel/preset-env": "^7.3.4",
+    "babel-plugin-add-module-exports": "^1.0.0",
     "moment": "^2.13.0"
   },
   "dependencies": {

packages/eslint-config-kibana/package.json

@@ -15,15 +15,15 @@
   },
   "homepage": "https://github.com/elastic/eslint-config-kibana#readme",
   "peerDependencies": {
-    "babel-eslint": "^9.0.0",
-    "eslint": "^5.6.0",
-    "eslint-plugin-babel": "^5.2.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jest": "^21.22.1",
-    "eslint-plugin-mocha": "^5.2.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.14.1",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jest": "^22.3.0",
+    "eslint-plugin-mocha": "^5.3.0",
     "eslint-plugin-no-unsanitized": "^3.0.2",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
-    "eslint-plugin-react": "^7.11.1"
+    "eslint-plugin-react": "^7.12.4"
   }
 }

packages/kbn-babel-code-parser/package.json

@@ -15,7 +15,7 @@
     "kbn:watch": "yarn build --watch"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0"
+    "@babel/cli": "^7.2.3"
   },
   "dependencies": {
     "@kbn/babel-preset": "1.0.0",

packages/kbn-babel-preset/common_preset.js

@@ -19,20 +19,33 @@
 
 module.exports = {
   presets: [
-    require.resolve('babel-preset-react'),
+    require.resolve('@babel/preset-typescript'),
+    require.resolve('@babel/preset-react')
   ],
   plugins: [
     require.resolve('babel-plugin-add-module-exports'),
-    // stage 3
-    require.resolve('babel-plugin-transform-async-generator-functions'),
-    require.resolve('babel-plugin-transform-object-rest-spread'),
 
-    // the class properties proposal was merged with the private fields proposal
+    // The class properties proposal was merged with the private fields proposal
     // into the "class fields" proposal. Babel doesn't support this combined
     // proposal yet, which includes private field, so this transform is
     // TECHNICALLY stage 2, but for all intents and purposes it's stage 3
     //
     // See https://github.com/babel/proposals/issues/12 for progress
-    require.resolve('babel-plugin-transform-class-properties'),
+    require.resolve('@babel/plugin-proposal-class-properties'),
   ],
+  overrides: [
+    {
+      // Babel 7 don't support the namespace feature on typescript code.
+      // With namespaces only used for type declarations, we can securely
+      // strip them off for babel on x-pack infra plugin
+      //
+      // See https://github.com/babel/babel/issues/8244#issuecomment-466548733
+      test: /x-pack[\/\\]plugins[\/\\]infra[\/\\].*[\/\\]graphql/,
+      plugins: [
+        [
+          require.resolve('babel-plugin-typescript-strip-namespaces'),
+        ],
+      ]
+    }
+  ]
 };