diff options
author | Felipe Artur <fcardozo@gitlab.com> | 2018-06-21 15:22:40 +0300 |
---|---|---|
committer | Tim Zallmann <tzallmann@gitlab.com> | 2018-06-21 15:22:40 +0300 |
commit | 3e66795ef1ff1228906239763910b051d8afcc37 (patch) | |
tree | df6424d9ec008f5d1da455f8465681b371c4a11e /spec/javascripts/merge_request_tabs_spec.js | |
parent | 14e35ac9b19d358d84e0cfd167f74036937285b6 (diff) |
Changes tab VUE refactoring
Diffstat (limited to 'spec/javascripts/merge_request_tabs_spec.js')
-rw-r--r-- | spec/javascripts/merge_request_tabs_spec.js | 565 |
1 files changed, 156 insertions, 409 deletions
diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js index 3dbd9756cd2..08928e13985 100644 --- a/spec/javascripts/merge_request_tabs_spec.js +++ b/spec/javascripts/merge_request_tabs_spec.js @@ -1,5 +1,4 @@ -/* eslint-disable no-var, comma-dangle, object-shorthand */ - +/* eslint-disable no-var, object-shorthand */ import $ from 'jquery'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; @@ -7,480 +6,228 @@ import MergeRequestTabs from '~/merge_request_tabs'; import '~/commit/pipelines/pipelines_bundle'; import '~/breakpoints'; import '~/lib/utils/common_utils'; -import Diff from '~/diff'; -import Notes from '~/notes'; import 'vendor/jquery.scrollTo'; - -(function () { - describe('MergeRequestTabs', function () { - var stubLocation = {}; - var setLocation = function (stubs) { - var defaults = { - pathname: '', - search: '', - hash: '' - }; - $.extend(stubLocation, defaults, stubs || {}); +import initMrPage from './helpers/init_vue_mr_page_helper'; + +describe('MergeRequestTabs', function() { + let mrPageMock; + var stubLocation = {}; + var setLocation = function(stubs) { + var defaults = { + pathname: '', + search: '', + hash: '', }; + $.extend(stubLocation, defaults, stubs || {}); + }; - const inlineChangesTabJsonFixture = 'merge_request_diffs/inline_changes_tab_with_comments.json'; - const parallelChangesTabJsonFixture = 'merge_request_diffs/parallel_changes_tab_with_comments.json'; - preloadFixtures( - 'merge_requests/merge_request_with_task_list.html.raw', - 'merge_requests/diff_comment.html.raw', - inlineChangesTabJsonFixture, - parallelChangesTabJsonFixture - ); - - beforeEach(function () { - this.class = new MergeRequestTabs({ stubLocation: stubLocation }); - setLocation(); - - this.spies = { - history: spyOn(window.history, 'replaceState').and.callFake(function () {}) - }; - }); - - afterEach(function () { - this.class.unbindEvents(); - this.class.destroyPipelinesView(); - }); - - describe('activateTab', function () { - beforeEach(function () { - spyOn(axios, 'get').and.returnValue(Promise.resolve({ data: {} })); - loadFixtures('merge_requests/merge_request_with_task_list.html.raw'); - this.subject = this.class.activateTab; - }); - it('shows the notes tab when action is show', function () { - this.subject('show'); - expect($('#notes')).toHaveClass('active'); - }); - it('shows the commits tab when action is commits', function () { - this.subject('commits'); - expect($('#commits')).toHaveClass('active'); - }); - it('shows the diffs tab when action is diffs', function () { - this.subject('diffs'); - expect($('#diffs')).toHaveClass('active'); - }); - }); - - describe('opensInNewTab', function () { - var tabUrl; - var windowTarget = '_blank'; - - beforeEach(function () { - loadFixtures('merge_requests/merge_request_with_task_list.html.raw'); - - tabUrl = $('.commits-tab a').attr('href'); + preloadFixtures( + 'merge_requests/merge_request_with_task_list.html.raw', + 'merge_requests/diff_comment.html.raw', + ); - spyOn($.fn, 'attr').and.returnValue(tabUrl); - }); - - describe('meta click', () => { - let metakeyEvent; - beforeEach(function () { - metakeyEvent = $.Event('click', { keyCode: 91, ctrlKey: true }); - }); + beforeEach(function() { + mrPageMock = initMrPage(); + this.class = new MergeRequestTabs({ stubLocation: stubLocation }); + setLocation(); - it('opens page when commits link is clicked', function () { - spyOn(window, 'open').and.callFake(function (url, name) { - expect(url).toEqual(tabUrl); - expect(name).toEqual(windowTarget); - }); + this.spies = { + history: spyOn(window.history, 'replaceState').and.callFake(function() {}), + }; + }); - this.class.bindEvents(); - $('.merge-request-tabs .commits-tab a').trigger(metakeyEvent); - }); + afterEach(function() { + this.class.unbindEvents(); + this.class.destroyPipelinesView(); + mrPageMock.restore(); + }); - it('opens page when commits badge is clicked', function () { - spyOn(window, 'open').and.callFake(function (url, name) { - expect(url).toEqual(tabUrl); - expect(name).toEqual(windowTarget); - }); + describe('opensInNewTab', function() { + var tabUrl; + var windowTarget = '_blank'; - this.class.bindEvents(); - $('.merge-request-tabs .commits-tab a .badge').trigger(metakeyEvent); - }); - }); + beforeEach(function() { + loadFixtures('merge_requests/merge_request_with_task_list.html.raw'); - it('opens page tab in a new browser tab with Ctrl+Click - Windows/Linux', function () { - spyOn(window, 'open').and.callFake(function (url, name) { - expect(url).toEqual(tabUrl); - expect(name).toEqual(windowTarget); - }); + tabUrl = $('.commits-tab a').attr('href'); + }); - this.class.clickTab({ - metaKey: false, - ctrlKey: true, - which: 1, - stopImmediatePropagation: function () {} - }); + describe('meta click', () => { + let metakeyEvent; + beforeEach(function() { + metakeyEvent = $.Event('click', { keyCode: 91, ctrlKey: true }); }); - it('opens page tab in a new browser tab with Cmd+Click - Mac', function () { - spyOn(window, 'open').and.callFake(function (url, name) { + it('opens page when commits link is clicked', function() { + spyOn(window, 'open').and.callFake(function(url, name) { expect(url).toEqual(tabUrl); expect(name).toEqual(windowTarget); }); - this.class.clickTab({ - metaKey: true, - ctrlKey: false, - which: 1, - stopImmediatePropagation: function () {} - }); + this.class.bindEvents(); + $('.merge-request-tabs .commits-tab a').trigger(metakeyEvent); }); - it('opens page tab in a new browser tab with Middle-click - Mac/PC', function () { - spyOn(window, 'open').and.callFake(function (url, name) { + it('opens page when commits badge is clicked', function() { + spyOn(window, 'open').and.callFake(function(url, name) { expect(url).toEqual(tabUrl); expect(name).toEqual(windowTarget); }); - this.class.clickTab({ - metaKey: false, - ctrlKey: false, - which: 2, - stopImmediatePropagation: function () {} - }); + this.class.bindEvents(); + $('.merge-request-tabs .commits-tab a .badge').trigger(metakeyEvent); }); }); - describe('setCurrentAction', function () { - beforeEach(function () { - spyOn(axios, 'get').and.returnValue(Promise.resolve({ data: {} })); - this.subject = this.class.setCurrentAction; - }); - - it('changes from commits', function () { - setLocation({ - pathname: '/foo/bar/merge_requests/1/commits' - }); - expect(this.subject('show')).toBe('/foo/bar/merge_requests/1'); - expect(this.subject('diffs')).toBe('/foo/bar/merge_requests/1/diffs'); - }); - - it('changes from diffs', function () { - setLocation({ - pathname: '/foo/bar/merge_requests/1/diffs' - }); - - expect(this.subject('show')).toBe('/foo/bar/merge_requests/1'); - expect(this.subject('commits')).toBe('/foo/bar/merge_requests/1/commits'); + it('opens page tab in a new browser tab with Ctrl+Click - Windows/Linux', function() { + spyOn(window, 'open').and.callFake(function(url, name) { + expect(url).toEqual(tabUrl); + expect(name).toEqual(windowTarget); }); - it('changes from diffs.html', function () { - setLocation({ - pathname: '/foo/bar/merge_requests/1/diffs.html' - }); - expect(this.subject('show')).toBe('/foo/bar/merge_requests/1'); - expect(this.subject('commits')).toBe('/foo/bar/merge_requests/1/commits'); + this.class.clickTab({ + metaKey: false, + ctrlKey: true, + which: 1, + stopImmediatePropagation: function() {}, }); + }); - it('changes from notes', function () { - setLocation({ - pathname: '/foo/bar/merge_requests/1' - }); - expect(this.subject('diffs')).toBe('/foo/bar/merge_requests/1/diffs'); - expect(this.subject('commits')).toBe('/foo/bar/merge_requests/1/commits'); + it('opens page tab in a new browser tab with Cmd+Click - Mac', function() { + spyOn(window, 'open').and.callFake(function(url, name) { + expect(url).toEqual(tabUrl); + expect(name).toEqual(windowTarget); }); - it('includes search parameters and hash string', function () { - setLocation({ - pathname: '/foo/bar/merge_requests/1/diffs', - search: '?view=parallel', - hash: '#L15-35' - }); - expect(this.subject('show')).toBe('/foo/bar/merge_requests/1?view=parallel#L15-35'); + this.class.clickTab({ + metaKey: true, + ctrlKey: false, + which: 1, + stopImmediatePropagation: function() {}, }); + }); - it('replaces the current history state', function () { - var newState; - setLocation({ - pathname: '/foo/bar/merge_requests/1' - }); - newState = this.subject('commits'); - expect(this.spies.history).toHaveBeenCalledWith({ - url: newState - }, document.title, newState); + it('opens page tab in a new browser tab with Middle-click - Mac/PC', function() { + spyOn(window, 'open').and.callFake(function(url, name) { + expect(url).toEqual(tabUrl); + expect(name).toEqual(windowTarget); }); - it('treats "show" like "notes"', function () { - setLocation({ - pathname: '/foo/bar/merge_requests/1/commits' - }); - expect(this.subject('show')).toBe('/foo/bar/merge_requests/1'); + this.class.clickTab({ + metaKey: false, + ctrlKey: false, + which: 2, + stopImmediatePropagation: function() {}, }); }); + }); - describe('tabShown', () => { - let mock; + describe('setCurrentAction', function() { + let mock; - beforeEach(function () { - mock = new MockAdapter(axios); - mock.onGet(/(.*)\/diffs\.json/).reply(200, { - data: { html: '' }, - }); + beforeEach(function() { + mock = new MockAdapter(axios); + mock.onAny().reply({ data: {} }); + this.subject = this.class.setCurrentAction; + }); - loadFixtures('merge_requests/merge_request_with_task_list.html.raw'); - }); + afterEach(() => { + mock.restore(); + }); - afterEach(() => { - mock.restore(); + it('changes from commits', function() { + setLocation({ + pathname: '/foo/bar/merge_requests/1/commits', }); - describe('with "Side-by-side"/parallel diff view', () => { - beforeEach(function () { - this.class.diffViewType = () => 'parallel'; - Diff.prototype.diffViewType = () => 'parallel'; - }); - - it('maintains `container-limited` for pipelines tab', function (done) { - const asyncClick = function (selector) { - return new Promise((resolve) => { - setTimeout(() => { - document.querySelector(selector).click(); - resolve(); - }); - }); - }; - asyncClick('.merge-request-tabs .pipelines-tab a') - .then(() => asyncClick('.merge-request-tabs .diffs-tab a')) - .then(() => asyncClick('.merge-request-tabs .pipelines-tab a')) - .then(() => { - const hasContainerLimitedClass = document.querySelector('.content-wrapper .container-fluid').classList.contains('container-limited'); - expect(hasContainerLimitedClass).toBe(true); - }) - .then(done) - .catch((err) => { - done.fail(`Something went wrong clicking MR tabs: ${err.message}\n${err.stack}`); - }); - }); - - it('maintains `container-limited` when switching from "Changes" tab before it loads', function (done) { - const asyncClick = function (selector) { - return new Promise((resolve) => { - setTimeout(() => { - document.querySelector(selector).click(); - resolve(); - }); - }); - }; - - asyncClick('.merge-request-tabs .diffs-tab a') - .then(() => asyncClick('.merge-request-tabs .notes-tab a')) - .then(() => { - const hasContainerLimitedClass = document.querySelector('.content-wrapper .container-fluid').classList.contains('container-limited'); - expect(hasContainerLimitedClass).toBe(true); - }) - .then(done) - .catch((err) => { - done.fail(`Something went wrong clicking MR tabs: ${err.message}\n${err.stack}`); - }); - }); - }); + expect(this.subject('show')).toBe('/foo/bar/merge_requests/1'); + expect(this.subject('diffs')).toBe('/foo/bar/merge_requests/1/diffs'); }); - describe('loadDiff', function () { - beforeEach(() => { - loadFixtures('merge_requests/diff_comment.html.raw'); - $('body').attr('data-page', 'projects:merge_requests:show'); - window.gl.ImageFile = () => {}; - Notes.initialize('', []); - spyOn(Notes.instance, 'toggleDiffNote').and.callThrough(); + it('changes from diffs', function() { + setLocation({ + pathname: '/foo/bar/merge_requests/1/diffs', }); - afterEach(() => { - delete window.gl.ImageFile; - delete window.notes; + expect(this.subject('show')).toBe('/foo/bar/merge_requests/1'); + expect(this.subject('commits')).toBe('/foo/bar/merge_requests/1/commits'); + }); - // Undo what we did to the shared <body> - $('body').removeAttr('data-page'); + it('changes from diffs.html', function() { + setLocation({ + pathname: '/foo/bar/merge_requests/1/diffs.html', }); - it('triggers Ajax request to JSON endpoint', function (done) { - const url = '/foo/bar/merge_requests/1/diffs'; - - spyOn(axios, 'get').and.callFake((reqUrl) => { - expect(reqUrl).toBe(`${url}.json`); - - done(); - - return Promise.resolve({ data: {} }); - }); + expect(this.subject('show')).toBe('/foo/bar/merge_requests/1'); + expect(this.subject('commits')).toBe('/foo/bar/merge_requests/1/commits'); + }); - this.class.loadDiff(url); + it('changes from notes', function() { + setLocation({ + pathname: '/foo/bar/merge_requests/1', }); - it('triggers scroll event when diff already loaded', function (done) { - spyOn(axios, 'get').and.callFake(done.fail); - spyOn(document, 'dispatchEvent'); - - this.class.diffsLoaded = true; - this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); + expect(this.subject('diffs')).toBe('/foo/bar/merge_requests/1/diffs'); + expect(this.subject('commits')).toBe('/foo/bar/merge_requests/1/commits'); + }); - expect( - document.dispatchEvent, - ).toHaveBeenCalledWith(new CustomEvent('scroll')); - done(); + it('includes search parameters and hash string', function() { + setLocation({ + pathname: '/foo/bar/merge_requests/1/diffs', + search: '?view=parallel', + hash: '#L15-35', }); - describe('with inline diff', () => { - let noteId; - let noteLineNumId; - let mock; - - beforeEach(() => { - const diffsResponse = getJSONFixture(inlineChangesTabJsonFixture); - - const $html = $(diffsResponse.html); - noteId = $html.find('.note').attr('id'); - noteLineNumId = $html - .find('.note') - .closest('.notes_holder') - .prev('.line_holder') - .find('a[data-linenumber]') - .attr('href') - .replace('#', ''); - - mock = new MockAdapter(axios); - mock.onGet(/(.*)\/diffs\.json/).reply(200, diffsResponse); - }); - - afterEach(() => { - mock.restore(); - }); - - describe('with note fragment hash', () => { - it('should expand and scroll to linked fragment hash #note_xxx', function (done) { - spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue(noteId); - this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); - - setTimeout(() => { - expect(noteId.length).toBeGreaterThan(0); - expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({ - target: jasmine.any(Object), - lineType: 'old', - forceShow: true, - }); - - done(); - }); - }); - - it('should gracefully ignore non-existant fragment hash', function (done) { - spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue('note_something-that-does-not-exist'); - this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); - - setTimeout(() => { - expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled(); - - done(); - }); - }); - }); - - describe('with line number fragment hash', () => { - it('should gracefully ignore line number fragment hash', function () { - spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue(noteLineNumId); - this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); + expect(this.subject('show')).toBe('/foo/bar/merge_requests/1?view=parallel#L15-35'); + }); - expect(noteLineNumId.length).toBeGreaterThan(0); - expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled(); - }); - }); + it('replaces the current history state', function() { + var newState; + setLocation({ + pathname: '/foo/bar/merge_requests/1', }); + newState = this.subject('commits'); - describe('with parallel diff', () => { - let noteId; - let noteLineNumId; - let mock; - - beforeEach(() => { - const diffsResponse = getJSONFixture(parallelChangesTabJsonFixture); - - const $html = $(diffsResponse.html); - noteId = $html.find('.note').attr('id'); - noteLineNumId = $html - .find('.note') - .closest('.notes_holder') - .prev('.line_holder') - .find('a[data-linenumber]') - .attr('href') - .replace('#', ''); - - mock = new MockAdapter(axios); - mock.onGet(/(.*)\/diffs\.json/).reply(200, diffsResponse); - }); - - afterEach(() => { - mock.restore(); - }); - - describe('with note fragment hash', () => { - it('should expand and scroll to linked fragment hash #note_xxx', function (done) { - spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue(noteId); - - this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); - - setTimeout(() => { - expect(noteId.length).toBeGreaterThan(0); - expect(Notes.instance.toggleDiffNote).toHaveBeenCalledWith({ - target: jasmine.any(Object), - lineType: 'new', - forceShow: true, - }); - - done(); - }); - }); - - it('should gracefully ignore non-existant fragment hash', function (done) { - spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue('note_something-that-does-not-exist'); - this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); - - setTimeout(() => { - expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled(); - done(); - }); - }); - }); - - describe('with line number fragment hash', () => { - it('should gracefully ignore line number fragment hash', function () { - spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue(noteLineNumId); - this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); + expect(this.spies.history).toHaveBeenCalledWith( + { + url: newState, + }, + document.title, + newState, + ); + }); - expect(noteLineNumId.length).toBeGreaterThan(0); - expect(Notes.instance.toggleDiffNote).not.toHaveBeenCalled(); - }); - }); + it('treats "show" like "notes"', function() { + setLocation({ + pathname: '/foo/bar/merge_requests/1/commits', }); + + expect(this.subject('show')).toBe('/foo/bar/merge_requests/1'); }); + }); - describe('expandViewContainer', function () { - beforeEach(() => { - $('body').append('<div class="content-wrapper"><div class="container-fluid container-limited"></div></div>'); - }); + describe('expandViewContainer', function() { + beforeEach(() => { + $('body').append( + '<div class="content-wrapper"><div class="container-fluid container-limited"></div></div>', + ); + }); - afterEach(() => { - $('.content-wrapper').remove(); - }); + afterEach(() => { + $('.content-wrapper').remove(); + }); - it('removes container-limited from containers', function () { - this.class.expandViewContainer(); + it('removes container-limited from containers', function() { + this.class.expandViewContainer(); - expect($('.content-wrapper')).not.toContainElement('.container-limited'); - }); + expect($('.content-wrapper')).not.toContainElement('.container-limited'); + }); - it('does remove container-limited from breadcrumbs', function () { - $('.container-limited').addClass('breadcrumbs'); - this.class.expandViewContainer(); + it('does remove container-limited from breadcrumbs', function() { + $('.container-limited').addClass('breadcrumbs'); + this.class.expandViewContainer(); - expect($('.content-wrapper')).toContainElement('.container-limited'); - }); + expect($('.content-wrapper')).toContainElement('.container-limited'); }); }); -}).call(window); +}); |