Add spec for template dropdown javascript

Also updated the application setting name.
Also changed the view name to be more specific.

app/views/admin/application_settings/ci_cd.html.haml

@@ -13,7 +13,7 @@
   .settings-content
     = render 'ci_cd'
 
-= render_if_exists 'admin/application_settings/required_pipeline', expanded: expanded_by_default?
+= render_if_exists 'admin/application_settings/required_instance_ci_setting', expanded: expanded_by_default?
 
 - if Gitlab.config.registry.enabled
   %section.settings.as-registry.no-animate#js-registry-settings{ class: ('expanded' if expanded_by_default?) }

ee/app/assets/javascripts/pages/admin/application_settings/ci_cd/ci_template.js

@@ -2,10 +2,9 @@ import $ from 'jquery';
 
 export default class CiTemplate {
   constructor() {
-    this.$input = $('#required_template_name');
+    this.$input = $('#required_instance_ci_template_name');
     this.$dropdown = $('.js-ci-template-dropdown');
     this.$dropdownToggle = this.$dropdown.find('.dropdown-toggle-text');
-
     this.initDropdown();
   }
 

ee/app/views/admin/application_settings/_required_pipeline.html.haml → ee/app/views/admin/application_settings/_required_instance_ci_setting.html.haml

-- return unless License.feature_available?(:required_template_inclusion)
+- return unless License.feature_available?(:required_ci_templates)
 
 %section.settings.as-required-pipeline.no-animate#js-required-pipeline-settings{ class: ('expanded' if expanded)}
   .settings-header
@@ -18,8 +18,8 @@
 
       %fieldset
         .form-group
-          = f.label :required_ci_template, s_('AdminSettings|Select a pipeline configuration file'), class: 'text-muted'
+          = f.label :required_instance_ci_template, s_('AdminSettings|Select a pipeline configuration file'), class: 'text-muted'
           = dropdown_tag(s_('AdminSettings|No required pipeline'), options: { toggle_class: 'js-ci-template-dropdown dropdown-select', title: s_('AdminSettings|Select a template'), filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls(nil) } } )
-          = f.text_field :required_ci_template, value: @application_setting.required_ci_template, id: 'required_template_name', class: 'hidden'
+          = f.text_field :required_instance_ci_template, value: @application_setting.required_instance_ci_template, id: 'required_instance_ci_template_name', class: 'hidden'
 
       = f.submit _('Save changes'), class: "btn btn-success"

ee/spec/frontend/pages/admin/application_settings/ci_cd/ci_template_spec.js

+import GLDropdown from '~/gl_dropdown'; // eslint-disable-line no-unused-vars
+import CiTemplate from 'ee/pages/admin/application_settings/ci_cd/ci_template';
+import { setHTMLFixture } from 'helpers/fixtures';
+
+const DROPDOWN_DATA = {
+  Instance: [{ name: 'test', id: 'test' }],
+  General: [{ name: 'Android', id: 'Android' }],
+};
+const INITIAL_VALUE = 'Android';
+
+describe('CI Template Dropdown (ee/pages/admin/application_settings/ci_cd/ci_template.js', () => {
+  let CiTemplateInstance;
+
+  beforeEach(() => {
+    setHTMLFixture(`
+      <div>
+        <button class="js-ci-template-dropdown" data-data=${JSON.stringify(DROPDOWN_DATA)}>
+          <span class="dropdown-toggle-text"></span>
+        </button>
+        <input id="required_instance_ci_template_name" value="${INITIAL_VALUE}" />
+      </div>
+    `);
+    CiTemplateInstance = new CiTemplate();
+  });
+
+  describe('Init Dropdown', () => {
+    it('Instantiates dropdown objects', () => {
+      expect(CiTemplateInstance.$input.length).toBe(1);
+      expect(CiTemplateInstance.$dropdown.length).toBe(1);
+      expect(CiTemplateInstance.$dropdownToggle.length).toBe(1);
+    });
+
+    it('Sets the dropdown text value', () => {
+      expect(CiTemplateInstance.$dropdown.text().trim()).toBe(INITIAL_VALUE);
+    });
+  });
+
+  describe('Format dropdown list', () => {
+    it('Adds a reset option and divider', () => {
+      const expected = {
+        Reset: [{ name: 'No required pipeline', id: null }, 'divider'],
+        ...DROPDOWN_DATA,
+      };
+      const actual = CiTemplateInstance.formatDropdownList();
+
+      expect(JSON.stringify(actual)).toBe(JSON.stringify(expected));
+    });
+  });
+
+  describe('Update input value', () => {
+    it('changes the value of the input', () => {
+      const selectedObj = { name: 'update', id: 'update' };
+      const e = { preventDefault: () => {} };
+      CiTemplateInstance.updateInputValue({ selectedObj, e });
+
+      expect(CiTemplateInstance.$input.val()).toBe('update');
+    });
+  });
+});