Merge branch 'fix-repo-settings-file-upload-error' into 'master'

Fix bug causing repository mirror settings UI to break

Closes #55134

See merge request gitlab-org/gitlab-ce!23712

app/assets/javascripts/lib/utils/file_upload.js

@@ -1,6 +1,9 @@
 export default (buttonSelector, fileSelector) => {
   const btn = document.querySelector(buttonSelector);
   const fileInput = document.querySelector(fileSelector);
+
+  if (!btn || !fileInput) return;
+
   const form = btn.closest('form');
 
   btn.addEventListener('click', () => {

changelogs/unreleased/fix-repo-settings-file-upload-error.yml

@@ -0,0 +1,5 @@
+---
+title: Fix bug causing repository mirror settings UI to break
+merge_request: 23712
+author:
+type: fixed

spec/javascripts/lib/utils/file_upload_spec.js

@@ -9,28 +9,56 @@ describe('File upload', () => {
         <span class="js-filename"></span>
       </form>
     `);
-
-    fileUpload('.js-button', '.js-input');
   });
 
-  it('clicks file input after clicking button', () => {
-    const btn = document.querySelector('.js-button');
+  describe('when there is a matching button and input', () => {
+    beforeEach(() => {
+      fileUpload('.js-button', '.js-input');
+    });
+
+    it('clicks file input after clicking button', () => {
+      const btn = document.querySelector('.js-button');
+      const input = document.querySelector('.js-input');
+
+      spyOn(input, 'click');
+
+      btn.click();
+
+      expect(input.click).toHaveBeenCalled();
+    });
+
+    it('updates file name text', () => {
+      const input = document.querySelector('.js-input');
+
+      input.value = 'path/to/file/index.js';
+
+      input.dispatchEvent(new CustomEvent('change'));
+
+      expect(document.querySelector('.js-filename').textContent).toEqual('index.js');
+    });
+  });
+
+  it('fails gracefully when there is no matching button', () => {
     const input = document.querySelector('.js-input');
+    const btn = document.querySelector('.js-button');
+    fileUpload('.js-not-button', '.js-input');
 
     spyOn(input, 'click');
 
     btn.click();
 
-    expect(input.click).toHaveBeenCalled();
+    expect(input.click).not.toHaveBeenCalled();
   });
 
-  it('updates file name text', () => {
+  it('fails gracefully when there is no matching input', () => {
     const input = document.querySelector('.js-input');
+    const btn = document.querySelector('.js-button');
+    fileUpload('.js-button', '.js-not-input');
 
-    input.value = 'path/to/file/index.js';
+    spyOn(input, 'click');
 
-    input.dispatchEvent(new CustomEvent('change'));
+    btn.click();
 
-    expect(document.querySelector('.js-filename').textContent).toEqual('index.js');
+    expect(input.click).not.toHaveBeenCalled();
   });
 });