Merge branch 'master' into copy-as-md

# Conflicts:
#	app/assets/javascripts/lib/utils/common_utils.js.es6

38 files changed, 729 insertions, 393 deletions

diff --git a/spec/javascripts/activities_spec.js.es6 b/spec/javascripts/activities_spec.js.es6
index b3617a45bd4..7bc5b3268a0 100644
--- a/spec/javascripts/activities_spec.js.es6
+++ b/spec/javascripts/activities_spec.js.es6
@@ -1,4 +1,4 @@
-/* eslint-disable no-unused-expressions, comma-spacing, prefer-const, no-prototype-builtins, semi, no-new, keyword-spacing, no-plusplus, no-shadow, max-len */
+/* eslint-disable no-unused-expressions, no-prototype-builtins, no-new, no-shadow, max-len */
 
 /*= require js.cookie.js */
 /*= require jquery.endless-scroll.js */
@@ -19,18 +19,18 @@
       name: 'merge events',
     }, {
       id: 'comments',
-    },{
+    }, {
       id: 'team',
     }];
 
   function getEventName(index) {
-    let filter = filters[index];
+    const filter = filters[index];
     return filter.hasOwnProperty('name') ? filter.name : filter.id;
   }
 
   function getSelector(index) {
-    let filter = filters[index];
-    return `#${filter.id}_event_filter`
+    const filter = filters[index];
+    return `#${filter.id}_event_filter`;
   }
 
   describe('Activities', () => {
@@ -39,17 +39,17 @@
       new gl.Activities();
     });
 
-    for(let i = 0; i < filters.length; i++) {
+    for (let i = 0; i < filters.length; i += 1) {
       ((i) => {
         describe(`when selecting ${getEventName(i)}`, () => {
           beforeEach(() => {
             $(getSelector(i)).click();
           });
 
-          for(let x = 0; x < filters.length; x++) {
+          for (let x = 0; x < filters.length; x += 1) {
             ((x) => {
-              let shouldHighlight = i === x;
-              let testName = shouldHighlight ? 'should highlight' : 'should not highlight';
+              const shouldHighlight = i === x;
+              const testName = shouldHighlight ? 'should highlight' : 'should not highlight';
 
               it(`${testName} ${getEventName(x)}`, () => {
                 expect($(getSelector(x)).parent().hasClass('active')).toEqual(shouldHighlight);
diff --git a/spec/javascripts/awards_handler_spec.js b/spec/javascripts/awards_handler_spec.js
index faba2837d41..71446b9df61 100644
--- a/spec/javascripts/awards_handler_spec.js
+++ b/spec/javascripts/awards_handler_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, no-unused-expressions, comma-dangle, new-parens, no-unused-vars, quotes, jasmine/no-spec-dupes, prefer-template, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, no-unused-expressions, comma-dangle, new-parens, no-unused-vars, quotes, jasmine/no-spec-dupes, prefer-template, max-len */
 /* global AwardsHandler */
 
 /*= require awards_handler */
@@ -231,5 +231,4 @@
       });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/behaviors/autosize_spec.js b/spec/javascripts/behaviors/autosize_spec.js
index e77d732a32a..51d911792ba 100644
--- a/spec/javascripts/behaviors/autosize_spec.js
+++ b/spec/javascripts/behaviors/autosize_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-var, comma-dangle, no-return-assign, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, no-var, comma-dangle, no-return-assign, max-len */
 
 /*= require behaviors/autosize */
 
@@ -18,5 +18,4 @@
       return $(document).trigger('page:load');
     };
   });
-
 }).call(this);
diff --git a/spec/javascripts/behaviors/quick_submit_spec.js b/spec/javascripts/behaviors/quick_submit_spec.js
index 1a1f34cfdc0..0f046c2d83a 100644
--- a/spec/javascripts/behaviors/quick_submit_spec.js
+++ b/spec/javascripts/behaviors/quick_submit_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-var, no-return-assign, comma-dangle, jasmine/no-spec-dupes, new-cap, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, no-var, no-return-assign, comma-dangle, jasmine/no-spec-dupes, new-cap, max-len */
 
 /*= require behaviors/quick_submit */
 
@@ -93,5 +93,4 @@
       return $.Event('keydown', $.extend({}, defaults, options));
     };
   });
-
 }).call(this);
diff --git a/spec/javascripts/behaviors/requires_input_spec.js b/spec/javascripts/behaviors/requires_input_spec.js
index 1f62591c06d..9467056f04c 100644
--- a/spec/javascripts/behaviors/requires_input_spec.js
+++ b/spec/javascripts/behaviors/requires_input_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-var, padded-blocks */
+/* eslint-disable space-before-function-paren, no-var */
 
 /*= require behaviors/requires_input */
 
@@ -41,5 +41,4 @@
       return expect(spy).toHaveBeenCalled();
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/boards/boards_store_spec.js.es6 b/spec/javascripts/boards/boards_store_spec.js.es6
index b3a1afa28a5..7c5850111cb 100644
--- a/spec/javascripts/boards/boards_store_spec.js.es6
+++ b/spec/javascripts/boards/boards_store_spec.js.es6
@@ -1,4 +1,4 @@
-/* eslint-disable comma-dangle, one-var, no-unused-vars, indent */
+/* eslint-disable comma-dangle, one-var, no-unused-vars */
 /* global Vue */
 /* global BoardService */
 /* global boardsMockInterceptor */
@@ -146,8 +146,8 @@ describe('Store', () => {
     });
 
     it('moves the position of lists', () => {
-      const listOne = gl.issueBoards.BoardsStore.addList(listObj),
-            listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
+      const listOne = gl.issueBoards.BoardsStore.addList(listObj);
+      const listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
 
       expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
 
@@ -157,8 +157,8 @@ describe('Store', () => {
     });
 
     it('moves an issue from one list to another', (done) => {
-      const listOne = gl.issueBoards.BoardsStore.addList(listObj),
-            listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
+      const listOne = gl.issueBoards.BoardsStore.addList(listObj);
+      const listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
 
       expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
 
diff --git a/spec/javascripts/dashboard_spec.js.es6 b/spec/javascripts/dashboard_spec.js.es6
index 3f6b328348d..4d851b2d320 100644
--- a/spec/javascripts/dashboard_spec.js.es6
+++ b/spec/javascripts/dashboard_spec.js.es6
@@ -1,4 +1,4 @@
-/* eslint-disable no-new, padded-blocks */
+/* eslint-disable no-new */
 
 /*= require sidebar */
 /*= require jquery */
@@ -36,5 +36,4 @@
       expect(todosCountText()).toEqual('1,000,000');
     });
   });
-
 })(window.gl);
diff --git a/spec/javascripts/diff_comments_store_spec.js.es6 b/spec/javascripts/diff_comments_store_spec.js.es6
index 18805d26ac0..fbfa34a5da7 100644
--- a/spec/javascripts/diff_comments_store_spec.js.es6
+++ b/spec/javascripts/diff_comments_store_spec.js.es6
@@ -1,4 +1,4 @@
-/* eslint-disable no-extra-semi, jasmine/no-global-setup, dot-notation, jasmine/no-expect-in-setup-teardown, max-len */
+/* eslint-disable jasmine/no-global-setup, dot-notation, jasmine/no-expect-in-setup-teardown, max-len */
 /* global CommentsStore */
 
 //= require vue
@@ -9,7 +9,7 @@
 (() => {
   function createDiscussion(noteId = 1, resolved = true) {
     CommentsStore.create('a', noteId, true, resolved, 'test');
-  };
+  }
 
   beforeEach(() => {
     CommentsStore.state = {};
diff --git a/spec/javascripts/extensions/array_spec.js.es6 b/spec/javascripts/extensions/array_spec.js.es6
index 2ec759c8e80..3949c5615d5 100644
--- a/spec/javascripts/extensions/array_spec.js.es6
+++ b/spec/javascripts/extensions/array_spec.js.es6
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-var, padded-blocks */
+/* eslint-disable space-before-function-paren, no-var */
 
 /*= require extensions/array */
 
@@ -42,5 +42,4 @@
       });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/extensions/jquery_spec.js b/spec/javascripts/extensions/jquery_spec.js
index 91846bb9143..5cd0e5ab0f0 100644
--- a/spec/javascripts/extensions/jquery_spec.js
+++ b/spec/javascripts/extensions/jquery_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-var, padded-blocks */
+/* eslint-disable space-before-function-paren, no-var */
 
 /*= require extensions/jquery */
 
@@ -39,5 +39,4 @@
       });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/fixtures/emoji_menu.js b/spec/javascripts/fixtures/emoji_menu.js
