Fixed editing form
- applied functional component patch - fixed border radius for list - fixed Karma test to take a correct li amount
This commit is contained in:
parent
56e3fc40b8
commit
9613a34a24
|
@ -8,12 +8,14 @@ import SystemNote from '~/vue_shared/components/notes/system_note.vue';
|
||||||
import NoteableNote from './noteable_note.vue';
|
import NoteableNote from './noteable_note.vue';
|
||||||
import ToggleRepliesWidget from './toggle_replies_widget.vue';
|
import ToggleRepliesWidget from './toggle_replies_widget.vue';
|
||||||
import NoteEditedText from './note_edited_text.vue';
|
import NoteEditedText from './note_edited_text.vue';
|
||||||
|
import DiscussionNotesRepliesWrapper from './discussion_notes_replies_wrapper.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DiscussionNotes',
|
name: 'DiscussionNotes',
|
||||||
components: {
|
components: {
|
||||||
ToggleRepliesWidget,
|
ToggleRepliesWidget,
|
||||||
NoteEditedText,
|
NoteEditedText,
|
||||||
|
DiscussionNotesRepliesWrapper,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
discussion: {
|
discussion: {
|
||||||
|
@ -119,9 +121,7 @@ export default {
|
||||||
/>
|
/>
|
||||||
<slot slot="avatar-badge" name="avatar-badge"></slot>
|
<slot slot="avatar-badge" name="avatar-badge"></slot>
|
||||||
</component>
|
</component>
|
||||||
<div
|
<discussion-notes-replies-wrapper :is-diff-discussion="discussion.diff_discussion">
|
||||||
:class="discussion.diff_discussion ? 'discussion-collapsible bordered-box clearfix' : ''"
|
|
||||||
>
|
|
||||||
<toggle-replies-widget
|
<toggle-replies-widget
|
||||||
v-if="hasReplies"
|
v-if="hasReplies"
|
||||||
:collapsed="!isExpanded"
|
:collapsed="!isExpanded"
|
||||||
|
@ -141,7 +141,7 @@ export default {
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<slot :show-replies="isExpanded || !hasReplies" name="footer"></slot>
|
<slot :show-replies="isExpanded || !hasReplies" name="footer"></slot>
|
||||||
</div>
|
</discussion-notes-replies-wrapper>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<component
|
<component
|
||||||
|
|
|
@ -0,0 +1,27 @@
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Wrapper for discussion notes replies section.
|
||||||
|
*
|
||||||
|
* This is a functional component using the render method because in some cases
|
||||||
|
* the wrapper is not needed and we want to simply render along the children.
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
functional: true,
|
||||||
|
props: {
|
||||||
|
isDiffDiscussion: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render(h, { props, children }) {
|
||||||
|
if (props.isDiffDiscussion) {
|
||||||
|
return h('li', { class: 'discussion-collapsible bordered-box clearfix' }, [
|
||||||
|
h('ul', { class: 'notes' }, children),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return children;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -1095,6 +1095,10 @@ table.code {
|
||||||
|
|
||||||
.discussion-collapsible {
|
.discussion-collapsible {
|
||||||
margin: 0 $gl-padding $gl-padding 71px;
|
margin: 0 $gl-padding $gl-padding 71px;
|
||||||
|
|
||||||
|
.notes {
|
||||||
|
border-radius: $border-radius-default;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.parallel {
|
.parallel {
|
||||||
|
|
|
@ -139,7 +139,6 @@ $note-form-margin-left: 72px;
|
||||||
border-radius: 4px 4px 0 0;
|
border-radius: 4px 4px 0 0;
|
||||||
|
|
||||||
&.collapsed {
|
&.collapsed {
|
||||||
border: 0;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,51 @@
|
||||||
|
import { mount } from '@vue/test-utils';
|
||||||
|
import DiscussionNotesRepliesWrapper from '~/notes/components/discussion_notes_replies_wrapper.vue';
|
||||||
|
|
||||||
|
const TEST_CHILDREN = '<li>Hello!</li><li>World!</li>';
|
||||||
|
|
||||||
|
// We have to wrap our SUT with a TestComponent because multiple roots are possible
|
||||||
|
// because it's a functional component.
|
||||||
|
const TestComponent = {
|
||||||
|
components: { DiscussionNotesRepliesWrapper },
|
||||||
|
template: `<ul><discussion-notes-replies-wrapper v-bind="$attrs">${TEST_CHILDREN}</discussion-notes-replies-wrapper></ul>`,
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('DiscussionNotesRepliesWrapper', () => {
|
||||||
|
let wrapper;
|
||||||
|
|
||||||
|
const createComponent = (props = {}) => {
|
||||||
|
wrapper = mount(TestComponent, {
|
||||||
|
propsData: props,
|
||||||
|
sync: false,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
wrapper.destroy();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when normal discussion', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
createComponent();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders children directly', () => {
|
||||||
|
expect(wrapper.html()).toEqual(`<ul>${TEST_CHILDREN}</ul>`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when diff discussion', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
createComponent({
|
||||||
|
isDiffDiscussion: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('wraps children with notes', () => {
|
||||||
|
const notes = wrapper.find('li.discussion-collapsible ul.notes');
|
||||||
|
|
||||||
|
expect(notes.exists()).toBe(true);
|
||||||
|
expect(notes.html()).toEqual(`<ul class="notes">${TEST_CHILDREN}</ul>`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -10,6 +10,7 @@ describe('InlineDiffView', () => {
|
||||||
let component;
|
let component;
|
||||||
const getDiffFileMock = () => Object.assign({}, diffFileMockData);
|
const getDiffFileMock = () => Object.assign({}, diffFileMockData);
|
||||||
const getDiscussionsMockData = () => [Object.assign({}, discussionsMockData)];
|
const getDiscussionsMockData = () => [Object.assign({}, discussionsMockData)];
|
||||||
|
const notesLength = getDiscussionsMockData()[0].notes.length;
|
||||||
|
|
||||||
beforeEach(done => {
|
beforeEach(done => {
|
||||||
const diffFile = getDiffFileMock();
|
const diffFile = getDiffFileMock();
|
||||||
|
@ -40,7 +41,7 @@ describe('InlineDiffView', () => {
|
||||||
|
|
||||||
Vue.nextTick(() => {
|
Vue.nextTick(() => {
|
||||||
expect(el.querySelectorAll('.notes_holder').length).toEqual(1);
|
expect(el.querySelectorAll('.notes_holder').length).toEqual(1);
|
||||||
expect(el.querySelectorAll('.notes_holder .note-discussion li').length).toEqual(6);
|
expect(el.querySelectorAll('.notes_holder .note').length).toEqual(notesLength + 1);
|
||||||
expect(el.innerText.indexOf('comment 5')).toBeGreaterThan(-1);
|
expect(el.innerText.indexOf('comment 5')).toBeGreaterThan(-1);
|
||||||
component.$store.dispatch('setInitialNotes', []);
|
component.$store.dispatch('setInitialNotes', []);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue