Updates Vue job components to match new API

4 files changed, 86 insertions, 97 deletions

diff --git a/spec/javascripts/jobs/components/empty_state_spec.js b/spec/javascripts/jobs/components/empty_state_spec.js
index dcc2b3d8a20..872cc1e3864 100644
--- a/spec/javascripts/jobs/components/empty_state_spec.js
+++ b/spec/javascripts/jobs/components/empty_state_spec.js
@@ -66,7 +66,7 @@ describe('Empty State', () => {
         ...props,
         content,
         action: {
-          link: 'runner',
+          path: 'runner',
           title: 'Check runner',
           method: 'post',
         },
diff --git a/spec/javascripts/jobs/components/erased_block_spec.js b/spec/javascripts/jobs/components/erased_block_spec.js
index a4ae0c7c81e..8e0433d3fb7 100644
--- a/spec/javascripts/jobs/components/erased_block_spec.js
+++ b/spec/javascripts/jobs/components/erased_block_spec.js
@@ -18,9 +18,10 @@ describe('Erased block', () => {
   describe('with job erased by user', () => {
     beforeEach(() => {
       vm = mountComponent(Component, {
-        erasedByUser: true,
-        username: 'root',
-        linkToUser: 'gitlab.com/root',
+        user: {
+          username: 'root',
+          web_url: 'gitlab.com/root',
+        },
         erasedAt,
       });
     });
@@ -40,7 +41,6 @@ describe('Erased block', () => {
   describe('with erased job', () => {
     beforeEach(() => {
       vm = mountComponent(Component, {
-        erasedByUser: false,
         erasedAt,
       });
     });
diff --git a/spec/javascripts/jobs/components/job_log_controllers_spec.js b/spec/javascripts/jobs/components/job_log_controllers_spec.js
index 416dfab8a48..099aca602c4 100644
--- a/spec/javascripts/jobs/components/job_log_controllers_spec.js
+++ b/spec/javascripts/jobs/components/job_log_controllers_spec.js
@@ -10,50 +10,51 @@ describe('Job log controllers', () => {
     vm.$destroy();
   });
 
-  describe('Truncate information', () => {
+  const props = {
+    rawPath: '/raw',
+    erasePath: '/erase',
+    size: 511952,
+    isScrollTopDisabled: false,
+    isScrollBottomDisabled: false,
+    isScrollingDown: true,
+    isTraceSizeVisible: true,
+  };
 
-    beforeEach(() => {
-      vm = mountComponent(Component, {
-        rawTracePath: '/raw',
-        canEraseJob: true,
-        size: 511952,
-        canScrollToTop: true,
-        canScrollToBottom: true,
+  describe('Truncate information', () => {
+    describe('with isTraceSizeVisible', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, props);
+      });
+      it('renders size information', () => {
+        expect(vm.$el.querySelector('.js-truncated-info').textContent).toContain('499.95 KiB');
       });
-    });
-
-    it('renders size information', () => {
-      expect(vm.$el.querySelector('.js-truncated-info').textContent).toContain('499.95 KiB');
-    });
 
-    it('renders link to raw trace', () => {
-      expect(vm.$el.querySelector('.js-raw-link').getAttribute('href')).toEqual('/raw');
+      it('renders link to raw trace', () => {
+        expect(vm.$el.querySelector('.js-raw-link').getAttribute('href')).toEqual('/raw');
+      });
     });
-
   });
 
   describe('links section', () => {
     describe('with raw trace path', () => {
       it('renders raw trace link', () => {
-        vm = mountComponent(Component, {
-          rawTracePath: '/raw',
-          canEraseJob: true,
-          size: 511952,
-          canScrollToTop: true,
-          canScrollToBottom: true,
-        });
+        vm = mountComponent(Component, props);
 
-        expect(vm.$el.querySelector('.js-raw-link-controller').getAttribute('href')).toEqual('/raw');
+        expect(vm.$el.querySelector('.js-raw-link-controller').getAttribute('href')).toEqual(
+          '/raw',
+        );
       });
     });
 
     describe('without raw trace path', () => {
       it('does not render raw trace link', () => {
         vm = mountComponent(Component, {
-          canEraseJob: true,
+          erasePath: '/erase',
           size: 511952,
-          canScrollToTop: true,
-          canScrollToBottom: true,
+          isScrollTopDisabled: true,
+          isScrollBottomDisabled: true,
+          isScrollingDown: false,
+          isTraceSizeVisible: true,
         });
 
         expect(vm.$el.querySelector('.js-raw-link-controller')).toBeNull();
@@ -62,52 +63,23 @@ describe('Job log controllers', () => {
 
     describe('when is erasable', () => {
       beforeEach(() => {
-        vm = mountComponent(Component, {
-          rawTracePath: '/raw',
-          canEraseJob: true,
-          size: 511952,
-          canScrollToTop: true,
-          canScrollToBottom: true,
-        });
+        vm = mountComponent(Component, props);
       });
 
-      it('renders erase job button', () => {
+      it('renders erase job link', () => {
         expect(vm.$el.querySelector('.js-erase-link')).not.toBeNull();
       });
-
-      describe('on click', () => {
-        describe('when user confirms action', () => {
-          it('emits eraseJob event', () => {
-            spyOn(window, 'confirm').and.returnValue(true);
-            spyOn(vm, '$emit');
-
-            vm.$el.querySelector('.js-erase-link').click();
-
-            expect(vm.$emit).toHaveBeenCalledWith('eraseJob');
-          });
-        });
-
-        describe('when user does not confirm action', () => {
-          it('does not emit eraseJob event', () => {
-            spyOn(window, 'confirm').and.returnValue(false);
-            spyOn(vm, '$emit');
-
-            vm.$el.querySelector('.js-erase-link').click();
-
-            expect(vm.$emit).not.toHaveBeenCalledWith('eraseJob');
-          });
-        });
-      });
     });
 
     describe('when it is not erasable', () => {
       it('does not render erase button', () => {
         vm = mountComponent(Component, {
-          rawTracePath: '/raw',
-          canEraseJob: false,
+          rawPath: '/raw',
           size: 511952,
-          canScrollToTop: true,
-          canScrollToBottom: true,
+          isScrollTopDisabled: true,
+          isScrollBottomDisabled: true,
+          isScrollingDown: false,
+          isTraceSizeVisible: true,
         });
 
         expect(vm.$el.querySelector('.js-erase-link')).toBeNull();
@@ -119,13 +91,7 @@ describe('Job log controllers', () => {
     describe('scroll top button', () => {
       describe('when user can scroll top', () => {
         beforeEach(() => {
-          vm = mountComponent(Component, {
-            rawTracePath: '/raw',
-            canEraseJob: true,
-            size: 511952,
-            canScrollToTop: true,
-            canScrollToBottom: true,
-          });
+          vm = mountComponent(Component, props);
         });
 
         it('renders enabled scroll top button', () => {
@@ -143,16 +109,20 @@ describe('Job log controllers', () => {
       describe('when user can not scroll top', () => {
         beforeEach(() => {
           vm = mountComponent(Component, {
-            rawTracePath: '/raw',
-            canEraseJob: true,
+            rawPath: '/raw',
+            erasePath: '/erase',
             size: 511952,
-            canScrollToTop: false,
-            canScrollToBottom: true,
+            isScrollTopDisabled: true,
+            isScrollBottomDisabled: false,
+            isScrollingDown: false,
+            isTraceSizeVisible: true,
           });
         });
 
         it('renders disabled scroll top button', () => {
-          expect(vm.$el.querySelector('.js-scroll-top').getAttribute('disabled')).toEqual('disabled');
+          expect(vm.$el.querySelector('.js-scroll-top').getAttribute('disabled')).toEqual(
+            'disabled',
+          );
         });
 
         it('does not emit scrollJobLogTop event on click', () => {
@@ -167,13 +137,7 @@ describe('Job log controllers', () => {
     describe('scroll bottom button', () => {
       describe('when user can scroll bottom', () => {
         beforeEach(() => {
-          vm = mountComponent(Component, {
-            rawTracePath: '/raw',
-            canEraseJob: true,
-            size: 511952,
-            canScrollToTop: true,
-            canScrollToBottom: true,
-          });
+          vm = mountComponent(Component, props);
         });
 
         it('renders enabled scroll bottom button', () => {
@@ -191,17 +155,20 @@ describe('Job log controllers', () => {
       describe('when user can not scroll bottom', () => {
         beforeEach(() => {
           vm = mountComponent(Component, {
-            rawTracePath: '/raw',
-            canEraseJob: true,
+            rawPath: '/raw',
+            erasePath: '/erase',
             size: 511952,
-            canScrollToTop: true,
-            canScrollToBottom: false,
+            isScrollTopDisabled: false,
+            isScrollBottomDisabled: true,
+            isScrollingDown: false,
+            isTraceSizeVisible: true,
           });
         });
 
         it('renders disabled scroll bottom button', () => {
-          expect(vm.$el.querySelector('.js-scroll-bottom').getAttribute('disabled')).toEqual('disabled');
-
+          expect(vm.$el.querySelector('.js-scroll-bottom').getAttribute('disabled')).toEqual(
+            'disabled',
+          );
         });
 
         it('does not emit scrollJobLogBottom event on click', () => {
@@ -211,7 +178,29 @@ describe('Job log controllers', () => {
           expect(vm.$emit).not.toHaveBeenCalledWith('scrollJobLogBottom');
         });
       });
+
+      describe('while isScrollingDown is true', () => {
+        it('renders animate class for the scroll down button', () => {
+          vm = mountComponent(Component, props);
+
+          expect(vm.$el.querySelector('.js-scroll-bottom').className).toContain('animate');
+        });
+      });
+
+      describe('while isScrollingDown is false', () => {
+        it('does not render animate class for the scroll down button', () => {
+          vm = mountComponent(Component, {
+            rawPath: '/raw',
+            erasePath: '/erase',
+            size: 511952,
+            isScrollTopDisabled: true,
+            isScrollBottomDisabled: false,
+            isScrollingDown: false,
+            isTraceSizeVisible: true,
+          });
+          expect(vm.$el.querySelector('.js-scroll-bottom').className).not.toContain('animate');
+        });
+      });
     });
   });
 });
-
diff --git a/spec/javascripts/jobs/components/job_log_spec.js b/spec/javascripts/jobs/components/job_log_spec.js
index 6a5b375a26c..1011512360d 100644
--- a/spec/javascripts/jobs/components/job_log_spec.js
+++ b/spec/javascripts/jobs/components/job_log_spec.js
@@ -15,7 +15,7 @@ describe('Job Log', () => {
   it('renders provided trace', () => {
     vm = mountComponent(Component, {
       trace,
-      isReceivingBuildTrace: true,
+      isComplete: true,
     });
 
     expect(vm.$el.querySelector('code').textContent).toContain('Running with gitlab-runner 11.1.0 (081978aa)');
@@ -25,7 +25,7 @@ describe('Job Log', () => {
     it('renders animation', () => {
       vm = mountComponent(Component, {
         trace,
-        isReceivingBuildTrace: true,
+        isComplete: true,
       });
 
       expect(vm.$el.querySelector('.js-log-animation')).not.toBeNull();
@@ -36,7 +36,7 @@ describe('Job Log', () => {
     it('does not render animation', () => {
       vm = mountComponent(Component, {
         trace,
-        isReceivingBuildTrace: false,
+        isComplete: false,
       });
 
       expect(vm.$el.querySelector('.js-log-animation')).toBeNull();