Replace ... with new expansion options

- expand upwards
- expand downwards
- expand all

in both inline and parallel views

11 files changed, 238 insertions, 21 deletions

diff --git a/spec/features/merge_request/user_posts_diff_notes_spec.rb b/spec/features/merge_request/user_posts_diff_notes_spec.rb
index ead564aea28..abae6ffbd71 100644
--- a/spec/features/merge_request/user_posts_diff_notes_spec.rb
+++ b/spec/features/merge_request/user_posts_diff_notes_spec.rb
@@ -68,12 +68,12 @@ describe 'Merge request > User posts diff notes', :js do
     context 'with a match line' do
       it 'does not allow commenting on the left side' do
         line_holder = find('.match', match: :first).find(:xpath, '..')
-        should_not_allow_commenting(line_holder, 'left')
+        match_should_not_allow_commenting(line_holder)
       end
 
       it 'does not allow commenting on the right side' do
         line_holder = find('.match', match: :first).find(:xpath, '..')
-        should_not_allow_commenting(line_holder, 'right')
+        match_should_not_allow_commenting(line_holder)
       end
     end
 
@@ -136,7 +136,7 @@ describe 'Merge request > User posts diff notes', :js do
 
     context 'with a match line' do
       it 'does not allow commenting' do
-        should_not_allow_commenting(find('.match', match: :first))
+        match_should_not_allow_commenting(find('.match', match: :first))
       end
     end
 
@@ -222,7 +222,7 @@ describe 'Merge request > User posts diff notes', :js do
 
     context 'with a match line' do
       it 'does not allow commenting' do
-        should_not_allow_commenting(find('.match', match: :first))
+        match_should_not_allow_commenting(find('.match', match: :first))
       end
     end
   end
@@ -251,6 +251,10 @@ describe 'Merge request > User posts diff notes', :js do
     expect(line[:num]).not_to have_css comment_button_class
   end
 
+  def match_should_not_allow_commenting(line_holder)
+    expect(line_holder).not_to have_css comment_button_class
+  end
+
   def write_comment_on_line(line_holder, diff_side)
     click_diff_line(line_holder, diff_side)
 
diff --git a/spec/features/merge_request/user_views_diffs_spec.rb b/spec/features/merge_request/user_views_diffs_spec.rb
index 6d58d43a295..2d1eb260236 100644
--- a/spec/features/merge_request/user_views_diffs_spec.rb
+++ b/spec/features/merge_request/user_views_diffs_spec.rb
@@ -17,11 +17,25 @@ describe 'User views diffs', :js do
   end
 
   shared_examples 'unfold diffs' do
-    it 'unfolds diffs' do
+    it 'unfolds diffs upwards' do
       first('.js-unfold').click
-
       expect(find('.file-holder[id="a5cc2925ca8258af241be7e5b0381edf30266302"] .text-file')).to have_content('.bundle')
     end
+
+    it 'unfolds diffs to the start' do
+      first('.js-unfold-all').click
+      expect(find('.file-holder[id="a5cc2925ca8258af241be7e5b0381edf30266302"] .text-file')).to have_content('.rbc')
+    end
+
+    it 'unfolds diffs downwards' do
+      first('.js-unfold-down').click
+      expect(find('.file-holder[id="2f6fcd96b88b36ce98c38da085c795a27d92a3dd"] .text-file')).to have_content('.popen3')
+    end
+
+    it 'unfolds diffs to the end' do
+      page.all('.js-unfold-down').last
+      expect(find('.file-holder[id="6eb14e00385d2fb284765eb1cd8d420d33d63fc9"] .text-file')).to have_content('end')
+    end
   end
 
   it 'shows diffs' do
