f7df9ddb52
This re-implements image commenting in merge request diffs. This feature was previously lost when the merge request page was refactored into Vue. With this, we create an overlay component. The overlay component handles displaying the comment badges and the comment form badge. Badges are displayed based on the position attribute sent with the discussion. Comment forms for diff files are controlled through a different state property. This is so we don't tie comment forms to diff files directly creating deep nested state. Instead we create a flat array which holds the file hash & the X & Y position of the comment form. Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/48956
78 lines
2.2 KiB
JavaScript
78 lines
2.2 KiB
JavaScript
import Vue from 'vue';
|
|
import DiffWithNote from '~/notes/components/diff_with_note.vue';
|
|
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
|
|
import { createStore } from '~/mr_notes/stores';
|
|
import { mountComponentWithStore } from 'spec/helpers';
|
|
|
|
const discussionFixture = 'merge_requests/diff_discussion.json';
|
|
const imageDiscussionFixture = 'merge_requests/image_diff_discussion.json';
|
|
|
|
describe('diff_with_note', () => {
|
|
let store;
|
|
let vm;
|
|
const diffDiscussionMock = getJSONFixture(discussionFixture)[0];
|
|
const diffDiscussion = convertObjectPropsToCamelCase(diffDiscussionMock);
|
|
const Component = Vue.extend(DiffWithNote);
|
|
const props = {
|
|
discussion: diffDiscussion,
|
|
};
|
|
const selectors = {
|
|
get container() {
|
|
return vm.$refs.fileHolder;
|
|
},
|
|
get diffTable() {
|
|
return this.container.querySelector('.diff-content table');
|
|
},
|
|
get diffRows() {
|
|
return this.container.querySelectorAll('.diff-content .line_holder');
|
|
},
|
|
get noteRow() {
|
|
return this.container.querySelector('.diff-content .notes_holder');
|
|
},
|
|
};
|
|
|
|
beforeEach(() => {
|
|
store = createStore();
|
|
store.replaceState({
|
|
...store.state,
|
|
notes: {
|
|
noteableData: {
|
|
current_user: {},
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
describe('text diff', () => {
|
|
beforeEach(() => {
|
|
vm = mountComponentWithStore(Component, { props, store });
|
|
});
|
|
|
|
it('shows text diff', () => {
|
|
expect(selectors.container).toHaveClass('text-file');
|
|
expect(selectors.diffTable).toExist();
|
|
});
|
|
|
|
it('shows diff lines', () => {
|
|
expect(selectors.diffRows.length).toBe(12);
|
|
});
|
|
|
|
it('shows notes row', () => {
|
|
expect(selectors.noteRow).toExist();
|
|
});
|
|
});
|
|
|
|
describe('image diff', () => {
|
|
beforeEach(() => {
|
|
const imageDiffDiscussionMock = getJSONFixture(imageDiscussionFixture)[0];
|
|
props.discussion = convertObjectPropsToCamelCase(imageDiffDiscussionMock);
|
|
});
|
|
|
|
it('shows image diff', () => {
|
|
vm = mountComponentWithStore(Component, { props, store });
|
|
|
|
expect(selectors.container).toHaveClass('js-image-file');
|
|
expect(selectors.diffTable).not.toExist();
|
|
});
|
|
});
|
|
});
|