2018-12-13 14:17:19 -05:00
|
|
|
import Vue from 'vue';
|
|
|
|
import SuggestionsComponent from '~/vue_shared/components/markdown/suggestions.vue';
|
|
|
|
|
|
|
|
const MOCK_DATA = {
|
2019-04-04 09:08:34 -04:00
|
|
|
suggestions: [
|
|
|
|
{
|
|
|
|
id: 1,
|
|
|
|
appliable: true,
|
|
|
|
applied: false,
|
|
|
|
current_user: {
|
|
|
|
can_apply: true,
|
|
|
|
},
|
|
|
|
diff_lines: [
|
|
|
|
{
|
|
|
|
can_receive_suggestion: false,
|
|
|
|
line_code: null,
|
|
|
|
meta_data: null,
|
|
|
|
new_line: null,
|
|
|
|
old_line: 5,
|
|
|
|
rich_text: '-test',
|
|
|
|
text: '-test',
|
|
|
|
type: 'old',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
can_receive_suggestion: true,
|
|
|
|
line_code: null,
|
|
|
|
meta_data: null,
|
|
|
|
new_line: 5,
|
|
|
|
old_line: null,
|
|
|
|
rich_text: '+new test',
|
|
|
|
text: '+new test',
|
|
|
|
type: 'new',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
],
|
2018-12-13 14:17:19 -05:00
|
|
|
noteHtml: `
|
2019-04-04 09:08:34 -04:00
|
|
|
<div class="suggestion">
|
|
|
|
<div class="line">-oldtest</div>
|
|
|
|
</div>
|
2018-12-13 14:17:19 -05:00
|
|
|
<div class="suggestion">
|
2019-04-04 09:08:34 -04:00
|
|
|
<div class="line">+newtest</div>
|
2018-12-13 14:17:19 -05:00
|
|
|
</div>
|
|
|
|
`,
|
|
|
|
isApplied: false,
|
|
|
|
helpPagePath: 'path_to_docs',
|
|
|
|
};
|
|
|
|
|
|
|
|
describe('Suggestion component', () => {
|
|
|
|
let vm;
|
|
|
|
let diffTable;
|
|
|
|
|
|
|
|
beforeEach(done => {
|
|
|
|
const Component = Vue.extend(SuggestionsComponent);
|
|
|
|
|
|
|
|
vm = new Component({
|
|
|
|
propsData: MOCK_DATA,
|
|
|
|
}).$mount();
|
|
|
|
|
2019-04-04 09:08:34 -04:00
|
|
|
diffTable = vm.generateDiff(0).$mount().$el;
|
2018-12-13 14:17:19 -05:00
|
|
|
|
|
|
|
spyOn(vm, 'renderSuggestions');
|
|
|
|
vm.renderSuggestions();
|
|
|
|
Vue.nextTick(done);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('mounted', () => {
|
|
|
|
it('renders a flash container', () => {
|
2019-01-18 14:35:06 -05:00
|
|
|
expect(vm.$el.querySelector('.js-suggestions-flash')).not.toBeNull();
|
2018-12-13 14:17:19 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders a container for suggestions', () => {
|
|
|
|
expect(vm.$refs.container).not.toBeNull();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders suggestions', () => {
|
|
|
|
expect(vm.renderSuggestions).toHaveBeenCalled();
|
2019-04-04 09:08:34 -04:00
|
|
|
expect(vm.$el.innerHTML.includes('oldtest')).toBe(true);
|
|
|
|
expect(vm.$el.innerHTML.includes('newtest')).toBe(true);
|
2018-12-13 14:17:19 -05:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('generateDiff', () => {
|
|
|
|
it('generates a diff table', () => {
|
|
|
|
expect(diffTable.querySelector('.md-suggestion-diff')).not.toBeNull();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('generates a diff table that contains contents of `oldLineContent`', () => {
|
|
|
|
expect(diffTable.innerHTML.includes(vm.fromContent)).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('generates a diff table that contains contents the suggested lines', () => {
|
2019-04-04 09:08:34 -04:00
|
|
|
MOCK_DATA.suggestions[0].diff_lines.forEach(line => {
|
|
|
|
const text = line.text.substring(1);
|
|
|
|
|
|
|
|
expect(diffTable.innerHTML.includes(text)).toBe(true);
|
2018-12-13 14:17:19 -05:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('generates a diff table with the correct line number for each suggested line', () => {
|
2019-04-04 09:08:34 -04:00
|
|
|
const lines = diffTable.querySelectorAll('.old_line');
|
2018-12-13 14:17:19 -05:00
|
|
|
|
2019-04-04 09:08:34 -04:00
|
|
|
expect(parseInt([...lines][0].innerHTML, 10)).toBe(5);
|
2018-12-13 14:17:19 -05:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|