diff --git a/spec/javascripts/diffs/components/diff_expansion_cell_spec.js b/spec/javascripts/diffs/components/diff_expansion_cell_spec.js
new file mode 100644
index 00000000000..cb1966b2122
--- /dev/null
+++ b/spec/javascripts/diffs/components/diff_expansion_cell_spec.js
@@ -0,0 +1,64 @@
+import Vue from 'vue';
+import store from '~/mr_notes/stores';
+import DiffExpansionCell from '~/diffs/components/diff_expansion_cell.vue';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import diffFileMockData from '../mock_data/diff_file';
+
+const EXPAND_UP_CLASS = '.js-unfold';
+const EXPAND_DOWN_CLASS = '.js-unfold-down';
+const EXPAND_ALL_CLASS = '.js-unfold-all';
+
+describe('DiffExpansionCell', () => {
+  const matchLine = diffFileMockData.highlighted_diff_lines[5];
+
+  const createComponent = (options = {}) => {
+    const cmp = Vue.extend(DiffExpansionCell);
+    const defaults = {
+      fileHash: diffFileMockData.file_hash,
+      contextLinesPath: 'contextLinesPath',
+      line: matchLine,
+      isTop: false,
+      isBottom: false,
+    };
+    const props = Object.assign({}, defaults, options);
+
+    return createComponentWithStore(cmp, store, props).$mount();
+  };
+
+  describe('top row', () => {
+    it('should have "expand up" and "show all" option', () => {
+      const vm = createComponent({
+        isTop: true,
+      });
+      const el = vm.$el;
+
+      expect(el.querySelector(EXPAND_UP_CLASS)).not.toBe(null);
+      expect(el.querySelector(EXPAND_DOWN_CLASS)).toBe(null);
+      expect(el.querySelector(EXPAND_ALL_CLASS)).not.toBe(null);
+    });
+  });
+
+  describe('middle row', () => {
+    it('should have "expand down", "show all", "expand up" option', () => {
+      const vm = createComponent();
+      const el = vm.$el;
+
+      expect(el.querySelector(EXPAND_UP_CLASS)).not.toBe(null);
+      expect(el.querySelector(EXPAND_DOWN_CLASS)).not.toBe(null);
+      expect(el.querySelector(EXPAND_ALL_CLASS)).not.toBe(null);
+    });
+  });
+
+  describe('bottom row', () => {
+    it('should have "expand down" and "show all" option', () => {
+      const vm = createComponent({
+        isBottom: true,
+      });
+      const el = vm.$el;
+
+      expect(el.querySelector(EXPAND_UP_CLASS)).toBe(null);
+      expect(el.querySelector(EXPAND_DOWN_CLASS)).not.toBe(null);
+      expect(el.querySelector(EXPAND_ALL_CLASS)).not.toBe(null);
+    });
+  });
+});
diff --git a/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js b/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js
index 038db8eaa7c..99b5496c24b 100644
--- a/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js
+++ b/spec/javascripts/diffs/components/diff_line_gutter_content_spec.js
@@ -70,15 +70,6 @@ describe('DiffLineGutterContent', () => {
   });
 
   describe('template', () => {
-    it('should render three dots for context lines', () => {
-      const component = createComponent({
-        isMatchLine: true,
-      });
-
-      expect(component.$el.querySelector('span').classList.contains('context-cell')).toEqual(true);
-      expect(component.$el.innerText).toEqual('...');
-    });
-
     it('should render comment button', () => {
       const component = createComponent({
         showCommentButton: true,
diff --git a/spec/javascripts/diffs/components/inline_diff_expansion_row_spec.js b/spec/javascripts/diffs/components/inline_diff_expansion_row_spec.js
new file mode 100644
index 00000000000..bf50070a4f5
--- /dev/null
+++ b/spec/javascripts/diffs/components/inline_diff_expansion_row_spec.js
@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import store from '~/mr_notes/stores';
+import InlineDiffExpansionRow from '~/diffs/components/inline_diff_expansion_row.vue';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import diffFileMockData from '../mock_data/diff_file';
+
+describe('InlineDiffExpansionRow', () => {
+  const matchLine = diffFileMockData.highlighted_diff_lines[5];
+
+  const createComponent = (options = {}) => {
+    const cmp = Vue.extend(InlineDiffExpansionRow);
+    const defaults = {
+      fileHash: diffFileMockData.file_hash,
+      contextLinesPath: 'contextLinesPath',
+      line: matchLine,
+      isTop: false,
+      isBottom: false,
+    };
+    const props = Object.assign({}, defaults, options);
+
+    return createComponentWithStore(cmp, store, props).$mount();
+  };
+
+  describe('template', () => {
+    it('should render expansion row for match lines', () => {
+      const vm = createComponent();
+
+      expect(vm.$el.classList.contains('line_expansion')).toBe(true);
+    });
+  });
+});
diff --git a/spec/javascripts/diffs/components/inline_diff_view_spec.js b/spec/javascripts/diffs/components/inline_diff_view_spec.js
index 9b61dbe7975..3963e37fae2 100644
--- a/spec/javascripts/diffs/components/inline_diff_view_spec.js
+++ b/spec/javascripts/diffs/components/inline_diff_view_spec.js
@@ -28,9 +28,9 @@ describe('InlineDiffView', () => {
     it('should have rendered diff lines', () => {
       const el = component.$el;
 
-      expect(el.querySelectorAll('tr.line_holder').length).toEqual(6);
+      expect(el.querySelectorAll('tr.line_holder').length).toEqual(5);
       expect(el.querySelectorAll('tr.line_holder.new').length).toEqual(2);
-      expect(el.querySelectorAll('tr.line_holder.match').length).toEqual(1);
+      expect(el.querySelectorAll('tr.line_expansion.match').length).toEqual(1);
       expect(el.textContent.indexOf('Bad dates')).toBeGreaterThan(-1);
     });
 
diff --git a/spec/javascripts/diffs/components/parallel_diff_expansion_row_spec.js b/spec/javascripts/diffs/components/parallel_diff_expansion_row_spec.js
new file mode 100644
index 00000000000..134738932b3
--- /dev/null
+++ b/spec/javascripts/diffs/components/parallel_diff_expansion_row_spec.js
@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import store from '~/mr_notes/stores';
+import ParallelDiffExpansionRow from '~/diffs/components/parallel_diff_expansion_row.vue';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import diffFileMockData from '../mock_data/diff_file';
+
+describe('ParallelDiffExpansionRow', () => {
+  const matchLine = diffFileMockData.highlighted_diff_lines[5];
+
+  const createComponent = (options = {}) => {
+    const cmp = Vue.extend(ParallelDiffExpansionRow);
+    const defaults = {
+      fileHash: diffFileMockData.file_hash,
+      contextLinesPath: 'contextLinesPath',
+      line: matchLine,
+      isTop: false,
+      isBottom: false,
+    };
+    const props = Object.assign({}, defaults, options);
+
+    return createComponentWithStore(cmp, store, props).$mount();
+  };
+
+  describe('template', () => {
+    it('should render expansion row for match lines', () => {
+      const vm = createComponent();
+
+      expect(vm.$el.classList.contains('line_expansion')).toBe(true);
+    });
+  });
+});
diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js
index f8872a3eb13..5806cb47034 100644
--- a/spec/javascripts/diffs/store/actions_spec.js
+++ b/spec/javascripts/diffs/store/actions_spec.js
@@ -380,7 +380,9 @@ describe('DiffsStoreActions', () => {
       const params = { since: 6, to: 26 };
       const lineNumbers = { oldLineNumber: 3, newLineNumber: 5 };
       const fileHash = 'ff9200';
-      const options = { endpoint, params, lineNumbers, fileHash };
+      const isExpandDown = false;
+      const nextLineNumbers = {};
+      const options = { endpoint, params, lineNumbers, fileHash, isExpandDown, nextLineNumbers };
       const mock = new MockAdapter(axios);
       const contextLines = { contextLines: [{ lineCode: 6 }] };
       mock.onGet(endpoint).reply(200, contextLines);
@@ -392,7 +394,7 @@ describe('DiffsStoreActions', () => {
         [
           {
             type: types.ADD_CONTEXT_LINES,
-            payload: { lineNumbers, contextLines, params, fileHash },
+            payload: { lineNumbers, contextLines, params, fileHash, isExpandDown, nextLineNumbers },
           },
         ],
         [],
diff --git a/spec/javascripts/diffs/store/mutations_spec.js b/spec/javascripts/diffs/store/mutations_spec.js
index 9c13c7ceb7a..3e033b6c9dc 100644
--- a/spec/javascripts/diffs/store/mutations_spec.js
+++ b/spec/javascripts/diffs/store/mutations_spec.js
@@ -81,6 +81,8 @@ describe('DiffsStoreMutations', () => {
         params: {
           bottom: true,
         },
+        isExpandDown: false,
+        nextLineNumbers: {},
       };
       const diffFile = {
         file_hash: options.fileHash,
@@ -108,6 +110,8 @@ describe('DiffsStoreMutations', () => {
         options.contextLines,
         options.lineNumbers,
         options.params.bottom,
+        options.isExpandDown,
+        options.nextLineNumbers,
       );
 
       expect(addContextLinesSpy).toHaveBeenCalledWith({
@@ -116,6 +120,7 @@ describe('DiffsStoreMutations', () => {
         contextLines: options.contextLines,
         bottom: options.params.bottom,
         lineNumbers: options.lineNumbers,
+        isExpandDown: false,
       });
     });
   });
diff --git a/spec/javascripts/diffs/store/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js
index 1f877910125..65eb4c9d2a3 100644
--- a/spec/javascripts/diffs/store/utils_spec.js
+++ b/spec/javascripts/diffs/store/utils_spec.js
@@ -260,6 +260,17 @@ describe('DiffsStoreUtils', () => {
       expect(linesWithReferences[1].meta_data.old_pos).toEqual(2);
       expect(linesWithReferences[1].meta_data.new_pos).toEqual(3);
     });
+
+    it('should add correct line references when isExpandDown is true', () => {
+      const lines = [{ type: null }, { type: MATCH_LINE_TYPE }];
+      const linesWithReferences = utils.addLineReferences(lines, lineNumbers, false, true, {
+        old_line: 10,
+        new_line: 11,
+      });
+
+      expect(linesWithReferences[1].meta_data.old_pos).toEqual(10);
+      expect(linesWithReferences[1].meta_data.new_pos).toEqual(11);
+    });
   });
 
   describe('trimFirstCharOfLineContent', () => {
diff --git a/spec/presenters/blobs/unfold_presenter_spec.rb b/spec/presenters/blobs/unfold_presenter_spec.rb
index 1534c572b30..ab3f8080257 100644
--- a/spec/presenters/blobs/unfold_presenter_spec.rb
+++ b/spec/presenters/blobs/unfold_presenter_spec.rb
@@ -39,6 +39,21 @@ describe Blobs::UnfoldPresenter do
         expect(result.indent).to eq(0)
       end
     end
+
+    context 'when to is -1' do
+      let(:params) { { full: false, since: 2, to: -1, bottom: true, offset: 1, indent: 1 } }
+
+      it 'sets other attributes' do
+        result = subject
+
+        expect(result.full?).to eq(false)
+        expect(result.since).to eq(2)
+        expect(result.to).to eq(blob.lines.size)
+        expect(result.bottom).to eq(false)
+        expect(result.offset).to eq(0)
+        expect(result.indent).to eq(0)
+      end
+    end
   end
 
   describe '#diff_lines' do
@@ -83,8 +98,9 @@ describe Blobs::UnfoldPresenter do
       end
     end
 
-    context 'when since is greater than 1' do
-      let(:params) { { since: 5, to: 10, offset: 10 } }
+    context 'when "since" is greater than 1' do
+      let(:default_params) { { since: 5, to: 10, offset: 10 } }
+      let(:params) { default_params }
 
       it 'adds top match line' do
         line = subject.diff_lines.first
@@ -93,6 +109,38 @@ describe Blobs::UnfoldPresenter do
         expect(line.old_pos).to eq(5)
         expect(line.new_pos).to eq(5)
       end
+
+      context '"to" is higher than blob size' do
+        let(:params) { default_params.merge(to: total_lines + 10, bottom: true) }
+
+        it 'does not add bottom match line' do
+          line = subject.diff_lines.last
+
+          expect(line.type).to be_nil
+        end
+      end
+
+      context '"to" is equal to blob size' do
+        let(:params) { default_params.merge(to: total_lines, bottom: true) }
+
+        it 'does not add bottom match line' do
+          line = subject.diff_lines.last
+
+          expect(line.type).to be_nil
+        end
+      end
+
+      context '"to" is less than blob size' do
+        let(:params) { default_params.merge(to: total_lines - 3, bottom: true) }
+
+        it 'adds bottom match line' do
+          line = subject.diff_lines.last
+
+          expect(line.type).to eq('match')
+          expect(line.old_pos).to eq(total_lines - 3 - params[:offset])
+          expect(line.new_pos).to eq(total_lines - 3)
+        end
+      end
     end
 
     context 'when "to" is less than blob size' do
@@ -116,6 +164,22 @@ describe Blobs::UnfoldPresenter do
         expect(line.type).to be_nil
       end
     end
+
+    context 'when "to" is "-1"' do
+      let(:params) { { since: 10, to: -1, offset: 10, bottom: true } }
+
+      it 'does not add bottom match line' do
+        line = subject.diff_lines.last
+
+        expect(line.type).to be_nil
+      end
+
+      it 'last line is the latest blob line' do
+        line = subject.diff_lines.last
+
+        expect(line.text).to eq(total_lines.to_s)
+      end
+    end
   end
 
   describe '#lines' do