index 3d776bb9277..2ef242901e8 100644
--- a/spec/javascripts/fixtures/emoji_menu.js
+++ b/spec/javascripts/fixtures/emoji_menu.js
@@ -1,5 +1,4 @@
-/* eslint-disable space-before-function-paren, padded-blocks */
+/* eslint-disable space-before-function-paren */
 (function() {
   window.emojiMenu = "<div class='emoji-menu'>\n  <input type=\"text\" name=\"emoji_search\" id=\"emoji_search\" value=\"\" class=\"emoji-search search-input form-control\" />\n  <div class='emoji-menu-content'>\n    <h5 class='emoji-menu-title'>\n    Emoticons\n    </h5>\n    <ul class='clearfix emoji-menu-list'>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F47D\" title=\"alien\" data-aliases=\"\" data-emoji=\"alien\" data-unicode-name=\"1F47D\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F47C\" title=\"angel\" data-aliases=\"\" data-emoji=\"angel\" data-unicode-name=\"1F47C\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F4A2\" title=\"anger\" data-aliases=\"\" data-emoji=\"anger\" data-unicode-name=\"1F4A2\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F620\" title=\"angry\" data-aliases=\"\" data-emoji=\"angry\" data-unicode-name=\"1F620\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F627\" title=\"anguished\" data-aliases=\"\" data-emoji=\"anguished\" data-unicode-name=\"1F627\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F632\" title=\"astonished\" data-aliases=\"\" data-emoji=\"astonished\" data-unicode-name=\"1F632\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F45F\" title=\"athletic_shoe\" data-aliases=\"\" data-emoji=\"athletic_shoe\" data-unicode-name=\"1F45F\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F476\" title=\"baby\" data-aliases=\"\" data-emoji=\"baby\" data-unicode-name=\"1F476\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F459\" title=\"bikini\" data-aliases=\"\" data-emoji=\"bikini\" data-unicode-name=\"1F459\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F499\" title=\"blue_heart\" data-aliases=\"\" data-emoji=\"blue_heart\" data-unicode-name=\"1F499\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F60A\" title=\"blush\" data-aliases=\"\" data-emoji=\"blush\" data-unicode-name=\"1F60A\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F4A5\" title=\"boom\" data-aliases=\"\" data-emoji=\"boom\" data-unicode-name=\"1F4A5\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F462\" title=\"boot\" data-aliases=\"\" data-emoji=\"boot\" data-unicode-name=\"1F462\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F647\" title=\"bow\" data-aliases=\"\" data-emoji=\"bow\" data-unicode-name=\"1F647\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F466\" title=\"boy\" data-aliases=\"\" data-emoji=\"boy\" data-unicode-name=\"1F466\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F470\" title=\"bride_with_veil\" data-aliases=\"\" data-emoji=\"bride_with_veil\" data-unicode-name=\"1F470\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F4BC\" title=\"briefcase\" data-aliases=\"\" data-emoji=\"briefcase\" data-unicode-name=\"1F4BC\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F494\" title=\"broken_heart\" data-aliases=\"\" data-emoji=\"broken_heart\" data-unicode-name=\"1F494\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F464\" title=\"bust_in_silhouette\" data-aliases=\"\" data-emoji=\"bust_in_silhouette\" data-unicode-name=\"1F464\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F465\" title=\"busts_in_silhouette\" data-aliases=\"\" data-emoji=\"busts_in_silhouette\" data-unicode-name=\"1F465\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F44F\" title=\"clap\" data-aliases=\"\" data-emoji=\"clap\" data-unicode-name=\"1F44F\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F302\" title=\"closed_umbrella\" data-aliases=\"\" data-emoji=\"closed_umbrella\" data-unicode-name=\"1F302\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F630\" title=\"cold_sweat\" data-aliases=\"\" data-emoji=\"cold_sweat\" data-unicode-name=\"1F630\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F616\" title=\"confounded\" data-aliases=\"\" data-emoji=\"confounded\" data-unicode-name=\"1F616\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F615\" title=\"confused\" data-aliases=\"\" data-emoji=\"confused\" data-unicode-name=\"1F615\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F477\" title=\"construction_worker\" data-aliases=\"\" data-emoji=\"construction_worker\" data-unicode-name=\"1F477\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F46E\" title=\"cop\" data-aliases=\"\" data-emoji=\"cop\" data-unicode-name=\"1F46E\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F46B\" title=\"couple\" data-aliases=\"\" data-emoji=\"couple\" data-unicode-name=\"1F46B\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F491\" title=\"couple_with_heart\" data-aliases=\"\" data-emoji=\"couple_with_heart\" data-unicode-name=\"1F491\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F48F\" title=\"couplekiss\" data-aliases=\"\" data-emoji=\"couplekiss\" data-unicode-name=\"1F48F\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F451\" title=\"crown\" data-aliases=\"\" data-emoji=\"crown\" data-unicode-name=\"1F451\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F622\" title=\"cry\" data-aliases=\"\" data-emoji=\"cry\" data-unicode-name=\"1F622\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F63F\" title=\"crying_cat_face\" data-aliases=\"\" data-emoji=\"crying_cat_face\" data-unicode-name=\"1F63F\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F498\" title=\"cupid\" data-aliases=\"\" data-emoji=\"cupid\" data-unicode-name=\"1F498\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F483\" title=\"dancer\" data-aliases=\"\" data-emoji=\"dancer\" data-unicode-name=\"1F483\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F46F\" title=\"dancers\" data-aliases=\"\" data-emoji=\"dancers\" data-unicode-name=\"1F46F\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F4A8\" title=\"dash\" data-aliases=\"\" data-emoji=\"dash\" data-unicode-name=\"1F4A8\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F61E\" title=\"disappointed\" data-aliases=\"\" data-emoji=\"disappointed\" data-unicode-name=\"1F61E\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F625\" title=\"disappointed_relieved\" data-aliases=\"\" data-emoji=\"disappointed_relieved\" data-unicode-name=\"1F625\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F4AB\" title=\"dizzy\" data-aliases=\"\" data-emoji=\"dizzy\" data-unicode-name=\"1F4AB\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F635\" title=\"dizzy_face\" data-aliases=\"\" data-emoji=\"dizzy_face\" data-unicode-name=\"1F635\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F457\" title=\"dress\" data-aliases=\"\" data-emoji=\"dress\" data-unicode-name=\"1F457\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F4A7\" title=\"droplet\" data-aliases=\"\" data-emoji=\"droplet\" data-unicode-name=\"1F4A7\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F442\" title=\"ear\" data-aliases=\"\" data-emoji=\"ear\" data-unicode-name=\"1F442\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F611\" title=\"expressionless\" data-aliases=\"\" data-emoji=\"expressionless\" data-unicode-name=\"1F611\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F453\" title=\"eyeglasses\" data-aliases=\"\" data-emoji=\"eyeglasses\" data-unicode-name=\"1F453\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F440\" title=\"eyes\" data-aliases=\"\" data-emoji=\"eyes\" data-unicode-name=\"1F440\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F46A\" title=\"family\" data-aliases=\"\" data-emoji=\"family\" data-unicode-name=\"1F46A\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F628\" title=\"fearful\" data-aliases=\"\" data-emoji=\"fearful\" data-unicode-name=\"1F628\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F525\" title=\"fire\" data-aliases=\":flame:\" data-emoji=\"fire\" data-unicode-name=\"1F525\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-270A\" title=\"fist\" data-aliases=\"\" data-emoji=\"fist\" data-unicode-name=\"270A\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F633\" title=\"flushed\" data-aliases=\"\" data-emoji=\"flushed\" data-unicode-name=\"1F633\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F463\" title=\"footprints\" data-aliases=\"\" data-emoji=\"footprints\" data-unicode-name=\"1F463\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F626\" title=\"frowning\" data-aliases=\":anguished:\" data-emoji=\"frowning\" data-unicode-name=\"1F626\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F48E\" title=\"gem\" data-aliases=\"\" data-emoji=\"gem\" data-unicode-name=\"1F48E\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F467\" title=\"girl\" data-aliases=\"\" data-emoji=\"girl\" data-unicode-name=\"1F467\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F49A\" title=\"green_heart\" data-aliases=\"\" data-emoji=\"green_heart\" data-unicode-name=\"1F49A\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F62C\" title=\"grimacing\" data-aliases=\"\" data-emoji=\"grimacing\" data-unicode-name=\"1F62C\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F601\" title=\"grin\" data-aliases=\"\" data-emoji=\"grin\" data-unicode-name=\"1F601\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F600\" title=\"grinning\" data-aliases=\"\" data-emoji=\"grinning\" data-unicode-name=\"1F600\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F482\" title=\"guardsman\" data-aliases=\"\" data-emoji=\"guardsman\" data-unicode-name=\"1F482\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F487\" title=\"haircut\" data-aliases=\"\" data-emoji=\"haircut\" data-unicode-name=\"1F487\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F45C\" title=\"handbag\" data-aliases=\"\" data-emoji=\"handbag\" data-unicode-name=\"1F45C\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F649\" title=\"hear_no_evil\" data-aliases=\"\" data-emoji=\"hear_no_evil\" data-unicode-name=\"1F649\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-2764\" title=\"heart\" data-aliases=\"\" data-emoji=\"heart\" data-unicode-name=\"2764\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F60D\" title=\"heart_eyes\" data-aliases=\"\" data-emoji=\"heart_eyes\" data-unicode-name=\"1F60D\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F63B\" title=\"heart_eyes_cat\" data-aliases=\"\" data-emoji=\"heart_eyes_cat\" data-unicode-name=\"1F63B\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F493\" title=\"heartbeat\" data-aliases=\"\" data-emoji=\"heartbeat\" data-unicode-name=\"1F493\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F497\" title=\"heartpulse\" data-aliases=\"\" data-emoji=\"heartpulse\" data-unicode-name=\"1F497\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F460\" title=\"high_heel\" data-aliases=\"\" data-emoji=\"high_heel\" data-unicode-name=\"1F460\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F62F\" title=\"hushed\" data-aliases=\"\" data-emoji=\"hushed\" data-unicode-name=\"1F62F\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F47F\" title=\"imp\" data-aliases=\"\" data-emoji=\"imp\" data-unicode-name=\"1F47F\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F481\" title=\"information_desk_person\" data-aliases=\"\" data-emoji=\"information_desk_person\" data-unicode-name=\"1F481\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F607\" title=\"innocent\" data-aliases=\"\" data-emoji=\"innocent\" data-unicode-name=\"1F607\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F47A\" title=\"japanese_goblin\" data-aliases=\"\" data-emoji=\"japanese_goblin\" data-unicode-name=\"1F47A\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F479\" title=\"japanese_ogre\" data-aliases=\"\" data-emoji=\"japanese_ogre\" data-unicode-name=\"1F479\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F456\" title=\"jeans\" data-aliases=\"\" data-emoji=\"jeans\" data-unicode-name=\"1F456\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F602\" title=\"joy\" data-aliases=\"\" data-emoji=\"joy\" data-unicode-name=\"1F602\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F639\" title=\"joy_cat\" data-aliases=\"\" data-emoji=\"joy_cat\" data-unicode-name=\"1F639\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F458\" title=\"kimono\" data-aliases=\"\" data-emoji=\"kimono\" data-unicode-name=\"1F458\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F48B\" title=\"kiss\" data-aliases=\"\" data-emoji=\"kiss\" data-unicode-name=\"1F48B\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F617\" title=\"kissing\" data-aliases=\"\" data-emoji=\"kissing\" data-unicode-name=\"1F617\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F63D\" title=\"kissing_cat\" data-aliases=\"\" data-emoji=\"kissing_cat\" data-unicode-name=\"1F63D\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F61A\" title=\"kissing_closed_eyes\" data-aliases=\"\" data-emoji=\"kissing_closed_eyes\" data-unicode-name=\"1F61A\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F618\" title=\"kissing_heart\" data-aliases=\"\" data-emoji=\"kissing_heart\" data-unicode-name=\"1F618\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F619\" title=\"kissing_smiling_eyes\" data-aliases=\"\" data-emoji=\"kissing_smiling_eyes\" data-unicode-name=\"1F619\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F606\" title=\"laughing\" data-aliases=\":satisfied:\" data-emoji=\"laughing\" data-unicode-name=\"1F606\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F444\" title=\"lips\" data-aliases=\"\" data-emoji=\"lips\" data-unicode-name=\"1F444\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F484\" title=\"lipstick\" data-aliases=\"\" data-emoji=\"lipstick\" data-unicode-name=\"1F484\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F48C\" title=\"love_letter\" data-aliases=\"\" data-emoji=\"love_letter\" data-unicode-name=\"1F48C\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F468\" title=\"man\" data-aliases=\"\" data-emoji=\"man\" data-unicode-name=\"1F468\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F472\" title=\"man_with_gua_pi_mao\" data-aliases=\"\" data-emoji=\"man_with_gua_pi_mao\" data-unicode-name=\"1F472\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F473\" title=\"man_with_turban\" data-aliases=\"\" data-emoji=\"man_with_turban\" data-unicode-name=\"1F473\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F45E\" title=\"mans_shoe\" data-aliases=\"\" data-emoji=\"mans_shoe\" data-unicode-name=\"1F45E\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F637\" title=\"mask\" data-aliases=\"\" data-emoji=\"mask\" data-unicode-name=\"1F637\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F486\" title=\"massage\" data-aliases=\"\" data-emoji=\"massage\" data-unicode-name=\"1F486\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F4AA\" title=\"muscle\" data-aliases=\"\" data-emoji=\"muscle\" data-unicode-name=\"1F4AA\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F485\" title=\"nail_care\" data-aliases=\"\" data-emoji=\"nail_care\" data-unicode-name=\"1F485\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F454\" title=\"necktie\" data-aliases=\"\" data-emoji=\"necktie\" data-unicode-name=\"1F454\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F610\" title=\"neutral_face\" data-aliases=\"\" data-emoji=\"neutral_face\" data-unicode-name=\"1F610\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F645\" title=\"no_good\" data-aliases=\"\" data-emoji=\"no_good\" data-unicode-name=\"1F645\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F636\" title=\"no_mouth\" data-aliases=\"\" data-emoji=\"no_mouth\" data-unicode-name=\"1F636\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F443\" title=\"nose\" data-aliases=\"\" data-emoji=\"nose\" data-unicode-name=\"1F443\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F44C\" title=\"ok_hand\" data-aliases=\"\" data-emoji=\"ok_hand\" data-unicode-name=\"1F44C\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F646\" title=\"ok_woman\" data-aliases=\"\" data-emoji=\"ok_woman\" data-unicode-name=\"1F646\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F474\" title=\"older_man\" data-aliases=\"\" data-emoji=\"older_man\" data-unicode-name=\"1F474\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F475\" title=\"older_woman\" data-aliases=\":grandma:\" data-emoji=\"older_woman\" data-unicode-name=\"1F475\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F450\" title=\"open_hands\" data-aliases=\"\" data-emoji=\"open_hands\" data-unicode-name=\"1F450\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F62E\" title=\"open_mouth\" data-aliases=\"\" data-emoji=\"open_mouth\" data-unicode-name=\"1F62E\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F614\" title=\"pensive\" data-aliases=\"\" data-emoji=\"pensive\" data-unicode-name=\"1F614\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F623\" title=\"persevere\" data-aliases=\"\" data-emoji=\"persevere\" data-unicode-name=\"1F623\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F64D\" title=\"person_frowning\" data-aliases=\"\" data-emoji=\"person_frowning\" data-unicode-name=\"1F64D\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F471\" title=\"person_with_blond_hair\" data-aliases=\"\" data-emoji=\"person_with_blond_hair\" data-unicode-name=\"1F471\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F64E\" title=\"person_with_pouting_face\" data-aliases=\"\" data-emoji=\"person_with_pouting_face\" data-unicode-name=\"1F64E\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F447\" title=\"point_down\" data-aliases=\"\" data-emoji=\"point_down\" data-unicode-name=\"1F447\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F448\" title=\"point_left\" data-aliases=\"\" data-emoji=\"point_left\" data-unicode-name=\"1F448\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F449\" title=\"point_right\" data-aliases=\"\" data-emoji=\"point_right\" data-unicode-name=\"1F449\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-261D\" title=\"point_up\" data-aliases=\"\" data-emoji=\"point_up\" data-unicode-name=\"261D\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F446\" title=\"point_up_2\" data-aliases=\"\" data-emoji=\"point_up_2\" data-unicode-name=\"1F446\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F4A9\" title=\"poop\" data-aliases=\":shit: :hankey: :poo:\" data-emoji=\"poop\" data-unicode-name=\"1F4A9\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F45D\" title=\"pouch\" data-aliases=\"\" data-emoji=\"pouch\" data-unicode-name=\"1F45D\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F63E\" title=\"pouting_cat\" data-aliases=\"\" data-emoji=\"pouting_cat\" data-unicode-name=\"1F63E\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F64F\" title=\"pray\" data-aliases=\"\" data-emoji=\"pray\" data-unicode-name=\"1F64F\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F478\" title=\"princess\" data-aliases=\"\" data-emoji=\"princess\" data-unicode-name=\"1F478\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F44A\" title=\"punch\" data-aliases=\"\" data-emoji=\"punch\" data-unicode-name=\"1F44A\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F49C\" title=\"purple_heart\" data-aliases=\"\" data-emoji=\"purple_heart\" data-unicode-name=\"1F49C\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F45B\" title=\"purse\" data-aliases=\"\" data-emoji=\"purse\" data-unicode-name=\"1F45B\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F621\" title=\"rage\" data-aliases=\"\" data-emoji=\"rage\" data-unicode-name=\"1F621\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-270B\" title=\"raised_hand\" data-aliases=\"\" data-emoji=\"raised_hand\" data-unicode-name=\"270B\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F64C\" title=\"raised_hands\" data-aliases=\"\" data-emoji=\"raised_hands\" data-unicode-name=\"1F64C\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F64B\" title=\"raising_hand\" data-aliases=\"\" data-emoji=\"raising_hand\" data-unicode-name=\"1F64B\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-263A\" title=\"relaxed\" data-aliases=\"\" data-emoji=\"relaxed\" data-unicode-name=\"263A\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F60C\" title=\"relieved\" data-aliases=\"\" data-emoji=\"relieved\" data-unicode-name=\"1F60C\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F49E\" title=\"revolving_hearts\" data-aliases=\"\" data-emoji=\"revolving_hearts\" data-unicode-name=\"1F49E\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F380\" title=\"ribbon\" data-aliases=\"\" data-emoji=\"ribbon\" data-unicode-name=\"1F380\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F48D\" title=\"ring\" data-aliases=\"\" data-emoji=\"ring\" data-unicode-name=\"1F48D\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F3C3\" title=\"runner\" data-aliases=\"\" data-emoji=\"runner\" data-unicode-name=\"1F3C3\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F3BD\" title=\"running_shirt_with_sash\" data-aliases=\"\" data-emoji=\"running_shirt_with_sash\" data-unicode-name=\"1F3BD\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F461\" title=\"sandal\" data-aliases=\"\" data-emoji=\"sandal\" data-unicode-name=\"1F461\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F631\" title=\"scream\" data-aliases=\"\" data-emoji=\"scream\" data-unicode-name=\"1F631\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F640\" title=\"scream_cat\" data-aliases=\"\" data-emoji=\"scream_cat\" data-unicode-name=\"1F640\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F648\" title=\"see_no_evil\" data-aliases=\"\" data-emoji=\"see_no_evil\" data-unicode-name=\"1F648\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F455\" title=\"shirt\" data-aliases=\"\" data-emoji=\"shirt\" data-unicode-name=\"1F455\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F480\" title=\"skull\" data-aliases=\":skeleton:\" data-emoji=\"skull\" data-unicode-name=\"1F480\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F634\" title=\"sleeping\" data-aliases=\"\" data-emoji=\"sleeping\" data-unicode-name=\"1F634\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F62A\" title=\"sleepy\" data-aliases=\"\" data-emoji=\"sleepy\" data-unicode-name=\"1F62A\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F604\" title=\"smile\" data-aliases=\"\" data-emoji=\"smile\" data-unicode-name=\"1F604\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F638\" title=\"smile_cat\" data-aliases=\"\" data-emoji=\"smile_cat\" data-unicode-name=\"1F638\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F603\" title=\"smiley\" data-aliases=\"\" data-emoji=\"smiley\" data-unicode-name=\"1F603\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F63A\" title=\"smiley_cat\" data-aliases=\"\" data-emoji=\"smiley_cat\" data-unicode-name=\"1F63A\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F608\" title=\"smiling_imp\" data-aliases=\"\" data-emoji=\"smiling_imp\" data-unicode-name=\"1F608\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F60F\" title=\"smirk\" data-aliases=\"\" data-emoji=\"smirk\" data-unicode-name=\"1F60F\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F63C\" title=\"smirk_cat\" data-aliases=\"\" data-emoji=\"smirk_cat\" data-unicode-name=\"1F63C\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F62D\" title=\"sob\" data-aliases=\"\" data-emoji=\"sob\" data-unicode-name=\"1F62D\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-2728\" title=\"sparkles\" data-aliases=\"\" data-emoji=\"sparkles\" data-unicode-name=\"2728\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F496\" title=\"sparkling_heart\" data-aliases=\"\" data-emoji=\"sparkling_heart\" data-unicode-name=\"1F496\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F64A\" title=\"speak_no_evil\" data-aliases=\"\" data-emoji=\"speak_no_evil\" data-unicode-name=\"1F64A\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F4AC\" title=\"speech_balloon\" data-aliases=\"\" data-emoji=\"speech_balloon\" data-unicode-name=\"1F4AC\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F31F\" title=\"star2\" data-aliases=\"\" data-emoji=\"star2\" data-unicode-name=\"1F31F\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F61B\" title=\"stuck_out_tongue\" data-aliases=\"\" data-emoji=\"stuck_out_tongue\" data-unicode-name=\"1F61B\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F61D\" title=\"stuck_out_tongue_closed_eyes\" data-aliases=\"\" data-emoji=\"stuck_out_tongue_closed_eyes\" data-unicode-name=\"1F61D\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F61C\" title=\"stuck_out_tongue_winking_eye\" data-aliases=\"\" data-emoji=\"stuck_out_tongue_winking_eye\" data-unicode-name=\"1F61C\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F60E\" title=\"sunglasses\" data-aliases=\"\" data-emoji=\"sunglasses\" data-unicode-name=\"1F60E\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F613\" title=\"sweat\" data-aliases=\"\" data-emoji=\"sweat\" data-unicode-name=\"1F613\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F4A6\" title=\"sweat_drops\" data-aliases=\"\" data-emoji=\"sweat_drops\" data-unicode-name=\"1F4A6\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F605\" title=\"sweat_smile\" data-aliases=\"\" data-emoji=\"sweat_smile\" data-unicode-name=\"1F605\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F4AD\" title=\"thought_balloon\" data-aliases=\"\" data-emoji=\"thought_balloon\" data-unicode-name=\"1F4AD\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F44E\" title=\"thumbsdown\" data-aliases=\":-1:\" data-emoji=\"thumbsdown\" data-unicode-name=\"1F44E\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F44D\" title=\"thumbsup\" data-aliases=\":+1:\" data-emoji=\"thumbsup\" data-unicode-name=\"1F44D\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F62B\" title=\"tired_face\" data-aliases=\"\" data-emoji=\"tired_face\" data-unicode-name=\"1F62B\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F445\" title=\"tongue\" data-aliases=\"\" data-emoji=\"tongue\" data-unicode-name=\"1F445\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F3A9\" title=\"tophat\" data-aliases=\"\" data-emoji=\"tophat\" data-unicode-name=\"1F3A9\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F624\" title=\"triumph\" data-aliases=\"\" data-emoji=\"triumph\" data-unicode-name=\"1F624\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F495\" title=\"two_hearts\" data-aliases=\"\" data-emoji=\"two_hearts\" data-unicode-name=\"1F495\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F46C\" title=\"two_men_holding_hands\" data-aliases=\"\" data-emoji=\"two_men_holding_hands\" data-unicode-name=\"1F46C\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F46D\" title=\"two_women_holding_hands\" data-aliases=\"\" data-emoji=\"two_women_holding_hands\" data-unicode-name=\"1F46D\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F612\" title=\"unamused\" data-aliases=\"\" data-emoji=\"unamused\" data-unicode-name=\"1F612\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-270C\" title=\"v\" data-aliases=\"\" data-emoji=\"v\" data-unicode-name=\"270C\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F6B6\" title=\"walking\" data-aliases=\"\" data-emoji=\"walking\" data-unicode-name=\"1F6B6\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F44B\" title=\"wave\" data-aliases=\"\" data-emoji=\"wave\" data-unicode-name=\"1F44B\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F629\" title=\"weary\" data-aliases=\"\" data-emoji=\"weary\" data-unicode-name=\"1F629\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F609\" title=\"wink\" data-aliases=\"\" data-emoji=\"wink\" data-unicode-name=\"1F609\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F469\" title=\"woman\" data-aliases=\"\" data-emoji=\"woman\" data-unicode-name=\"1F469\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F45A\" title=\"womans_clothes\" data-aliases=\"\" data-emoji=\"womans_clothes\" data-unicode-name=\"1F45A\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F452\" title=\"womans_hat\" data-aliases=\"\" data-emoji=\"womans_hat\" data-unicode-name=\"1F452\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F61F\" title=\"worried\" data-aliases=\"\" data-emoji=\"worried\" data-unicode-name=\"1F61F\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F49B\" title=\"yellow_heart\" data-aliases=\"\" data-emoji=\"yellow_heart\" data-unicode-name=\"1F49B\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F60B\" title=\"yum\" data-aliases=\"\" data-emoji=\"yum\" data-unicode-name=\"1F60B\"></div>\n        </button>\n      </li>\n      <li class='pull-left text-center emoji-menu-list-item'>\n        <button class='emoji-menu-btn text-center js-emoji-btn' type='button'>\n        <div class=\"icon emoji-icon emoji-1F4A4\" title=\"zzz\" data-aliases=\"\" data-emoji=\"zzz\" data-unicode-name=\"1F4A4\"></div>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>";
-
 }).call(this);
diff --git a/spec/javascripts/gfm_auto_complete_spec.js.es6 b/spec/javascripts/gfm_auto_complete_spec.js.es6
new file mode 100644
index 00000000000..6b48d82cb23
--- /dev/null
+++ b/spec/javascripts/gfm_auto_complete_spec.js.es6
@@ -0,0 +1,65 @@
+//= require gfm_auto_complete
+//= require jquery
+//= require jquery.atwho
+
+const global = window.gl || (window.gl = {});
+const GfmAutoComplete = global.GfmAutoComplete;
+
+describe('GfmAutoComplete', function () {
+  describe('DefaultOptions.sorter', function () {
+    describe('assets loading', function () {
+      beforeEach(function () {
+        spyOn(GfmAutoComplete, 'isLoading').and.returnValue(true);
+
+        this.atwhoInstance = { setting: {} };
+        this.items = [];
+
+        this.sorterValue = GfmAutoComplete.DefaultOptions.sorter
+          .call(this.atwhoInstance, '', this.items);
+      });
+
+      it('should disable highlightFirst', function () {
+        expect(this.atwhoInstance.setting.highlightFirst).toBe(false);
+      });
+
+      it('should return the passed unfiltered items', function () {
+        expect(this.sorterValue).toEqual(this.items);
+      });
+    });
+
+    describe('assets finished loading', function () {
+      beforeEach(function () {
+        spyOn(GfmAutoComplete, 'isLoading').and.returnValue(false);
+        spyOn($.fn.atwho.default.callbacks, 'sorter');
+      });
+
+      it('should enable highlightFirst if alwaysHighlightFirst is set', function () {
+        const atwhoInstance = { setting: { alwaysHighlightFirst: true } };
+
+        GfmAutoComplete.DefaultOptions.sorter.call(atwhoInstance);
+
+        expect(atwhoInstance.setting.highlightFirst).toBe(true);
+      });
+
+      it('should enable highlightFirst if a query is present', function () {
+        const atwhoInstance = { setting: {} };
+
+        GfmAutoComplete.DefaultOptions.sorter.call(atwhoInstance, 'query');
+
+        expect(atwhoInstance.setting.highlightFirst).toBe(true);
+      });
+
+      it('should call the default atwho sorter', function () {
+        const atwhoInstance = { setting: {} };
+
+        const query = 'query';
+        const items = [];
+        const searchKey = 'searchKey';
+
+        GfmAutoComplete.DefaultOptions.sorter.call(atwhoInstance, query, items, searchKey);
+
+        expect($.fn.atwho.default.callbacks.sorter).toHaveBeenCalledWith(query, items, searchKey);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/gl_dropdown_spec.js.es6 b/spec/javascripts/gl_dropdown_spec.js.es6
index d11b1182d9a..06fa64b1b4e 100644
--- a/spec/javascripts/gl_dropdown_spec.js.es6
+++ b/spec/javascripts/gl_dropdown_spec.js.es6
@@ -1,4 +1,4 @@
-/* eslint-disable comma-dangle, prefer-const, no-param-reassign, no-plusplus, semi, no-unused-expressions, arrow-spacing, max-len */
+/* eslint-disable comma-dangle, no-param-reassign, no-unused-expressions, max-len */
 /* global Turbolinks */
 
 /*= require jquery */
@@ -22,7 +22,7 @@
 
   let remoteCallback;
 
-  let navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) {
+  const navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) {
     i = i || 0;
     if (!i) direction = direction.toUpperCase();
     $('body').trigger({
@@ -30,7 +30,7 @@
       which: ARROW_KEYS[direction],
       keyCode: ARROW_KEYS[direction]
     });
-    i++;
+    i += 1;
     if (i <= steps) {
       navigateWithKeys(direction, steps, cb, i);
     } else {
@@ -38,9 +38,9 @@
     }
   };
 
-  let remoteMock = function remoteMock(data, term, callback) {
+  const remoteMock = function remoteMock(data, term, callback) {
     remoteCallback = callback.bind({}, data);
-  }
+  };
 
   describe('Dropdown', function describeDropdown() {
     preloadFixtures('static/gl_dropdown.html.raw');
@@ -89,7 +89,7 @@
 
       it('should select a following item on DOWN keypress', () => {
         expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(0);
-        let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 1)) + 0);
+        const randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 1)) + 0);
         navigateWithKeys('down', randomIndex, () => {
           expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1);
           expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement)).toHaveClass('is-focused');
@@ -100,7 +100,7 @@
         expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(0);
         navigateWithKeys('down', (this.projectsData.length - 1), () => {
           expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1);
-          let randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 2)) + 0);
+          const randomIndex = (Math.floor(Math.random() * (this.projectsData.length - 2)) + 0);
           navigateWithKeys('up', randomIndex, () => {
             expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1);
             expect($(`${ITEM_SELECTOR}:eq(${((this.projectsData.length - 2) - randomIndex)}) a`, this.$dropdownMenuElement)).toHaveClass('is-focused');
@@ -109,15 +109,15 @@
       });
 
       it('should click the selected item on ENTER keypress', () => {
-        expect(this.dropdownContainerElement).toHaveClass('open')
-        let randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0
+        expect(this.dropdownContainerElement).toHaveClass('open');
+        const randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0;
         navigateWithKeys('down', randomIndex, () => {
           spyOn(Turbolinks, 'visit').and.stub();
           navigateWithKeys('enter', null, () => {
             expect(this.dropdownContainerElement).not.toHaveClass('open');
-            let link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement);
+            const link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement);
             expect(link).toHaveClass('is-active');
-            let linkedLocation = link.attr('href');
+            const linkedLocation = link.attr('href');
             if (linkedLocation && linkedLocation !== '#') expect(Turbolinks.visit).toHaveBeenCalledWith(linkedLocation);
           });
         });
@@ -140,18 +140,18 @@
         this.dropdownButtonElement.click();
       });
 
