Fix feature specs to work with feature flag

- All specs should have JS enabled since it's what renders
most of the form now.
- Some name / id changes to to new markup
- Add event hub events to allow passing state from JS to
Vue to enable proper form validations on submit.

app/assets/javascripts/integrations/edit/components/dynamic_field.vue

 <script>
+import eventHub from '../event_hub';
 import { capitalize, lowerCase, isEmpty } from 'lodash';
 import { __, sprintf } from '~/locale';
 import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui';
@@ -54,6 +55,7 @@ export default {
   data() {
     return {
       model: this.value,
+      validated: false,
     };
   },
   computed: {
@@ -106,17 +108,45 @@ export default {
         name: this.fieldName,
       };
     },
+    valid() {
+      if (!this.required) {
+        return true;
+      }
+      if (this.model) {
+        return true;
+      }
+      if (!this.validated) {
+        return true;
+      }
+
+      return false;
+    },
   },
   created() {
     if (this.isNonEmptyPassword) {
       this.model = null;
     }
+    eventHub.$on('validateForm', this.validateForm);
+  },
+  beforeDestroy() {
+    eventHub.$off('validateForm', this.validateForm);
+  },
+  methods: {
+    validateForm() {
+      this.validated = true;
+    },
   },
 };
 </script>
 
 <template>
-  <gl-form-group :label="label" :label-for="fieldId" :description="help">
+  <gl-form-group
+    :label="label"
+    :label-for="fieldId"
+    :invalid-feedback="__('This field is required.')"
+    :state="valid"
+    :description="help"
+  >
     <template v-if="isCheckbox">
       <input :name="fieldName" type="hidden" value="false" />
       <gl-form-checkbox v-model="model" v-bind="sharedProps">

app/assets/javascripts/integrations/integration_settings_form.js

