[UI Framework] Create Button React components in UI Framework.

.gitignore

@@ -36,4 +36,5 @@ selenium
 *.swo
 *.out
 ui_framework/doc_site/build/*.js*
+ui_framework/jest/report
 yarn.lock

package.json

@@ -63,7 +63,9 @@
     "mocha": "mocha",
     "mocha:debug": "mocha --debug-brk",
     "sterilize": "grunt sterilize",
-    "uiFramework:start": "grunt uiFramework:start"
+    "uiFramework:start": "grunt uiFramework:start",
+    "uiFramework:dev": "node tasks/utils/ui_framework_test --env=jsdom --watch",
+    "uiFramework:coverage": "node tasks/utils/ui_framework_test --env=jsdom --coverage"
   },
   "repository": {
     "type": "git",
@@ -95,6 +97,7 @@
     "autoprefixer-loader": "2.0.0",
     "babel-cli": "6.18.0",
     "babel-core": "6.21.0",
+    "babel-jest": "18.0.0",
     "babel-loader": "6.2.10",
     "babel-plugin-add-module-exports": "0.2.1",
     "babel-polyfill": "6.20.0",
@@ -199,6 +202,7 @@
   },
   "devDependencies": {
     "@elastic/eslint-config-kibana": "0.4.0",
+    "@spalger/babel-presets": "0.3.2",
     "angular-mocks": "1.4.7",
     "auto-release-sinon": "1.0.3",
     "babel-eslint": "6.1.2",
@@ -209,8 +213,10 @@
     "chromedriver": "2.24.1",
     "classnames": "2.2.5",
     "enzyme": "2.7.0",
+    "enzyme-to-json": "1.4.5",
     "eslint": "3.11.1",
     "eslint-plugin-babel": "4.0.0",
+    "eslint-plugin-jest": "19.0.1",
     "eslint-plugin-mocha": "4.7.0",
     "eslint-plugin-react": "6.10.3",
     "event-stream": "3.3.2",
@@ -230,11 +236,14 @@
     "gulp-sourcemaps": "1.7.3",
     "highlight.js": "9.0.0",
     "history": "2.1.1",
+    "html": "1.0.0",
     "html-loader": "0.4.3",
     "husky": "0.8.1",
     "image-diff": "1.6.0",
     "intern": "3.2.3",
     "istanbul-instrumenter-loader": "0.1.3",
+    "jest": "19.0.0",
+    "jest-cli": "19.0.0",
     "jsdom": "9.9.1",
     "karma": "1.2.0",
     "karma-chrome-launcher": "0.2.0",

src/core_plugins/kibana/public/context/components/loading_button/loading_button.html

@@ -2,9 +2,11 @@
   class="kuiButton kuiButton--basic kuiButton--iconText"
   ng-disabled="isDisabled"
 >
-  <span
-    class="kuiButton__icon kuiIcon fa-spinner fa-spin"
-    ng-class="isDisabled ? ['fa-spinner', 'fa-spin'] : [icon]"
-  />
-  <span ng-transclude />
+  <span class="kuiButton__inner">
+    <span
+      class="kuiButton__icon kuiIcon fa-spinner fa-spin"
+      ng-class="isDisabled ? ['fa-spinner', 'fa-spin'] : [icon]"
+    />
+    <span ng-transclude />
+  </span>
 </button>

src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html

@@ -99,8 +99,10 @@
             class="kuiButton kuiButton--primary kuiButton--iconText"
             href="#/dashboard/create"
           >
-            <span class="kuiButton__icon kuiIcon fa-plus"></span>
-            Create a dashboard
+            <span class="kuiButton__inner">
+              <span class="kuiButton__icon kuiIcon fa-plus"></span>
+              <span>Create a dashboard</span>
+            </span>
           </a>
         </div>
       </div>

src/core_plugins/kibana/public/management/sections/objects/_objects.html

@@ -13,8 +13,10 @@ <h1 class="kuiTitle">
           class="kuiButton kuiButton--basic kuiButton--iconText"
           ng-click="exportAll()"
         >
-          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-download"></span>
-          Export Everything
+          <span class="kuiButton__inner">
+            <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-download"></span>
+            <span>Export Everything</span>
+          </span>
         </button>
 
         <file-upload
@@ -25,8 +27,10 @@ <h1 class="kuiTitle">
             class="kuiButton kuiButton--basic kuiButton--iconText"
             data-import-saved-objects-button
           >
-            <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-upload"></span>
-            Import
+            <span class="kuiButton__inner">
+              <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-upload"></span>
+              <span>Import</span>
+            </span>
           </button>
         </file-upload>
       </div>
@@ -84,8 +88,10 @@ <h1 class="kuiTitle">
             aria-label="Delete selected objects"
             ng-disabled="selectedItems.length == 0"
           >
-            <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
-            Delete
+            <span class="kuiButton__inner">
+              <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
+              <span>Delete</span>
+            </span>
           </button>
 
           <!-- Bulk export button -->
@@ -95,8 +101,10 @@ <h1 class="kuiTitle">
             aria-label="Export selected objects"
             ng-disabled="selectedItems.length == 0"
           >
-            <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-download"></span>
-            Export
+            <span class="kuiButton__inner">
+              <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-download"></span>
+              <span>Export</span>
+            </span>
           </button>
         </div>
 

src/core_plugins/kibana/public/management/sections/objects/_view.html

@@ -13,16 +13,20 @@ <h1 class="kuiTitle">
           class="kuiButton kuiButton--basic kuiButton--iconText"
           href="{{ link }}"
         >
-          <span class="kuiButton__icon kuiIcon fa-eye"></span>
-          View {{ title }}
+          <span class="kuiButton__inner">
+            <span class="kuiButton__icon kuiIcon fa-eye"></span>
+            <span>View {{ title }}</span>
+          </span>
         </a>
 
         <button
           class="kuiButton kuiButton--danger kuiButton--iconText"
           ng-click="delete()"
         >
-          <span class="kuiButton__icon kuiIcon fa-trash-o"></span>
-          Delete {{ title }}
+          <span class="kuiButton__inner">
+            <span class="kuiButton__icon kuiIcon fa-trash-o"></span>
+            <span>Delete {{ title }}</span>
+          </span>
         </button>
       </div>
     </div>

src/core_plugins/kibana/public/visualize/listing/visualize_listing.html

@@ -97,8 +97,10 @@
             class="kuiButton kuiButton--primary kuiButton--iconText"
             href="#/visualize/new"
           >
-            <span class="kuiButton__icon kuiIcon fa-plus"></span>
-            Create a visualization
+            <span class="kuiButton__inner">
+              <span class="kuiButton__icon kuiIcon fa-plus"></span>
+              <span>Create a visualization</span>
+            </span>
           </a>
         </div>
       </div>

tasks/config/eslint.js

@@ -9,6 +9,8 @@ export default grunt => ({
       'scripts',
       'tasks',
       'test',
+      'ui_framework/components',
+      'ui_framework/doc_site',
       'utilities',
     ],
   },

tasks/test.js

@@ -51,6 +51,7 @@ module.exports = function (grunt) {
   grunt.registerTask('test:coverage', [ 'run:testCoverageServer', 'karma:coverage' ]);
 
   grunt.registerTask('test:quick', [
+    'uiFramework:test',
     'test:server',
     'test:ui',
     'test:browser',

tasks/ui_framework_test.js

@@ -0,0 +1,37 @@
+const platform = require('os').platform();
+const config = require('./utils/ui_framework_test_config');
+
+module.exports = function (grunt) {
+  grunt.registerTask('uiFramework:test', function () {
+    const done = this.async();
+    Promise.all([uiFrameworkTest()]).then(done);
+  });
+
+  function uiFrameworkTest() {
+    const serverCmd = {
+      cmd: /^win/.test(platform) ? '.\\node_modules\\.bin\\jest.cmd' : './node_modules/.bin/jest',
+      args: [
+        '--env=jsdom',
+        `--config=${JSON.stringify(config)}`,
+      ],
+      opts: { stdio: 'inherit' }
+    };
+
+    return new Promise((resolve, reject) => {
+      grunt.util.spawn(serverCmd, (error, result, code) => {
+        if (error || code !== 0) {
+          const message = result.stderr || result.stdout;
+
+          grunt.log.error(message);
+
+          return reject();
+        }
+
+        grunt.log.writeln(result);
+
+        resolve();
+      });
+
+    });
+  }
+};

tasks/utils/ui_framework_test.js

@@ -0,0 +1,8 @@
+const jest = require('jest');
+const config = require('./ui_framework_test_config');
+
+const argv = process.argv.slice(2);
+
+argv.push('--config', JSON.stringify(config));
+
+jest.run(argv);

tasks/utils/ui_framework_test_config.js

@@ -0,0 +1,20 @@
+const rootDir = 'ui_framework';
+
+module.exports = {
+  rootDir,
+  collectCoverageFrom: [
+    'components/**/*.js',
+    // Seems to be a bug with jest or micromatch, in which the above glob doesn't match subsequent
+    // levels of directories, making this glob necessary.
+    'components/**/**/*.js',
+    '!components/index.js',
+    '!components/**/*/index.js',
+  ],
+  coverageDirectory: '<rootDir>/jest/report',
+  coverageReporters: ['html'],
+  moduleFileExtensions: ['jsx', 'js', 'json'],
+  testPathIgnorePatterns: ['<rootDir>/(dist|doc_site|jest)/'],
+  testEnvironment: 'node',
+  testRegex: '.*\.test\.(js|jsx)$',
+  snapshotSerializers: ['<rootDir>/../node_modules/enzyme-to-json/serializer']
+};

ui_framework/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react", "@spalger/babel-presets"]
+}

ui_framework/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "plugins": [
+    "jest"
+  ],
+  "rules": {
+    "jest/no-disabled-tests": "error",
+    "jest/no-focused-tests": "error",
+    "jest/no-identical-title": "error"
+  },
+  "env": {
+    "jest/globals": true
+  }
+}