-      it('should not focus search input while remote task is not complete', ()=> {
+      it('should not focus search input while remote task is not complete', () => {
         expect($(document.activeElement)).not.toEqual($(SEARCH_INPUT_SELECTOR));
         remoteCallback();
         expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
       });
 
-      it('should focus search input after remote task is complete', ()=> {
+      it('should focus search input after remote task is complete', () => {
         remoteCallback();
         expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
       });
 
-      it('should focus on input when opening for the second time', ()=> {
+      it('should focus on input when opening for the second time', () => {
         remoteCallback();
         this.dropdownContainerElement.trigger({
           type: 'keyup',
@@ -164,16 +164,15 @@
     });
 
     describe('input focus with array data', () => {
-      it('should focus input when passing array data to drop down', ()=> {
+      it('should focus input when passing array data to drop down', () => {
         initDropDown.call(this, false, true);
         this.dropdownButtonElement.click();
         expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
       });
     });
 
-
     it('should still have input value on close and restore', () => {
-      let $searchInput = $(SEARCH_INPUT_SELECTOR);
+      const $searchInput = $(SEARCH_INPUT_SELECTOR);
       initDropDown.call(this, false, true);
       $searchInput
         .trigger('focus')
diff --git a/spec/javascripts/gl_field_errors_spec.js.es6 b/spec/javascripts/gl_field_errors_spec.js.es6
index e5d934540af..f68fd9e00d7 100644
--- a/spec/javascripts/gl_field_errors_spec.js.es6
+++ b/spec/javascripts/gl_field_errors_spec.js.es6
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, arrow-body-style, indent, padded-blocks */
+/* eslint-disable space-before-function-paren, arrow-body-style */
 
 //= require jquery
 //= require gl_field_errors
@@ -28,7 +28,7 @@
       expect(customErrorElem.length).toBe(1);
 
       const customErrors = this.fieldErrors.state.inputs.filter((input) => {
-       return input.inputElement.hasClass(customErrorFlag);
+        return input.inputElement.hasClass(customErrorFlag);
       });
       expect(customErrors.length).toBe(0);
     });
@@ -107,7 +107,5 @@
       expect(noTitleErrorElem.text()).toBe('This field is required.');
       expect(hasTitleErrorElem.text()).toBe('Please provide a valid email address.');
     });
-
   });
-
 })(window.gl || (window.gl = {}));
diff --git a/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js b/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js
index bc5cbeb6a40..d76fcc5206a 100644
--- a/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js
+++ b/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable quotes, indent, semi, object-curly-spacing, jasmine/no-suite-dupes, vars-on-top, no-var, padded-blocks, spaced-comment, max-len */
+/* eslint-disable quotes, jasmine/no-suite-dupes, vars-on-top, no-var, max-len */
 /* global d3 */
 /* global ContributorsGraph */
 /* global ContributorsMasterGraph */
@@ -8,126 +8,123 @@
 describe("ContributorsGraph", function () {
   describe("#set_x_domain", function () {
     it("set the x_domain", function () {
-     ContributorsGraph.set_x_domain(20)
-     expect(ContributorsGraph.prototype.x_domain).toEqual(20)
-    })
-  })
+      ContributorsGraph.set_x_domain(20);
+      expect(ContributorsGraph.prototype.x_domain).toEqual(20);
+    });
+  });
 
   describe("#set_y_domain", function () {
     it("sets the y_domain", function () {
-      ContributorsGraph.set_y_domain([{commits: 30}])
-      expect(ContributorsGraph.prototype.y_domain).toEqual([0, 30])
-    })
-  })
+      ContributorsGraph.set_y_domain([{ commits: 30 }]);
+      expect(ContributorsGraph.prototype.y_domain).toEqual([0, 30]);
+    });
+  });
 
   describe("#init_x_domain", function () {
     it("sets the initial x_domain", function () {
-      ContributorsGraph.init_x_domain([{date: "2013-01-31"}, {date: "2012-01-31"}])
-      expect(ContributorsGraph.prototype.x_domain).toEqual(["2012-01-31", "2013-01-31"])
-    })
-  })
+      ContributorsGraph.init_x_domain([{ date: "2013-01-31" }, { date: "2012-01-31" }]);
+      expect(ContributorsGraph.prototype.x_domain).toEqual(["2012-01-31", "2013-01-31"]);
+    });
+  });
 
   describe("#init_y_domain", function () {
     it("sets the initial y_domain", function () {
-      ContributorsGraph.init_y_domain([{commits: 30}])
-      expect(ContributorsGraph.prototype.y_domain).toEqual([0, 30])
-    })
-  })
+      ContributorsGraph.init_y_domain([{ commits: 30 }]);
+      expect(ContributorsGraph.prototype.y_domain).toEqual([0, 30]);
+    });
+  });
 
   describe("#init_domain", function () {
     it("calls init_x_domain and init_y_domain", function () {
-      spyOn(ContributorsGraph, "init_x_domain")
-      spyOn(ContributorsGraph, "init_y_domain")
-      ContributorsGraph.init_domain()
-      expect(ContributorsGraph.init_x_domain).toHaveBeenCalled()
-      expect(ContributorsGraph.init_y_domain).toHaveBeenCalled()
-    })
-  })
+      spyOn(ContributorsGraph, "init_x_domain");
+      spyOn(ContributorsGraph, "init_y_domain");
+      ContributorsGraph.init_domain();
+      expect(ContributorsGraph.init_x_domain).toHaveBeenCalled();
+      expect(ContributorsGraph.init_y_domain).toHaveBeenCalled();
+    });
+  });
 
   describe("#set_dates", function () {
     it("sets the dates", function () {
-      ContributorsGraph.set_dates("2013-12-01")
-      expect(ContributorsGraph.prototype.dates).toEqual("2013-12-01")
-    })
-  })
+      ContributorsGraph.set_dates("2013-12-01");
+      expect(ContributorsGraph.prototype.dates).toEqual("2013-12-01");
+    });
+  });
 
   describe("#set_x_domain", function () {
     it("sets the instance's x domain using the prototype's x_domain", function () {
-      ContributorsGraph.prototype.x_domain = 20
-      var instance = new ContributorsGraph()
-      instance.x = d3.time.scale().range([0, 100]).clamp(true)
-      spyOn(instance.x, 'domain')
-      instance.set_x_domain()
-      expect(instance.x.domain).toHaveBeenCalledWith(20)
-    })
-  })
+      ContributorsGraph.prototype.x_domain = 20;
+      var instance = new ContributorsGraph();
+      instance.x = d3.time.scale().range([0, 100]).clamp(true);
+      spyOn(instance.x, 'domain');
+      instance.set_x_domain();
+      expect(instance.x.domain).toHaveBeenCalledWith(20);
+    });
+  });
 
   describe("#set_y_domain", function () {
     it("sets the instance's y domain using the prototype's y_domain", function () {
-      ContributorsGraph.prototype.y_domain = 30
-      var instance = new ContributorsGraph()
-      instance.y = d3.scale.linear().range([100, 0]).nice()
-      spyOn(instance.y, 'domain')
-      instance.set_y_domain()
-      expect(instance.y.domain).toHaveBeenCalledWith(30)
-    })
-  })
+      ContributorsGraph.prototype.y_domain = 30;
+      var instance = new ContributorsGraph();
+      instance.y = d3.scale.linear().range([100, 0]).nice();
+      spyOn(instance.y, 'domain');
+      instance.set_y_domain();
+      expect(instance.y.domain).toHaveBeenCalledWith(30);
+    });
+  });
 
   describe("#set_domain", function () {
     it("calls set_x_domain and set_y_domain", function () {
-      var instance = new ContributorsGraph()
-      spyOn(instance, 'set_x_domain')
-      spyOn(instance, 'set_y_domain')
-      instance.set_domain()
-      expect(instance.set_x_domain).toHaveBeenCalled()
-      expect(instance.set_y_domain).toHaveBeenCalled()
-    })
-  })
+      var instance = new ContributorsGraph();
+      spyOn(instance, 'set_x_domain');
+      spyOn(instance, 'set_y_domain');
+      instance.set_domain();
+      expect(instance.set_x_domain).toHaveBeenCalled();
+      expect(instance.set_y_domain).toHaveBeenCalled();
+    });
+  });
 
   describe("#set_data", function () {
     it("sets the data", function () {
-      var instance = new ContributorsGraph()
-      instance.set_data("20")
-      expect(instance.data).toEqual("20")
-    })
-  })
-})
+      var instance = new ContributorsGraph();
+      instance.set_data("20");
+      expect(instance.data).toEqual("20");
+    });
+  });
+});
 
 describe("ContributorsMasterGraph", function () {
-
   // TODO: fix or remove
-  //describe("#process_dates", function () {
-    //it("gets and parses dates", function () {
-      //var graph = new ContributorsMasterGraph()
-      //var data = 'random data here'
-      //spyOn(graph, 'parse_dates')
-      //spyOn(graph, 'get_dates').andReturn("get")
-      //spyOn(ContributorsGraph,'set_dates').andCallThrough()
-      //graph.process_dates(data)
-      //expect(graph.parse_dates).toHaveBeenCalledWith(data)
-      //expect(graph.get_dates).toHaveBeenCalledWith(data)
-      //expect(ContributorsGraph.set_dates).toHaveBeenCalledWith("get")
-    //})
-  //})
+  // describe("#process_dates", function () {
+  //   it("gets and parses dates", function () {
+  //     var graph = new ContributorsMasterGraph();
+  //     var data = 'random data here';
+  //     spyOn(graph, 'parse_dates');
+  //     spyOn(graph, 'get_dates').andReturn("get");
+  //     spyOn(ContributorsGraph,'set_dates').andCallThrough();
+  //     graph.process_dates(data);
+  //     expect(graph.parse_dates).toHaveBeenCalledWith(data);
+  //     expect(graph.get_dates).toHaveBeenCalledWith(data);
+  //     expect(ContributorsGraph.set_dates).toHaveBeenCalledWith("get");
+  //   });
+  // });
 
   describe("#get_dates", function () {
     it("plucks the date field from data collection", function () {
-      var graph = new ContributorsMasterGraph()
-      var data = [{date: "2013-01-01"}, {date: "2012-12-15"}]
-      expect(graph.get_dates(data)).toEqual(["2013-01-01", "2012-12-15"])
-    })
-  })
+      var graph = new ContributorsMasterGraph();
+      var data = [{ date: "2013-01-01" }, { date: "2012-12-15" }];
+      expect(graph.get_dates(data)).toEqual(["2013-01-01", "2012-12-15"]);
+    });
+  });
 
   describe("#parse_dates", function () {
     it("parses the dates", function () {
-      var graph = new ContributorsMasterGraph()
-      var parseDate = d3.time.format("%Y-%m-%d").parse
-      var data = [{date: "2013-01-01"}, {date: "2012-12-15"}]
-      var correct = [{date: parseDate(data[0].date)}, {date: parseDate(data[1].date)}]
-      graph.parse_dates(data)
-      expect(data).toEqual(correct)
-    })
-  })
-
-
-})
+      var graph = new ContributorsMasterGraph();
+      var parseDate = d3.time.format("%Y-%m-%d").parse;
+      var data = [{ date: "2013-01-01" }, { date: "2012-12-15" }];
+      var correct = [{ date: parseDate(data[0].date) }, { date: parseDate(data[1].date) }];
+      graph.parse_dates(data);
+      expect(data).toEqual(correct);
+    });
+  });
+});
diff --git a/spec/javascripts/graphs/stat_graph_contributors_util_spec.js b/spec/javascripts/graphs/stat_graph_contributors_util_spec.js
index 751f3d175e2..63f28dfb8ad 100644
--- a/spec/javascripts/graphs/stat_graph_contributors_util_spec.js
+++ b/spec/javascripts/graphs/stat_graph_contributors_util_spec.js
@@ -1,215 +1,218 @@
-/* eslint-disable quotes, padded-blocks, no-var, camelcase, object-curly-spacing, semi, indent, object-property-newline, comma-dangle, comma-spacing, spaced-comment, max-len, key-spacing, vars-on-top, quote-props, no-multi-spaces */
+/* eslint-disable quotes, no-var, camelcase, object-property-newline, comma-dangle, max-len, vars-on-top, quote-props */
 /* global ContributorsStatGraphUtil */
 
 //= require graphs/stat_graph_contributors_util
 
 describe("ContributorsStatGraphUtil", function () {
-
   describe("#parse_log", function () {
     it("returns a correctly parsed log", function () {
       var fake_log = [
-            {author_email: "karlo@email.com", author_name: "Karlo Soriano", date: "2013-05-09", additions: 471},
-            {author_email: "dzaporozhets@email.com", author_name: "Dmitriy Zaporozhets", date: "2013-05-08", additions: 6, deletions: 1},
-            {author_email: "dzaporozhets@email.com", author_name: "Dmitriy Zaporozhets", date: "2013-05-08", additions: 19, deletions: 3},
-            {author_email: "dzaporozhets@email.com", author_name: "Dmitriy Zaporozhets", date: "2013-05-08", additions: 29, deletions: 3}]
+        { author_email: "karlo@email.com", author_name: "Karlo Soriano", date: "2013-05-09", additions: 471 },
+        { author_email: "dzaporozhets@email.com", author_name: "Dmitriy Zaporozhets", date: "2013-05-08", additions: 6, deletions: 1 },
+        { author_email: "dzaporozhets@email.com", author_name: "Dmitriy Zaporozhets", date: "2013-05-08", additions: 19, deletions: 3 },
+        { author_email: "dzaporozhets@email.com", author_name: "Dmitriy Zaporozhets", date: "2013-05-08", additions: 29, deletions: 3 }
+      ];
 
       var correct_parsed_log = {
         total: [
-        {date: "2013-05-09", additions: 471, deletions: 0, commits: 1},
-        {date: "2013-05-08", additions: 54, deletions: 7, commits: 3}],
-        by_author:
-        [
-        {
-          author_name: "Karlo Soriano", author_email: "karlo@email.com",
-          "2013-05-09": {date: "2013-05-09", additions: 471, deletions: 0, commits: 1}
-        },
-        {
-          author_name: "Dmitriy Zaporozhets",author_email: "dzaporozhets@email.com",
-          "2013-05-08": {date: "2013-05-08", additions: 54, deletions: 7, commits: 3}
-        }
+          { date: "2013-05-09", additions: 471, deletions: 0, commits: 1 },
+          { date: "2013-05-08", additions: 54, deletions: 7, commits: 3 }
+        ],
+        by_author: [
+          {
+            author_name: "Karlo Soriano", author_email: "karlo@email.com",
+            "2013-05-09": { date: "2013-05-09", additions: 471, deletions: 0, commits: 1 }
+          },
+          {
+            author_name: "Dmitriy Zaporozhets", author_email: "dzaporozhets@email.com",
+            "2013-05-08": { date: "2013-05-08", additions: 54, deletions: 7, commits: 3 }
+          }
         ]
-      }
-      expect(ContributorsStatGraphUtil.parse_log(fake_log)).toEqual(correct_parsed_log)
-    })
-  })
+      };
+      expect(ContributorsStatGraphUtil.parse_log(fake_log)).toEqual(correct_parsed_log);
+    });
+  });
 
   describe("#store_data", function () {
-
-    var fake_entry = {author: "Karlo Soriano", date: "2013-05-09", additions: 471}
-    var fake_total = {}
-    var fake_by_author = {}
+    var fake_entry = { author: "Karlo Soriano", date: "2013-05-09", additions: 471 };
+    var fake_total = {};
+    var fake_by_author = {};
 
     it("calls #store_commits", function () {
-      spyOn(ContributorsStatGraphUtil, 'store_commits')
-      ContributorsStatGraphUtil.store_data(fake_entry, fake_total, fake_by_author)
-      expect(ContributorsStatGraphUtil.store_commits).toHaveBeenCalled()
-    })
+      spyOn(ContributorsStatGraphUtil, 'store_commits');
+      ContributorsStatGraphUtil.store_data(fake_entry, fake_total, fake_by_author);
+      expect(ContributorsStatGraphUtil.store_commits).toHaveBeenCalled();
+    });
 
     it("calls #store_additions", function () {
-      spyOn(ContributorsStatGraphUtil, 'store_additions')
-      ContributorsStatGraphUtil.store_data(fake_entry, fake_total, fake_by_author)
-      expect(ContributorsStatGraphUtil.store_additions).toHaveBeenCalled()
-    })
+      spyOn(ContributorsStatGraphUtil, 'store_additions');
+      ContributorsStatGraphUtil.store_data(fake_entry, fake_total, fake_by_author);
+      expect(ContributorsStatGraphUtil.store_additions).toHaveBeenCalled();
+    });
 
     it("calls #store_deletions", function () {
-      spyOn(ContributorsStatGraphUtil, 'store_deletions')
-      ContributorsStatGraphUtil.store_data(fake_entry, fake_total, fake_by_author)
-      expect(ContributorsStatGraphUtil.store_deletions).toHaveBeenCalled()
-    })
-
-  })
+      spyOn(ContributorsStatGraphUtil, 'store_deletions');
+      ContributorsStatGraphUtil.store_data(fake_entry, fake_total, fake_by_author);
+      expect(ContributorsStatGraphUtil.store_deletions).toHaveBeenCalled();
+    });
+  });
 
   // TODO: fix or remove
