diff options
Diffstat (limited to 'spec/frontend/sidebar/lock')
-rw-r--r-- | spec/frontend/sidebar/lock/edit_form_buttons_spec.js | 31 | ||||
-rw-r--r-- | spec/frontend/sidebar/lock/lock_issue_sidebar_spec.js | 99 |
2 files changed, 130 insertions, 0 deletions
diff --git a/spec/frontend/sidebar/lock/edit_form_buttons_spec.js b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js new file mode 100644 index 00000000000..66f9237ce97 --- /dev/null +++ b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js @@ -0,0 +1,31 @@ +import { shallowMount } from '@vue/test-utils'; +import EditFormButtons from '~/sidebar/components/lock/edit_form_buttons.vue'; + +describe('EditFormButtons', () => { + let wrapper; + + const mountComponent = propsData => shallowMount(EditFormButtons, { propsData }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it('displays "Unlock" when locked', () => { + wrapper = mountComponent({ + isLocked: true, + updateLockedAttribute: () => {}, + }); + + expect(wrapper.text()).toContain('Unlock'); + }); + + it('displays "Lock" when unlocked', () => { + wrapper = mountComponent({ + isLocked: false, + updateLockedAttribute: () => {}, + }); + + expect(wrapper.text()).toContain('Lock'); + }); +}); diff --git a/spec/frontend/sidebar/lock/lock_issue_sidebar_spec.js b/spec/frontend/sidebar/lock/lock_issue_sidebar_spec.js new file mode 100644 index 00000000000..00997326d87 --- /dev/null +++ b/spec/frontend/sidebar/lock/lock_issue_sidebar_spec.js @@ -0,0 +1,99 @@ +import Vue from 'vue'; +import { mockTracking, triggerEvent } from 'helpers/tracking_helper'; +import lockIssueSidebar from '~/sidebar/components/lock/lock_issue_sidebar.vue'; + +describe('LockIssueSidebar', () => { + let vm1; + let vm2; + + beforeEach(() => { + const Component = Vue.extend(lockIssueSidebar); + + const mediator = { + service: { + update: Promise.resolve(true), + }, + + store: { + isLockDialogOpen: false, + }, + }; + + vm1 = new Component({ + propsData: { + isLocked: true, + isEditable: true, + mediator, + issuableType: 'issue', + }, + }).$mount(); + + vm2 = new Component({ + propsData: { + isLocked: false, + isEditable: false, + mediator, + issuableType: 'merge_request', + }, + }).$mount(); + }); + + it('shows if locked and/or editable', () => { + expect(vm1.$el.innerHTML.includes('Edit')).toBe(true); + + expect(vm1.$el.innerHTML.includes('Locked')).toBe(true); + + expect(vm2.$el.innerHTML.includes('Unlocked')).toBe(true); + }); + + it('displays the edit form when editable', done => { + expect(vm1.isLockDialogOpen).toBe(false); + + vm1.$el.querySelector('.lock-edit').click(); + + expect(vm1.isLockDialogOpen).toBe(true); + + vm1.$nextTick(() => { + expect(vm1.$el.innerHTML.includes('Unlock this issue?')).toBe(true); + + done(); + }); + }); + + it('tracks an event when "Edit" is clicked', () => { + const spy = mockTracking('_category_', vm1.$el, jest.spyOn); + triggerEvent('.lock-edit'); + + expect(spy).toHaveBeenCalledWith('_category_', 'click_edit_button', { + label: 'right_sidebar', + property: 'lock_issue', + }); + }); + + it('displays the edit form when opened from collapsed state', done => { + expect(vm1.isLockDialogOpen).toBe(false); + + vm1.$el.querySelector('.sidebar-collapsed-icon').click(); + + expect(vm1.isLockDialogOpen).toBe(true); + + setImmediate(() => { + expect(vm1.$el.innerHTML.includes('Unlock this issue?')).toBe(true); + + done(); + }); + }); + + it('does not display the edit form when opened from collapsed state if not editable', done => { + expect(vm2.isLockDialogOpen).toBe(false); + + vm2.$el.querySelector('.sidebar-collapsed-icon').click(); + + Vue.nextTick() + .then(() => { + expect(vm2.isLockDialogOpen).toBe(false); + }) + .then(done) + .catch(done.fail); + }); +}); |