add tests for project_new

app/assets/javascripts/project_new.js

@@ -7,8 +7,12 @@
   this.ProjectNew = (function() {
     function ProjectNew() {
       this.toggleSettings = bind(this.toggleSettings, this);
+      this.addApprover = this.addApprover.bind(this);
+      this.removeApprover = this.removeApprover.bind(this);
+
       this.$selects = $('.project-feature select');
       this.$repoSelects = this.$selects.filter('.js-repo-select');
+      this.$enableApprovers = $('.js-require-approvals-toggle');
 
       $('.project-edit-container').on('ajax:before', (function(_this) {
         return function() {
@@ -20,15 +24,25 @@
       this.initVisibilitySelect();
 
       this.toggleSettings();
-      this.toggleSettingsOnclick();
+      this.addEvents();
       this.toggleRepoVisibility();
 
-      $('.js-approvers').on('click', this.addApprover.bind(this));
-      $(document).on('click', '.js-approver-remove', this.removeApprover.bind(this));
-
       this.initApproverSelect();
     }
 
+    ProjectNew.prototype.addEvents = function() {
+      this.$selects.on('change', this.toggleSettings);
+      $('.js-approvers').on('click', this.addApprover);
+      $(document).on('click', '.js-approver-remove', this.removeApprover);
+
+      $('#require_approvals').on('change', function() {
+        const enabled = $(this).prop('checked');
+        const val = enabled ? 1 : 0;
+        $('#project_approvals_before_merge').prop('min', val);
+        $('.nested-settings').toggleClass('hidden', !enabled);
+      });
+    };
+
     ProjectNew.prototype.initApproverSelect = function() {
       $('.js-select-user-and-group').select2({
         placeholder: 'Search for users or groups',
@@ -188,6 +202,11 @@
       visibilitySelect.init();
     };
 
+    ProjectNew.prototype.toggleApproverSettingsVisibility = function(evt) {
+      const enabled = evt.value;
+      $('.nested-settings').toggleClass('hidden', enabled);
+    };
+
     ProjectNew.prototype.toggleSettings = function() {
       var self = this;
 
@@ -200,10 +219,6 @@
       });
     };
 
-    ProjectNew.prototype.toggleSettingsOnclick = function() {
-      this.$selects.on('change', this.toggleSettings);
-    };
-
     ProjectNew.prototype._showOrHide = function(checkElement, container) {
       var $container = $(container);
 

app/views/projects/ee/_merge_request_settings.html.haml

@@ -46,12 +46,12 @@
 .form-group.reset-approvals-on-push
   .checkbox
     = label_tag :require_approvals do
-      = check_box_tag :require_approvals, nil, project.approvals_before_merge > 0
+      = check_box_tag :require_approvals, nil, project.approvals_before_merge > 0, class: 'js-require-approvals-toggle'
       %strong Activate merge request approvals
       = link_to icon('question-circle'), help_page_path("user/project/merge_requests/merge_request_approvals"), target: '_blank'
       .descr Merge request approvals allow you to set the number of necessary approvals and predefine a list of approvers that you will need to approve every merge request in a project.
 
-.nested-settings
+.nested-settings{ class: project.approvals_before_merge > 0 ? '' : 'hidden' }
   .form-group
     = form.label :approver_ids, class: 'label-light' do
       Approvers

spec/javascripts/fixtures/projects.rb

@@ -25,4 +25,13 @@ describe ProjectsController, '(JavaScript fixtures)', type: :controller do
     expect(response).to be_success
     store_frontend_fixture(response, example.description)
   end
+
+  it 'projects/edit.html.raw' do |example|
+    get :edit,
+      namespace_id: project.namespace.to_param,
+      id: project
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
 end

spec/javascripts/project_new_spec.js

+/* global ProjectNew */
+
+require('~/project_new');
+
+describe('Project settings', function () {
+  const projectSettingsTemplate = 'projects/edit.html.raw';
+  preloadFixtures(projectSettingsTemplate);
+
+  beforeEach(() => {
+    loadFixtures(projectSettingsTemplate);
+    this.$requireApprovalsToggle = $('.js-require-approvals-toggle');
+    this.project = new ProjectNew();
+  });
+
+  it('shows approver settings if enabled', () => {
+    expect(this.$requireApprovalsToggle).not.toBeChecked();
+    expect($('.nested-settings').hasClass('hidden')).toBe(true);
+
+    this.$requireApprovalsToggle.click();
+    expect($('.nested-settings').hasClass('hidden')).toBe(false);
+  });
+
+  it('hides approver settings if disabled', () => {
+    expect('#require_approvals').not.toBeChecked();
+    expect($('.nested-settings').hasClass('hidden')).toBe(true);
+
+    this.$requireApprovalsToggle.click();
+    this.$requireApprovalsToggle.click();
+    expect($('.nested-settings').hasClass('hidden')).toBe(true);
+  });
+
+  it('sets required approvers to 0 if approvers disabled', () => {
+    expect($('[name="project[approvals_before_merge]"]').val()).toBe('0');
+  });
+
+  it('sets required approvers to 1 if approvers enabled', () => {
+    this.$requireApprovalsToggle.click();
+    expect($('[name="project[approvals_before_merge]"]').val()).toBe('1');
+  });
+});