-  //describe("#store_commits", function () {
-    //var fake_total = "fake_total"
-    //var fake_by_author = "fake_by_author"
-
-    //it("calls #add twice with arguments fake_total and fake_by_author respectively", function () {
-      //spyOn(ContributorsStatGraphUtil, 'add')
-      //ContributorsStatGraphUtil.store_commits(fake_total, fake_by_author)
-      //expect(ContributorsStatGraphUtil.add.argsForCall).toEqual([["fake_total", "commits", 1], ["fake_by_author", "commits", 1]])
-    //})
-  //})
+  // describe("#store_commits", function () {
+  //   var fake_total = "fake_total";
+  //   var fake_by_author = "fake_by_author";
+  //
+  //   it("calls #add twice with arguments fake_total and fake_by_author respectively", function () {
+  //     spyOn(ContributorsStatGraphUtil, 'add');
+  //     ContributorsStatGraphUtil.store_commits(fake_total, fake_by_author);
+  //     expect(ContributorsStatGraphUtil.add.argsForCall).toEqual([["fake_total", "commits", 1], ["fake_by_author", "commits", 1]]);
+  //   });
+  // });
 
   describe("#add", function () {
     it("adds 1 to current test_field in collection", function () {
-      var fake_collection = {test_field: 10}
-      ContributorsStatGraphUtil.add(fake_collection, "test_field", 1)
-      expect(fake_collection.test_field).toEqual(11)
-    })
+      var fake_collection = { test_field: 10 };
+      ContributorsStatGraphUtil.add(fake_collection, "test_field", 1);
+      expect(fake_collection.test_field).toEqual(11);
+    });
 
     it("inits and adds 1 if test_field in collection is not defined", function () {
-      var fake_collection = {}
-      ContributorsStatGraphUtil.add(fake_collection, "test_field", 1)
-      expect(fake_collection.test_field).toEqual(1)
-    })
-  })
+      var fake_collection = {};
+      ContributorsStatGraphUtil.add(fake_collection, "test_field", 1);
+      expect(fake_collection.test_field).toEqual(1);
+    });
+  });
 
   // TODO: fix or remove
-  //describe("#store_additions", function () {
-    //var fake_entry = {additions: 10}
-    //var fake_total= "fake_total"
-    //var fake_by_author = "fake_by_author"
-    //it("calls #add twice with arguments fake_total and fake_by_author respectively", function () {
-      //spyOn(ContributorsStatGraphUtil, 'add')
-      //ContributorsStatGraphUtil.store_additions(fake_entry, fake_total, fake_by_author)
-      //expect(ContributorsStatGraphUtil.add.argsForCall).toEqual([["fake_total", "additions", 10], ["fake_by_author", "additions", 10]])
-    //})
-  //})
+  // describe("#store_additions", function () {
+  //   var fake_entry = {additions: 10};
+  //   var fake_total= "fake_total";
+  //   var fake_by_author = "fake_by_author";
+  //   it("calls #add twice with arguments fake_total and fake_by_author respectively", function () {
+  //     spyOn(ContributorsStatGraphUtil, 'add');
+  //     ContributorsStatGraphUtil.store_additions(fake_entry, fake_total, fake_by_author);
+  //     expect(ContributorsStatGraphUtil.add.argsForCall).toEqual([["fake_total", "additions", 10], ["fake_by_author", "additions", 10]]);
+  //   });
+  // });
 
   // TODO: fix or remove
-  //describe("#store_deletions", function () {
-    //var fake_entry = {deletions: 10}
-    //var fake_total= "fake_total"
-    //var fake_by_author = "fake_by_author"
-    //it("calls #add twice with arguments fake_total and fake_by_author respectively", function () {
-      //spyOn(ContributorsStatGraphUtil, 'add')
-      //ContributorsStatGraphUtil.store_deletions(fake_entry, fake_total, fake_by_author)
-      //expect(ContributorsStatGraphUtil.add.argsForCall).toEqual([["fake_total", "deletions", 10], ["fake_by_author", "deletions", 10]])
-    //})
-  //})
+  // describe("#store_deletions", function () {
+  //   var fake_entry = {deletions: 10};
+  //   var fake_total= "fake_total";
+  //   var fake_by_author = "fake_by_author";
+  //   it("calls #add twice with arguments fake_total and fake_by_author respectively", function () {
+  //     spyOn(ContributorsStatGraphUtil, 'add');
+  //     ContributorsStatGraphUtil.store_deletions(fake_entry, fake_total, fake_by_author);
+  //     expect(ContributorsStatGraphUtil.add.argsForCall).toEqual([["fake_total", "deletions", 10], ["fake_by_author", "deletions", 10]]);
+  //   });
+  // });
 
   describe("#add_date", function () {
     it("adds a date field to the collection", function () {
-      var fake_date = "2013-10-02"
-      var fake_collection = {}
-      ContributorsStatGraphUtil.add_date(fake_date, fake_collection)
-      expect(fake_collection[fake_date].date).toEqual("2013-10-02")
-    })
-  })
+      var fake_date = "2013-10-02";
+      var fake_collection = {};
+      ContributorsStatGraphUtil.add_date(fake_date, fake_collection);
+      expect(fake_collection[fake_date].date).toEqual("2013-10-02");
+    });
+  });
 
   describe("#add_author", function () {
     it("adds an author field to the collection", function () {
-      var fake_author = { author_name: "Author", author_email: 'fake@email.com' }
-      var fake_author_collection = {}
-      var fake_email_collection = {}
-      ContributorsStatGraphUtil.add_author(fake_author, fake_author_collection, fake_email_collection)
-      expect(fake_author_collection[fake_author.author_name].author_name).toEqual("Author")
-      expect(fake_email_collection[fake_author.author_email].author_name).toEqual("Author")
-    })
-  })
+      var fake_author = { author_name: "Author", author_email: 'fake@email.com' };
+      var fake_author_collection = {};
+      var fake_email_collection = {};
+      ContributorsStatGraphUtil.add_author(fake_author, fake_author_collection, fake_email_collection);
+      expect(fake_author_collection[fake_author.author_name].author_name).toEqual("Author");
+      expect(fake_email_collection[fake_author.author_email].author_name).toEqual("Author");
+    });
+  });
 
   describe("#get_total_data", function () {
     it("returns the collection sorted via specified field", function () {
       var fake_parsed_log = {
-      total: [{date: "2013-05-09", additions: 471, deletions: 0, commits: 1},
-      {date: "2013-05-08", additions: 54, deletions: 7, commits: 3}],
-      by_author:[
-      {
-        author: "Karlo Soriano",
-        "2013-05-09": {date: "2013-05-09", additions: 471, deletions: 0, commits: 1}
-      },
-      {
-        author: "Dmitriy Zaporozhets",
-        "2013-05-08": {date: "2013-05-08", additions: 54, deletions: 7, commits: 3}
-      }
-      ]};
-      var correct_total_data = [{date: "2013-05-08", commits: 3},
-      {date: "2013-05-09", commits: 1}];
-      expect(ContributorsStatGraphUtil.get_total_data(fake_parsed_log, "commits")).toEqual(correct_total_data)
-    })
-  })
+        total: [
+          { date: "2013-05-09", additions: 471, deletions: 0, commits: 1 },
+          { date: "2013-05-08", additions: 54, deletions: 7, commits: 3 }
+        ],
+        by_author: [
+          {
+            author: "Karlo Soriano",
+            "2013-05-09": { date: "2013-05-09", additions: 471, deletions: 0, commits: 1 }
+          },
+          {
+            author: "Dmitriy Zaporozhets",
+            "2013-05-08": { date: "2013-05-08", additions: 54, deletions: 7, commits: 3 }
+          }
+        ]
+      };
+      var correct_total_data = [
+        { date: "2013-05-08", commits: 3 },
+        { date: "2013-05-09", commits: 1 }
+      ];
+      expect(ContributorsStatGraphUtil.get_total_data(fake_parsed_log, "commits")).toEqual(correct_total_data);
+    });
+  });
 
   describe("#pick_field", function () {
     it("returns the collection with only the specified field and date", function () {
-      var fake_parsed_log_total = [{date: "2013-05-09", additions: 471, deletions: 0, commits: 1},
-      {date: "2013-05-08", additions: 54, deletions: 7, commits: 3}];
-      ContributorsStatGraphUtil.pick_field(fake_parsed_log_total, "commits")
-      var correct_pick_field_data = [{date: "2013-05-09", commits: 1},{date: "2013-05-08", commits: 3}];
-      expect(ContributorsStatGraphUtil.pick_field(fake_parsed_log_total, "commits")).toEqual(correct_pick_field_data)
-    })
-  })
+      var fake_parsed_log_total = [
+        { date: "2013-05-09", additions: 471, deletions: 0, commits: 1 },
+        { date: "2013-05-08", additions: 54, deletions: 7, commits: 3 }
+      ];
+      ContributorsStatGraphUtil.pick_field(fake_parsed_log_total, "commits");
+      var correct_pick_field_data = [{ date: "2013-05-09", commits: 1 }, { date: "2013-05-08", commits: 3 }];
+      expect(ContributorsStatGraphUtil.pick_field(fake_parsed_log_total, "commits")).toEqual(correct_pick_field_data);
+    });
+  });
 
   describe("#get_author_data", function () {
     it("returns the log by author sorted by specified field", function () {
       var fake_parsed_log = {
         total: [
-          {date: "2013-05-09", additions: 471, deletions: 0, commits: 1},
-          {date: "2013-05-08", additions: 54, deletions: 7, commits: 3}
+          { date: "2013-05-09", additions: 471, deletions: 0, commits: 1 },
+          { date: "2013-05-08", additions: 54, deletions: 7, commits: 3 }
         ],
         by_author: [
           {
             author_name: "Karlo Soriano", author_email: "karlo@email.com",
-            "2013-05-09": {date: "2013-05-09", additions: 471, deletions: 0, commits: 1}
+            "2013-05-09": { date: "2013-05-09", additions: 471, deletions: 0, commits: 1 }
           },
           {
             author_name: "Dmitriy Zaporozhets", author_email: "dzaporozhets@email.com",
-            "2013-05-08": {date: "2013-05-08", additions: 54, deletions: 7, commits: 3}
+            "2013-05-08": { date: "2013-05-08", additions: 54, deletions: 7, commits: 3 }
           }
         ]
-      }
+      };
       var correct_author_data = [
-        {author_name:"Dmitriy Zaporozhets",author_email:"dzaporozhets@email.com",dates:{"2013-05-08":3},deletions:7,additions:54,"commits":3},
-        {author_name:"Karlo Soriano",author_email:"karlo@email.com",dates:{"2013-05-09":1},deletions:0,additions:471,commits:1}
-      ]
-      expect(ContributorsStatGraphUtil.get_author_data(fake_parsed_log, "commits")).toEqual(correct_author_data)
-    })
-  })
+        { author_name: "Dmitriy Zaporozhets", author_email: "dzaporozhets@email.com", dates: { "2013-05-08": 3 }, deletions: 7, additions: 54, "commits": 3 },
+        { author_name: "Karlo Soriano", author_email: "karlo@email.com", dates: { "2013-05-09": 1 }, deletions: 0, additions: 471, commits: 1 }
+      ];
+      expect(ContributorsStatGraphUtil.get_author_data(fake_parsed_log, "commits")).toEqual(correct_author_data);
+    });
+  });
 
   describe("#parse_log_entry", function () {
     it("adds the corresponding info from the log entry to the author", function () {
-      var fake_log_entry =    { author_name: "Karlo Soriano", author_email: "karlo@email.com",
-        "2013-05-09": {date: "2013-05-09", additions: 471, deletions: 0, commits: 1}
-      }
-      var correct_parsed_log = {author_name:"Karlo Soriano",author_email:"karlo@email.com",dates:{"2013-05-09":1},deletions:0,additions:471,commits:1}
-      expect(ContributorsStatGraphUtil.parse_log_entry(fake_log_entry, 'commits', null)).toEqual(correct_parsed_log)
-    })
-  })
+      var fake_log_entry = { author_name: "Karlo Soriano", author_email: "karlo@email.com",
+        "2013-05-09": { date: "2013-05-09", additions: 471, deletions: 0, commits: 1 }
+      };
+      var correct_parsed_log = { author_name: "Karlo Soriano", author_email: "karlo@email.com", dates: { "2013-05-09": 1 }, deletions: 0, additions: 471, commits: 1 };
+      expect(ContributorsStatGraphUtil.parse_log_entry(fake_log_entry, 'commits', null)).toEqual(correct_parsed_log);
+    });
+  });
 
   describe("#in_range", function () {
-    var date = "2013-05-09"
+    var date = "2013-05-09";
     it("returns true if date_range is null", function () {
-      expect(ContributorsStatGraphUtil.in_range(date, null)).toEqual(true)
-    })
+      expect(ContributorsStatGraphUtil.in_range(date, null)).toEqual(true);
+    });
     it("returns true if date is in range", function () {
-      var date_range = [new Date("2013-01-01"), new Date("2013-12-12")]
-      expect(ContributorsStatGraphUtil.in_range(date, date_range)).toEqual(true)
-    })
+      var date_range = [new Date("2013-01-01"), new Date("2013-12-12")];
+      expect(ContributorsStatGraphUtil.in_range(date, date_range)).toEqual(true);
+    });
     it("returns false if date is not in range", function () {
-      var date_range = [new Date("1999-12-01"), new Date("2000-12-01")]
-      expect(ContributorsStatGraphUtil.in_range(date, date_range)).toEqual(false)
-    })
-  })
-
-
-})
+      var date_range = [new Date("1999-12-01"), new Date("2000-12-01")];
+      expect(ContributorsStatGraphUtil.in_range(date, date_range)).toEqual(false);
+    });
+  });
+});
diff --git a/spec/javascripts/graphs/stat_graph_spec.js b/spec/javascripts/graphs/stat_graph_spec.js
index 0da124632ae..71b589e6b83 100644
--- a/spec/javascripts/graphs/stat_graph_spec.js
+++ b/spec/javascripts/graphs/stat_graph_spec.js
@@ -1,10 +1,9 @@
-/* eslint-disable quotes, padded-blocks, semi */
+/* eslint-disable quotes */
 /* global StatGraph */
 
 //= require graphs/stat_graph
 
 describe("StatGraph", function () {
-
   describe("#get_log", function () {
     it("returns log", function () {
       StatGraph.log = "test";
@@ -16,7 +15,6 @@ describe("StatGraph", function () {
     it("sets the log", function () {
       StatGraph.set_log("test");
       expect(StatGraph.log).toBe("test");
-    })
-  })
-
+    });
+  });
 });
diff --git a/spec/javascripts/header_spec.js b/spec/javascripts/header_spec.js
index b5262afa1cf..b846c5ab00b 100644
--- a/spec/javascripts/header_spec.js
+++ b/spec/javascripts/header_spec.js
@@ -1,10 +1,9 @@
-/* eslint-disable space-before-function-paren, padded-blocks, no-var */
+/* eslint-disable space-before-function-paren, no-var */
 /*= require header */
 /*= require lib/utils/text_utility */
 /*= require jquery */
 
 (function() {
-
   describe('Header', function() {
     var todosPendingCount = '.todos-pending-count';
     var fixtureTemplate = 'static/header.html.raw';
@@ -51,5 +50,4 @@
       });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/issuable_time_tracker_spec.js.es6 b/spec/javascripts/issuable_time_tracker_spec.js.es6
new file mode 100644
index 00000000000..a1e979e8d09
--- /dev/null
+++ b/spec/javascripts/issuable_time_tracker_spec.js.es6
@@ -0,0 +1,201 @@
+/* eslint-disable */
+//= require jquery
+//= require vue
+//= require issuable/time_tracking/components/time_tracker
+
+function initTimeTrackingComponent(opts) {
+  fixture.set(`
+    <div>
+      <div id="mock-container"></div>
+    </div>
+  `);
+
+  this.initialData = {
+    time_estimate: opts.timeEstimate,
+    time_spent: opts.timeSpent,
+    human_time_estimate: opts.timeEstimateHumanReadable,
+    human_time_spent: opts.timeSpentHumanReadable,
+    docsUrl: '/help/workflow/time_tracking.md',
+  };
+
+  const TimeTrackingComponent = Vue.component('issuable-time-tracker');
+  this.timeTracker = new TimeTrackingComponent({
+    el: '#mock-container',
+    propsData: this.initialData,
+  });
+}
+
+((gl) => {
+  describe('Issuable Time Tracker', function() {
+    describe('Initialization', function() {
+      beforeEach(function() {
+        initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' });
+      });
+
+      it('should return something defined', function() {
+        expect(this.timeTracker).toBeDefined();
+      });
+
+      it ('should correctly set timeEstimate', function(done) {
+        Vue.nextTick(() => {
+          expect(this.timeTracker.timeEstimate).toBe(this.initialData.time_estimate);
+          done();
+        });
+      });
+      it ('should correctly set time_spent', function(done) {
+        Vue.nextTick(() => {
+          expect(this.timeTracker.timeSpent).toBe(this.initialData.time_spent);
+          done();
+        });
+      });
+    });
+
+    describe('Content Display', function() {
+      describe('Panes', function() {
+        describe('Comparison pane', function() {
+          beforeEach(function() {
+            initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '', timeSpentHumanReadable: '' });
+          });
+
+          it('should show the "Comparison" pane when timeEstimate and time_spent are truthy', function(done) {
+            Vue.nextTick(() => {
+              const $comparisonPane = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane');
+              expect(this.timeTracker.showComparisonState).toBe(true);
+              done();
+            });
+          });
+
+          describe('Remaining meter', function() {
+            it('should display the remaining meter with the correct width', function(done) {
+              Vue.nextTick(() => {
+                const meterWidth = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane .meter-fill').style.width;
+                const correctWidth = '5%';
+
+                expect(meterWidth).toBe(correctWidth);
+                done();
+              })
+            });
+
+            it('should display the remaining meter with the correct background color when within estimate', function(done) {
+              Vue.nextTick(() => {
+                const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .within_estimate .meter-fill');
+                expect(styledMeter.length).toBe(1);
+                done()
+              });
+            });
+
+            it('should display the remaining meter with the correct background color when over estimate', function(done) {
+              this.timeTracker.time_estimate = 100000;
+              this.timeTracker.time_spent = 20000000;
+              Vue.nextTick(() => {
+                const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .over_estimate .meter-fill');
+                expect(styledMeter.length).toBe(1);
+                done();
+              });
+            });
+          });
+        });
+
+        describe("Estimate only pane", function() {
+          beforeEach(function() {
+            initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 0, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '' });
+          });
+
+          it('should display the human readable version of time estimated', function(done) {
+            Vue.nextTick(() => {
+              const estimateText = this.timeTracker.$el.querySelector('.time-tracking-estimate-only-pane').innerText;
+              const correctText = 'Estimated: 2h 46m';
+
+              expect(estimateText).toBe(correctText);
+              done();
+            });
+          });
+        });
+
+        describe('Spent only pane', function() {
+          beforeEach(function() {
+            initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' });
+          });
+
+          it('should display the human readable version of time spent', function(done) {
+            Vue.nextTick(() => {
+              const spentText = this.timeTracker.$el.querySelector('.time-tracking-spend-only-pane').innerText;
+              const correctText = 'Spent: 1h 23m';
+
+              expect(spentText).toBe(correctText);
+              done();
+            });
+          });
+        });
+
+        describe('No time tracking pane', function() {
+          beforeEach(function() {
+            initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0, timeEstimateHumanReadable: 0, timeSpentHumanReadable: 0 });
+          });
+
+          it('should only show the "No time tracking" pane when both timeEstimate and time_spent are falsey', function(done) {
+            Vue.nextTick(() => {
+              const $noTrackingPane = this.timeTracker.$el.querySelector('.time-tracking-no-tracking-pane');
+              const noTrackingText =$noTrackingPane.innerText;
+              const correctText = 'No estimate or time spent';
+
+              expect(this.timeTracker.showNoTimeTrackingState).toBe(true);
+              expect($noTrackingPane).toBeVisible();
+              expect(noTrackingText).toBe(correctText);
+              done();
+            });
+          });
+        });
+
+        describe("Help pane", function() {
+          beforeEach(function() {
+            initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0 });
+          });
+
+          it('should not show the "Help" pane by default', function(done) {
+            Vue.nextTick(() => {
+              const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
+
+              expect(this.timeTracker.showHelpState).toBe(false);
+              expect($helpPane).toBeNull();
+              done();
+            });
+          });
+
+          it('should show the "Help" pane when help button is clicked', function(done) {
+            Vue.nextTick(() => {
+              $(this.timeTracker.$el).find('.help-button').click();
+
+              setTimeout(() => {
+                const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
+                expect(this.timeTracker.showHelpState).toBe(true);
+                expect($helpPane).toBeVisible();
+                done();
+              }, 10);
+            });
+          });
+
+          it('should not show the "Help" pane when help button is clicked and then closed', function(done) {
+            Vue.nextTick(() => {
+              $(this.timeTracker.$el).find('.help-button').click();
+
+              setTimeout(() => {
+
+                $(this.timeTracker.$el).find('.close-help-button').click();
+
+                setTimeout(() => {
+                  const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
+
+                  expect(this.timeTracker.showHelpState).toBe(false);
+                  expect($helpPane).toBeNull();
+
+                  done();
+                }, 1000);
+              }, 1000);
+            });
+          });
+        });
+      });
+    });
+  });
+})(window.gl || (window.gl = {}));
diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js
index eb07421826c..673a4b3c07a 100644
--- a/spec/javascripts/issue_spec.js
+++ b/spec/javascripts/issue_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, no-use-before-define, indent, no-trailing-spaces, comma-dangle, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, no-use-before-define, comma-dangle, max-len */
 /* global Issue */
 
 /*= require lib/utils/text_utility */
