diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-08-16 16:36:29 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-08-16 16:36:29 +0300 |
commit | 322dfb45c75b820cbc0b930d6e62fdfa39247996 (patch) | |
tree | 27745e8187e90ec8c0c13fae27bdbcea0ed3d293 /spec | |
parent | 682c6ad931a67f7bbc76baad21af0d3b5d5b449d (diff) |
Creates a vue component for the top bar with controllers in job log view
Diffstat (limited to 'spec')
-rw-r--r-- | spec/javascripts/jobs/components/job_log_controllers_spec.js | 217 |
1 files changed, 217 insertions, 0 deletions
diff --git a/spec/javascripts/jobs/components/job_log_controllers_spec.js b/spec/javascripts/jobs/components/job_log_controllers_spec.js new file mode 100644 index 00000000000..416dfab8a48 --- /dev/null +++ b/spec/javascripts/jobs/components/job_log_controllers_spec.js @@ -0,0 +1,217 @@ +import Vue from 'vue'; +import component from '~/jobs/components/job_log_controllers.vue'; +import mountComponent from '../../helpers/vue_mount_component_helper'; + +describe('Job log controllers', () => { + const Component = Vue.extend(component); + let vm; + + afterEach(() => { + vm.$destroy(); + }); + + describe('Truncate information', () => { + + beforeEach(() => { + vm = mountComponent(Component, { + rawTracePath: '/raw', + canEraseJob: true, + size: 511952, + canScrollToTop: true, + canScrollToBottom: true, + }); + }); + + 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'); + }); + + }); + + 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, + }); + + 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, + size: 511952, + canScrollToTop: true, + canScrollToBottom: true, + }); + + expect(vm.$el.querySelector('.js-raw-link-controller')).toBeNull(); + }); + }); + + describe('when is erasable', () => { + beforeEach(() => { + vm = mountComponent(Component, { + rawTracePath: '/raw', + canEraseJob: true, + size: 511952, + canScrollToTop: true, + canScrollToBottom: true, + }); + }); + + it('renders erase job button', () => { + 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, + size: 511952, + canScrollToTop: true, + canScrollToBottom: true, + }); + + expect(vm.$el.querySelector('.js-erase-link')).toBeNull(); + }); + }); + }); + + describe('scroll buttons', () => { + describe('scroll top button', () => { + describe('when user can scroll top', () => { + beforeEach(() => { + vm = mountComponent(Component, { + rawTracePath: '/raw', + canEraseJob: true, + size: 511952, + canScrollToTop: true, + canScrollToBottom: true, + }); + }); + + it('renders enabled scroll top button', () => { + expect(vm.$el.querySelector('.js-scroll-top').getAttribute('disabled')).toBeNull(); + }); + + it('emits scrollJobLogTop event on click', () => { + spyOn(vm, '$emit'); + vm.$el.querySelector('.js-scroll-top').click(); + + expect(vm.$emit).toHaveBeenCalledWith('scrollJobLogTop'); + }); + }); + + describe('when user can not scroll top', () => { + beforeEach(() => { + vm = mountComponent(Component, { + rawTracePath: '/raw', + canEraseJob: true, + size: 511952, + canScrollToTop: false, + canScrollToBottom: true, + }); + }); + + it('renders disabled scroll top button', () => { + expect(vm.$el.querySelector('.js-scroll-top').getAttribute('disabled')).toEqual('disabled'); + }); + + it('does not emit scrollJobLogTop event on click', () => { + spyOn(vm, '$emit'); + vm.$el.querySelector('.js-scroll-top').click(); + + expect(vm.$emit).not.toHaveBeenCalledWith('scrollJobLogTop'); + }); + }); + }); + + describe('scroll bottom button', () => { + describe('when user can scroll bottom', () => { + beforeEach(() => { + vm = mountComponent(Component, { + rawTracePath: '/raw', + canEraseJob: true, + size: 511952, + canScrollToTop: true, + canScrollToBottom: true, + }); + }); + + it('renders enabled scroll bottom button', () => { + expect(vm.$el.querySelector('.js-scroll-bottom').getAttribute('disabled')).toBeNull(); + }); + + it('emits scrollJobLogBottom event on click', () => { + spyOn(vm, '$emit'); + vm.$el.querySelector('.js-scroll-bottom').click(); + + expect(vm.$emit).toHaveBeenCalledWith('scrollJobLogBottom'); + }); + }); + + describe('when user can not scroll bottom', () => { + beforeEach(() => { + vm = mountComponent(Component, { + rawTracePath: '/raw', + canEraseJob: true, + size: 511952, + canScrollToTop: true, + canScrollToBottom: false, + }); + }); + + it('renders disabled scroll bottom button', () => { + expect(vm.$el.querySelector('.js-scroll-bottom').getAttribute('disabled')).toEqual('disabled'); + + }); + + it('does not emit scrollJobLogBottom event on click', () => { + spyOn(vm, '$emit'); + vm.$el.querySelector('.js-scroll-bottom').click(); + + expect(vm.$emit).not.toHaveBeenCalledWith('scrollJobLogBottom'); + }); + }); + }); + }); +}); + |