Refactor TemplateSelector and fix for tests.

app/assets/javascripts/blob/blob_ci_yaml.js.es6

 /*= require blob/template_selector */
 ((global) => {
 
-  class BlobCiYamlSelector extends TemplateSelector {
+  class BlobCiYamlSelector extends gl.TemplateSelector {
     requestFile(query) {
       return Api.gitlabCiYml(query.name, this.requestFileSuccess.bind(this));
     }
-  };
+
+    requestFileSuccess(file) {
+      return super.requestFileSuccess(file);
+    }
+  }
 
   global.BlobCiYamlSelector = BlobCiYamlSelector;
 
@@ -17,6 +21,7 @@
     }
 
     initSelectors() {
+      const editor = this.editor;
       this.$dropdowns.each((i, dropdown) => {
         const $dropdown = $(dropdown);
         return new BlobCiYamlSelector({

app/assets/javascripts/blob/blob_gitignore_selector.js

@@ -18,6 +18,6 @@
 
     return BlobGitignoreSelector;
 
-  })(TemplateSelector);
+  })(gl.TemplateSelector);
 
 }).call(this);

app/assets/javascripts/blob/blob_license_selector.js

@@ -23,6 +23,6 @@
 
     return BlobLicenseSelector;
 
-  })(TemplateSelector);
+  })(gl.TemplateSelector);
 
 }).call(this);

app/assets/javascripts/blob/template_selector.js.es6

+((global) => {
+    class TemplateSelector {
+      constructor({ dropdown, data, pattern, wrapper, editor, fileEndpoint, $input } = {}) {
+        this.onClick = this.onClick.bind(this);
+        this.dropdown = dropdown;
+        this.data = data;
+        this.pattern = pattern;
+        this.wrapper = wrapper;
+        this.editor = editor;
+        this.fileEndpoint = fileEndpoint;
+        this.$input = $input || $('#file_name');
+        this.dropdownIcon = $('.fa-chevron-down', this.dropdown);
+        this.buildDropdown();
+        this.bindEvents();
+        this.onFilenameUpdate();
+
+        this.autosizeUpdateEvent = document.createEvent('Event');
+        this.autosizeUpdateEvent.initEvent('autosize:update', true, false);
+      }
+
+      buildDropdown() {
+        return this.dropdown.glDropdown({
+          data: this.data,
+          filterable: true,
+          selectable: true,
+          toggleLabel: this.toggleLabel,
+          search: {
+            fields: ['name']
+          },
+          clicked: this.onClick,
+          text: function(item) {
+            return item.name;
+          }
+        });
+      }
+
+      bindEvents() {
+        return this.$input.on('keyup blur', (function(_this) {
+          return function(e) {
+            return _this.onFilenameUpdate();
+          };
+        })(this));
+      }
+
+      toggleLabel(item) {
+        return item.name;
+      }
+
+      onFilenameUpdate() {
+        var filenameMatches;
+        if (!this.$input.length) {
+          return;
+        }
+        filenameMatches = this.pattern.test(this.$input.val().trim());
+        if (!filenameMatches) {
+          this.wrapper.addClass('hidden');
+          return;
+        }
+        return this.wrapper.removeClass('hidden');
+      }
+
+      onClick(item, el, e) {
+        e.preventDefault();
+        return this.requestFile(item);
+      }
+
+      requestFile(item) {
+        // This `requestFile` method is an abstract method that should
+        // be added by all subclasses.
+      }
+
+      // To be implemented on the extending class
+      // e.g.
+      // Api.gitignoreText item.name, @requestFileSuccess.bind(@)
+      requestFileSuccess(file, skipFocus) {
+        this.editor.setValue(file.content, 1);
+        if (!skipFocus) this.editor.focus();
+
+        if (this.editor instanceof jQuery) {
+          this.editor.get(0).dispatchEvent(this.autosizeUpdateEvent);
+        }
+      }
+
+      startLoadingSpinner() {
+        this.dropdownIcon
+          .addClass('fa-spinner fa-spin')
+          .removeClass('fa-chevron-down');
+      }
+
+      stopLoadingSpinner() {
+        this.dropdownIcon
+          .addClass('fa-chevron-down')
+          .removeClass('fa-spinner fa-spin');
+      }
+    }
+
+    global.TemplateSelector = TemplateSelector;
+  })(window.gl || ( window.gl = {}));
+

app/assets/javascripts/templates/issuable_template_selector.js.es6

 /*= require ../blob/template_selector */
 
 ((global) => {
-  class IssuableTemplateSelector extends TemplateSelector {
+  class IssuableTemplateSelector extends gl.TemplateSelector {
     constructor(...args) {
       super(...args);
       this.projectPath = this.dropdown.data('project-path');