@@ -42,21 +42,21 @@
   }
 
   function findElements() {
-      $boxClosed = $('div.status-box-closed');
-      expect($boxClosed).toExist();
-      expect($boxClosed).toHaveText('Closed');
+    $boxClosed = $('div.status-box-closed');
+    expect($boxClosed).toExist();
+    expect($boxClosed).toHaveText('Closed');
 
-      $boxOpen = $('div.status-box-open');
-      expect($boxOpen).toExist();
-      expect($boxOpen).toHaveText('Open');
+    $boxOpen = $('div.status-box-open');
+    expect($boxOpen).toExist();
+    expect($boxOpen).toHaveText('Open');
 
-      $btnClose = $('.btn-close.btn-grouped');
-      expect($btnClose).toExist();
-      expect($btnClose).toHaveText('Close issue');
+    $btnClose = $('.btn-close.btn-grouped');
+    expect($btnClose).toExist();
+    expect($btnClose).toHaveText('Close issue');
 
-      $btnReopen = $('.btn-reopen.btn-grouped');
-      expect($btnReopen).toExist();
-      expect($btnReopen).toHaveText('Reopen issue');
+    $btnReopen = $('.btn-reopen.btn-grouped');
+    expect($btnReopen).toExist();
+    expect($btnReopen).toHaveText('Reopen issue');
   }
 
   describe('Issue', function() {
@@ -161,5 +161,4 @@
       expect($btnReopen).toHaveProp('disabled', false);
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/labels_issue_sidebar_spec.js.es6 b/spec/javascripts/labels_issue_sidebar_spec.js.es6
index e3146559a4a..0d19b4a25b9 100644
--- a/spec/javascripts/labels_issue_sidebar_spec.js.es6
+++ b/spec/javascripts/labels_issue_sidebar_spec.js.es6
@@ -1,4 +1,4 @@
-/* eslint-disable no-new, no-plusplus, object-curly-spacing, prefer-const, semi */
+/* eslint-disable no-new */
 /* global IssuableContext */
 /* global LabelsSelect */
 
@@ -26,18 +26,18 @@
 
       spyOn(jQuery, 'ajax').and.callFake((req) => {
         const d = $.Deferred();
-        let LABELS_DATA = []
+        let LABELS_DATA = [];
 
         if (req.url === '/root/test/labels.json') {
-          for (let i = 0; i < 10; i++) {
-            LABELS_DATA.push({id: i, title: `test ${i}`, color: '#5CB85C'});
+          for (let i = 0; i < 10; i += 1) {
+            LABELS_DATA.push({ id: i, title: `test ${i}`, color: '#5CB85C' });
           }
         } else if (req.url === '/root/test/issues/2.json') {
-          let tmp = []
-          for (let i = 0; i < saveLabelCount; i++) {
-            tmp.push({id: i, title: `test ${i}`, color: '#5CB85C'});
+          const tmp = [];
+          for (let i = 0; i < saveLabelCount; i += 1) {
+            tmp.push({ id: i, title: `test ${i}`, color: '#5CB85C' });
           }
-          LABELS_DATA = {labels: tmp};
+          LABELS_DATA = { labels: tmp };
         }
 
         d.resolve(LABELS_DATA);
diff --git a/spec/javascripts/line_highlighter_spec.js b/spec/javascripts/line_highlighter_spec.js
index 31f516b41bf..6605986c33a 100644
--- a/spec/javascripts/line_highlighter_spec.js
+++ b/spec/javascripts/line_highlighter_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-var, no-param-reassign, quotes, prefer-template, no-else-return, new-cap, dot-notation, no-return-assign, comma-dangle, no-new, one-var, one-var-declaration-per-line, no-plusplus, jasmine/no-spec-dupes, no-underscore-dangle, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, no-var, no-param-reassign, quotes, prefer-template, no-else-return, new-cap, dot-notation, no-return-assign, comma-dangle, no-new, one-var, one-var-declaration-per-line, jasmine/no-spec-dupes, no-underscore-dangle, max-len */
 /* global LineHighlighter */
 
 /*= require line_highlighter */
@@ -33,11 +33,11 @@
         return expect($('#LC13')).toHaveClass(this.css);
       });
       it('highlights a range of lines given in the URL hash', function() {
-        var i, line, results;
+        var line, results;
         new LineHighlighter('#L5-25');
         expect($("." + this.css).length).toBe(21);
         results = [];
-        for (line = i = 5; i <= 25; line = ++i) {
+        for (line = 5; line <= 25; line += 1) {
           results.push(expect($("#LC" + line)).toHaveClass(this.css));
         }
         return results;
@@ -124,27 +124,27 @@
         });
         describe('with existing single-line highlight', function() {
           it('uses existing line as last line when target is lesser', function() {
-            var i, line, results;
+            var line, results;
             clickLine(20);
             clickLine(15, {
               shiftKey: true
             });
             expect($("." + this.css).length).toBe(6);
             results = [];
-            for (line = i = 15; i <= 20; line = ++i) {
+            for (line = 15; line <= 20; line += 1) {
               results.push(expect($("#LC" + line)).toHaveClass(this.css));
             }
             return results;
           });
           return it('uses existing line as first line when target is greater', function() {
-            var i, line, results;
+            var line, results;
             clickLine(5);
             clickLine(10, {
               shiftKey: true
             });
             expect($("." + this.css).length).toBe(6);
             results = [];
-            for (line = i = 5; i <= 10; line = ++i) {
+            for (line = 5; line <= 10; line += 1) {
               results.push(expect($("#LC" + line)).toHaveClass(this.css));
             }
             return results;
@@ -160,25 +160,25 @@
             });
           });
           it('uses target as first line when it is less than existing first line', function() {
-            var i, line, results;
+            var line, results;
             clickLine(5, {
               shiftKey: true
             });
             expect($("." + this.css).length).toBe(6);
             results = [];
-            for (line = i = 5; i <= 10; line = ++i) {
+            for (line = 5; line <= 10; line += 1) {
               results.push(expect($("#LC" + line)).toHaveClass(this.css));
             }
             return results;
           });
           return it('uses target as last line when it is greater than existing first line', function() {
-            var i, line, results;
+            var line, results;
             clickLine(15, {
               shiftKey: true
             });
             expect($("." + this.css).length).toBe(6);
             results = [];
-            for (line = i = 10; i <= 15; line = ++i) {
+            for (line = 10; line <= 15; line += 1) {
               results.push(expect($("#LC" + line)).toHaveClass(this.css));
             }
             return results;
@@ -227,5 +227,4 @@
       });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/merge_request_spec.js b/spec/javascripts/merge_request_spec.js
index 9b232617fe5..f644d39b1c7 100644
--- a/spec/javascripts/merge_request_spec.js
+++ b/spec/javascripts/merge_request_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-return-assign, padded-blocks */
+/* eslint-disable space-before-function-paren, no-return-assign */
 /* global MergeRequest */
 
 /*= require merge_request */
@@ -26,5 +26,4 @@
       });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/merge_request_widget_spec.js b/spec/javascripts/merge_request_widget_spec.js
index 6f91529db00..bf45100af03 100644
--- a/spec/javascripts/merge_request_widget_spec.js
+++ b/spec/javascripts/merge_request_widget_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, quotes, comma-dangle, dot-notation, indent, quote-props, no-var, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, quotes, comma-dangle, dot-notation, quote-props, no-var, max-len */
 
 /*= require merge_request_widget */
 /*= require lib/utils/datetime_utility */
@@ -42,17 +42,17 @@
       });
 
       it('should call renderEnvironments when the environments property is set', function() {
-         const spy = spyOn(this.class, 'renderEnvironments').and.stub();
-         this.class.getCIEnvironmentsStatus();
-         expect(spy).toHaveBeenCalledWith(this.ciEnvironmentsStatusData);
-       });
-
-       it('should not call renderEnvironments when the environments property is not set', function() {
-         this.ciEnvironmentsStatusData = null;
-         const spy = spyOn(this.class, 'renderEnvironments').and.stub();
-         this.class.getCIEnvironmentsStatus();
-         expect(spy).not.toHaveBeenCalled();
-       });
+        const spy = spyOn(this.class, 'renderEnvironments').and.stub();
+        this.class.getCIEnvironmentsStatus();
+        expect(spy).toHaveBeenCalledWith(this.ciEnvironmentsStatusData);
+      });
+
+      it('should not call renderEnvironments when the environments property is not set', function() {
+        this.ciEnvironmentsStatusData = null;
+        const spy = spyOn(this.class, 'renderEnvironments').and.stub();
+        this.class.getCIEnvironmentsStatus();
+        expect(spy).not.toHaveBeenCalled();
+      });
     });
 
     describe('renderEnvironments', function() {
@@ -107,16 +107,16 @@
     });
 
     describe('mergeInProgress', function() {
-       it('should display error with h4 tag', function() {
-          spyOn(this.class.$widgetBody, 'html').and.callFake(function(html) {
-            expect(html).toBe('<h4>Sorry, something went wrong.</h4>');
-          });
-          spyOn($, 'ajax').and.callFake(function(e) {
-            e.success({ merge_error: 'Sorry, something went wrong.' });
-          });
-          this.class.mergeInProgress(null);
+      it('should display error with h4 tag', function() {
+        spyOn(this.class.$widgetBody, 'html').and.callFake(function(html) {
+          expect(html).toBe('<h4>Sorry, something went wrong.</h4>');
+        });
+        spyOn($, 'ajax').and.callFake(function(e) {
+          e.success({ merge_error: 'Sorry, something went wrong.' });
         });
+        this.class.mergeInProgress(null);
       });
+    });
 
     return describe('getCIStatus', function() {
       beforeEach(function() {
@@ -167,5 +167,4 @@
       });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/new_branch_spec.js b/spec/javascripts/new_branch_spec.js
index e0dc549a9f4..8259d553f1b 100644
--- a/spec/javascripts/new_branch_spec.js
+++ b/spec/javascripts/new_branch_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, one-var, no-var, one-var-declaration-per-line, no-return-assign, quotes, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, one-var, no-var, one-var-declaration-per-line, no-return-assign, quotes, max-len */
 /* global NewBranchForm */
 
 /*= require jquery-ui/autocomplete */
@@ -166,5 +166,4 @@
       });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index 9cdb0a5d5aa..015c35dfca7 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-unused-expressions, no-var, object-shorthand, comma-dangle, semi, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, no-unused-expressions, no-var, object-shorthand, comma-dangle, max-len */
 /* global Notes */
 
 /*= require notes */
@@ -72,8 +72,7 @@
 
         $('.js-comment-button').click();
         expect(this.autoSizeSpy).toHaveBeenTriggered();
-      })
+      });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/pretty_time_spec.js.es6 b/spec/javascripts/pretty_time_spec.js.es6
index 2e12d45f7a7..7a04fba5f7f 100644
--- a/spec/javascripts/pretty_time_spec.js.es6
+++ b/spec/javascripts/pretty_time_spec.js.es6
@@ -1,12 +1,12 @@
 //= require lib/utils/pretty_time
 
 (() => {
-  const PrettyTime = gl.PrettyTime;
+  const prettyTime = gl.utils.prettyTime;
 
-  describe('PrettyTime methods', function () {
+  describe('prettyTime methods', function () {
     describe('parseSeconds', function () {
       it('should correctly parse a negative value', function () {
-        const parser = PrettyTime.parseSeconds;
+        const parser = prettyTime.parseSeconds;
 
         const zeroSeconds = parser(-1000);
 
@@ -17,7 +17,7 @@
       });
 
       it('should correctly parse a zero value', function () {
-        const parser = PrettyTime.parseSeconds;
+        const parser = prettyTime.parseSeconds;
 
         const zeroSeconds = parser(0);
 
@@ -28,7 +28,7 @@
       });
 
       it('should correctly parse a small non-zero second values', function () {
-        const parser = PrettyTime.parseSeconds;
+        const parser = prettyTime.parseSeconds;
 
         const subOneMinute = parser(10);
 
@@ -53,7 +53,7 @@
       });
 
       it('should correctly parse large second values', function () {
-        const parser = PrettyTime.parseSeconds;
+        const parser = prettyTime.parseSeconds;
 
         const aboveOneHour = parser(4800);
 
@@ -87,7 +87,7 @@
           minutes: 20,
         };
 
-        const timeString = PrettyTime.stringifyTime(timeObject);
+        const timeString = prettyTime.stringifyTime(timeObject);
 
         expect(timeString).toBe('1w 4d 7h 20m');
       });
@@ -100,7 +100,7 @@
           minutes: 20,
         };
 
-        const timeString = PrettyTime.stringifyTime(timeObject);
+        const timeString = prettyTime.stringifyTime(timeObject);
 
         expect(timeString).toBe('4d 20m');
       });
@@ -113,7 +113,7 @@
           minutes: 0,
         };
 
-        const timeString = PrettyTime.stringifyTime(timeObject);
+        const timeString = prettyTime.stringifyTime(timeObject);
 
         expect(timeString).toBe('0m');
       });
@@ -122,12 +122,12 @@
     describe('abbreviateTime', function () {
       it('should abbreviate stringified times for weeks', function () {
         const fullTimeString = '1w 3d 4h 5m';
-        expect(PrettyTime.abbreviateTime(fullTimeString)).toBe('1w');
+        expect(prettyTime.abbreviateTime(fullTimeString)).toBe('1w');
       });
 
       it('should abbreviate stringified times for non-weeks', function () {
         const fullTimeString = '0w 3d 4h 5m';
-        expect(PrettyTime.abbreviateTime(fullTimeString)).toBe('3d');
+        expect(prettyTime.abbreviateTime(fullTimeString)).toBe('3d');
       });
     });
   });
