import Vue from 'vue'; import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper'; import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue'; import { createStore } from '~/mr_notes/stores'; import { imageDiffDiscussions } from '../mock_data/diff_discussions'; describe('Diffs image diff overlay component', () => { const dimensions = { width: 100, height: 200, }; let Component; let vm; function createComponent(props = {}, extendStore = () => {}) { const store = createStore(); extendStore(store); vm = createComponentWithStore(Component, store, { discussions: [...imageDiffDiscussions], fileHash: 'ABC', ...props, }); } beforeAll(() => { Component = Vue.extend(ImageDiffOverlay); }); afterEach(() => { vm.$destroy(); }); it('renders comment badges', () => { createComponent(); spyOn(vm, 'getImageDimensions').and.returnValue(dimensions); vm.$mount(); expect(vm.$el.querySelectorAll('.js-image-badge').length).toBe(2); }); it('renders index of discussion in badge', () => { createComponent(); spyOn(vm, 'getImageDimensions').and.returnValue(dimensions); vm.$mount(); expect(vm.$el.querySelectorAll('.js-image-badge')[0].textContent.trim()).toBe('1'); expect(vm.$el.querySelectorAll('.js-image-badge')[1].textContent.trim()).toBe('2'); }); it('renders icon when showCommentIcon is true', () => { createComponent({ showCommentIcon: true }); spyOn(vm, 'getImageDimensions').and.returnValue(dimensions); vm.$mount(); expect(vm.$el.querySelector('.js-image-badge svg')).not.toBe(null); }); it('sets badge comment positions', () => { createComponent(); spyOn(vm, 'getImageDimensions').and.returnValue(dimensions); vm.$mount(); expect(vm.$el.querySelectorAll('.js-image-badge')[0].style.left).toBe('10px'); expect(vm.$el.querySelectorAll('.js-image-badge')[0].style.top).toBe('10px'); expect(vm.$el.querySelectorAll('.js-image-badge')[1].style.left).toBe('5px'); expect(vm.$el.querySelectorAll('.js-image-badge')[1].style.top).toBe('5px'); }); it('renders single badge for discussion object', () => { createComponent({ discussions: { ...imageDiffDiscussions[0], }, }); spyOn(vm, 'getImageDimensions').and.returnValue(dimensions); vm.$mount(); expect(vm.$el.querySelectorAll('.js-image-badge').length).toBe(1); }); it('dispatches openDiffFileCommentForm when clicking overlay', () => { createComponent({ canComment: true }); spyOn(vm, 'getImageDimensions').and.returnValue(dimensions); vm.$mount(); spyOn(vm.$store, 'dispatch').and.stub(); vm.$el.querySelector('.js-add-image-diff-note-button').click(); expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/openDiffFileCommentForm', { fileHash: 'ABC', x: 0, y: 0, width: 100, height: 200, }); }); describe('toggle discussion', () => { it('disables buttons when shouldToggleDiscussion is false', () => { createComponent({ shouldToggleDiscussion: false }); spyOn(vm, 'getImageDimensions').and.returnValue(dimensions); vm.$mount(); expect(vm.$el.querySelector('.js-image-badge').hasAttribute('disabled')).toBe(true); }); it('dispatches toggleDiscussion when clicking image badge', () => { createComponent(); spyOn(vm, 'getImageDimensions').and.returnValue(dimensions); vm.$mount(); spyOn(vm.$store, 'dispatch').and.stub(); vm.$el.querySelector('.js-image-badge').click(); expect(vm.$store.dispatch).toHaveBeenCalledWith('toggleDiscussion', { discussionId: '1' }); }); }); describe('comment form', () => { beforeEach(() => { createComponent({}, store => { store.state.diffs.commentForms.push({ fileHash: 'ABC', x: 20, y: 10, }); }); spyOn(vm, 'getImageDimensions').and.returnValue(dimensions); vm.$mount(); }); it('renders comment form badge', () => { expect(vm.$el.querySelector('.comment-indicator')).not.toBe(null); }); it('sets comment form badge position', () => { expect(vm.$el.querySelector('.comment-indicator').style.left).toBe('20px'); expect(vm.$el.querySelector('.comment-indicator').style.top).toBe('10px'); }); }); });