import Vue from 'vue'; import headerComponent from '~/vue_merge_request_widget/components/mr_widget_header'; const createComponent = (mr) => { const Component = Vue.extend(headerComponent); return new Component({ el: document.createElement('div'), propsData: { mr }, }); }; describe('MRWidgetHeader', () => { describe('props', () => { it('should have props', () => { const { mr } = headerComponent.props; expect(mr.type instanceof Object).toBeTruthy(); expect(mr.required).toBeTruthy(); }); }); describe('computed', () => { let vm; beforeEach(() => { vm = createComponent({ divergedCommitsCount: 12, sourceBranch: 'mr-widget-refactor', sourceBranchLink: '/foo/bar/mr-widget-refactor', targetBranch: 'master', }); }); it('shouldShowCommitsBehindText', () => { expect(vm.shouldShowCommitsBehindText).toBeTruthy(); vm.mr.divergedCommitsCount = 0; expect(vm.shouldShowCommitsBehindText).toBeFalsy(); }); it('commitsText', () => { expect(vm.commitsText).toEqual('commits'); vm.mr.divergedCommitsCount = 1; expect(vm.commitsText).toEqual('commit'); }); }); describe('template', () => { let vm; let el; let mr; const sourceBranchPath = '/foo/bar/mr-widget-refactor'; beforeEach(() => { mr = { divergedCommitsCount: 12, sourceBranch: 'mr-widget-refactor', sourceBranchLink: `<a href="${sourceBranchPath}">mr-widget-refactor</a>`, sourceBranchRemoved: false, targetBranchPath: 'foo/bar/commits-path', targetBranchTreePath: 'foo/bar/tree/path', targetBranch: 'master', isOpen: true, emailPatchesPath: '/mr/email-patches', plainDiffPath: '/mr/plainDiffPath', }; vm = createComponent(mr); el = vm.$el; }); it('should render template elements correctly', () => { expect(el.classList.contains('mr-source-target')).toBeTruthy(); const sourceBranchLink = el.querySelectorAll('.label-branch')[0]; const targetBranchLink = el.querySelectorAll('.label-branch')[1]; const commitsCount = el.querySelector('.diverged-commits-count'); expect(sourceBranchLink.textContent).toContain(mr.sourceBranch); expect(targetBranchLink.textContent).toContain(mr.targetBranch); expect(sourceBranchLink.querySelector('a').getAttribute('href')).toEqual(sourceBranchPath); expect(targetBranchLink.querySelector('a').getAttribute('href')).toEqual(mr.targetBranchTreePath); expect(commitsCount.textContent).toContain('12 commits behind'); expect(commitsCount.querySelector('a').getAttribute('href')).toEqual(mr.targetBranchPath); expect(el.textContent).toContain('Check out branch'); expect(el.querySelectorAll('.dropdown li a')[0].getAttribute('href')).toEqual(mr.emailPatchesPath); expect(el.querySelectorAll('.dropdown li a')[1].getAttribute('href')).toEqual(mr.plainDiffPath); expect(el.querySelector('a[href="#modal_merge_info"]').getAttribute('disabled')).toBeNull(); }); it('should not have right action links if the MR state is not open', (done) => { vm.mr.isOpen = false; Vue.nextTick(() => { expect(el.textContent).not.toContain('Check out branch'); expect(el.querySelectorAll('.dropdown li a').length).toEqual(0); done(); }); }); it('should not render diverged commits count if the MR has no diverged commits', (done) => { vm.mr.divergedCommitsCount = null; Vue.nextTick(() => { expect(el.textContent).not.toContain('commits behind'); expect(el.querySelectorAll('.diverged-commits-count').length).toEqual(0); done(); }); }); it('should disable check out branch button if source branch has been removed', (done) => { vm.mr.sourceBranchRemoved = true; Vue.nextTick() .then(() => { expect(el.querySelector('a[href="#modal_merge_info"]').getAttribute('disabled')).toBe('disabled'); done(); }) .catch(done.fail); }); }); });