Commit 58eb3c55 authored by Phil Hughes's avatar Phil Hughes

Converted merge_request_tabs.js to axios

parent 8750507b
/* eslint-disable no-new, class-methods-use-this */ /* eslint-disable no-new, class-methods-use-this */
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import axios from './lib/utils/axios_utils';
import Flash from './flash'; import Flash from './flash';
import BlobForkSuggestion from './blob/blob_fork_suggestion'; import BlobForkSuggestion from './blob/blob_fork_suggestion';
import initChangesDropdown from './init_changes_dropdown'; import initChangesDropdown from './init_changes_dropdown';
...@@ -244,15 +245,19 @@ export default class MergeRequestTabs { ...@@ -244,15 +245,19 @@ export default class MergeRequestTabs {
if (this.commitsLoaded) { if (this.commitsLoaded) {
return; return;
} }
this.ajaxGet({
url: `${source}.json`, this.toggleLoading(true)
success: (data) => {
axios.get(`${source}.json`)
.then(({ data }) => {
document.querySelector('div#commits').innerHTML = data.html; document.querySelector('div#commits').innerHTML = data.html;
localTimeAgo($('.js-timeago', 'div#commits')); localTimeAgo($('.js-timeago', 'div#commits'));
this.commitsLoaded = true; this.commitsLoaded = true;
this.scrollToElement('#commits'); this.scrollToElement('#commits');
},
}); this.toggleLoading(false);
})
.catch(() => new Flash('An error occurred while fetching this tab.', 'alert'));
} }
mountPipelinesView() { mountPipelinesView() {
...@@ -283,9 +288,10 @@ export default class MergeRequestTabs { ...@@ -283,9 +288,10 @@ export default class MergeRequestTabs {
// some pages like MergeRequestsController#new has query parameters on that anchor // some pages like MergeRequestsController#new has query parameters on that anchor
const urlPathname = parseUrlPathname(source); const urlPathname = parseUrlPathname(source);
this.ajaxGet({ this.toggleLoading(true);
url: `${urlPathname}.json${location.search}`,
success: (data) => { axios.get(`${urlPathname}.json${location.search}`)
.then(({ data }) => {
const $container = $('#diffs'); const $container = $('#diffs');
$container.html(data.html); $container.html(data.html);
...@@ -335,8 +341,10 @@ export default class MergeRequestTabs { ...@@ -335,8 +341,10 @@ export default class MergeRequestTabs {
// (discussion and diff tabs) and `:target` only applies to the first // (discussion and diff tabs) and `:target` only applies to the first
anchor.addClass('target'); anchor.addClass('target');
} }
},
}); this.toggleLoading(false);
})
.catch(() => Flash('An error occurred while fetching this tab.', 'alert'));
} }
// Show or hide the loading spinner // Show or hide the loading spinner
...@@ -346,17 +354,6 @@ export default class MergeRequestTabs { ...@@ -346,17 +354,6 @@ export default class MergeRequestTabs {
$('.mr-loading-status .loading').toggle(status); $('.mr-loading-status .loading').toggle(status);
} }
ajaxGet(options) {
const defaults = {
beforeSend: () => this.toggleLoading(true),
error: () => new Flash('An error occurred while fetching this tab.', 'alert'),
complete: () => this.toggleLoading(false),
dataType: 'json',
type: 'GET',
};
$.ajax($.extend({}, defaults, options));
}
diffViewType() { diffViewType() {
return $('.inline-parallel-buttons a.active').data('view-type'); return $('.inline-parallel-buttons a.active').data('view-type');
} }
......
/* eslint-disable no-var, comma-dangle, object-shorthand */ /* eslint-disable no-var, comma-dangle, object-shorthand */
import MockAdaptor from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import * as urlUtils from '~/lib/utils/url_utility'; import * as urlUtils from '~/lib/utils/url_utility';
import MergeRequestTabs from '~/merge_request_tabs'; import MergeRequestTabs from '~/merge_request_tabs';
import '~/commit/pipelines/pipelines_bundle'; import '~/commit/pipelines/pipelines_bundle';
...@@ -46,7 +47,7 @@ import 'vendor/jquery.scrollTo'; ...@@ -46,7 +47,7 @@ import 'vendor/jquery.scrollTo';
describe('activateTab', function () { describe('activateTab', function () {
beforeEach(function () { beforeEach(function () {
spyOn($, 'ajax').and.callFake(function () {}); spyOn(axios, 'get').and.returnValue(Promise.resolve({ data: {} }));
loadFixtures('merge_requests/merge_request_with_task_list.html.raw'); loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
this.subject = this.class.activateTab; this.subject = this.class.activateTab;
}); });
...@@ -148,7 +149,7 @@ import 'vendor/jquery.scrollTo'; ...@@ -148,7 +149,7 @@ import 'vendor/jquery.scrollTo';
describe('setCurrentAction', function () { describe('setCurrentAction', function () {
beforeEach(function () { beforeEach(function () {
spyOn($, 'ajax').and.callFake(function () {}); spyOn(axios, 'get').and.returnValue(Promise.resolve({ data: {} }));
this.subject = this.class.setCurrentAction; this.subject = this.class.setCurrentAction;
}); });
...@@ -214,13 +215,21 @@ import 'vendor/jquery.scrollTo'; ...@@ -214,13 +215,21 @@ import 'vendor/jquery.scrollTo';
}); });
describe('tabShown', () => { describe('tabShown', () => {
let mock;
beforeEach(function () { beforeEach(function () {
spyOn($, 'ajax').and.callFake(function (options) { mock = new MockAdaptor(axios);
options.success({ html: '' }); mock.onGet(/(.*)\/diffs\.json/).reply(200, {
data: { html: '' },
}); });
loadFixtures('merge_requests/merge_request_with_task_list.html.raw'); loadFixtures('merge_requests/merge_request_with_task_list.html.raw');
}); });
afterEach(() => {
mock.restore();
});
describe('with "Side-by-side"/parallel diff view', () => { describe('with "Side-by-side"/parallel diff view', () => {
beforeEach(function () { beforeEach(function () {
this.class.diffViewType = () => 'parallel'; this.class.diffViewType = () => 'parallel';
...@@ -292,16 +301,20 @@ import 'vendor/jquery.scrollTo'; ...@@ -292,16 +301,20 @@ import 'vendor/jquery.scrollTo';
it('triggers Ajax request to JSON endpoint', function (done) { it('triggers Ajax request to JSON endpoint', function (done) {
const url = '/foo/bar/merge_requests/1/diffs'; const url = '/foo/bar/merge_requests/1/diffs';
spyOn(this.class, 'ajaxGet').and.callFake((options) => {
expect(options.url).toEqual(`${url}.json`); spyOn(axios, 'get').and.callFake((reqUrl) => {
expect(reqUrl).toBe(`${url}.json`);
done(); done();
return Promise.resolve({ data: {} });
}); });
this.class.loadDiff(url); this.class.loadDiff(url);
}); });
it('triggers scroll event when diff already loaded', function (done) { it('triggers scroll event when diff already loaded', function (done) {
spyOn(this.class, 'ajaxGet').and.callFake(() => done.fail()); spyOn(axios, 'get').and.callFake(done.fail);
spyOn(document, 'dispatchEvent'); spyOn(document, 'dispatchEvent');
this.class.diffsLoaded = true; this.class.diffsLoaded = true;
...@@ -316,6 +329,7 @@ import 'vendor/jquery.scrollTo'; ...@@ -316,6 +329,7 @@ import 'vendor/jquery.scrollTo';
describe('with inline diff', () => { describe('with inline diff', () => {
let noteId; let noteId;
let noteLineNumId; let noteLineNumId;
let mock;
beforeEach(() => { beforeEach(() => {
const diffsResponse = getJSONFixture(inlineChangesTabJsonFixture); const diffsResponse = getJSONFixture(inlineChangesTabJsonFixture);
...@@ -330,29 +344,40 @@ import 'vendor/jquery.scrollTo'; ...@@ -330,29 +344,40 @@ import 'vendor/jquery.scrollTo';
.attr('href') .attr('href')
.replace('#', ''); .replace('#', '');
spyOn($, 'ajax').and.callFake(function (options) { mock = new MockAdaptor(axios);
options.success(diffsResponse); mock.onGet(/(.*)\/diffs\.json/).reply(200, diffsResponse);
}); });
afterEach(() => {
mock.restore();
}); });
describe('with note fragment hash', () => { describe('with note fragment hash', () => {
it('should expand and scroll to linked fragment hash #note_xxx', function () { it('should expand and scroll to linked fragment hash #note_xxx', function (done) {
spyOn(urlUtils, 'getLocationHash').and.returnValue(noteId); spyOn(urlUtils, 'getLocationHash').and.returnValue(noteId);
this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
setTimeout(() => {
expect(noteId.length).toBeGreaterThan(0); expect(noteId.length).toBeGreaterThan(0);
expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({ expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({
target: jasmine.any(Object), target: jasmine.any(Object),
lineType: 'old', lineType: 'old',
forceShow: true, forceShow: true,
}); });
done();
});
}); });
it('should gracefully ignore non-existant fragment hash', function () { it('should gracefully ignore non-existant fragment hash', function (done) {
spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist'); spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist');
this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
setTimeout(() => {
expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled(); expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
done();
});
}); });
}); });
...@@ -370,6 +395,7 @@ import 'vendor/jquery.scrollTo'; ...@@ -370,6 +395,7 @@ import 'vendor/jquery.scrollTo';
describe('with parallel diff', () => { describe('with parallel diff', () => {
let noteId; let noteId;
let noteLineNumId; let noteLineNumId;
let mock;
beforeEach(() => { beforeEach(() => {
const diffsResponse = getJSONFixture(parallelChangesTabJsonFixture); const diffsResponse = getJSONFixture(parallelChangesTabJsonFixture);
...@@ -384,30 +410,40 @@ import 'vendor/jquery.scrollTo'; ...@@ -384,30 +410,40 @@ import 'vendor/jquery.scrollTo';
.attr('href') .attr('href')
.replace('#', ''); .replace('#', '');
spyOn($, 'ajax').and.callFake(function (options) { mock = new MockAdaptor(axios);
options.success(diffsResponse); mock.onGet(/(.*)\/diffs\.json/).reply(200, diffsResponse);
}); });
afterEach(() => {
mock.restore();
}); });
describe('with note fragment hash', () => { describe('with note fragment hash', () => {
it('should expand and scroll to linked fragment hash #note_xxx', function () { it('should expand and scroll to linked fragment hash #note_xxx', function (done) {
spyOn(urlUtils, 'getLocationHash').and.returnValue(noteId); spyOn(urlUtils, 'getLocationHash').and.returnValue(noteId);
this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
setTimeout(() => {
expect(noteId.length).toBeGreaterThan(0); expect(noteId.length).toBeGreaterThan(0);
expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({ expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({
target: jasmine.any(Object), target: jasmine.any(Object),
lineType: 'new', lineType: 'new',
forceShow: true, forceShow: true,
}); });
done();
});
}); });
it('should gracefully ignore non-existant fragment hash', function () { it('should gracefully ignore non-existant fragment hash', function (done) {
spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist'); spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist');
this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); this.class.loadDiff('/foo/bar/merge_requests/1/diffs');
setTimeout(() => {
expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled(); expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled();
done();
});
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment