Merge branch 'master' into menu-resize-hidemenu-resize-hide

67 files changed, 2255 insertions, 274 deletions

diff --git a/spec/javascripts/.eslintrc b/spec/javascripts/.eslintrc
new file mode 100644
index 00000000000..7792acffac2
--- /dev/null
+++ b/spec/javascripts/.eslintrc
@@ -0,0 +1,15 @@
+{
+  "plugins": ["jasmine"],
+  "env": {
+    "jasmine": true
+  },
+  "extends": "plugin:jasmine/recommended",
+  "rules": {
+    "prefer-arrow-callback": 0,
+    "func-names": 0
+  },
+  "globals": {
+    "fixture": false,
+    "spyOnEvent": false
+  }
+}
diff --git a/spec/javascripts/abuse_reports_spec.js.es6 b/spec/javascripts/abuse_reports_spec.js.es6
index 6bcfdf191c2..a3171353bfb 100644
--- a/spec/javascripts/abuse_reports_spec.js.es6
+++ b/spec/javascripts/abuse_reports_spec.js.es6
@@ -1,3 +1,4 @@
+/* eslint-disable */
 /*= require abuse_reports */
 
 /*= require jquery */
diff --git a/spec/javascripts/activities_spec.js.es6 b/spec/javascripts/activities_spec.js.es6
new file mode 100644
index 00000000000..8640cd44085
--- /dev/null
+++ b/spec/javascripts/activities_spec.js.es6
@@ -0,0 +1,62 @@
+/* eslint-disable */
+/*= require js.cookie.js */
+/*= require jquery.endless-scroll.js */
+/*= require pager */
+/*= require activities */
+
+(() => {
+  window.gon || (window.gon = {});
+  const fixtureTemplate = 'event_filter.html';
+  const filters = [
+    {
+      id: 'all',
+    }, {
+      id: 'push',
+      name: 'push events',
+    }, {
+      id: 'merged',
+      name: 'merge events',
+    }, {
+      id: 'comments',
+    },{
+      id: 'team',
+    }];
+
+  function getEventName(index) {
+    let filter = filters[index];
+    return filter.hasOwnProperty('name') ? filter.name : filter.id;
+  }
+
+  function getSelector(index) {
+    let filter = filters[index];
+    return `#${filter.id}_event_filter`
+  }
+
+  describe('Activities', () => {
+    beforeEach(() => {
+      fixture.load(fixtureTemplate);
+      new gl.Activities();
+    });
+
+    for(let i = 0; i < filters.length; i++) {
+      ((i) => {
+        describe(`when selecting ${getEventName(i)}`, () => {
+          beforeEach(() => {
+            $(getSelector(i)).click();
+          });
+
+          for(let x = 0; x < filters.length; x++) {
+            ((x) => {
+              let shouldHighlight = i === x;
+              let testName = shouldHighlight ? 'should highlight' : 'should not highlight';
+
+              it(`${testName} ${getEventName(x)}`, () => {
+                expect($(getSelector(x)).parent().hasClass('active')).toEqual(shouldHighlight);
+              });
+            })(x);
+          }
+        });
+      })(i);
+    }
+  });
+})();
diff --git a/spec/javascripts/application_spec.js b/spec/javascripts/application_spec.js
index 56b98856614..7e38abc608e 100644
--- a/spec/javascripts/application_spec.js
+++ b/spec/javascripts/application_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, one-var, no-var, one-var-declaration-per-line, no-return-assign, padded-blocks, max-len */
 
 /*= require lib/utils/common_utils */
 
diff --git a/spec/javascripts/awards_handler_spec.js b/spec/javascripts/awards_handler_spec.js
index 019ce3b0702..ac1404f6e1c 100644
--- a/spec/javascripts/awards_handler_spec.js
+++ b/spec/javascripts/awards_handler_spec.js
@@ -1,7 +1,8 @@
+/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, no-unused-expressions, comma-dangle, no-undef, new-parens, no-unused-vars, quotes, jasmine/no-spec-dupes, prefer-template, padded-blocks, max-len */
 
 /*= require awards_handler */
 /*= require jquery */
-/*= require jquery.cookie */
+/*= require js.cookie */
 /*= require ./fixtures/emoji_menu */
 
 (function() {
@@ -44,7 +45,6 @@
       spyOn(jQuery, 'get').and.callFake(function(req, cb) {
         return cb(window.emojiMenu);
       });
-      spyOn(jQuery, 'cookie');
     });
     afterEach(function() {
       // restore original url root value
@@ -190,28 +190,6 @@
         return expect($thumbsUpEmoji.data("original-title")).toBe('sam');
       });
     });
