Remove capybara specs relying on jQuery.ajax

We had some capybara specs that checked whether expanding a diff calls
the Backend more than once. These specs have been broken since we are
using axios. Unfortunately as they are testing a negative, they never
failed.

We are removing those specs in favor of new JS unit tests which actually
test that the API is called exactly once.

app/assets/javascripts/single_file_diff.js

@@ -73,7 +73,7 @@ export default class SingleFileDiff {
     this.collapsedContent.hide();
     this.loadingContent.show();
 
-    axios
+    return axios
       .get(this.diffForPath)
       .then(({ data }) => {
         this.loadingContent.hide();

spec/features/expand_collapse_diffs_spec.rb

@@ -17,7 +17,6 @@ RSpec.describe 'Expand and collapse diffs', :js do
     # Ensure that undiffable.md is in .gitattributes
     project.repository.copy_gitattributes(branch)
     visit project_commit_path(project, project.commit(branch))
-    execute_script('window.ajaxUris = []; $(document).ajaxSend(function(event, xhr, settings) { ajaxUris.push(settings.url) });')
   end
 
   def file_container(filename)
@@ -191,10 +190,6 @@ RSpec.describe 'Expand and collapse diffs', :js do
           expect(small_diff).to have_selector('.code')
           expect(small_diff).not_to have_selector('.nothing-here-block')
         end
-
-        it 'does not make a new HTTP request' do
-          expect(evaluate_script('ajaxUris')).not_to include(a_string_matching('small_diff.md'))
-        end
       end
     end
 
@@ -264,7 +259,6 @@ RSpec.describe 'Expand and collapse diffs', :js do
       find('.note-textarea')
 
       wait_for_requests
-      execute_script('window.ajaxUris = []; $(document).ajaxSend(function(event, xhr, settings) { ajaxUris.push(settings.url) });')
     end
 
     it 'reloads the page with all diffs expanded' do
@@ -300,10 +294,6 @@ RSpec.describe 'Expand and collapse diffs', :js do
           expect(small_diff).to have_selector('.code')
           expect(small_diff).not_to have_selector('.nothing-here-block')
         end
-
-        it 'does not make a new HTTP request' do
-          expect(evaluate_script('ajaxUris')).not_to include(a_string_matching('small_diff.md'))
-        end
       end
     end
   end

spec/frontend/single_file_diff_spec.js

+import MockAdapter from 'axios-mock-adapter';
+import $ from 'jquery';
+import { setHTMLFixture } from 'helpers/fixtures';
+import axios from '~/lib/utils/axios_utils';
+import SingleFileDiff from '~/single_file_diff';
+
+describe('SingleFileDiff', () => {
+  let mock = new MockAdapter(axios);
+  const blobDiffPath = '/mock-path';
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    mock.onGet(blobDiffPath).replyOnce(200, { html: `<div class="diff-content">MOCKED</div>` });
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  it('loads diff via axios exactly once for collapsed diffs', async () => {
+    setHTMLFixture(`
+    <div class="diff-file">
+      <div class="js-file-title">
+        MOCK TITLE
+      </div>
+
+      <div class="diff-content">
+        <div class="diff-viewer" data-type="simple">
+          <div
+            class="nothing-here-block diff-collapsed"
+            data-diff-for-path="${blobDiffPath}"
+          >
+            MOCK CONTENT
+          </div>
+        </div>
+      </div>
+    </div>
+`);
+
+    // Collapsed is the default state
+    const diff = new SingleFileDiff(document.querySelector('.diff-file'));
+    expect(diff.isOpen).toBe(false);
+    expect(diff.content).toBeNull();
+    expect(diff.diffForPath).toEqual(blobDiffPath);
+
+    // Opening for the first time
+    await diff.toggleDiff($(document.querySelector('.js-file-title')));
+    expect(diff.isOpen).toBe(true);
+    expect(diff.content).not.toBeNull();
+
+    // Collapsing again
+    await diff.toggleDiff($(document.querySelector('.js-file-title')));
+    expect(diff.isOpen).toBe(false);
+    expect(diff.content).not.toBeNull();
+
+    mock.onGet(blobDiffPath).replyOnce(400, '');
+
+    // Opening again
+    await diff.toggleDiff($(document.querySelector('.js-file-title')));
+    expect(diff.isOpen).toBe(true);
+    expect(diff.content).not.toBeNull();
+
+    expect(mock.history.get.length).toBe(1);
+  });
+
+  it('does not load diffs via axios for already expanded diffs', async () => {
+    setHTMLFixture(`
+    <div class="diff-file">
+      <div class="js-file-title">
+        MOCK TITLE
+      </div>
+
+      <div class="diff-content">
+        EXPANDED MOCK CONTENT
+      </div>
+    </div>
+`);
+
+    // Opened is the default state
+    const diff = new SingleFileDiff(document.querySelector('.diff-file'));
+    expect(diff.isOpen).toBe(true);
+    expect(diff.content).not.toBeNull();
+    expect(diff.diffForPath).toEqual(undefined);
+
+    // Collapsing for the first time
+    await diff.toggleDiff($(document.querySelector('.js-file-title')));
+    expect(diff.isOpen).toBe(false);
+    expect(diff.content).not.toBeNull();
+
+    // Opening again
+    await diff.toggleDiff($(document.querySelector('.js-file-title')));
+    expect(diff.isOpen).toBe(true);
+
+    expect(mock.history.get.length).toBe(0);
+  });
+});