Fix broken tests.

Changes after review

4 files changed, 67 insertions, 78 deletions

diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index a813647e1ca..49cff2e9498 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -1,6 +1,8 @@
-/* eslint-disable func-names, wrap-iife, no-use-before-define, consistent-return */
+/* eslint-disable func-names, wrap-iife, no-use-before-define,
+consistent-return, prefer-rest-params */
 /* global Breakpoints */
 $(() => {
+  const bind = function (fn, me) { return function () { return fn.apply(me, arguments); }; };
   const AUTO_SCROLL_OFFSET = 75;
   const DOWN_BUILD_TRACE = '#down-build-trace';
 
@@ -19,6 +21,8 @@ $(() => {
       this.buildStage = this.options.buildStage;
       this.$document = $(document);
 
+      this.updateDropdown = bind(this.updateDropdown, this);
+
       this.$body = $('body');
       this.$buildTrace = $('#build-trace');
       this.$autoScrollContainer = $('.autoscroll-container');
@@ -41,15 +45,13 @@ $(() => {
       this.updateStageDropdownText(this.buildStage);
       this.sidebarOnResize();
 
-      // this.initAffixTruncatedInfo = _.bind(this.initAffixTruncatedInfo, this);
-
       this.$document
         .off('click', '.js-sidebar-build-toggle')
         .on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
 
       this.$document
         .off('click', '.stage-item')
-        .on('click', '.stage-item', this.updateDropdown.bind(this));
+        .on('click', '.stage-item', this.updateDropdown);
 
       this.$document.on('scroll', this.initScrollMonitor.bind(this));
 
@@ -74,14 +76,8 @@ $(() => {
         .on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
     };
 
-    Build.prototype.location = function () {
-      return window.location.href.split('#')[0];
-    };
-
     Build.prototype.invokeBuildTrace = function () {
-      if (this.location() === this.pageUrl) {
-        return this.getBuildTrace();
-      }
+      return this.getBuildTrace();
     };
 
     Build.prototype.getBuildTrace = function () {
@@ -102,7 +98,6 @@ $(() => {
             $buildContainer.append(log.html);
           } else {
             $buildContainer.html(log.html);
-
             if (log.truncated) {
               $('.js-truncated-info-size').html(` ${log.size} `);
               this.$truncatedInfo.removeClass('hidden');
@@ -112,17 +107,7 @@ $(() => {
             }
           }
 
-          if (log.status !== this.buildStatus) {
-            let pageUrl = this.pageUrl;
-
-            if (this.$autoScrollStatus.data('state') === 'enabled') {
-              pageUrl += DOWN_BUILD_TRACE;
-            }
-
-            gl.utils.visitUrl(pageUrl);
-          } else {
-            this.checkAutoscroll();
-          }
+          this.checkAutoscroll();
 
           if (!log.complete) {
             Build.timeout = setTimeout(() => {
@@ -132,7 +117,15 @@ $(() => {
             this.$buildRefreshAnimation.remove();
           }
 
-          return this.initScrollMonitor();
+          if (log.status !== this.buildStatus) {
+            let pageUrl = this.pageUrl;
+
+            if (this.$autoScrollStatus.data('state') === 'enabled') {
+              pageUrl += DOWN_BUILD_TRACE;
+            }
+
+            gl.utils.visitUrl(pageUrl);
+          }
         }),
         error: () => {
           this.$buildRefreshAnimation.remove();
@@ -197,9 +190,9 @@ $(() => {
           this.$autoScrollContainer.hide();
           this.$autoScrollStatusText.removeClass('animate');
         } else {
-          this.$autoScrollContainer.css(
-            { top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET },
-          ).show();
+          this.$autoScrollContainer.css({
+            top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET,
+          }).show();
           this.$autoScrollStatusText.addClass('animate');
         }
       } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) &&
@@ -221,9 +214,9 @@ $(() => {
         this.$scrollBottomBtn.hide();
 
         // Show and Reposition Autoscroll Status Indicator
-        this.$autoScrollContainer.css(
-          { top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET },
-        ).show();
+        this.$autoScrollContainer.css({
+          top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET,
+        }).show();
         this.$autoScrollStatusText.addClass('animate');
       } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) &&
         gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
@@ -282,7 +275,7 @@ $(() => {
 
     Build.prototype.populateJobs = function (stage) {
       $('.build-job').hide();
-      $(`.build-job[data-stage="${stage}"`).show();
+      $(`.build-job[data-stage="${stage}"]`).show();
     };
 
     Build.prototype.updateStageDropdownText = function (stage) {
@@ -308,7 +301,11 @@ $(() => {
     Build.prototype.initAffixTruncatedInfo = function () {
       const offsetTop = this.$buildTrace.offset().top;
 
-      this.$truncatedInfo.affix({ offset: { top: offsetTop } });
+      this.$truncatedInfo.affix({
+        offset: {
+          top: offsetTop,
+        },
+      });
     };
 
     return Build;
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 5436d938718..889b257fc73 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -64,24 +64,18 @@
     background-color: $black-transparent;
     height: 45px;
 
-    p {
-      margin: 0;
-      padding: 0;
+    &.affix {
+      top: 0;
     }
 
     // with sidebar
     &.affix.sidebar-expanded {
-      position: fixed;
-      top: 0;
       right: 312px;
       left: 22px;
     }
 
     // without sidebar
     &.affix.sidebar-collapsed {
-      position: fixed;
-      top: 0;
-      margin: 0;
       right: 20px;
       left: 20px;
     }
diff --git a/app/views/projects/builds/show.html.haml b/app/views/projects/builds/show.html.haml
index 390cd750e39..465eac2b6fd 100644
--- a/app/views/projects/builds/show.html.haml
+++ b/app/views/projects/builds/show.html.haml
@@ -74,7 +74,7 @@
           .js-truncated-info.truncated-info.hidden
             %span<
               Showing last
-              %span.js-truncated-info-size>
+              %span.js-truncated-info-size><
               Kb of log
           %code.bash.js-build-output
           .build-loader-animation.js-build-refresh
diff --git a/spec/javascripts/build_spec.js b/spec/javascripts/build_spec.js
index fe7f3d2e9c4..aa02067ae85 100644
--- a/spec/javascripts/build_spec.js
+++ b/spec/javascripts/build_spec.js
@@ -64,45 +64,19 @@ describe('Build', () => {
       });
     });
 
-    describe('initial build trace', () => {
-      beforeEach(() => {
-        new Build();
-      });
-
-      it('displays the initial build trace', () => {
-        expect($.ajax.calls.count()).toBe(1);
-        const [{ url, dataType, success, context }] = $.ajax.calls.argsFor(0);
-        expect(url).toBe(`${BUILD_URL}.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', () => {
-        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', () => {
       beforeEach(function () {
-        $('.js-build-options').data('buildStatus', 'running');
         this.build = new Build();
-        spyOn(this.build, 'location').and.returnValue(BUILD_URL);
       });
 
       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($.ajax.calls.count()).toBe(1);
+
+        let [{ url, dataType, success, context, data }] = $.ajax.calls.argsFor(0);
         expect(url).toBe(
-          `${BUILD_URL}/trace.json?state=`,
+          `${BUILD_URL}/trace.json`,
         );
         expect(dataType).toBe('json');
         expect(success).toEqual(jasmine.any(Function));
@@ -112,6 +86,7 @@ describe('Build', () => {
           status: 'running',
           state: 'newstate',
           append: true,
+          complete: false,
         });
 
         expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
@@ -119,10 +94,12 @@ describe('Build', () => {
 
         jasmine.clock().tick(4001);
 
-        expect($.ajax.calls.count()).toBe(3);
-        [{ url, dataType, success, context }] = $.ajax.calls.argsFor(2);
-        expect(url).toBe(`${BUILD_URL}/trace.json?state=newstate`);
+        expect($.ajax.calls.count()).toBe(2);
+
+        [{ url, dataType, success, context, data }] = $.ajax.calls.argsFor(1);
+        expect(url).toBe(`${BUILD_URL}/trace.json`);
         expect(dataType).toBe('json');
+        expect(data.state).toBe('newstate');
         expect(success).toEqual(jasmine.any(Function));
 
         success.call(context, {
@@ -130,6 +107,7 @@ describe('Build', () => {
           status: 'running',
           state: 'finalstate',
           append: true,
+          complete: true,
         });
 
         expect($('#build-trace .js-build-output').text()).toMatch(/UpdateMore/);
@@ -138,17 +116,18 @@ describe('Build', () => {
 
       it('replaces the entire build trace', () => {
         jasmine.clock().tick(4001);
-        let [{ success, context }] = $.ajax.calls.argsFor(1);
+        let [{ success, context }] = $.ajax.calls.argsFor(0);
         success.call(context, {
           html: '<span>Update</span>',
           status: 'running',
-          append: true,
+          append: false,
+          complete: false,
         });
 
         expect($('#build-trace .js-build-output').text()).toMatch(/Update/);
 
         jasmine.clock().tick(4001);
-        [{ success, context }] = $.ajax.calls.argsFor(2);
+        [{ success, context }] = $.ajax.calls.argsFor(1);
         success.call(context, {
           html: '<span>Different</span>',
           status: 'running',
@@ -159,15 +138,34 @@ describe('Build', () => {
         expect($('#build-trace .js-build-output').text()).toMatch(/Different/);
       });
 
+      it('shows information about truncated log', () => {
+        jasmine.clock().tick(4001);
+        const [{ success, context }] = $.ajax.calls.argsFor(0);
+
+        success.call(context, {
+          html: '<span>Update</span>',
+          status: 'success',
+          append: false,
+          truncated: true,
+          size: '50',
+        });
+
+        expect(
+          $('#build-trace .js-truncated-info').text().trim(),
+        ).toContain('Showing last 50 Kb of log');
+        expect($('#build-trace .js-truncated-info-size').text()).toMatch('50');
+      });
+
       it('reloads the page when the build is done', () => {
         spyOn(gl.utils, 'visitUrl');
 
         jasmine.clock().tick(4001);
-        const [{ success, context }] = $.ajax.calls.argsFor(1);
+        const [{ success, context }] = $.ajax.calls.argsFor(0);
         success.call(context, {
           html: '<span>Final</span>',
           status: 'passed',
           append: true,
+          complete: true,
         });
 
         expect(gl.utils.visitUrl).toHaveBeenCalledWith(BUILD_URL);