diff --git a/spec/javascripts/project_title_spec.js b/spec/javascripts/project_title_spec.js
index 27b071f266d..0202c9ba85e 100644
--- a/spec/javascripts/project_title_spec.js
+++ b/spec/javascripts/project_title_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-unused-expressions, no-return-assign, no-param-reassign, no-var, new-cap, wrap-iife, no-unused-vars, quotes, jasmine/no-expect-in-setup-teardown, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, no-unused-expressions, no-return-assign, no-param-reassign, no-var, new-cap, wrap-iife, no-unused-vars, quotes, jasmine/no-expect-in-setup-teardown, max-len */
 
 /* global Project */
 
@@ -49,5 +49,4 @@
       });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/right_sidebar_spec.js b/spec/javascripts/right_sidebar_spec.js
index 0177d8e4e79..942778229b5 100644
--- a/spec/javascripts/right_sidebar_spec.js
+++ b/spec/javascripts/right_sidebar_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, new-parens, no-return-assign, new-cap, vars-on-top, semi, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, new-parens, no-return-assign, new-cap, vars-on-top, max-len */
 /* global Sidebar */
 
 /*= require right_sidebar */
@@ -78,7 +78,6 @@
       $('.js-issuable-todo').click();
 
       expect(todoToggleSpy.calls.count()).toEqual(1);
-    })
+    });
   });
-
 }).call(this);
diff --git a/spec/javascripts/search_autocomplete_spec.js b/spec/javascripts/search_autocomplete_spec.js
index 2d3f44e7980..7ac9710654f 100644
--- a/spec/javascripts/search_autocomplete_spec.js
+++ b/spec/javascripts/search_autocomplete_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, max-len, no-var, one-var, one-var-declaration-per-line, no-unused-expressions, consistent-return, no-param-reassign, default-case, no-return-assign, comma-dangle, object-shorthand, prefer-template, quotes, new-parens, vars-on-top, new-cap, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, max-len, no-var, one-var, one-var-declaration-per-line, no-unused-expressions, consistent-return, no-param-reassign, default-case, no-return-assign, comma-dangle, object-shorthand, prefer-template, quotes, new-parens, vars-on-top, new-cap, max-len */
 
 /*= require gl_dropdown */
 /*= require search_autocomplete */
@@ -171,5 +171,4 @@
       expect(enterKeyEvent.isDefaultPrevented()).toBe(true);
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/shortcuts_issuable_spec.js b/spec/javascripts/shortcuts_issuable_spec.js
index c2894d6f3ea..386fc8f514e 100644
--- a/spec/javascripts/shortcuts_issuable_spec.js
+++ b/spec/javascripts/shortcuts_issuable_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-return-assign, no-var, quotes, padded-blocks */
+/* eslint-disable space-before-function-paren, no-return-assign, no-var, quotes */
 /* global ShortcutsIssuable */
 
 /*= require copy_as_gfm */
@@ -78,5 +78,4 @@
       });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/subbable_resource_spec.js.es6 b/spec/javascripts/subbable_resource_spec.js.es6
index 6a70dd856a7..99f45850ea3 100644
--- a/spec/javascripts/subbable_resource_spec.js.es6
+++ b/spec/javascripts/subbable_resource_spec.js.es6
@@ -1,4 +1,4 @@
-/* eslint-disable max-len, arrow-parens, comma-dangle, no-plusplus */
+/* eslint-disable max-len, arrow-parens, comma-dangle */
 
 //= vue
 //= vue-resource
@@ -53,7 +53,7 @@
         this.MockResource.subscribe(callbacks.two);
         this.MockResource.subscribe(callbacks.three);
 
-        state.myprop++;
+        state.myprop += 1;
 
         this.MockResource.publish(state);
 
diff --git a/spec/javascripts/syntax_highlight_spec.js b/spec/javascripts/syntax_highlight_spec.js
index 5984ce8ffd4..436f7064a69 100644
--- a/spec/javascripts/syntax_highlight_spec.js
+++ b/spec/javascripts/syntax_highlight_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-var, no-return-assign, quotes, padded-blocks */
+/* eslint-disable space-before-function-paren, no-var, no-return-assign, quotes */
 
 /*= require syntax_highlight */
 
@@ -41,5 +41,4 @@
       });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/u2f/authenticate_spec.js b/spec/javascripts/u2f/authenticate_spec.js
index dc2f4967985..80163fd72d3 100644
--- a/spec/javascripts/u2f/authenticate_spec.js
+++ b/spec/javascripts/u2f/authenticate_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, new-parens, quotes, comma-dangle, no-var, one-var, one-var-declaration-per-line, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, new-parens, quotes, comma-dangle, no-var, one-var, one-var-declaration-per-line, max-len */
 /* global MockU2FDevice */
 /* global U2FAuthenticate */
 
@@ -69,5 +69,4 @@
       });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/u2f/mock_u2f_device.js b/spec/javascripts/u2f/mock_u2f_device.js
index 1459f968c3d..287bfb4138b 100644
--- a/spec/javascripts/u2f/mock_u2f_device.js
+++ b/spec/javascripts/u2f/mock_u2f_device.js
@@ -1,6 +1,7 @@
-/* eslint-disable space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, no-unused-expressions, no-return-assign, no-param-reassign, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-unused-expressions, no-return-assign, no-param-reassign, max-len */
+
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.MockU2FDevice = (function() {
     function MockU2FDevice() {
@@ -28,7 +29,5 @@
     };
 
     return MockU2FDevice;
-
   })();
-
 }).call(this);
diff --git a/spec/javascripts/u2f/register_spec.js b/spec/javascripts/u2f/register_spec.js
index ab4c5edd044..0790553b67e 100644
--- a/spec/javascripts/u2f/register_spec.js
+++ b/spec/javascripts/u2f/register_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, new-parens, quotes, no-var, one-var, one-var-declaration-per-line, comma-dangle, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, new-parens, quotes, no-var, one-var, one-var-declaration-per-line, comma-dangle, max-len */
 /* global MockU2FDevice */
 /* global U2FRegister */
 
@@ -74,5 +74,4 @@
       });
     });
   });
-
 }).call(this);
diff --git a/spec/javascripts/visibility_select_spec.js.es6 b/spec/javascripts/visibility_select_spec.js.es6
new file mode 100644
index 00000000000..b21f6912e06
--- /dev/null
+++ b/spec/javascripts/visibility_select_spec.js.es6
@@ -0,0 +1,100 @@
+/*= require visibility_select */
+
+(() => {
+  const VisibilitySelect = gl.VisibilitySelect;
+
+  describe('VisibilitySelect', function () {
+    const lockedElement = document.createElement('div');
+    lockedElement.dataset.helpBlock = 'lockedHelpBlock';
+
+    const checkedElement = document.createElement('div');
+    checkedElement.dataset.description = 'checkedDescription';
+
+    const mockElements = {
+      container: document.createElement('div'),
+      select: document.createElement('div'),
+      '.help-block': document.createElement('div'),
+      '.js-locked': lockedElement,
+      'option:checked': checkedElement,
+    };
+
+    beforeEach(function () {
+      spyOn(Element.prototype, 'querySelector').and.callFake(selector => mockElements[selector]);
+    });
+
+    describe('#constructor', function () {
+      beforeEach(function () {
+        this.visibilitySelect = new VisibilitySelect(mockElements.container);
+      });
+
+      it('sets the container member', function () {
+        expect(this.visibilitySelect.container).toEqual(mockElements.container);
+      });
+
+      it('queries and sets the helpBlock member', function () {
+        expect(Element.prototype.querySelector).toHaveBeenCalledWith('.help-block');
+        expect(this.visibilitySelect.helpBlock).toEqual(mockElements['.help-block']);
+      });
+
+      it('queries and sets the select member', function () {
+        expect(Element.prototype.querySelector).toHaveBeenCalledWith('select');
+        expect(this.visibilitySelect.select).toEqual(mockElements.select);
+      });
+
+      describe('if there is no container element provided', function () {
+        it('throws an error', function () {
+          expect(() => new VisibilitySelect()).toThrowError('VisibilitySelect requires a container element as argument 1');
+        });
+      });
+    });
+
+    describe('#init', function () {
+      describe('if there is a select', function () {
+        beforeEach(function () {
+          this.visibilitySelect = new VisibilitySelect(mockElements.container);
+        });
+
+        it('calls updateHelpText', function () {
+          spyOn(VisibilitySelect.prototype, 'updateHelpText');
+          this.visibilitySelect.init();
+          expect(this.visibilitySelect.updateHelpText).toHaveBeenCalled();
+        });
+
+        it('adds a change event listener', function () {
+          spyOn(this.visibilitySelect.select, 'addEventListener');
+          this.visibilitySelect.init();
+          expect(this.visibilitySelect.select.addEventListener.calls.argsFor(0)).toContain('change');
+        });
+      });
+
+      describe('if there is no select', function () {
+        beforeEach(function () {
+          mockElements.select = undefined;
+          this.visibilitySelect = new VisibilitySelect(mockElements.container);
+          this.visibilitySelect.init();
+        });
+
+        it('updates the helpBlock text to the locked `data-help-block` messaged', function () {
+          expect(this.visibilitySelect.helpBlock.textContent)
+            .toEqual(lockedElement.dataset.helpBlock);
+        });
+
+        afterEach(function () {
+          mockElements.select = document.createElement('div');
+        });
+      });
+    });
+
+    describe('#updateHelpText', function () {
+      beforeEach(function () {
+        this.visibilitySelect = new VisibilitySelect(mockElements.container);
+        this.visibilitySelect.init();
+      });
+
+      it('updates the helpBlock text to the selected options `data-description`', function () {
+        expect(this.visibilitySelect.helpBlock.textContent)
+          .toEqual(checkedElement.dataset.description);
+      });
+    });
+  });
+})();
diff --git a/spec/javascripts/zen_mode_spec.js b/spec/javascripts/zen_mode_spec.js
index f1c2edcc55c..be706ca304f 100644
--- a/spec/javascripts/zen_mode_spec.js
+++ b/spec/javascripts/zen_mode_spec.js
@@ -1,4 +1,4 @@
-/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, object-shorthand, comma-dangle, no-return-assign, new-cap, padded-blocks, max-len */
+/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, object-shorthand, comma-dangle, no-return-assign, new-cap, max-len */
 /* global Dropzone */
 /* global Mousetrap */
 /* global ZenMode */
@@ -76,5 +76,4 @@
       keyCode: 27
     }));
   };
-
 }).call(this);