-    describe('::addEmojiToFrequentlyUsedList', function() {
-      it('should set a cookie with the correct default path', function() {
-        gon.relative_url_root = '';
-        awardsHandler.addEmojiToFrequentlyUsedList('sunglasses');
-        expect(jQuery.cookie)
-          .toHaveBeenCalledWith('frequently_used_emojis', 'sunglasses', {
-            path: '/',
-            expires: 365
-          })
-        ;
-      });
-      it('should set a cookie with the correct custom root path', function() {
-        gon.relative_url_root = '/gitlab/subdir';
-        awardsHandler.addEmojiToFrequentlyUsedList('alien');
-        expect(jQuery.cookie)
-          .toHaveBeenCalledWith('frequently_used_emojis', 'alien', {
-            path: '/gitlab/subdir',
-            expires: 365
-          })
-        ;
-      });
-    });
     describe('search', function() {
       return it('should filter the emoji', function() {
         $('.js-add-award').eq(0).click();
diff --git a/spec/javascripts/behaviors/autosize_spec.js b/spec/javascripts/behaviors/autosize_spec.js
index 78795f7654a..b4573e53a4e 100644
--- a/spec/javascripts/behaviors/autosize_spec.js
+++ b/spec/javascripts/behaviors/autosize_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, no-var, comma-dangle, no-return-assign, padded-blocks, max-len */
 
 /*= require behaviors/autosize */
 
diff --git a/spec/javascripts/behaviors/quick_submit_spec.js b/spec/javascripts/behaviors/quick_submit_spec.js
index 13babb5bfdb..efb1203eb2f 100644
--- a/spec/javascripts/behaviors/quick_submit_spec.js
+++ b/spec/javascripts/behaviors/quick_submit_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, no-var, no-return-assign, comma-dangle, no-undef, jasmine/no-spec-dupes, new-cap, padded-blocks, max-len */
 
 /*= require behaviors/quick_submit */
 
diff --git a/spec/javascripts/behaviors/requires_input_spec.js b/spec/javascripts/behaviors/requires_input_spec.js
index 724c3baf989..c3f4c867d6a 100644
--- a/spec/javascripts/behaviors/requires_input_spec.js
+++ b/spec/javascripts/behaviors/requires_input_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, no-var, padded-blocks */
 
 /*= require behaviors/requires_input */
 
diff --git a/spec/javascripts/boards/boards_store_spec.js.es6 b/spec/javascripts/boards/boards_store_spec.js.es6
index 078e4b00023..b84dfc8197b 100644
--- a/spec/javascripts/boards/boards_store_spec.js.es6
+++ b/spec/javascripts/boards/boards_store_spec.js.es6
@@ -1,6 +1,7 @@
+/* eslint-disable */
 //= require jquery
 //= require jquery_ujs
-//= require jquery.cookie
+//= require js.cookie
 //= require vue
 //= require vue-resource
 //= require lib/utils/url_utility
@@ -12,153 +13,159 @@
 //= require boards/stores/boards_store
 //= require ./mock_data
 
-(() => {
+describe('Store', () => {
   beforeEach(() => {
-    gl.boardService = new BoardService('/test/issue-boards/board');
+    Vue.http.interceptors.push(boardsMockInterceptor);
+    gl.boardService = new BoardService('/test/issue-boards/board', '1');
     gl.issueBoards.BoardsStore.create();
 
-    $.cookie('issue_board_welcome_hidden', 'false');
+    Cookies.set('issue_board_welcome_hidden', 'false', {
+      expires: 365 * 10,
+      path: ''
+    });
   });
 
-  describe('Store', () => {
-    it('starts with a blank state', () => {
-      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(0);
-    });
+  afterEach(() => {
+    Vue.http.interceptors = _.without(Vue.http.interceptors, boardsMockInterceptor);
+  });
 
-    describe('lists', () => {
-      it('creates new list without persisting to DB', () => {
-        gl.issueBoards.BoardsStore.addList(listObj);
+  it('starts with a blank state', () => {
+    expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(0);
+  });
 
-        expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
-      });
+  describe('lists', () => {
+    it('creates new list without persisting to DB', () => {
+      gl.issueBoards.BoardsStore.addList(listObj);
 
-      it('finds list by ID', () => {
-        gl.issueBoards.BoardsStore.addList(listObj);
-        const list = gl.issueBoards.BoardsStore.findList('id', 1);
+      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
+    });
 
-        expect(list.id).toBe(1);
-      });
+    it('finds list by ID', () => {
+      gl.issueBoards.BoardsStore.addList(listObj);
+      const list = gl.issueBoards.BoardsStore.findList('id', 1);
 
-      it('finds list by type', () => {
-        gl.issueBoards.BoardsStore.addList(listObj);
-        const list = gl.issueBoards.BoardsStore.findList('type', 'label');
+      expect(list.id).toBe(1);
+    });
 
-        expect(list).toBeDefined();
-      });
+    it('finds list by type', () => {
+      gl.issueBoards.BoardsStore.addList(listObj);
+      const list = gl.issueBoards.BoardsStore.findList('type', 'label');
 
-      it('finds list limited by type', () => {
-        gl.issueBoards.BoardsStore.addList({
-          id: 1,
-          position: 0,
-          title: 'Test',
-          list_type: 'backlog'
-        });
-        const list = gl.issueBoards.BoardsStore.findList('id', 1, 'backlog');
+      expect(list).toBeDefined();
+    });
 
-        expect(list).toBeDefined();
+    it('finds list limited by type', () => {
+      gl.issueBoards.BoardsStore.addList({
+        id: 1,
+        position: 0,
+        title: 'Test',
+        list_type: 'backlog'
       });
+      const list = gl.issueBoards.BoardsStore.findList('id', 1, 'backlog');
 
-      it('gets issue when new list added', (done) => {
-        gl.issueBoards.BoardsStore.addList(listObj);
-        const list = gl.issueBoards.BoardsStore.findList('id', 1);
+      expect(list).toBeDefined();
+    });
 
-        expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
+    it('gets issue when new list added', (done) => {
+      gl.issueBoards.BoardsStore.addList(listObj);
+      const list = gl.issueBoards.BoardsStore.findList('id', 1);
 
-        setTimeout(() => {
-          expect(list.issues.length).toBe(1);
-          expect(list.issues[0].id).toBe(1);
-          done();
-        }, 0);
-      });
+      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
 
-      it('persists new list', (done) => {
-        gl.issueBoards.BoardsStore.new({
-          title: 'Test',
-          type: 'label',
-          label: {
-            id: 1,
-            title: 'Testing',
-            color: 'red',
-            description: 'testing;'
-          }
-        });
-        expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
-
-        setTimeout(() => {
-          const list = gl.issueBoards.BoardsStore.findList('id', 1);
-          expect(list).toBeDefined();
-          expect(list.id).toBe(1);
-          expect(list.position).toBe(0);
-          done();
-        }, 0);
-      });
+      setTimeout(() => {
+        expect(list.issues.length).toBe(1);
+        expect(list.issues[0].id).toBe(1);
+        done();
+      }, 0);
+    });
 
-      it('check for blank state adding', () => {
-        expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(true);
+    it('persists new list', (done) => {
+      gl.issueBoards.BoardsStore.new({
+        title: 'Test',
+        type: 'label',
+        label: {
+          id: 1,
+          title: 'Testing',
+          color: 'red',
+          description: 'testing;'
+        }
       });
+      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
 
-      it('check for blank state not adding', () => {
-        gl.issueBoards.BoardsStore.addList(listObj);
-        expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(false);
-      });
+      setTimeout(() => {
+        const list = gl.issueBoards.BoardsStore.findList('id', 1);
+        expect(list).toBeDefined();
+        expect(list.id).toBe(1);
+        expect(list.position).toBe(0);
+        done();
+      }, 0);
+    });
 
-      it('check for blank state adding when backlog & done list exist', () => {
-        gl.issueBoards.BoardsStore.addList({
-          list_type: 'backlog'
-        });
-        gl.issueBoards.BoardsStore.addList({
-          list_type: 'done'
-        });
+    it('check for blank state adding', () => {
+      expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(true);
+    });
+
+    it('check for blank state not adding', () => {
+      gl.issueBoards.BoardsStore.addList(listObj);
+      expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(false);
+    });
 
-        expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(true);
+    it('check for blank state adding when backlog & done list exist', () => {
+      gl.issueBoards.BoardsStore.addList({
+        list_type: 'backlog'
+      });
+      gl.issueBoards.BoardsStore.addList({
+        list_type: 'done'
       });
 
-      it('adds the blank state', () => {
-        gl.issueBoards.BoardsStore.addBlankState();
+      expect(gl.issueBoards.BoardsStore.shouldAddBlankState()).toBe(true);
+    });
 
-        const list = gl.issueBoards.BoardsStore.findList('type', 'blank', 'blank');
-        expect(list).toBeDefined();
-      });
+    it('adds the blank state', () => {
+      gl.issueBoards.BoardsStore.addBlankState();
 
-      it('removes list from state', () => {
-        gl.issueBoards.BoardsStore.addList(listObj);
+      const list = gl.issueBoards.BoardsStore.findList('type', 'blank', 'blank');
+      expect(list).toBeDefined();
+    });
 
-        expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
+    it('removes list from state', () => {
+      gl.issueBoards.BoardsStore.addList(listObj);
 
-        gl.issueBoards.BoardsStore.removeList(1, 'label');
+      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(1);
 
-        expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(0);
-      });
+      gl.issueBoards.BoardsStore.removeList(1, 'label');
+
+      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(0);
+    });
 
-      it('moves the position of lists', () => {
-        const listOne = gl.issueBoards.BoardsStore.addList(listObj),
-              listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
+    it('moves the position of lists', () => {
+      const listOne = gl.issueBoards.BoardsStore.addList(listObj),
+            listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
 
-        expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
+      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
 
-        gl.issueBoards.BoardsStore.moveList(listOne, ['2', '1']);
+      gl.issueBoards.BoardsStore.moveList(listOne, ['2', '1']);
 
-        expect(listOne.position).toBe(1);
-      });
+      expect(listOne.position).toBe(1);
+    });
 
-      it('moves an issue from one list to another', (done) => {
-        const listOne = gl.issueBoards.BoardsStore.addList(listObj),
-              listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
+    it('moves an issue from one list to another', (done) => {
+      const listOne = gl.issueBoards.BoardsStore.addList(listObj),
+            listTwo = gl.issueBoards.BoardsStore.addList(listObjDuplicate);
 
-        expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
+      expect(gl.issueBoards.BoardsStore.state.lists.length).toBe(2);
 
-        setTimeout(() => {
-          expect(listOne.issues.length).toBe(1);
-          expect(listTwo.issues.length).toBe(1);
+      setTimeout(() => {
+        expect(listOne.issues.length).toBe(1);
+        expect(listTwo.issues.length).toBe(1);
 
-          gl.issueBoards.BoardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(1));
+        gl.issueBoards.BoardsStore.moveIssueToList(listOne, listTwo, listOne.findIssue(1));
 
-          expect(listOne.issues.length).toBe(0);
-          expect(listTwo.issues.length).toBe(1);
+        expect(listOne.issues.length).toBe(0);
+        expect(listTwo.issues.length).toBe(1);
 
-          done();
-        }, 0);
-      });
+        done();
+      }, 0);
     });
   });
-})();
+});
diff --git a/spec/javascripts/boards/issue_spec.js.es6 b/spec/javascripts/boards/issue_spec.js.es6
index 3569d1b98bd..90cb8926545 100644
--- a/spec/javascripts/boards/issue_spec.js.es6
+++ b/spec/javascripts/boards/issue_spec.js.es6
@@ -1,6 +1,7 @@
+/* eslint-disable */
 //= require jquery
 //= require jquery_ujs
-//= require jquery.cookie
+//= require js.cookie
 //= require vue
 //= require vue-resource
 //= require lib/utils/url_utility
@@ -16,7 +17,7 @@ describe('Issue model', () => {
   let issue;
 
   beforeEach(() => {
-    gl.boardService = new BoardService('/test/issue-boards/board');
+    gl.boardService = new BoardService('/test/issue-boards/board', '1');
     gl.issueBoards.BoardsStore.create();
 
     issue = new ListIssue({
diff --git a/spec/javascripts/boards/list_spec.js.es6 b/spec/javascripts/boards/list_spec.js.es6
index 1688b996162..dfbcbe3a7c1 100644
--- a/spec/javascripts/boards/list_spec.js.es6
+++ b/spec/javascripts/boards/list_spec.js.es6
@@ -1,6 +1,7 @@
+/* eslint-disable */
 //= require jquery
 //= require jquery_ujs
-//= require jquery.cookie
+//= require js.cookie
 //= require vue
 //= require vue-resource
 //= require lib/utils/url_utility
@@ -16,12 +17,17 @@ describe('List model', () => {
   let list;
 
   beforeEach(() => {
-    gl.boardService = new BoardService('/test/issue-boards/board');
+    Vue.http.interceptors.push(boardsMockInterceptor);
+    gl.boardService = new BoardService('/test/issue-boards/board', '1');
     gl.issueBoards.BoardsStore.create();
 
     list = new List(listObj);
   });
 
+  afterEach(() => {
+    Vue.http.interceptors = _.without(Vue.http.interceptors, boardsMockInterceptor);
+  });
+
   it('gets issues when created', (done) => {
     setTimeout(() => {
       expect(list.issues.length).toBe(1);
diff --git a/spec/javascripts/boards/mock_data.js.es6 b/spec/javascripts/boards/mock_data.js.es6
index f3797ed44d4..fcb3d8f17d8 100644
--- a/spec/javascripts/boards/mock_data.js.es6
+++ b/spec/javascripts/boards/mock_data.js.es6
@@ -1,3 +1,4 @@
+/* eslint-disable */
 const listObj = {
   id: 1,
   position: 0,
@@ -26,7 +27,7 @@ const listObjDuplicate = {
 
 const BoardsMockData = {
   'GET': {
-    '/test/issue-boards/board/lists{/id}/issues': {
+    '/test/issue-boards/board/1/lists{/id}/issues': {
       issues: [{
         title: 'Testing',
         iid: 1,
@@ -37,20 +38,20 @@ const BoardsMockData = {
     }
   },
   'POST': {
-    '/test/issue-boards/board/lists{/id}': listObj
+    '/test/issue-boards/board/1/lists{/id}': listObj
   },
   'PUT': {
-    '/test/issue-boards/board/lists{/id}': {}
+    '/test/issue-boards/board/1/lists{/id}': {}
   },
   'DELETE': {
-    '/test/issue-boards/board/lists{/id}': {}
+    '/test/issue-boards/board/1/lists{/id}': {}
   }
 };
 
-Vue.http.interceptors.push((request, next) => {
+const boardsMockInterceptor = (request, next) => {
   const body = BoardsMockData[request.method][request.url];
 
   next(request.respondWith(JSON.stringify(body), {
     status: 200
   }));
-});
+};
diff --git a/spec/javascripts/build_spec.js.es6 b/spec/javascripts/build_spec.js.es6
new file mode 100644
index 00000000000..4208e076e96
--- /dev/null
+++ b/spec/javascripts/build_spec.js.es6
@@ -0,0 +1,191 @@
+/* eslint-disable no-new */
+/* global Build */
+/* global Turbolinks */
+
+//= require lib/utils/datetime_utility
+//= require build
+//= require breakpoints
+//= require jquery.nicescroll
+//= require turbolinks
+
+(() => {
+  describe('Build', () => {
+    fixture.preload('build.html');
+
+    beforeEach(function () {
+      fixture.load('build.html');
+      spyOn($, 'ajax');
+    });
+
+    describe('constructor', () => {
+      beforeEach(function () {
+        jasmine.clock().install();
+      });
+
+      afterEach(() => {
+        jasmine.clock().uninstall();
+      });
+
+      describe('setup', function () {
+        const removeDate = new Date();
+        removeDate.setUTCFullYear(removeDate.getUTCFullYear() + 1);
+        // give the test three days to run
+        removeDate.setTime(removeDate.getTime() + (3 * 24 * 60 * 60 * 1000));
+
+        beforeEach(function () {
+          const removeDateElement = document.querySelector('.js-artifacts-remove');
+          removeDateElement.innerText = removeDate.toString();
+
+          this.build = new Build();
+        });
+
+        it('copies build options', function () {
+          expect(this.build.pageUrl).toBe('http://example.com/root/test-build/builds/2');
+          expect(this.build.buildUrl).toBe('http://example.com/root/test-build/builds/2.json');
+          expect(this.build.buildStatus).toBe('passed');
+          expect(this.build.buildStage).toBe('test');
+          expect(this.build.state).toBe('buildstate');
+        });
+
+        it('only shows the jobs matching the current stage', function () {
+          expect($('.build-job[data-stage="build"]').is(':visible')).toBe(false);
+          expect($('.build-job[data-stage="test"]').is(':visible')).toBe(true);
+          expect($('.build-job[data-stage="deploy"]').is(':visible')).toBe(false);
+        });
+
+        it('selects the current stage in the build dropdown menu', function () {
+          expect($('.stage-selection').text()).toBe('test');
+        });
+
+        it('updates the jobs when the build dropdown changes', function () {
+          $('.stage-item:contains("build")').click();
+
+          expect($('.stage-selection').text()).toBe('build');
+          expect($('.build-job[data-stage="build"]').is(':visible')).toBe(true);
+          expect($('.build-job[data-stage="test"]').is(':visible')).toBe(false);
+          expect($('.build-job[data-stage="deploy"]').is(':visible')).toBe(false);
+        });
+
+        it('displays the remove date correctly', function () {
+          const removeDateElement = document.querySelector('.js-artifacts-remove');
+          expect(removeDateElement.innerText.trim()).toBe('1 year');
+        });
+      });
+
+      describe('initial build trace', function () {
+        beforeEach(function () {
+          new Build();
+        });
+
+        it('displays the initial build trace', function () {
+          expect($.ajax.calls.count()).toBe(1);
+          const [{ url, dataType, success, context }] = $.ajax.calls.argsFor(0);
+          expect(url).toBe('http://example.com/root/test-build/builds/2.json');
+          expect(dataType).toBe('json');
+          expect(success).toEqual(jasmine.any(Function));
+
+          success.call(context, { trace_html: '<span>Example</span>', status: 'running' });
+
+          expect($('#build-trace .js-build-output').text()).toMatch(/Example/);
+        });
+
+        it('removes the spinner', function () {
+          const [{ success, context }] = $.ajax.calls.argsFor(0);
+          success.call(context, { trace_html: '<span>Example</span>', status: 'success' });
+
+          expect($('.js-build-refresh').length).toBe(0);
+        });
+      });
+
+      describe('running build', function () {
+        beforeEach(function () {
+          $('.js-build-options').data('buildStatus', 'running');
+          this.build = new Build();
+          spyOn(this.build, 'location')
+            .and.returnValue('http://example.com/root/test-build/builds/2');
+        });
+
+        it('updates the build trace on an interval', function () {
+          jasmine.clock().tick(4001);
+
+          expect($.ajax.calls.count()).toBe(2);
+          let [{ url, dataType, success, context }] = $.ajax.calls.argsFor(1);
+          expect(url).toBe(
+            'http://example.com/root/test-build/builds/2/trace.json?state=buildstate'
+          );
+          expect(dataType).toBe('json');
+          expect(success).toEqual(jasmine.any(Function));
+
+          success.call(context, {
+            html: '<span>Update<span>',
+            status: 'running',
+            state: 'newstate',
+            append: true,
+          });
+
+          expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
+          expect(this.build.state).toBe('newstate');
+
+          jasmine.clock().tick(4001);
+
+          expect($.ajax.calls.count()).toBe(3);
+          [{ url, dataType, success, context }] = $.ajax.calls.argsFor(2);
+          expect(url).toBe(
+            'http://example.com/root/test-build/builds/2/trace.json?state=newstate'
+          );
+          expect(dataType).toBe('json');
+          expect(success).toEqual(jasmine.any(Function));
+
+          success.call(context, {
+            html: '<span>More</span>',
+            status: 'running',
+            state: 'finalstate',
+            append: true,
+          });
+
+          expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/);
+          expect(this.build.state).toBe('finalstate');
+        });
+
+        it('replaces the entire build trace', function () {
+          jasmine.clock().tick(4001);
+          let [{ success, context }] = $.ajax.calls.argsFor(1);
+          success.call(context, {
+            html: '<span>Update</span>',
+            status: 'running',
+            append: true,
+          });
+
+          expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
+
+          jasmine.clock().tick(4001);
+          [{ success, context }] = $.ajax.calls.argsFor(2);
+          success.call(context, {
+            html: '<span>Different</span>',
+            status: 'running',
+            append: false,
+          });
+
+          expect($('#build-trace .js-build-output').text()).not.toMatch(/Update/);
+          expect($('#build-trace .js-build-output').text()).toMatch(/Different/);
+        });
+
+        it('reloads the page when the build is done', function () {
+          spyOn(Turbolinks, 'visit');
+
+          jasmine.clock().tick(4001);
+          const [{ success, context }] = $.ajax.calls.argsFor(1);
+          success.call(context, {
+            html: '<span>Final</span>',
+            status: 'passed',
+            append: true,
+          });
+
+          expect(Turbolinks.visit).toHaveBeenCalledWith(
+            'http://example.com/root/test-build/builds/2'
+          );
+        });
+      });
+    });
+  });
+})();
diff --git a/spec/javascripts/dashboard_spec.js.es6 b/spec/javascripts/dashboard_spec.js.es6
new file mode 100644
index 00000000000..93f73fa0e9a
--- /dev/null
+++ b/spec/javascripts/dashboard_spec.js.es6
@@ -0,0 +1,39 @@
+/* eslint-disable */
+/*= require sidebar */
+/*= require jquery */
+/*= require js.cookie */
+/*= require lib/utils/text_utility */
+
+((global) => {
+  describe('Dashboard', () => {
+    const fixtureTemplate = 'dashboard.html';
+
+    function todosCountText() {
+      return $('.js-todos-count').text();
+    }
+
+    function triggerToggle(newCount) {
+      $(document).trigger('todo:toggle', newCount);
+    }
+
+    fixture.preload(fixtureTemplate);
+    beforeEach(() => {
+      fixture.load(fixtureTemplate);
+      new global.Sidebar();
+    });
+
+    it('should update todos-count after receiving the todo:toggle event', () => {
+      triggerToggle(5);
+      expect(todosCountText()).toEqual('5');
+    });
+
+    it('should display todos-count with delimiter', () => {
+      triggerToggle(1000);
+      expect(todosCountText()).toEqual('1,000');
+
+      triggerToggle(1000000);
+      expect(todosCountText()).toEqual('1,000,000');
+    });
+  });
+
+})(window.gl);
diff --git a/spec/javascripts/datetime_utility_spec.js.es6 b/spec/javascripts/datetime_utility_spec.js.es6
index a2d1b0a7732..9fdbab3a9e9 100644
--- a/spec/javascripts/datetime_utility_spec.js.es6
+++ b/spec/javascripts/datetime_utility_spec.js.es6
@@ -1,3 +1,4 @@
+/* eslint-disable */
 //= require lib/utils/datetime_utility
 (() => {
   describe('Date time utils', () => {
diff --git a/spec/javascripts/diff_comments_store_spec.js.es6 b/spec/javascripts/diff_comments_store_spec.js.es6
index 22293d4de87..9b2845af608 100644
--- a/spec/javascripts/diff_comments_store_spec.js.es6
+++ b/spec/javascripts/diff_comments_store_spec.js.es6
@@ -1,3 +1,4 @@
+/* eslint-disable */
 //= require vue
 //= require diff_notes/models/discussion
 //= require diff_notes/models/note
@@ -91,7 +92,6 @@
     it('is unresolved with 2 notes', () => {
       const discussion = CommentsStore.state['a'];
       createDiscussion(2, false);
-      console.log(discussion.isResolved());
 
       expect(discussion.isResolved()).toBe(false);
     });
diff --git a/spec/javascripts/environments/environment_actions_spec.js.es6 b/spec/javascripts/environments/environment_actions_spec.js.es6
new file mode 100644
index 00000000000..c9ac7a73fd0
--- /dev/null
+++ b/spec/javascripts/environments/environment_actions_spec.js.es6
@@ -0,0 +1,37 @@
+//= require vue
+//= require environments/components/environment_actions
+
+describe('Actions Component', () => {
+  fixture.preload('environments/element.html');
+
+  beforeEach(() => {
+    fixture.load('environments/element.html');
+  });
+
+  it('Should render a dropdown with the provided actions', () => {
+    const actionsMock = [
+      {
+        name: 'bar',
+        play_path: 'https://gitlab.com/play',
+      },
+      {
+        name: 'foo',
+        play_path: '#',
+      },
+    ];
+
+    const component = new window.gl.environmentsList.ActionsComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        actions: actionsMock,
+      },
+    });
+
+    expect(
+      component.$el.querySelectorAll('.dropdown-menu li').length
+    ).toEqual(actionsMock.length);
+    expect(
+      component.$el.querySelector('.dropdown-menu li a').getAttribute('href')
+    ).toEqual(actionsMock[0].play_path);
+  });
+});
diff --git a/spec/javascripts/environments/environment_external_url_spec.js.es6 b/spec/javascripts/environments/environment_external_url_spec.js.es6
new file mode 100644
index 00000000000..156506ef28f
--- /dev/null
+++ b/spec/javascripts/environments/environment_external_url_spec.js.es6
@@ -0,0 +1,22 @@
+//= require vue
+//= require environments/components/environment_external_url
+
+describe('External URL Component', () => {
+  fixture.preload('environments/element.html');
+  beforeEach(() => {
+    fixture.load('environments/element.html');
+  });
+
+  it('should link to the provided external_url', () => {
+    const externalURL = 'https://gitlab.com';
+    const component = new window.gl.environmentsList.ExternalUrlComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        external_url: externalURL,
+      },
+    });
+
+    expect(component.$el.getAttribute('href')).toEqual(externalURL);
+    expect(component.$el.querySelector('fa-external-link')).toBeDefined();
+  });
+});
diff --git a/spec/javascripts/environments/environment_item_spec.js.es6 b/spec/javascripts/environments/environment_item_spec.js.es6
new file mode 100644
index 00000000000..3c15e3b7719
--- /dev/null
+++ b/spec/javascripts/environments/environment_item_spec.js.es6
@@ -0,0 +1,215 @@
+//= require vue
+//= require environments/components/environment_item
+
+describe('Environment item', () => {
+  fixture.preload('environments/table.html');
+  beforeEach(() => {
+    fixture.load('environments/table.html');
+  });
+
+  describe('When item is folder', () => {
+    let mockItem;
+    let component;
+
+    beforeEach(() => {
+      mockItem = {
+        name: 'review',
+        children: [
+          {
+            name: 'review-app',
+            id: 1,
+            state: 'available',
+            external_url: '',
+            last_deployment: {},
+            created_at: '2016-11-07T11:11:16.525Z',
+            updated_at: '2016-11-10T15:55:58.778Z',
+          },
+          {
+            name: 'production',
+            id: 2,
+            state: 'available',
+            external_url: '',
+            last_deployment: {},
+            created_at: '2016-11-07T11:11:16.525Z',
+            updated_at: '2016-11-10T15:55:58.778Z',
+          },
+        ],
+      };
+
+      component = new window.gl.environmentsList.EnvironmentItem({
+        el: document.querySelector('tr#environment-row'),
+        propsData: {
+          model: mockItem,
+          toggleRow: () => {},
+          canCreateDeployment: false,
+          canReadEnvironment: true,
+        },
+      });
+    });
+
+    it('Should render folder icon and name', () => {
+      expect(component.$el.querySelector('.folder-name').textContent).toContain(mockItem.name);
+      expect(component.$el.querySelector('.folder-icon')).toBeDefined();
+    });
+
+    it('Should render the number of children in a badge', () => {
+      expect(component.$el.querySelector('.folder-name .badge').textContent).toContain(mockItem.children.length);
+    });
+  });
+
+  describe('when item is not folder', () => {
+    let environment;
+    let component;
+
+    beforeEach(() => {
+      environment = {
+        id: 31,
+        name: 'production',
+        state: 'stopped',
+        external_url: 'http://external.com',
+        environment_type: null,
+        last_deployment: {
+          id: 66,
+          iid: 6,
+          sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+          ref: {
+            name: 'master',
+            ref_path: 'root/ci-folders/tree/master',
+          },
+          tag: true,
+          'last?': true,
+          user: {
+            name: 'Administrator',
+            username: 'root',
+            id: 1,
+            state: 'active',
+            avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+            web_url: 'http://localhost:3000/root',
+          },
+          commit: {
+            id: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+            short_id: '500aabcb',
+            title: 'Update .gitlab-ci.yml',
+            author_name: 'Administrator',
+            author_email: 'admin@example.com',
+            created_at: '2016-11-07T18:28:13.000+00:00',
+            message: 'Update .gitlab-ci.yml',
+            author: {
+              name: 'Administrator',
+              username: 'root',
+              id: 1,
+              state: 'active',
+              avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+              web_url: 'http://localhost:3000/root',
+            },
+            commit_path: '/root/ci-folders/tree/500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+          },
+          deployable: {
+            id: 1279,
+            name: 'deploy',
+            build_path: '/root/ci-folders/builds/1279',
+            retry_path: '/root/ci-folders/builds/1279/retry',
+          },
+          manual_actions: [
+            {
+              name: 'action',
+              play_path: '/play',
+            },
+          ],
+        },
+        'stoppable?': true,
+        environment_path: 'root/ci-folders/environments/31',
+        created_at: '2016-11-07T11:11:16.525Z',
+        updated_at: '2016-11-10T15:55:58.778Z',
+      };
+
+      component = new window.gl.environmentsList.EnvironmentItem({
+        el: document.querySelector('tr#environment-row'),
+        propsData: {
+          model: environment,
+          toggleRow: () => {},
+          canCreateDeployment: true,
+          canReadEnvironment: true,
+        },
+      });
+    });
+
+    it('should render environment name', () => {
+      expect(component.$el.querySelector('.environment-name').textContent).toContain(environment.name);
+    });
+
+    describe('With deployment', () => {
+      it('should render deployment internal id', () => {
+        expect(
+          component.$el.querySelector('.deployment-column span').textContent
+        ).toContain(environment.last_deployment.iid);
+
+        expect(
+          component.$el.querySelector('.deployment-column span').textContent
+        ).toContain('#');
+      });
+
+      describe('With user information', () => {
+        it('should render user avatar with link to profile', () => {
+          expect(
+            component.$el.querySelector('.js-deploy-user-container').getAttribute('href')
+          ).toEqual(environment.last_deployment.user.web_url);
+        });
+      });
+
+      describe('With build url', () => {
+        it('Should link to build url provided', () => {
+          expect(
+            component.$el.querySelector('.build-link').getAttribute('href')
+          ).toEqual(environment.last_deployment.deployable.build_path);
+        });
+
+        it('Should render deployable name and id', () => {
+          expect(
+            component.$el.querySelector('.build-link').getAttribute('href')
+          ).toEqual(environment.last_deployment.deployable.build_path);
+        });
+      });
+
+      describe('With commit information', () => {
+        it('should render commit component', () => {
+          expect(
+            component.$el.querySelector('.js-commit-component')
+          ).toBeDefined();
+        });
+      });
+    });
+
+    describe('With manual actions', () => {
+      it('Should render actions component', () => {
+        expect(
+          component.$el.querySelector('.js-manual-actions-container')
+        ).toBeDefined();
+      });
+    });
+
+    describe('With external URL', () => {
+      it('should render external url component', () => {
+        expect(
+          component.$el.querySelector('.js-external-url-container')
+        ).toBeDefined();
+      });
+    });
+
+    describe('With stop action', () => {
+      it('Should render stop action component', () => {
+        expect(
+          component.$el.querySelector('.js-stop-component-container')
+        ).toBeDefined();
+      });
+    });
+
+    describe('With retry action', () => {
+      it('Should render rollback component', () => {
+        expect(
+          component.$el.querySelector('.js-rollback-component-container')
+        ).toBeDefined();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/environments/environment_rollback_spec.js.es6 b/spec/javascripts/environments/environment_rollback_spec.js.es6
new file mode 100644
index 00000000000..29449bbbd9e
--- /dev/null
+++ b/spec/javascripts/environments/environment_rollback_spec.js.es6
@@ -0,0 +1,48 @@
+//= require vue
+//= require environments/components/environment_rollback
+describe('Rollback Component', () => {
+  fixture.preload('environments/element.html');
+
+  const retryURL = 'https://gitlab.com/retry';
+
+  beforeEach(() => {
+    fixture.load('environments/element.html');
+  });
+
+  it('Should link to the provided retry_url', () => {
+    const component = new window.gl.environmentsList.RollbackComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        retry_url: retryURL,
+        is_last_deployment: true,
+      },
+    });
+
+    expect(component.$el.getAttribute('href')).toEqual(retryURL);
+  });
+
+  it('Should render Re-deploy label when is_last_deployment is true', () => {
+    const component = new window.gl.environmentsList.RollbackComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        retry_url: retryURL,
+        is_last_deployment: true,
+      },
+    });
+
+    expect(component.$el.querySelector('span').textContent).toContain('Re-deploy');
+  });
+
+
+  it('Should render Rollback label when is_last_deployment is false', () => {
+    const component = new window.gl.environmentsList.RollbackComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        retry_url: retryURL,
+        is_last_deployment: false,
+      },
+    });
+
+    expect(component.$el.querySelector('span').textContent).toContain('Rollback');
+  });
+});
diff --git a/spec/javascripts/environments/environment_stop_spec.js.es6 b/spec/javascripts/environments/environment_stop_spec.js.es6
new file mode 100644
index 00000000000..b842be4da61
--- /dev/null
+++ b/spec/javascripts/environments/environment_stop_spec.js.es6
@@ -0,0 +1,28 @@
+//= require vue
+//= require environments/components/environment_stop
+describe('Stop Component', () => {
+  fixture.preload('environments/element.html');
+
+  let stopURL;
+  let component;
+
+  beforeEach(() => {
+    fixture.load('environments/element.html');
+
+    stopURL = '/stop';
+    component = new window.gl.environmentsList.StopComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        stop_url: stopURL,
+      },
+    });
+  });
+
+  it('should link to the provided URL', () => {
+    expect(component.$el.getAttribute('href')).toEqual(stopURL);
+  });
+
+  it('should have a data-confirm attribute', () => {
+    expect(component.$el.getAttribute('data-confirm')).toEqual('Are you sure you want to stop this environment?');
+  });
+});
diff --git a/spec/javascripts/environments/environments_store_spec.js.es6 b/spec/javascripts/environments/environments_store_spec.js.es6
new file mode 100644
index 00000000000..9b0b3cb1c65
--- /dev/null
+++ b/spec/javascripts/environments/environments_store_spec.js.es6
@@ -0,0 +1,71 @@
+/* global environmentsList */
+
+//= require vue
+//= require environments/stores/environments_store
+//= require ./mock_data
+
+(() => {
+  beforeEach(() => {
+    gl.environmentsList.EnvironmentsStore.create();
+  });
+
+  describe('Store', () => {
+    it('should start with a blank state', () => {
+      expect(gl.environmentsList.EnvironmentsStore.state.environments.length).toBe(0);
+      expect(gl.environmentsList.EnvironmentsStore.state.stoppedCounter).toBe(0);
+      expect(gl.environmentsList.EnvironmentsStore.state.availableCounter).toBe(0);
+    });
+
+    describe('store environments', () => {
+      beforeEach(() => {
+        gl.environmentsList.EnvironmentsStore.storeEnvironments(environmentsList);
+      });
+
+      it('should count stopped environments and save the count in the state', () => {
+        expect(gl.environmentsList.EnvironmentsStore.state.stoppedCounter).toBe(1);
+      });
+
+      it('should count available environments and save the count in the state', () => {
+        expect(gl.environmentsList.EnvironmentsStore.state.availableCounter).toBe(3);
+      });
+
+      it('should store environments with same environment_type as sibilings', () => {
+        expect(gl.environmentsList.EnvironmentsStore.state.environments.length).toBe(3);
+
+        const parentFolder = gl.environmentsList.EnvironmentsStore.state.environments
+        .filter(env => env.children && env.children.length > 0);
+
+        expect(parentFolder[0].children.length).toBe(2);
+        expect(parentFolder[0].children[0].environment_type).toBe('review');
+        expect(parentFolder[0].children[1].environment_type).toBe('review');
+        expect(parentFolder[0].children[0].name).toBe('test-environment');
+        expect(parentFolder[0].children[1].name).toBe('test-environment-1');
+      });
+
+      it('should sort the environments alphabetically', () => {
+        const { environments } = gl.environmentsList.EnvironmentsStore.state;
+
+        expect(environments[0].name).toBe('production');
+        expect(environments[1].name).toBe('review');
+        expect(environments[1].children[0].name).toBe('test-environment');
+        expect(environments[1].children[1].name).toBe('test-environment-1');
+        expect(environments[2].name).toBe('review_app');
+      });
+    });
+
+    describe('toggleFolder', () => {
+      beforeEach(() => {
+        gl.environmentsList.EnvironmentsStore.storeEnvironments(environmentsList);
+      });
+
+      it('should toggle the open property for the given environment', () => {
+        gl.environmentsList.EnvironmentsStore.toggleFolder('review');
+
+        const { environments } = gl.environmentsList.EnvironmentsStore.state;
+        const environment = environments.filter(env => env['vue-isChildren'] === true && env.name === 'review');
+
+        expect(environment[0].isOpen).toBe(true);
+      });
+    });
+  });
+})();
diff --git a/spec/javascripts/environments/mock_data.js.es6 b/spec/javascripts/environments/mock_data.js.es6
new file mode 100644
index 00000000000..9e16bc3e6a5
--- /dev/null
+++ b/spec/javascripts/environments/mock_data.js.es6
@@ -0,0 +1,135 @@
+/* eslint-disable no-unused-vars */
+const environmentsList = [
+  {
+    id: 31,
+    name: 'production',
+    state: 'available',
+    external_url: 'https://www.gitlab.com',
+    environment_type: null,
+    last_deployment: {
+      id: 64,
+      iid: 5,
+      sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+      ref: {
+        name: 'master',
+        ref_url: 'http://localhost:3000/root/ci-folders/tree/master',
+      },
+      tag: false,
+      'last?': true,
+      user: {
+        name: 'Administrator',
+        username: 'root',
+        id: 1,
+        state: 'active',
+        avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+        web_url: 'http://localhost:3000/root',
+      },
+      commit: {
+        id: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+        short_id: '500aabcb',
+        title: 'Update .gitlab-ci.yml',
+        author_name: 'Administrator',
+        author_email: 'admin@example.com',
+        created_at: '2016-11-07T18:28:13.000+00:00',
+        message: 'Update .gitlab-ci.yml',
+        author: {
+          name: 'Administrator',
+          username: 'root',
+          id: 1,
+          state: 'active',
+          avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+          web_url: 'http://localhost:3000/root',
+        },
+        commit_path: '/root/ci-folders/tree/500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+      },
+      deployable: {
+        id: 1278,
+        name: 'build',
+        build_path: '/root/ci-folders/builds/1278',
+        retry_path: '/root/ci-folders/builds/1278/retry',
+      },
+      manual_actions: [],
+    },
+    'stoppable?': true,
+    environment_path: '/root/ci-folders/environments/31',
+    created_at: '2016-11-07T11:11:16.525Z',
+    updated_at: '2016-11-07T11:11:16.525Z',
+  },
+  {
+    id: 32,
+    name: 'review_app',
+    state: 'stopped',
+    external_url: 'https://www.gitlab.com',
+    environment_type: null,
+    last_deployment: {
+      id: 64,
+      iid: 5,
+      sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+      ref: {
+        name: 'master',
+        ref_url: 'http://localhost:3000/root/ci-folders/tree/master',
+      },
+      tag: false,
+      'last?': true,
+      user: {
+        name: 'Administrator',
+        username: 'root',
+        id: 1,
+        state: 'active',
+        avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+        web_url: 'http://localhost:3000/root',
+      },
+      commit: {
+        id: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+        short_id: '500aabcb',
+        title: 'Update .gitlab-ci.yml',
+        author_name: 'Administrator',
+        author_email: 'admin@example.com',
+        created_at: '2016-11-07T18:28:13.000+00:00',
+        message: 'Update .gitlab-ci.yml',
+        author: {
+          name: 'Administrator',
+          username: 'root',
+          id: 1,
+          state: 'active',
+          avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon',
+          web_url: 'http://localhost:3000/root',
+        },
+        commit_path: '/root/ci-folders/tree/500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
+      },
+      deployable: {
+        id: 1278,
+        name: 'build',
+        build_path: '/root/ci-folders/builds/1278',
+        retry_path: '/root/ci-folders/builds/1278/retry',
+      },
+      manual_actions: [],
+    },
+    'stoppable?': false,
+    environment_path: '/root/ci-folders/environments/31',
+    created_at: '2016-11-07T11:11:16.525Z',
+    updated_at: '2016-11-07T11:11:16.525Z',
+  },
+  {
+    id: 33,
+    name: 'test-environment',
+    state: 'available',
+    environment_type: 'review',
+    last_deployment: null,
+    'stoppable?': true,
+    environment_path: '/root/ci-folders/environments/31',
+    created_at: '2016-11-07T11:11:16.525Z',
+    updated_at: '2016-11-07T11:11:16.525Z',
+  },
+  {
+    id: 34,
+    name: 'test-environment-1',
+    state: 'available',
+    environment_type: 'review',
+    last_deployment: null,
+    'stoppable?': true,
+    environment_path: '/root/ci-folders/environments/31',
+    created_at: '2016-11-07T11:11:16.525Z',
+    updated_at: '2016-11-07T11:11:16.525Z',
+  },
+];
diff --git a/spec/javascripts/extensions/array_spec.js b/spec/javascripts/extensions/array_spec.js
index eced2f6575d..c56e6c7789b 100644
--- a/spec/javascripts/extensions/array_spec.js
+++ b/spec/javascripts/extensions/array_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, no-var, padded-blocks */
 
 /*= require extensions/array */
 
diff --git a/spec/javascripts/extensions/jquery_spec.js b/spec/javascripts/extensions/jquery_spec.js
index b644344b95a..76309930f27 100644
--- a/spec/javascripts/extensions/jquery_spec.js
+++ b/spec/javascripts/extensions/jquery_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, no-var, padded-blocks */
 
 /*= require extensions/jquery */
 
diff --git a/spec/javascripts/fixtures/.gitignore b/spec/javascripts/fixtures/.gitignore
new file mode 100644
index 00000000000..009b68d5d1c
--- /dev/null
+++ b/spec/javascripts/fixtures/.gitignore
@@ -0,0 +1 @@
+*.html.raw
diff --git a/spec/javascripts/fixtures/build.html.haml b/spec/javascripts/fixtures/build.html.haml
new file mode 100644
index 00000000000..06b49516e5c
--- /dev/null
+++ b/spec/javascripts/fixtures/build.html.haml
@@ -0,0 +1,62 @@
+.build-page
+  .prepend-top-default
+    .autoscroll-container
+      %button.btn.btn-success.btn-sm#autoscroll-button{:type => "button", :data => {:state => 'disabled'}} enable autoscroll
+    #js-build-scroll.scroll-controls
+      %a.btn{href: '#build-trace'}
+        %i.fa.fa-angle-up
+      %a.btn{href: '#down-build-trace'}
+        %i.fa.fa-angle-down
+    %pre.build-trace#build-trace
+      %code.bash.js-build-output
+      %i.fa.fa-refresh.fa-spin.js-build-refresh
+
+%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar
+  .block.build-sidebar-header.visible-xs-block.visible-sm-block.append-bottom-default
+    Build
+    %strong #1
+    %a.gutter-toggle.pull-right.js-sidebar-build-toggle{ href: "#" }
+      %i.fa.fa-angle-double-right
+  .blocks-container
+    .dropdown.build-dropdown
+      .title Stage
+      %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
+        %span.stage-selection More
+        %i.fa.fa-caret-down
+      %ul.dropdown-menu
+        %li
+          %a.stage-item build
+        %li
+          %a.stage-item test
+        %li
+          %a.stage-item deploy
+  .builds-container
+    .build-job{data: {stage: 'build'}}
+      %a{href: 'http://example.com/root/test-build/builds/1'}
+        %i.fa.fa-check
+        %i.fa.fa-check-circle-o
+        %span
+          Setup
+    .build-job{data: {stage: 'test'}}
+      %a{href: 'http://example.com/root/test-build/builds/2'}
+        %i.fa.fa-check
+        %i.fa.fa-check-circle-o
+        %span
+          Tests
+    .build-job{data: {stage: 'deploy'}}
+      %a{href: 'http://example.com/root/test-build/builds/3'}
+        %i.fa.fa-check
+        %i.fa.fa-check-circle-o
+        %span
+          Deploy
+
+.js-build-options{ data: { page_url: 'http://example.com/root/test-build/builds/2',
+  build_url: 'http://example.com/root/test-build/builds/2.json',
+  build_status: 'passed',
+  build_stage: 'test',
+  log_state: 'buildstate' }}
+
+%p.build-detail-row
+  The artifacts will be removed in
+  %span.js-artifacts-remove
+    2016-12-19 09:02:12 UTC
diff --git a/spec/javascripts/fixtures/dashboard.html.haml b/spec/javascripts/fixtures/dashboard.html.haml
new file mode 100644
index 00000000000..32446acfd60
--- /dev/null
+++ b/spec/javascripts/fixtures/dashboard.html.haml
@@ -0,0 +1,45 @@
+%ul.nav.nav-sidebar
+  %li.home.active
+    %a.dashboard-shortcuts-projects
+      %span
+        Projects
+  %li
+    %a
+      %span
+        Todos
+        %span.count.js-todos-count
+        1
+  %li
+    %a.dashboard-shortcuts-activity
+      %span
+        Activity
+  %li
+    %a
+      %span
+        Groups
+  %li
+    %a
+      %span
+        Milestones
+  %li
+    %a.dashboard-shortcuts-issues
+      %span
+        Issues
+        %span
+        1
+  %li
+    %a.dashboard-shortcuts-merge_requests
+      %span
+        Merge Requests
+  %li
+    %a
+      %span
+        Snippets
+  %li
+    %a
+      %span
+        Help
+  %li
+    %a
+      %span
+        Profile Settings
diff --git a/spec/javascripts/fixtures/emoji_menu.js b/spec/javascripts/fixtures/emoji_menu.js
index 99e3f7247bd..3d776bb9277 100644
--- a/spec/javascripts/fixtures/emoji_menu.js
+++ b/spec/javascripts/fixtures/emoji_menu.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, padded-blocks */
 (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>";
 
diff --git a/spec/javascripts/fixtures/environments/element.html.haml b/spec/javascripts/fixtures/environments/element.html.haml
new file mode 100644
index 00000000000..8d7aeb23356
--- /dev/null
+++ b/spec/javascripts/fixtures/environments/element.html.haml
@@ -0,0 +1 @@
+.test-dom-element
diff --git a/spec/javascripts/fixtures/environments/environments.html.haml b/spec/javascripts/fixtures/environments/environments.html.haml
new file mode 100644
index 00000000000..d89bc50c1f0
--- /dev/null
+++ b/spec/javascripts/fixtures/environments/environments.html.haml
@@ -0,0 +1,9 @@
+%div
+  #environments-list-view{ data: { environments_data: "https://gitlab.com/foo/environments",
+    "can-create-deployment" => "true",
+    "can-read-environment" => "true",
+    "can-create-environment" => "true",
+    "project-environments-path" => "https://gitlab.com/foo/environments",
+    "project-stopped-environments-path" => "https://gitlab.com/foo/environments?scope=stopped",
+    "new-environment-path" => "https://gitlab.com/foo/environments/new",
+    "help-page-path" => "https://gitlab.com/help_page"}}
diff --git a/spec/javascripts/fixtures/environments/table.html.haml b/spec/javascripts/fixtures/environments/table.html.haml
new file mode 100644
index 00000000000..1ea1725c561
--- /dev/null
+++ b/spec/javascripts/fixtures/environments/table.html.haml
@@ -0,0 +1,11 @@
+%table
+  %thead
+    %tr
+      %th Environment
+      %th Last deployment
+      %th Build
+      %th Commit
+      %th
+      %th
+  %tbody
+    %tr#environment-row
diff --git a/spec/javascripts/fixtures/event_filter.html.haml b/spec/javascripts/fixtures/event_filter.html.haml
new file mode 100644
index 00000000000..95e248cadf8
--- /dev/null
+++ b/spec/javascripts/fixtures/event_filter.html.haml
@@ -0,0 +1,21 @@
+%ul.nav-links.event-filter.scrolling-tabs
+  %li.active
+    %a.event-filter-link{ id: "all_event_filter", title: "Filter by all", href: "/dashboard/activity"}
+      %span
+        All
+  %li
+    %a.event-filter-link{ id: "push_event_filter", title: "Filter by push events", href: "/dashboard/activity"}
+      %span
+        Push events
+  %li
+    %a.event-filter-link{ id: "merged_event_filter", title: "Filter by merge events", href: "/dashboard/activity"}
+      %span
+        Merge events
+  %li
+    %a.event-filter-link{ id: "comments_event_filter", title: "Filter by comments", href: "/dashboard/activity"}
+      %span
+        Comments
+  %li
+    %a.event-filter-link{ id: "team_event_filter", title: "Filter by team", href: "/dashboard/activity"}
+      %span
+        Team
\ No newline at end of file
diff --git a/spec/javascripts/fixtures/gl_field_errors.html.haml b/spec/javascripts/fixtures/gl_field_errors.html.haml
new file mode 100644
index 00000000000..69445b61367
--- /dev/null
+++ b/spec/javascripts/fixtures/gl_field_errors.html.haml
@@ -0,0 +1,15 @@
+%form.gl-show-field-errors{action: 'submit', method: 'post'}
+  .form-group
+    %input.required-text{required: true, type: 'text'} Text
+  .form-group
+    %input.email{type: 'email', title: 'Please provide a valid email address.', required: true } Email
+  .form-group
+    %input.password{type: 'password', required: true} Password
+  .form-group
+    %input.alphanumeric{type: 'text', pattern: '[a-zA-Z0-9]', required: true} Alphanumeric
+  .form-group
+    %input.hidden{ type:'hidden' }
+  .form-group
+    %input.custom.gl-field-error-ignore{ type:'text' } Custom, do not validate
+  .form-group
+  %input.submit{type: 'submit'} Submit
diff --git a/spec/javascripts/fixtures/header.html.haml b/spec/javascripts/fixtures/header.html.haml
new file mode 100644
index 00000000000..4db2ef604de
--- /dev/null
+++ b/spec/javascripts/fixtures/header.html.haml
@@ -0,0 +1,35 @@
+%header.navbar.navbar-fixed-top.navbar-gitlab.nav_header_class
+  .container-fluid
+    .header-content
+      %button.side-nav-toggle
+      %span.sr-only
+        Toggle navigation
+        %i.fa.fa-bars
+      %button.navbar-toggle
+        %span.sr-only
+        Toggle navigation
+        %i.fa.fa-ellipsis-v
+      .navbar-collapse.collapse
+        %ui.nav.navbar-nav
+          %li.hidden-sm.hidden-xs
+          %li.visible-sm.visible-xs
+          %li
+            %a
+              %i.fa.fa-bell.fa-fw
+              %span.badge.todos-pending-count
+          %li
+            %a
+              %i.fa.fa-plus.fa-fw
+          %li.header-user.dropdown
+            %a
+              %img
+              %span.caret
+            .dropdown-menu-nav
+            .dropdown-menu-align-right
+              %ul
+                %li
+                  %a.profile-link
+                %li
+                  %a
+                %li.divider
+                %li.sign-out-link
diff --git a/spec/javascripts/fixtures/issues.rb b/spec/javascripts/fixtures/issues.rb
new file mode 100644
index 00000000000..d95eb851421
--- /dev/null
+++ b/spec/javascripts/fixtures/issues.rb
@@ -0,0 +1,44 @@
+require 'spec_helper'
+
+describe Projects::IssuesController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:project) { create(:project_empty_repo) }
+
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('issues/')
+  end
+
+  before(:each) do
+    sign_in(admin)
+  end
+
+  it 'issues/open-issue.html.raw' do |example|
+    render_issue(example.description, create(:issue, project: project))
+  end
+
+  it 'issues/closed-issue.html.raw' do |example|
+    render_issue(example.description, create(:closed_issue, project: project))
+  end
+
+  it 'issues/issue-with-task-list.html.raw' do |example|
+    issue = create(:issue, project: project)
+    issue.update(description: '- [ ] Task List Item')
+    render_issue(example.description, issue)
+  end
+
+  private
+
+  def render_issue(fixture_file_name, issue)
+    get :show,
+      namespace_id: project.namespace.to_param,
+      project_id: project.to_param,
+      id: issue.to_param
+
+    expect(response).to be_success
+    store_frontend_fixture(response, fixture_file_name)
+  end
+end
diff --git a/spec/javascripts/fixtures/issues_show.html.haml b/spec/javascripts/fixtures/issues_show.html.haml
deleted file mode 100644
index 06c2ab1e823..00000000000
--- a/spec/javascripts/fixtures/issues_show.html.haml
+++ /dev/null
@@ -1,23 +0,0 @@
-:css
-  .hidden { display: none !important; }
-
-.flash-container.flash-container-page
-  .flash-alert
-  .flash-notice
-
-.status-box.status-box-open Open
-.status-box.status-box-closed.hidden Closed
-%a.btn-close{"href" => "http://gitlab.com/issues/6/close"} Close
-%a.btn-reopen.hidden{"href" => "http://gitlab.com/issues/6/reopen"} Reopen
-
-.detail-page-description
-  .description.js-task-list-container
-    .wiki
-      %ul.task-list
-        %li.task-list-item
-          %input.task-list-item-checkbox{type: 'checkbox'}
-          Task List Item
-      %textarea.js-task-list-field
-        \- [ ] Task List Item
-
-%form.js-issuable-update{action: '/foo'}
diff --git a/spec/javascripts/fixtures/right_sidebar.html.haml b/spec/javascripts/fixtures/right_sidebar.html.haml
index 95efaff4b69..d48b77cf0ce 100644
--- a/spec/javascripts/fixtures/right_sidebar.html.haml
+++ b/spec/javascripts/fixtures/right_sidebar.html.haml
@@ -5,6 +5,10 @@
     %div.block.issuable-sidebar-header
       %a.gutter-toggle.pull-right.js-sidebar-toggle
         %i.fa.fa-angle-double-left
+      %button.btn.btn-default.issuable-header-btn.pull-right.js-issuable-todo{ type: "button", data: { todo_text: "Add Todo", mark_text: "Mark Done", issuable_id: "1", issuable_type: "issue", url: "/todos" }}
+        %span.js-issuable-todo-text
+          Add Todo
+        %i.fa.fa-spin.fa-spinner.js-issuable-todo-loading.hidden
 
     %form.issuable-context-form
       %div.block.labels
diff --git a/spec/javascripts/fixtures/todos.json b/spec/javascripts/fixtures/todos.json
new file mode 100644
index 00000000000..62c2387d515
--- /dev/null
+++ b/spec/javascripts/fixtures/todos.json
@@ -0,0 +1,4 @@
+{
+    "count": 1,
+    "delete_path": "/dashboard/todos/1"
+}
\ No newline at end of file
diff --git a/spec/javascripts/gl_dropdown_spec.js.es6 b/spec/javascripts/gl_dropdown_spec.js.es6
index b529ea6458d..8ba238018cd 100644
--- a/spec/javascripts/gl_dropdown_spec.js.es6
+++ b/spec/javascripts/gl_dropdown_spec.js.es6
@@ -1,3 +1,4 @@
+/* eslint-disable */
 /*= require jquery */
 /*= require gl_dropdown */
 /*= require turbolinks */
@@ -6,6 +7,7 @@
 
 (() => {
   const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
+  const SEARCH_INPUT_SELECTOR = '.dropdown-input-field';
   const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
   const FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`;
 
@@ -16,6 +18,8 @@
     ESC: 27
   };
 
+  let remoteCallback;
+
   let navigateWithKeys = function navigateWithKeys(direction, steps, cb, i) {
     i = i || 0;
     if (!i) direction = direction.toUpperCase();
@@ -32,18 +36,19 @@
     }
   };
 
+  let remoteMock = function remoteMock(data, term, callback) {
+    remoteCallback = callback.bind({}, data);
+  }
+
   describe('Dropdown', function describeDropdown() {
     fixture.preload('gl_dropdown.html');
     fixture.preload('projects.json');
 
-    beforeEach(() => {
-      fixture.load('gl_dropdown.html');
-      this.dropdownContainerElement = $('.dropdown.inline');
-      this.dropdownMenuElement = $('.dropdown-menu', this.dropdownContainerElement);
-      this.projectsData = fixture.load('projects.json')[0];
+    function initDropDown(hasRemote, isFilterable) {
       this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({
         selectable: true,
-        data: this.projectsData,
+        filterable: isFilterable,
+        data: hasRemote ? remoteMock.bind({}, this.projectsData) : this.projectsData,
         text: (project) => {
           (project.name_with_namespace || project.name);
         },
@@ -51,6 +56,13 @@
           project.id;
         }
       });
+    }
+
+    beforeEach(() => {
+      fixture.load('gl_dropdown.html');
+      this.dropdownContainerElement = $('.dropdown.inline');
+      this.$dropdownMenuElement = $('.dropdown-menu', this.dropdownContainerElement);
+      this.projectsData = fixture.load('projects.json')[0];
     });
 
     afterEach(() => {
@@ -59,6 +71,7 @@
     });
 
     it('should open on click', () => {
+      initDropDown.call(this, false);
       expect(this.dropdownContainerElement).not.toHaveClass('open');
       this.dropdownButtonElement.click();
       expect(this.dropdownContainerElement).toHaveClass('open');
@@ -66,26 +79,27 @@
 
     describe('that is open', () => {
       beforeEach(() => {
+        initDropDown.call(this, false, false);
         this.dropdownButtonElement.click();
       });
 
       it('should select a following item on DOWN keypress', () => {
-        expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
+        expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(0);
         let 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');
+          expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1);
+          expect($(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement)).toHaveClass('is-focused');
         });
       });
 
       it('should select a previous item on UP keypress', () => {
-        expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(0);
+        expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(0);
         navigateWithKeys('down', (this.projectsData.length - 1), () => {
-          expect($(FOCUSED_ITEM_SELECTOR, this.dropdownMenuElement).length).toBe(1);
+          expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1);
           let 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');
+            expect($(FOCUSED_ITEM_SELECTOR, this.$dropdownMenuElement).length).toBe(1);
+            expect($(`${ITEM_SELECTOR}:eq(${((this.projectsData.length - 2) - randomIndex)}) a`, this.$dropdownMenuElement)).toHaveClass('is-focused');
           });
         });
       });
@@ -97,7 +111,7 @@
           spyOn(Turbolinks, 'visit').and.stub();
           navigateWithKeys('enter', null, () => {
             expect(this.dropdownContainerElement).not.toHaveClass('open');
-            let link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.dropdownMenuElement);
+            let link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement);
             expect(link).toHaveClass('is-active');
             let linkedLocation = link.attr('href');
             if (linkedLocation && linkedLocation !== '#') expect(Turbolinks.visit).toHaveBeenCalledWith(linkedLocation);
@@ -115,5 +129,42 @@
         expect(this.dropdownContainerElement).not.toHaveClass('open');
       });
     });
+
+    describe('opened and waiting for a remote callback', () => {
+      beforeEach(() => {
+        initDropDown.call(this, true, true);
+        this.dropdownButtonElement.click();
+      });
+
+      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', ()=> {
+        remoteCallback();
+        expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
+      });
+
+      it('should focus on input when opening for the second time', ()=> {
+        remoteCallback();
+        this.dropdownContainerElement.trigger({
+          type: 'keyup',
+          which: ARROW_KEYS.ESC,
+          keyCode: ARROW_KEYS.ESC
+        });
+        this.dropdownButtonElement.click();
+        expect($(document.activeElement)).toEqual($(SEARCH_INPUT_SELECTOR));
+      });
+    });
+
+    describe('input focus with array data', () => {
+      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));
+      });
+    });
   });
 })();
diff --git a/spec/javascripts/gl_field_errors_spec.js.es6 b/spec/javascripts/gl_field_errors_spec.js.es6
new file mode 100644
index 00000000000..0713e30e485
--- /dev/null
+++ b/spec/javascripts/gl_field_errors_spec.js.es6
@@ -0,0 +1,112 @@
+/* eslint-disable */
+//= require jquery
+//= require gl_field_errors
+
+((global) => {
+  fixture.preload('gl_field_errors.html');
+
+  describe('GL Style Field Errors', function() {
+    beforeEach(function() {
+      fixture.load('gl_field_errors.html');
+      const $form = this.$form = $('form.gl-show-field-errors');
+      this.fieldErrors = new global.GlFieldErrors($form);
+    });
+
+    it('should select the correct input elements', function() {
+      expect(this.$form).toBeDefined();
+      expect(this.$form.length).toBe(1);
+      expect(this.fieldErrors).toBeDefined();
+      const inputs = this.fieldErrors.state.inputs;
+      expect(inputs.length).toBe(4);
+    });
+
+    it('should ignore elements with custom error handling', function() {
+      const customErrorFlag = 'gl-field-error-ignore';
+      const customErrorElem = $(`.${customErrorFlag}`);
+
+      expect(customErrorElem.length).toBe(1);
+
+      const customErrors = this.fieldErrors.state.inputs.filter((input) => {
+       return input.inputElement.hasClass(customErrorFlag);
+      });
+      expect(customErrors.length).toBe(0);
+    });
+
+    it('should not show any errors before submit attempt', function() {
+      this.$form.find('.email').val('not-a-valid-email').keyup();
+      this.$form.find('.text-required').val('').keyup();
+      this.$form.find('.alphanumberic').val('?---*').keyup();
+
+      const errorsShown = this.$form.find('.gl-field-error-outline');
+      expect(errorsShown.length).toBe(0);
+    });
+
+    it('should show errors when input valid is submitted', function() {
+      this.$form.find('.email').val('not-a-valid-email').keyup();
+      this.$form.find('.text-required').val('').keyup();
+      this.$form.find('.alphanumberic').val('?---*').keyup();
+
+      this.$form.submit();
+
+      const errorsShown = this.$form.find('.gl-field-error-outline');
+      expect(errorsShown.length).toBe(4);
+    });
+
+    it('should properly track validity state on input after invalid submission attempt', function() {
+      this.$form.submit();
+
+      const emailInputModel = this.fieldErrors.state.inputs[1];
+      const fieldState = emailInputModel.state;
+      const emailInputElement = emailInputModel.inputElement;
+
+      // No input
+      expect(emailInputElement).toHaveClass('gl-field-error-outline');
+      expect(fieldState.empty).toBe(true);
+      expect(fieldState.valid).toBe(false);
+
+      // Then invalid input
+      emailInputElement.val('not-a-valid-email').keyup();
+      expect(emailInputElement).toHaveClass('gl-field-error-outline');
+      expect(fieldState.empty).toBe(false);
+      expect(fieldState.valid).toBe(false);
+
+      // Then valid input
+      emailInputElement.val('email@gitlab.com').keyup();
+      expect(emailInputElement).not.toHaveClass('gl-field-error-outline');
+      expect(fieldState.empty).toBe(false);
+      expect(fieldState.valid).toBe(true);
+
+      // Then invalid input
+      emailInputElement.val('not-a-valid-email').keyup();
+      expect(emailInputElement).toHaveClass('gl-field-error-outline');
+      expect(fieldState.empty).toBe(false);
+      expect(fieldState.valid).toBe(false);
+
+      // Then empty input
+      emailInputElement.val('').keyup();
+      expect(emailInputElement).toHaveClass('gl-field-error-outline');
+      expect(fieldState.empty).toBe(true);
+      expect(fieldState.valid).toBe(false);
+
+      // Then valid input
+      emailInputElement.val('email@gitlab.com').keyup();
+      expect(emailInputElement).not.toHaveClass('gl-field-error-outline');
+      expect(fieldState.empty).toBe(false);
+      expect(fieldState.valid).toBe(true);
+    });
+
+    it('should properly infer error messages', function() {
+      this.$form.submit();
+      const trackedInputs = this.fieldErrors.state.inputs;
+      const inputHasTitle = trackedInputs[1];
+      const hasTitleErrorElem = inputHasTitle.inputElement.siblings('.gl-field-error');
+      const inputNoTitle = trackedInputs[2];
+      const noTitleErrorElem = inputNoTitle.inputElement.siblings('.gl-field-error');
+
+      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 d5401fbb0d1..a406e6cc36a 100644
--- a/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js
+++ b/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable quotes, no-undef, indent, semi, object-curly-spacing, jasmine/no-suite-dupes, vars-on-top, no-var, padded-blocks, spaced-comment, max-len */
 //= require graphs/stat_graph_contributors_graph
 
 describe("ContributorsGraph", function () {
diff --git a/spec/javascripts/graphs/stat_graph_contributors_util_spec.js b/spec/javascripts/graphs/stat_graph_contributors_util_spec.js
index 56970e22e34..96f39abe13e 100644
--- a/spec/javascripts/graphs/stat_graph_contributors_util_spec.js
+++ b/spec/javascripts/graphs/stat_graph_contributors_util_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable quotes, padded-blocks, no-var, camelcase, object-curly-spacing, semi, indent, object-property-newline, comma-dangle, comma-spacing, no-undef, spaced-comment, max-len, key-spacing, vars-on-top, quote-props, no-multi-spaces, max-len */
 //= require graphs/stat_graph_contributors_util
 
 describe("ContributorsStatGraphUtil", function () {
diff --git a/spec/javascripts/graphs/stat_graph_spec.js b/spec/javascripts/graphs/stat_graph_spec.js
index 4b05d401a42..f78573b992b 100644
--- a/spec/javascripts/graphs/stat_graph_spec.js
+++ b/spec/javascripts/graphs/stat_graph_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable quotes, padded-blocks, no-undef, semi */
 //= require graphs/stat_graph
 
 describe("StatGraph", function () {
diff --git a/spec/javascripts/header_spec.js b/spec/javascripts/header_spec.js
new file mode 100644
index 00000000000..d2bcbc37b64
--- /dev/null
+++ b/spec/javascripts/header_spec.js
@@ -0,0 +1,55 @@
+/* eslint-disable space-before-function-paren, padded-blocks, no-var */
+/*= require header */
+/*= require lib/utils/text_utility */
+/*= require jquery */
+
+(function() {
+
+  describe('Header', function() {
+    var todosPendingCount = '.todos-pending-count';
+    var fixtureTemplate = 'header.html';
+
+    function isTodosCountHidden() {
+      return $(todosPendingCount).hasClass('hidden');
+    }
+
+    function triggerToggle(newCount) {
+      $(document).trigger('todo:toggle', newCount);
+    }
+
+    fixture.preload(fixtureTemplate);
+    beforeEach(function() {
+      fixture.load(fixtureTemplate);
+    });
+
+    it('should update todos-pending-count after receiving the todo:toggle event', function() {
+      triggerToggle(5);
+      expect($(todosPendingCount).text()).toEqual('5');
+    });
+
+    it('should hide todos-pending-count when it is 0', function() {
+      triggerToggle(0);
+      expect(isTodosCountHidden()).toEqual(true);
+    });
+
+    it('should show todos-pending-count when it is more than 0', function() {
+      triggerToggle(10);
+      expect(isTodosCountHidden()).toEqual(false);
+    });
+
+    describe('when todos-pending-count is 1000', function() {
+      beforeEach(function() {
+        triggerToggle(1000);
+      });
+
+      it('should show todos-pending-count', function() {
+        expect(isTodosCountHidden()).toEqual(false);
+      });
+
+      it('should add delimiter to todos-pending-count', function() {
+        expect($(todosPendingCount).text()).toEqual('1,000');
+      });
+    });
+  });
+
+}).call(this);
diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js
index 33690c7a5f3..beef46122ab 100644
--- a/spec/javascripts/issue_spec.js
+++ b/spec/javascripts/issue_spec.js
@@ -1,118 +1,163 @@
+/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, no-use-before-define, indent, no-undef, no-trailing-spaces, comma-dangle, padded-blocks, max-len */
 
 /*= require lib/utils/text_utility */
 /*= require issue */
 
 (function() {
+  var INVALID_URL = 'http://goesnowhere.nothing/whereami';
+  var $boxClosed, $boxOpen, $btnClose, $btnReopen;
+
+  fixture.preload('issues/closed-issue.html');
+  fixture.preload('issues/issue-with-task-list.html');
+  fixture.preload('issues/open-issue.html');
+
+  function expectErrorMessage() {
+    var $flashMessage = $('div.flash-alert');
+    expect($flashMessage).toExist();
+    expect($flashMessage).toBeVisible();
+    expect($flashMessage).toHaveText('Unable to update this issue at this time.');
+  }
+
+  function expectIssueState(isIssueOpen) {
+    expectVisibility($boxClosed, !isIssueOpen);
+    expectVisibility($boxOpen, isIssueOpen);
+
+    expectVisibility($btnClose, isIssueOpen);
+    expectVisibility($btnReopen, !isIssueOpen);
+  }
+
+  function expectPendingRequest(req, $triggeredButton) {
+    expect(req.type).toBe('PUT');
+    expect(req.url).toBe($triggeredButton.attr('href'));
+    expect($triggeredButton).toHaveProp('disabled', true);
+  }
+
+  function expectVisibility($element, shouldBeVisible) {
+    if (shouldBeVisible) {
+      expect($element).not.toHaveClass('hidden');
+    } else {
+      expect($element).toHaveClass('hidden');
+    }
+  }
+
+  function findElements() {
+      $boxClosed = $('div.status-box-closed');
+      expect($boxClosed).toExist();
+      expect($boxClosed).toHaveText('Closed');
+
+      $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');
+
+      $btnReopen = $('.btn-reopen.btn-grouped');
+      expect($btnReopen).toExist();
+      expect($btnReopen).toHaveText('Reopen issue');
+  }
+
   describe('Issue', function() {
-    return describe('task lists', function() {
-      fixture.preload('issues_show.html');
+    describe('task lists', function() {
+      fixture.load('issues/issue-with-task-list.html');
       beforeEach(function() {
-        fixture.load('issues_show.html');
-        return this.issue = new Issue();
+        this.issue = new Issue();
       });
+
       it('modifies the Markdown field', function() {
         spyOn(jQuery, 'ajax').and.stub();
         $('input[type=checkbox]').attr('checked', true).trigger('change');
-        return expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
+        expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
       });
-      return it('submits an ajax request on tasklist:changed', function() {
+      
+      it('submits an ajax request on tasklist:changed', function() {
         spyOn(jQuery, 'ajax').and.callFake(function(req) {
           expect(req.type).toBe('PATCH');
-          expect(req.url).toBe('/foo');
-          return expect(req.data.issue.description).not.toBe(null);
+          expect(req.url).toBe('https://fixture.invalid/namespace3/project3/issues/1.json');
+          expect(req.data.issue.description).not.toBe(null);
         });
-        return $('.js-task-list-field').trigger('tasklist:changed');
+
+        $('.js-task-list-field').trigger('tasklist:changed');
       });
     });
   });
 
-  describe('reopen/close issue', function() {
-    fixture.preload('issues_show.html');
+  describe('close issue', function() {
     beforeEach(function() {
-      fixture.load('issues_show.html');
-      return this.issue = new Issue();
+      fixture.load('issues/open-issue.html');
+      findElements();
+      this.issue = new Issue();
+
+      expectIssueState(true);
     });
+
     it('closes an issue', function() {
-      var $btnClose, $btnReopen;
       spyOn(jQuery, 'ajax').and.callFake(function(req) {
-        expect(req.type).toBe('PUT');
-        expect(req.url).toBe('http://gitlab.com/issues/6/close');
-        return req.success({
+        expectPendingRequest(req, $btnClose);
+        req.success({
           id: 34
         });
       });
-      $btnClose = $('a.btn-close');
-      $btnReopen = $('a.btn-reopen');
-      expect($btnReopen).toBeHidden();
-      expect($btnClose.text()).toBe('Close');
-      expect(typeof $btnClose.prop('disabled')).toBe('undefined');
+
       $btnClose.trigger('click');
-      expect($btnReopen).toBeVisible();
-      expect($btnClose).toBeHidden();
-      expect($('div.status-box-closed')).toBeVisible();
-      return expect($('div.status-box-open')).toBeHidden();
+
+      expectIssueState(false);
+      expect($btnClose).toHaveProp('disabled', false);
     });
+
     it('fails to close an issue with success:false', function() {
-      var $btnClose, $btnReopen;
       spyOn(jQuery, 'ajax').and.callFake(function(req) {
-        expect(req.type).toBe('PUT');
-        expect(req.url).toBe('http://goesnowhere.nothing/whereami');
-        return req.success({
+        expectPendingRequest(req, $btnClose);
+        req.success({
           saved: false
         });
       });
-      $btnClose = $('a.btn-close');
-      $btnReopen = $('a.btn-reopen');
-      $btnClose.attr('href', 'http://goesnowhere.nothing/whereami');
-      expect($btnReopen).toBeHidden();
-      expect($btnClose.text()).toBe('Close');
-      expect(typeof $btnClose.prop('disabled')).toBe('undefined');
+
+      $btnClose.attr('href', INVALID_URL);
       $btnClose.trigger('click');
-      expect($btnReopen).toBeHidden();
-      expect($btnClose).toBeVisible();
-      expect($('div.status-box-closed')).toBeHidden();
-      expect($('div.status-box-open')).toBeVisible();
-      expect($('div.flash-alert')).toBeVisible();
-      return expect($('div.flash-alert').text()).toBe('Unable to update this issue at this time.');
+
+      expectIssueState(true);
+      expect($btnClose).toHaveProp('disabled', false);
+      expectErrorMessage();
     });
+
     it('fails to closes an issue with HTTP error', function() {
-      var $btnClose, $btnReopen;
       spyOn(jQuery, 'ajax').and.callFake(function(req) {
-        expect(req.type).toBe('PUT');
-        expect(req.url).toBe('http://goesnowhere.nothing/whereami');
-        return req.error();
+        expectPendingRequest(req, $btnClose);
+        req.error();
       });
-      $btnClose = $('a.btn-close');
-      $btnReopen = $('a.btn-reopen');
-      $btnClose.attr('href', 'http://goesnowhere.nothing/whereami');
-      expect($btnReopen).toBeHidden();
-      expect($btnClose.text()).toBe('Close');
-      expect(typeof $btnClose.prop('disabled')).toBe('undefined');
+
+      $btnClose.attr('href', INVALID_URL);
       $btnClose.trigger('click');
-      expect($btnReopen).toBeHidden();
-      expect($btnClose).toBeVisible();
-      expect($('div.status-box-closed')).toBeHidden();
-      expect($('div.status-box-open')).toBeVisible();
-      expect($('div.flash-alert')).toBeVisible();
-      return expect($('div.flash-alert').text()).toBe('Unable to update this issue at this time.');
+
+      expectIssueState(true);
+      expect($btnClose).toHaveProp('disabled', true);
+      expectErrorMessage();
     });
-    return it('reopens an issue', function() {
-      var $btnClose, $btnReopen;
+  });
+
+  describe('reopen issue', function() {
+    beforeEach(function() {
+      fixture.load('issues/closed-issue.html');
+      findElements();
+      this.issue = new Issue();
+
+      expectIssueState(false);
+    });
+
+    it('reopens an issue', function() {
       spyOn(jQuery, 'ajax').and.callFake(function(req) {
-        expect(req.type).toBe('PUT');
-        expect(req.url).toBe('http://gitlab.com/issues/6/reopen');
-        return req.success({
+        expectPendingRequest(req, $btnReopen);
+        req.success({
           id: 34
         });
       });
-      $btnClose = $('a.btn-close');
-      $btnReopen = $('a.btn-reopen');
-      expect($btnReopen.text()).toBe('Reopen');
+
       $btnReopen.trigger('click');
-      expect($btnReopen).toBeHidden();
-      expect($btnClose).toBeVisible();
-      expect($('div.status-box-open')).toBeVisible();
-      return expect($('div.status-box-closed')).toBeHidden();
+
+      expectIssueState(true);
+      expect($btnReopen).toHaveProp('disabled', false);
     });
   });
 
diff --git a/spec/javascripts/labels_issue_sidebar_spec.js.es6 b/spec/javascripts/labels_issue_sidebar_spec.js.es6
index 840c7b6d015..49687048eb5 100644
--- a/spec/javascripts/labels_issue_sidebar_spec.js.es6
+++ b/spec/javascripts/labels_issue_sidebar_spec.js.es6
@@ -1,3 +1,4 @@
+/* eslint-disable */
 //= require lib/utils/type_utility
 //= require jquery
 //= require bootstrap
@@ -48,9 +49,9 @@
       setTimeout(() => {
         expect($('.dropdown-content a').length).toBe(10);
 
-        $('.dropdow-content a').each((i, $link) => {
-          if (i < 5) {
-            $link.get(0).click();
+        $('.dropdown-content a').each(function (i) {
+          if (i < saveLabelCount) {
+            $(this).get(0).click();
           }
         });
 
@@ -70,9 +71,9 @@
       setTimeout(() => {
         expect($('.dropdown-content a').length).toBe(10);
 
-        $('.dropdow-content a').each((i, $link) => {
-          if (i < 5) {
-            $link.get(0).click();
+        $('.dropdown-content a').each(function (i) {
+          if (i < saveLabelCount) {
+            $(this).get(0).click();
           }
         });
 
@@ -86,4 +87,3 @@
     });
   });
 })();
-
diff --git a/spec/javascripts/line_highlighter_spec.js b/spec/javascripts/line_highlighter_spec.js
index e2789571607..b8b174a2e53 100644
--- a/spec/javascripts/line_highlighter_spec.js
+++ b/spec/javascripts/line_highlighter_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, no-var, no-param-reassign, quotes, prefer-template, no-else-return, new-cap, dot-notation, no-undef, 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 */
 
 /*= require line_highlighter */
 
diff --git a/spec/javascripts/merge_request_spec.js b/spec/javascripts/merge_request_spec.js
index 61830d267a9..cbe2634d3a4 100644
--- a/spec/javascripts/merge_request_spec.js
+++ b/spec/javascripts/merge_request_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, no-return-assign, no-undef, padded-blocks */
 
 /*= require merge_request */
 
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js
index 395032a7416..971222c44e1 100644
--- a/spec/javascripts/merge_request_tabs_spec.js
+++ b/spec/javascripts/merge_request_tabs_spec.js
@@ -1,5 +1,7 @@
+/* eslint-disable space-before-function-paren, no-var, comma-dangle, dot-notation, quotes, no-undef, no-return-assign, no-underscore-dangle, camelcase, padded-blocks, max-len */
 
 /*= require merge_request_tabs */
+//= require breakpoints
 
 (function() {
   describe('MergeRequestTabs', function() {
diff --git a/spec/javascripts/merge_request_widget_spec.js b/spec/javascripts/merge_request_widget_spec.js
index 17b32914ec3..62890f1ca96 100644
--- a/spec/javascripts/merge_request_widget_spec.js
+++ b/spec/javascripts/merge_request_widget_spec.js
@@ -1,5 +1,7 @@
+/* eslint-disable space-before-function-paren, quotes, comma-dangle, dot-notation, indent, quote-props, no-var, padded-blocks, max-len */
 
 /*= require merge_request_widget */
+/*= require lib/utils/datetime_utility */
 
 (function() {
   describe('MergeRequestWidget', function() {
@@ -8,6 +10,7 @@
       window.notify = function() {};
       this.opts = {
         ci_status_url: "http://sampledomain.local/ci/getstatus",
+        ci_environments_status_url: "http://sampledomain.local/ci/getenvironmentsstatus",
         ci_status: "",
         ci_message: {
           normal: "Build {{status}} for \"{{title}}\"",
@@ -20,17 +23,99 @@
         gitlab_icon: "gitlab_logo.png",
         builds_path: "http://sampledomain.local/sampleBuildsPath"
       };
-      this["class"] = new MergeRequestWidget(this.opts);
-      return this.ciStatusData = {
-        "title": "Sample MR title",
-        "sha": "12a34bc5",
-        "status": "success",
-        "coverage": 98
-      };
+      this["class"] = new window.gl.MergeRequestWidget(this.opts);
+    });
+
+    describe('getCIEnvironmentsStatus', function() {
+      beforeEach(function() {
+        this.ciEnvironmentsStatusData = [{
+          created_at: '2016-09-12T13:38:30.636Z',
+          environment_id: 1,
+          environment_name: 'env1',
+          external_url: 'https://test-url.com',
+          external_url_formatted: 'test-url.com'
+        }];
+
+        spyOn(jQuery, 'getJSON').and.callFake(function(req, cb) {
+          cb(this.ciEnvironmentsStatusData);
+        }.bind(this));
+      });
+
+      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();
+       });
+    });
+
+    describe('renderEnvironments', function() {
+      describe('should render correct timeago', function() {
+        beforeEach(function() {
+          this.environments = [{
+            id: 'test-environment-id',
+            url: 'testurl',
+            deployed_at: new Date().toISOString(),
+            deployed_at_formatted: true
+          }];
+        });
+
+        function getTimeagoText(template) {
+          var el = document.createElement('html');
+          el.innerHTML = template;
+          return el.querySelector('.js-environment-timeago').innerText.trim();
+        }
+
+        it('should render less than a minute ago text', function() {
+          spyOn(this.class.$widgetBody, 'before').and.callFake(function(template) {
+            expect(getTimeagoText(template)).toBe('less than a minute ago.');
+          });
+
+          this.class.renderEnvironments(this.environments);
+        });
+
+        it('should render about an hour ago text', function() {
+          var oneHourAgo = new Date();
+          oneHourAgo.setHours(oneHourAgo.getHours() - 1);
+
+          this.environments[0].deployed_at = oneHourAgo.toISOString();
+          spyOn(this.class.$widgetBody, 'before').and.callFake(function(template) {
+            expect(getTimeagoText(template)).toBe('about an hour ago.');
+          });
+
+          this.class.renderEnvironments(this.environments);
+        });
+
+        it('should render about 2 hours ago text', function() {
+          var twoHoursAgo = new Date();
+          twoHoursAgo.setHours(twoHoursAgo.getHours() - 2);
+
+          this.environments[0].deployed_at = twoHoursAgo.toISOString();
+          spyOn(this.class.$widgetBody, 'before').and.callFake(function(template) {
+            expect(getTimeagoText(template)).toBe('about 2 hours ago.');
+          });
+
+          this.class.renderEnvironments(this.environments);
+        });
+      });
     });
+
     return describe('getCIStatus', function() {
       beforeEach(function() {
-        return spyOn(jQuery, 'getJSON').and.callFake((function(_this) {
+        this.ciStatusData = {
+          "title": "Sample MR title",
+          "sha": "12a34bc5",
+          "status": "success",
+          "coverage": 98
+        };
+
+        spyOn(jQuery, 'getJSON').and.callFake((function(_this) {
           return function(req, cb) {
             return cb(_this.ciStatusData);
           };
@@ -61,10 +146,10 @@
         this["class"].getCIStatus(false);
         return expect(spy).not.toHaveBeenCalled();
       });
-      return it('should not display a notification on the first check after the widget has been created', function() {
+      it('should not display a notification on the first check after the widget has been created', function() {
         var spy;
         spy = spyOn(window, 'notify');
-        this["class"] = new MergeRequestWidget(this.opts);
+        this["class"] = new window.gl.MergeRequestWidget(this.opts);
         this["class"].getCIStatus(true);
         return expect(spy).not.toHaveBeenCalled();
       });
diff --git a/spec/javascripts/new_branch_spec.js b/spec/javascripts/new_branch_spec.js
index f09596bd36d..8828970d984 100644
--- a/spec/javascripts/new_branch_spec.js
+++ b/spec/javascripts/new_branch_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, one-var, no-var, one-var-declaration-per-line, no-return-assign, no-undef, quotes, padded-blocks, max-len */
 
 /*= require jquery-ui/autocomplete */
 /*= require new_branch_form */
diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js
index a588f403dd5..51f2ae8bcbd 100644
--- a/spec/javascripts/notes_spec.js
+++ b/spec/javascripts/notes_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, no-unused-expressions, no-undef, no-var, object-shorthand, comma-dangle, semi, padded-blocks, max-len */
 /*= require notes */
 /*= require autosize */
 /*= require gl_form */
diff --git a/spec/javascripts/pretty_time_spec.js.es6 b/spec/javascripts/pretty_time_spec.js.es6
new file mode 100644
index 00000000000..2e12d45f7a7
--- /dev/null
+++ b/spec/javascripts/pretty_time_spec.js.es6
@@ -0,0 +1,134 @@
+//= require lib/utils/pretty_time
+
+(() => {
+  const PrettyTime = gl.PrettyTime;
+
+  describe('PrettyTime methods', function () {
+    describe('parseSeconds', function () {
+      it('should correctly parse a negative value', function () {
+        const parser = PrettyTime.parseSeconds;
+
+        const zeroSeconds = parser(-1000);
+
+        expect(zeroSeconds.minutes).toBe(16);
+        expect(zeroSeconds.hours).toBe(0);
+        expect(zeroSeconds.days).toBe(0);
+        expect(zeroSeconds.weeks).toBe(0);
+      });
+
+      it('should correctly parse a zero value', function () {
+        const parser = PrettyTime.parseSeconds;
+
+        const zeroSeconds = parser(0);
+
+        expect(zeroSeconds.minutes).toBe(0);
+        expect(zeroSeconds.hours).toBe(0);
+        expect(zeroSeconds.days).toBe(0);
+        expect(zeroSeconds.weeks).toBe(0);
+      });
+
+      it('should correctly parse a small non-zero second values', function () {
+        const parser = PrettyTime.parseSeconds;
+
+        const subOneMinute = parser(10);
+
+        expect(subOneMinute.minutes).toBe(0);
+        expect(subOneMinute.hours).toBe(0);
+        expect(subOneMinute.days).toBe(0);
+        expect(subOneMinute.weeks).toBe(0);
+
+        const aboveOneMinute = parser(100);
+
+        expect(aboveOneMinute.minutes).toBe(1);
+        expect(aboveOneMinute.hours).toBe(0);
+        expect(aboveOneMinute.days).toBe(0);
+        expect(aboveOneMinute.weeks).toBe(0);
+
+        const manyMinutes = parser(1000);
+
+        expect(manyMinutes.minutes).toBe(16);
+        expect(manyMinutes.hours).toBe(0);
+        expect(manyMinutes.days).toBe(0);
+        expect(manyMinutes.weeks).toBe(0);
+      });
+
+      it('should correctly parse large second values', function () {
+        const parser = PrettyTime.parseSeconds;
+
+        const aboveOneHour = parser(4800);
+
+        expect(aboveOneHour.minutes).toBe(20);
+        expect(aboveOneHour.hours).toBe(1);
+        expect(aboveOneHour.days).toBe(0);
+        expect(aboveOneHour.weeks).toBe(0);
+
+        const aboveOneDay = parser(110000);
+
+        expect(aboveOneDay.minutes).toBe(33);
+        expect(aboveOneDay.hours).toBe(6);
+        expect(aboveOneDay.days).toBe(3);
+        expect(aboveOneDay.weeks).toBe(0);
+
+        const aboveOneWeek = parser(25000000);
+
+        expect(aboveOneWeek.minutes).toBe(26);
+        expect(aboveOneWeek.hours).toBe(0);
+        expect(aboveOneWeek.days).toBe(3);
+        expect(aboveOneWeek.weeks).toBe(173);
+      });
+    });
+
+    describe('stringifyTime', function () {
+      it('should stringify values with all non-zero units', function () {
+        const timeObject = {
+          weeks: 1,
+          days: 4,
+          hours: 7,
+          minutes: 20,
+        };
+
+        const timeString = PrettyTime.stringifyTime(timeObject);
+
+        expect(timeString).toBe('1w 4d 7h 20m');
+      });
+
+      it('should stringify values with some non-zero units', function () {
+        const timeObject = {
+          weeks: 0,
+          days: 4,
+          hours: 0,
+          minutes: 20,
+        };
+
+        const timeString = PrettyTime.stringifyTime(timeObject);
+
+        expect(timeString).toBe('4d 20m');
+      });
+
+      it('should stringify values with no non-zero units', function () {
+        const timeObject = {
+          weeks: 0,
+          days: 0,
+          hours: 0,
+          minutes: 0,
+        };
+
+        const timeString = PrettyTime.stringifyTime(timeObject);
+
+        expect(timeString).toBe('0m');
+      });
+    });
+
+    describe('abbreviateTime', function () {
+      it('should abbreviate stringified times for weeks', function () {
+        const fullTimeString = '1w 3d 4h 5m';
+        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');
+      });
+    });
+  });
+})(window.gl || (window.gl = {}));
diff --git a/spec/javascripts/project_title_spec.js b/spec/javascripts/project_title_spec.js
index 51eb12b41d4..49211a6b852 100644
--- a/spec/javascripts/project_title_spec.js
+++ b/spec/javascripts/project_title_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, no-unused-expressions, no-return-assign, no-undef, no-param-reassign, no-var, new-cap, wrap-iife, no-unused-vars, quotes, padded-blocks, max-len */
 
 /*= require bootstrap */
 /*= require select2 */
diff --git a/spec/javascripts/right_sidebar_spec.js b/spec/javascripts/right_sidebar_spec.js
index c937a4706f7..83ebbd63f3a 100644
--- a/spec/javascripts/right_sidebar_spec.js
+++ b/spec/javascripts/right_sidebar_spec.js
@@ -1,7 +1,10 @@
+/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, new-parens, no-undef, no-return-assign, new-cap, vars-on-top, semi, padded-blocks, max-len */
 
 /*= require right_sidebar */
 /*= require jquery */
-/*= require jquery.cookie */
+/*= require js.cookie */
+
+/*= require extensions/jquery.js */
 
 (function() {
   var $aside, $icon, $labelsIcon, $page, $toggle, assertSidebarState;
@@ -55,12 +58,27 @@
       $labelsIcon.click();
       return assertSidebarState('expanded');
     });
-    return it('should collapse when the icon arrow clicked while it is floating on page', function() {
+    it('should collapse when the icon arrow clicked while it is floating on page', function() {
       $labelsIcon.click();
       assertSidebarState('expanded');
       $toggle.click();
       return assertSidebarState('collapsed');
     });
+
+    it('should broadcast todo:toggle event when add todo clicked', function() {
+      spyOn(jQuery, 'ajax').and.callFake(function() {
+        var d = $.Deferred();
+        var response = fixture.load('todos.json');
+        d.resolve(response);
+        return d.promise();
+      });
+
+      var todoToggleSpy = spyOnEvent(document, 'todo:toggle');
+
+      $('.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 00d9fc1302a..1b7f642d59e 100644
--- a/spec/javascripts/search_autocomplete_spec.js
+++ b/spec/javascripts/search_autocomplete_spec.js
@@ -1,3 +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 */
 
 /*= require gl_dropdown */
 /*= require search_autocomplete */
@@ -5,6 +6,8 @@
 /*= require lib/utils/common_utils */
 /*= require lib/utils/type_utility */
 /*= require fuzzaldrin-plus */
+/*= require turbolinks */
+/*= require jquery.turbolinks */
 
 (function() {
   var addBodyAttributes, assertLinks, dashboardIssuesPath, dashboardMRsPath, groupIssuesPath, groupMRsPath, groupName, mockDashboardOptions, mockGroupOptions, mockProjectOptions, projectIssuesPath, projectMRsPath, projectName, userId, widget;
@@ -112,7 +115,7 @@
     fixture.preload('search_autocomplete.html');
     beforeEach(function() {
       fixture.load('search_autocomplete.html');
-      return widget = new SearchAutocomplete;
+      return widget = new gl.SearchAutocomplete;
     });
     it('should show Dashboard specific dropdown menu', function() {
       var list;
@@ -138,7 +141,7 @@
       list = widget.wrap.find('.dropdown-menu').find('ul');
       return assertLinks(list, projectIssuesPath, projectMRsPath);
     });
-    return it('should not show category related menu if there is text in the input', function() {
+    it('should not show category related menu if there is text in the input', function() {
       var link, list;
       addBodyAttributes('project');
       mockProjectOptions();
@@ -148,6 +151,23 @@
       link = "a[href='" + projectIssuesPath + "/?assignee_id=" + userId + "']";
       return expect(list.find(link).length).toBe(0);
     });
+    return it('should not submit the search form when selecting an autocomplete row with the keyboard', function() {
+      var ENTER = 13;
+      var DOWN = 40;
+      addBodyAttributes();
+      mockDashboardOptions(true);
+      var submitSpy = spyOnEvent('form', 'submit');
+      widget.searchInput.focus();
+      widget.wrap.trigger($.Event('keydown', { which: DOWN }));
+      var enterKeyEvent = $.Event('keydown', { which: ENTER });
+      widget.searchInput.trigger(enterKeyEvent);
+      // This does not currently catch failing behavior. For security reasons,
+      // browsers will not trigger default behavior (form submit, in this
+      // example) on JavaScript-created keypresses.
+      expect(submitSpy).not.toHaveBeenTriggered();
+      // Does a worse job at capturing the intent of the test, but works.
+      expect(enterKeyEvent.isDefaultPrevented()).toBe(true);
+    });
   });
 
 }).call(this);
diff --git a/spec/javascripts/shortcuts_issuable_spec.js b/spec/javascripts/shortcuts_issuable_spec.js
index 04ccf246052..7d36d79b687 100644
--- a/spec/javascripts/shortcuts_issuable_spec.js
+++ b/spec/javascripts/shortcuts_issuable_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, no-return-assign, no-undef, no-var, quotes, padded-blocks, max-len */
 
 /*= require shortcuts_issuable */
 
diff --git a/spec/javascripts/smart_interval_spec.js.es6 b/spec/javascripts/smart_interval_spec.js.es6
new file mode 100644
index 00000000000..651d1f0f975
--- /dev/null
+++ b/spec/javascripts/smart_interval_spec.js.es6
@@ -0,0 +1,159 @@
+//= require jquery
+//= require smart_interval
+
+(() => {
+  const DEFAULT_MAX_INTERVAL = 100;
+  const DEFAULT_STARTING_INTERVAL = 5;
+  const DEFAULT_SHORT_TIMEOUT = 75;
+  const DEFAULT_LONG_TIMEOUT = 1000;
+  const DEFAULT_INCREMENT_FACTOR = 2;
+
+  function createDefaultSmartInterval(config) {
+    const defaultParams = {
+      callback: () => {},
+      startingInterval: DEFAULT_STARTING_INTERVAL,
+      maxInterval: DEFAULT_MAX_INTERVAL,
+      incrementByFactorOf: DEFAULT_INCREMENT_FACTOR,
+      delayStartBy: 0,
+      lazyStart: false,
+    };
+
+    if (config) {
+      _.extend(defaultParams, config);
+    }
+
+    return new gl.SmartInterval(defaultParams);
+  }
+
+  describe('SmartInterval', function () {
+    describe('Increment Interval', function () {
+      beforeEach(function () {
+        this.smartInterval = createDefaultSmartInterval();
+      });
+
+      it('should increment the interval delay', function (done) {
+        const interval = this.smartInterval;
+        setTimeout(() => {
+          const intervalConfig = this.smartInterval.cfg;
+          const iterationCount = 4;
+          const maxIntervalAfterIterations = intervalConfig.startingInterval *
+            Math.pow(intervalConfig.incrementByFactorOf, (iterationCount - 1)); // 40
+          const currentInterval = interval.getCurrentInterval();
+
+          // Provide some flexibility for performance of testing environment
+          expect(currentInterval).toBeGreaterThan(intervalConfig.startingInterval);
+          expect(currentInterval <= maxIntervalAfterIterations).toBeTruthy();
+
+          done();
+        }, DEFAULT_SHORT_TIMEOUT); // 4 iterations, increment by 2x = (5 + 10 + 20 + 40)
+      });
+
+      it('should not increment past maxInterval', function (done) {
+        const interval = this.smartInterval;
+
+        setTimeout(() => {
+          const currentInterval = interval.getCurrentInterval();
+          expect(currentInterval).toBe(interval.cfg.maxInterval);
+
+          done();
+        }, DEFAULT_LONG_TIMEOUT);
+      });
+    });
+
+    describe('Public methods', function () {
+      beforeEach(function () {
+        this.smartInterval = createDefaultSmartInterval();
+      });
+
+      it('should cancel an interval', function (done) {
+        const interval = this.smartInterval;
+
+        setTimeout(() => {
+          interval.cancel();
+
+          const intervalId = interval.state.intervalId;
+          const currentInterval = interval.getCurrentInterval();
+          const intervalLowerLimit = interval.cfg.startingInterval;
+
+          expect(intervalId).toBeUndefined();
+          expect(currentInterval).toBe(intervalLowerLimit);
+
+          done();
+        }, DEFAULT_SHORT_TIMEOUT);
+      });
+
+      it('should resume an interval', function (done) {
+        const interval = this.smartInterval;
+
+        setTimeout(() => {
+          interval.cancel();
+
+          interval.resume();
+
+          const intervalId = interval.state.intervalId;
+
+          expect(intervalId).toBeTruthy();
+
+          done();
+        }, DEFAULT_SHORT_TIMEOUT);
+      });
+    });
+
+    describe('DOM Events', function () {
+      beforeEach(function () {
+        // This ensures DOM and DOM events are initialized for these specs.
+        fixture.set('<div></div>');
+
+        this.smartInterval = createDefaultSmartInterval();
+      });
+
+      it('should pause when page is not visible', function (done) {
+        const interval = this.smartInterval;
+
+        setTimeout(() => {
+          expect(interval.state.intervalId).toBeTruthy();
+
+          // simulates triggering of visibilitychange event
+          interval.state.pageVisibility = 'hidden';
+          interval.handleVisibilityChange();
+
+          expect(interval.state.intervalId).toBeUndefined();
+          done();
+        }, DEFAULT_SHORT_TIMEOUT);
+      });
+
+      it('should resume when page is becomes visible at the previous interval', function (done) {
+        const interval = this.smartInterval;
+
+        setTimeout(() => {
+          expect(interval.state.intervalId).toBeTruthy();
+
+          // simulates triggering of visibilitychange event
+          interval.state.pageVisibility = 'hidden';
+          interval.handleVisibilityChange();
+
+          expect(interval.state.intervalId).toBeUndefined();
+
+          // simulates triggering of visibilitychange event
+          interval.state.pageVisibility = 'visible';
+          interval.handleVisibilityChange();
+
+          expect(interval.state.intervalId).toBeTruthy();
+
+          done();
+        }, DEFAULT_SHORT_TIMEOUT);
+      });
+
+      it('should cancel on page unload', function (done) {
+        const interval = this.smartInterval;
+
+        setTimeout(() => {
+          $(document).trigger('page:before-unload');
+          expect(interval.state.intervalId).toBeUndefined();
+          expect(interval.getCurrentInterval()).toBe(interval.cfg.startingInterval);
+          done();
+        }, DEFAULT_SHORT_TIMEOUT);
+      });
+    });
+  });
+})(window.gl || (window.gl = {}));
diff --git a/spec/javascripts/spec_helper.js b/spec/javascripts/spec_helper.js
index 8801c297887..8a64de4dd43 100644
--- a/spec/javascripts/spec_helper.js
+++ b/spec/javascripts/spec_helper.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren */
 // PhantomJS (Teaspoons default driver) doesn't have support for
 // Function.prototype.bind, which has caused confusion.  Use this polyfill to
 // avoid the confusion.
@@ -27,7 +28,7 @@
 // setTimeout(Teaspoon.execute, 1000)
 // Matching files
 // By default Teaspoon will look for files that match
-// _spec.{js,js.coffee,.coffee}. Add a filename_spec.js file in your spec path
+// _spec.{js,js.es6}. Add a filename_spec.js file in your spec path
 // and it'll be included in the default suite automatically. If you want to
 // customize suites, check out the configuration in teaspoon_env.rb
 // Manifest
diff --git a/spec/javascripts/subbable_resource_spec.js.es6 b/spec/javascripts/subbable_resource_spec.js.es6
new file mode 100644
index 00000000000..df395296791
--- /dev/null
+++ b/spec/javascripts/subbable_resource_spec.js.es6
@@ -0,0 +1,65 @@
+/* eslint-disable */
+//= vue
+//= vue-resource
+//= require jquery
+//= require subbable_resource
+
+/*
+* Test that each rest verb calls the publish and subscribe function and passes the correct value back
+*
+*
+* */
+((global) => {
+  describe('Subbable Resource', function () {
+    describe('PubSub', function () {
+      beforeEach(function () {
+        this.MockResource = new global.SubbableResource('https://example.com');
+      });
+      it('should successfully add a single subscriber', function () {
+        const callback = () => {};
+        this.MockResource.subscribe(callback);
+
+        expect(this.MockResource.subscribers.length).toBe(1);
+        expect(this.MockResource.subscribers[0]).toBe(callback);
+      });
+
+      it('should successfully add multiple subscribers', function () {
+        const callbackOne = () => {};
+        const callbackTwo = () => {};
+        const callbackThree = () => {};
+
+        this.MockResource.subscribe(callbackOne);
+        this.MockResource.subscribe(callbackTwo);
+        this.MockResource.subscribe(callbackThree);
+
+        expect(this.MockResource.subscribers.length).toBe(3);
+      });
+
+      it('should successfully publish an update to a single subscriber', function () {
+        const state = { myprop: 1 };
+
+        const callbacks = {
+          one: (data) => expect(data.myprop).toBe(2),
+          two: (data) => expect(data.myprop).toBe(2),
+          three: (data) => expect(data.myprop).toBe(2)
+        };
+
+        const spyOne = spyOn(callbacks, 'one');
+        const spyTwo = spyOn(callbacks, 'two');
+        const spyThree = spyOn(callbacks, 'three');
+
+        this.MockResource.subscribe(callbacks.one);
+        this.MockResource.subscribe(callbacks.two);
+        this.MockResource.subscribe(callbacks.three);
+
+        state.myprop++;
+
+        this.MockResource.publish(state);
+
+        expect(spyOne).toHaveBeenCalled();
+        expect(spyTwo).toHaveBeenCalled();
+        expect(spyThree).toHaveBeenCalled();
+      });
+    });
+  });
+})(window.gl || (window.gl = {}));
diff --git a/spec/javascripts/syntax_highlight_spec.js b/spec/javascripts/syntax_highlight_spec.js
index 4e5dd1e59bf..ac411f6c306 100644
--- a/spec/javascripts/syntax_highlight_spec.js
+++ b/spec/javascripts/syntax_highlight_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, no-var, no-return-assign, quotes, padded-blocks */
 
 /*= require syntax_highlight */
 
diff --git a/spec/javascripts/u2f/authenticate_spec.js b/spec/javascripts/u2f/authenticate_spec.js
index 7ce3884f844..944df6d23f7 100644
--- a/spec/javascripts/u2f/authenticate_spec.js
+++ b/spec/javascripts/u2f/authenticate_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, new-parens, no-undef, quotes, comma-dangle, no-var, one-var, one-var-declaration-per-line, padded-blocks, max-len */
 
 /*= require u2f/authenticate */
 /*= require u2f/util */
@@ -21,7 +22,7 @@
       setupButton = this.container.find("#js-login-u2f-device");
       setupMessage = this.container.find("p");
       expect(setupMessage.text()).toContain('Insert your security key');
-      expect(setupButton.text()).toBe('Login Via U2F Device');
+      expect(setupButton.text()).toBe('Sign in via U2F device');
       setupButton.trigger('click');
       inProgressMessage = this.container.find("p");
       expect(inProgressMessage.text()).toContain("Trying to communicate with your device");
diff --git a/spec/javascripts/u2f/mock_u2f_device.js b/spec/javascripts/u2f/mock_u2f_device.js
index ca91a716ba3..1459f968c3d 100644
--- a/spec/javascripts/u2f/mock_u2f_device.js
+++ b/spec/javascripts/u2f/mock_u2f_device.js
@@ -1,3 +1,4 @@
+/* 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 */
 (function() {
   var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
diff --git a/spec/javascripts/u2f/register_spec.js b/spec/javascripts/u2f/register_spec.js
index 01d6b7a8961..0c73c5772bd 100644
--- a/spec/javascripts/u2f/register_spec.js
+++ b/spec/javascripts/u2f/register_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, new-parens, no-undef, quotes, no-var, one-var, one-var-declaration-per-line, comma-dangle, padded-blocks, max-len */
 
 /*= require u2f/register */
 /*= require u2f/util */
diff --git a/spec/javascripts/vue_common_components/commit_spec.js.es6 b/spec/javascripts/vue_common_components/commit_spec.js.es6
new file mode 100644
index 00000000000..0e3b82967c1
--- /dev/null
+++ b/spec/javascripts/vue_common_components/commit_spec.js.es6
@@ -0,0 +1,126 @@
+//= require vue_common_component/commit
+
+describe('Commit component', () => {
+  let props;
+  let component;
+
+  it('should render a code-fork icon if it does not represent a tag', () => {
+    fixture.set('<div class="test-commit-container"></div>');
+    component = new window.gl.CommitComponent({
+      el: document.querySelector('.test-commit-container'),
+      propsData: {
+        tag: false,
+        ref: {
+          name: 'master',
+          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
+        },
+        commit_url: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+        short_sha: 'b7836edd',
+        title: 'Commit message',
+        author: {
+          avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png',
+          web_url: 'https://gitlab.com/jschatz1',
+          username: 'jschatz1',
+        },
+      },
+    });
+
+    expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-code-fork');
+  });
+
+  describe('Given all the props', () => {
+    beforeEach(() => {
+      fixture.set('<div class="test-commit-container"></div>');
+
+      props = {
+        tag: true,
+        ref: {
+          name: 'master',
+          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
+        },
+        commit_url: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+        short_sha: 'b7836edd',
+        title: 'Commit message',
+        author: {
+          avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png',
+          web_url: 'https://gitlab.com/jschatz1',
+          username: 'jschatz1',
+        },
+      };
+
+      component = new window.gl.CommitComponent({
+        el: document.querySelector('.test-commit-container'),
+        propsData: props,
+      });
+    });
+
+    it('should render a tag icon if it represents a tag', () => {
+      expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-tag');
+    });
+
+    it('should render a link to the ref url', () => {
+      expect(component.$el.querySelector('.branch-name').getAttribute('href')).toEqual(props.ref.ref_url);
+    });
+
+    it('should render the ref name', () => {
+      expect(component.$el.querySelector('.branch-name').textContent).toContain(props.ref.name);
+    });
+
+    it('should render the commit short sha with a link to the commit url', () => {
+      expect(component.$el.querySelector('.commit-id').getAttribute('href')).toEqual(props.commit_url);
+      expect(component.$el.querySelector('.commit-id').textContent).toContain(props.short_sha);
+    });
+
+    describe('Given commit title and author props', () => {
+      it('Should render a link to the author profile', () => {
+        expect(
+          component.$el.querySelector('.commit-title .avatar-image-container').getAttribute('href')
+        ).toEqual(props.author.web_url);
+      });
+
+      it('Should render the author avatar with title and alt attributes', () => {
+        expect(
+          component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('title')
+        ).toContain(props.author.username);
+        expect(
+          component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('alt')
+        ).toContain(`${props.author.username}'s avatar`);
+      });
+    });
+
+    it('should render the commit title', () => {
+      expect(
+        component.$el.querySelector('a.commit-row-message').getAttribute('href')
+      ).toEqual(props.commit_url);
+      expect(
+        component.$el.querySelector('a.commit-row-message').textContent
+      ).toContain(props.title);
+    });
+  });
+
+  describe('When commit title is not provided', () => {
+    it('Should render default message', () => {
+      fixture.set('<div class="test-commit-container"></div>');
+      props = {
+        tag: false,
+        ref: {
+          name: 'master',
+          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
+        },
+        commit_url: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+        short_sha: 'b7836edd',
+        title: null,
+        author: {},
+      };
+
+      component = new window.gl.CommitComponent({
+        el: document.querySelector('.test-commit-container'),
+        propsData: props,
+      });
+
+      expect(
+        component.$el.querySelector('.commit-title span').textContent
+      ).toContain('Cant find HEAD commit for this branch');
+    });
+  });
+});
diff --git a/spec/javascripts/zen_mode_spec.js b/spec/javascripts/zen_mode_spec.js
index 0c1266800d7..a18e8aee9b1 100644
--- a/spec/javascripts/zen_mode_spec.js
+++ b/spec/javascripts/zen_mode_spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, no-undef, object-shorthand, comma-dangle, no-return-assign, new-cap, padded-blocks, max-len */
 
 /*= require zen_mode */