diff options
Diffstat (limited to 'spec/frontend/sidebar/lock/issuable_lock_form_spec.js')
-rw-r--r-- | spec/frontend/sidebar/lock/issuable_lock_form_spec.js | 133 |
1 files changed, 133 insertions, 0 deletions
diff --git a/spec/frontend/sidebar/lock/issuable_lock_form_spec.js b/spec/frontend/sidebar/lock/issuable_lock_form_spec.js new file mode 100644 index 00000000000..ab1423a9bbb --- /dev/null +++ b/spec/frontend/sidebar/lock/issuable_lock_form_spec.js @@ -0,0 +1,133 @@ +import { shallowMount } from '@vue/test-utils'; +import { mockTracking, triggerEvent } from 'helpers/tracking_helper'; +import IssuableLockForm from '~/sidebar/components/lock/issuable_lock_form.vue'; +import EditForm from '~/sidebar/components/lock/edit_form.vue'; +import createStore from '~/notes/stores'; +import { createStore as createMrStore } from '~/mr_notes/stores'; +import { ISSUABLE_TYPE_ISSUE, ISSUABLE_TYPE_MR } from './constants'; + +describe('IssuableLockForm', () => { + let wrapper; + let store; + let issuableType; // Either ISSUABLE_TYPE_ISSUE or ISSUABLE_TYPE_MR + + const setIssuableType = pageType => { + issuableType = pageType; + }; + + const findSidebarCollapseIcon = () => wrapper.find('[data-testid="sidebar-collapse-icon"]'); + const findLockStatus = () => wrapper.find('[data-testid="lock-status"]'); + const findEditLink = () => wrapper.find('[data-testid="edit-link"]'); + const findEditForm = () => wrapper.find(EditForm); + + const initStore = isLocked => { + if (issuableType === ISSUABLE_TYPE_ISSUE) { + store = createStore(); + store.getters.getNoteableData.targetType = 'issue'; + } else { + store = createMrStore(); + } + store.getters.getNoteableData.discussion_locked = isLocked; + }; + + const createComponent = ({ props = {} }) => { + wrapper = shallowMount(IssuableLockForm, { + store, + propsData: { + isEditable: true, + ...props, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe.each` + pageType + ${ISSUABLE_TYPE_ISSUE} | ${ISSUABLE_TYPE_MR} + `('In $pageType page', ({ pageType }) => { + beforeEach(() => { + setIssuableType(pageType); + }); + + describe.each` + isLocked + ${false} | ${true} + `(`renders for isLocked = $isLocked`, ({ isLocked }) => { + beforeEach(() => { + initStore(isLocked); + createComponent({}); + }); + + it('shows the lock status', () => { + expect(findLockStatus().text()).toBe(isLocked ? 'Locked' : 'Unlocked'); + }); + + describe('edit form', () => { + let isEditable; + beforeEach(() => { + isEditable = false; + createComponent({ props: { isEditable } }); + }); + + describe('when not editable', () => { + it('does not display the edit form when opened if not editable', () => { + expect(findEditForm().exists()).toBe(false); + findSidebarCollapseIcon().trigger('click'); + + return wrapper.vm.$nextTick().then(() => { + expect(findEditForm().exists()).toBe(false); + }); + }); + }); + + describe('when editable', () => { + beforeEach(() => { + isEditable = true; + createComponent({ props: { isEditable } }); + }); + + it('shows the editable status', () => { + expect(findEditLink().exists()).toBe(isEditable); + expect(findEditLink().text()).toBe('Edit'); + }); + + describe("when 'Edit' is clicked", () => { + it('displays the edit form when editable', () => { + expect(findEditForm().exists()).toBe(false); + findEditLink().trigger('click'); + + return wrapper.vm.$nextTick().then(() => { + expect(findEditForm().exists()).toBe(true); + }); + }); + + it('tracks the event ', () => { + const spy = mockTracking('_category_', wrapper.element, jest.spyOn); + triggerEvent(findEditLink().element); + + expect(spy).toHaveBeenCalledWith('_category_', 'click_edit_button', { + label: 'right_sidebar', + property: 'lock_issue', + }); + }); + }); + + describe('When sidebar is collapsed', () => { + it('displays the edit form when opened', () => { + expect(findEditForm().exists()).toBe(false); + findSidebarCollapseIcon().trigger('click'); + + return wrapper.vm.$nextTick().then(() => { + expect(findEditForm().exists()).toBe(true); + }); + }); + }); + }); + }); + }); + }); +}); |