@@ -45,11 +45,16 @@ export default class IntegrationSettingsForm {
     // 2) If this service can be tested
     // If both conditions are true, we override form submission
     // and test the service using provided configuration.
-    if (this.$form.get(0).checkValidity() && this.canTestService) {
+    if (this.$form.get(0).checkValidity()) {
+      if (this.canTestService) {
         e.preventDefault();
         // eslint-disable-next-line no-jquery/no-serialize
         this.testSettings(this.$form.serialize());
       }
+    } else {
+      e.preventDefault();
+      eventHub.$emit('validateForm');
+    }
   }
 
   handleServiceToggle() {

spec/features/admin/services/admin_activates_prometheus_spec.rb

@@ -2,12 +2,10 @@
 
 require 'spec_helper'
 
-describe 'Admin activates Prometheus' do
+describe 'Admin activates Prometheus', :js do
   let(:admin) { create(:user, :admin) }
 
   before do
-    stub_feature_flags(integration_form_refactor: false)
-
     sign_in(admin)
 
     visit(admin_application_settings_services_path)

spec/features/projects/services/disable_triggers_spec.rb

@@ -2,10 +2,10 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Disable individual triggers' do
+RSpec.describe 'Disable individual triggers', :js do
   include_context 'project service activation'
 
-  let(:checkbox_selector) { 'input[type=checkbox][id$=_events]' }
+  let(:checkbox_selector) { 'input[type=checkbox][name$="_events]"]' }
 
   before do
     visit_project_integration(service_name)

spec/features/projects/services/user_activates_atlassian_bamboo_ci_spec.rb

@@ -23,6 +23,6 @@ RSpec.describe 'User activates Atlassian Bamboo CI' do
     # Password field should not be filled in.
     click_link('Atlassian Bamboo CI')
 
-    expect(find_field('Enter new password').value).to be_blank
+    expect(find_field('Enter new Password').value).to be_blank
   end
 end

spec/features/projects/services/user_activates_jetbrains_teamcity_ci_spec.rb

@@ -12,7 +12,7 @@ RSpec.describe 'User activates JetBrains TeamCity CI' do
   it 'activates service', :js do
     visit_project_integration('JetBrains TeamCity CI')
     check('Push')
-    check('Merge request')
+    check('Merge Request')
     fill_in('Teamcity url', with: 'http://teamcity.example.com')
     fill_in('Build type', with: 'GitlabTest_Build')
     fill_in('Username', with: 'user')

spec/features/projects/services/user_activates_slack_notifications_spec.rb

@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-RSpec.describe 'User activates Slack notifications' do
+RSpec.describe 'User activates Slack notifications', :js do
   include_context 'project service activation'
 
   context 'when service is not configured yet' do
@@ -10,7 +10,7 @@ RSpec.describe 'User activates Slack notifications' do
       visit_project_integration('Slack notifications')
     end
 
-    it 'activates service', :js do
+    it 'activates service' do
       fill_in('Webhook', with: 'https://hooks.slack.com/services/SVRWFV0VVAR97N/B02R25XN3/ZBqu7xMupaEEICInN685')
 
       click_test_then_save_integration
@@ -38,13 +38,13 @@ RSpec.describe 'User activates Slack notifications' do
     end
 
     it 'filters events by channel' do
-      expect(page.find_field('service_push_channel').value).to have_content('1')
-      expect(page.find_field('service_issue_channel').value).to have_content('2')
-      expect(page.find_field('service_merge_request_channel').value).to have_content('3')
-      expect(page.find_field('service_note_channel').value).to have_content('4')
-      expect(page.find_field('service_tag_push_channel').value).to have_content('5')
-      expect(page.find_field('service_pipeline_channel').value).to have_content('6')
-      expect(page.find_field('service_wiki_page_channel').value).to have_content('7')
+      expect(page.find_field(name: 'service[push_channel]').value).to have_content('1')
+      expect(page.find_field(name: 'service[issue_channel]').value).to have_content('2')
+      expect(page.find_field(name: 'service[merge_request_channel]').value).to have_content('3')
+      expect(page.find_field(name: 'service[note_channel]').value).to have_content('4')
+      expect(page.find_field(name: 'service[tag_push_channel]').value).to have_content('5')
+      expect(page.find_field(name: 'service[pipeline_channel]').value).to have_content('6')
+      expect(page.find_field(name: 'service[wiki_page_channel]').value).to have_content('7')
     end
   end
 end

spec/features/projects/services/user_activates_slack_slash_command_spec.rb

@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Slack slash commands' do
+RSpec.describe 'Slack slash commands', :js do
   include_context 'project service activation'
 
   before do
@@ -10,7 +10,7 @@ RSpec.describe 'Slack slash commands' do
   end
 
   it 'shows a token placeholder' do
-    token_placeholder = find_field('service_token')['placeholder']
+    token_placeholder = find_field('Token')['placeholder']
 
     expect(token_placeholder).to eq('XXxxXXxxXXxxXXxxXXxxXXxx')
   end
@@ -19,8 +19,8 @@ RSpec.describe 'Slack slash commands' do
     expect(page).to have_content('This service allows users to perform common')
   end
 
-  it 'redirects to the integrations page after saving but not activating', :js do
-    fill_in 'service_token', with: 'token'
+  it 'redirects to the integrations page after saving but not activating' do
+    fill_in 'Token', with: 'token'
     click_active_toggle
     click_on 'Save'
 
@@ -28,8 +28,8 @@ RSpec.describe 'Slack slash commands' do
     expect(page).to have_content('Slack slash commands settings saved, but not activated.')
   end
 
-  it 'redirects to the integrations page after activating', :js do
-    fill_in 'service_token', with: 'token'
+  it 'redirects to the integrations page after activating' do
+    fill_in 'Token', with: 'token'
     click_on 'Save'
 
     expect(current_path).to eq(project_settings_integrations_path(project))

spec/support/shared_contexts/project_service_shared_context.rb

@@ -5,7 +5,6 @@ shared_context 'project service activation' do
   let(:user) { create(:user) }
 
   before do
-    stub_feature_flags(integration_form_refactor: false)
     project.add_maintainer(user)
     sign_in(user)
   end