debian-mirror-gitlab/spec/frontend/diffs/components/image_diff_overlay_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

142 lines
3.8 KiB
JavaScript
Raw Normal View History

2020-11-24 15:15:51 +05:30
import { GlIcon } from '@gitlab/ui';
2022-04-04 11:22:00 +05:30
import { mount } from '@vue/test-utils';
2020-04-22 19:07:51 +05:30
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 = {
2022-03-02 08:16:31 +05:30
width: 99.9,
height: 199.5,
2020-04-22 19:07:51 +05:30
};
let wrapper;
let dispatch;
const getAllImageBadges = () => wrapper.findAll('.js-image-badge');
function createComponent(props = {}, extendStore = () => {}) {
const store = createStore();
extendStore(store);
dispatch = jest.spyOn(store, 'dispatch').mockImplementation();
2022-04-04 11:22:00 +05:30
wrapper = mount(ImageDiffOverlay, {
2020-04-22 19:07:51 +05:30
store,
2021-03-08 18:12:59 +05:30
parentComponent: {
data() {
return dimensions;
},
},
2020-04-22 19:07:51 +05:30
propsData: {
discussions: [...imageDiffDiscussions],
fileHash: 'ABC',
2021-02-22 17:27:13 +05:30
renderedWidth: 200,
renderedHeight: 200,
2020-04-22 19:07:51 +05:30
...props,
},
});
}
afterEach(() => {
wrapper.destroy();
});
it('renders comment badges', () => {
createComponent();
expect(getAllImageBadges()).toHaveLength(2);
});
it('renders index of discussion in badge', () => {
createComponent();
const imageBadges = getAllImageBadges();
2021-03-08 18:12:59 +05:30
expect(imageBadges.at(0).text().trim()).toBe('1');
expect(imageBadges.at(1).text().trim()).toBe('2');
2020-04-22 19:07:51 +05:30
});
it('renders icon when showCommentIcon is true', () => {
createComponent({ showCommentIcon: true });
2020-11-24 15:15:51 +05:30
expect(wrapper.find(GlIcon).exists()).toBe(true);
2020-04-22 19:07:51 +05:30
});
it('sets badge comment positions', () => {
createComponent();
const imageBadges = getAllImageBadges();
2021-02-22 17:27:13 +05:30
expect(imageBadges.at(0).attributes('style')).toBe('left: 10%; top: 5%;');
expect(imageBadges.at(1).attributes('style')).toBe('left: 5%; top: 2.5%;');
2020-04-22 19:07:51 +05:30
});
it('renders single badge for discussion object', () => {
createComponent({
discussions: {
...imageDiffDiscussions[0],
},
});
expect(getAllImageBadges()).toHaveLength(1);
});
it('dispatches openDiffFileCommentForm when clicking overlay', () => {
createComponent({ canComment: true });
2022-03-02 08:16:31 +05:30
wrapper.find('.js-add-image-diff-note-button').trigger('click', { offsetX: 1.2, offsetY: 3.8 });
2020-04-22 19:07:51 +05:30
expect(dispatch).toHaveBeenCalledWith('diffs/openDiffFileCommentForm', {
fileHash: 'ABC',
2022-03-02 08:16:31 +05:30
x: 1,
y: 4,
2020-04-22 19:07:51 +05:30
width: 100,
height: 200,
2022-03-02 08:16:31 +05:30
xPercent: expect.any(Number),
yPercent: expect.any(Number),
2020-04-22 19:07:51 +05:30
});
2022-03-02 08:16:31 +05:30
const { xPercent, yPercent } = dispatch.mock.calls[0][1];
expect(xPercent).toBeCloseTo(0.6);
expect(yPercent).toBeCloseTo(1.9);
2020-04-22 19:07:51 +05:30
});
describe('toggle discussion', () => {
const getImageBadge = () => wrapper.find('.js-image-badge');
it('disables buttons when shouldToggleDiscussion is false', () => {
createComponent({ shouldToggleDiscussion: false });
expect(getImageBadge().attributes('disabled')).toEqual('disabled');
});
it('dispatches toggleDiscussion when clicking image badge', () => {
createComponent();
getImageBadge().trigger('click');
expect(dispatch).toHaveBeenCalledWith('toggleDiscussion', {
discussionId: '1',
});
});
});
describe('comment form', () => {
const getCommentIndicator = () => wrapper.find('.comment-indicator');
beforeEach(() => {
2021-03-08 18:12:59 +05:30
createComponent({ canComment: true }, (store) => {
2020-04-22 19:07:51 +05:30
store.state.diffs.commentForms.push({
fileHash: 'ABC',
x: 20,
y: 10,
2021-02-22 17:27:13 +05:30
xPercent: 10,
yPercent: 10,
2020-04-22 19:07:51 +05:30
});
});
});
it('renders comment form badge', () => {
expect(getCommentIndicator().exists()).toBe(true);
});
it('sets comment form badge position', () => {
2021-02-22 17:27:13 +05:30
expect(getCommentIndicator().attributes('style')).toBe('left: 10%; top: 10%;');
2020-04-22 19:07:51 +05:30
});
});
});