Use object param in integration_form_spec

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

@@ -96,6 +96,9 @@ export default {
 
 <template>
   <div>
+    <!-- helpHtml is trusted input -->
+    <div v-if="helpHtml" v-safe-html:[$options.helpHtmlConfig]="helpHtml"></div>
+
     <override-dropdown
       v-if="defaultState !== null"
       :inherit-from-id="defaultState.id"
@@ -104,9 +107,6 @@ export default {
       @change="setOverride"
     />
 
-    <!-- helpHtml is trusted input -->
-    <div v-if="helpHtml" v-safe-html:[$options.helpHtmlConfig]="helpHtml"></div>
-
     <active-checkbox v-if="propsSource.showActive" :key="`${currentKey}-active-checkbox`" />
     <jira-trigger-fields
       v-if="isJira"

spec/features/projects/services/user_activates_slack_slash_command_spec.rb

@@ -40,4 +40,8 @@ RSpec.describe 'Slack slash commands', :js do
     value = find_field('url').value
     expect(value).to match("api/v4/projects/#{project.id}/services/slack_slash_commands/trigger")
   end
+
+  it 'shows help content' do
+    expect(page).to have_content('This service allows users to perform common operations on this project by entering slash commands in Slack.')
+  end
 end

spec/frontend/integrations/edit/components/integration_form_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { mockIntegrationProps } from 'jest/integrations/edit/mock_data';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { createStore } from '~/integrations/edit/store';
 import IntegrationForm from '~/integrations/edit/components/integration_form.vue';
 import OverrideDropdown from '~/integrations/edit/components/override_dropdown.vue';
@@ -15,24 +16,31 @@ import { integrationLevels } from '~/integrations/edit/constants';
 describe('IntegrationForm', () => {
   let wrapper;
 
-  const createComponent = (customStateProps = {}, featureFlags = {}, initialState = {}) => {
-    wrapper = shallowMount(IntegrationForm, {
-      propsData: {},
-      store: createStore({
-        customState: { ...mockIntegrationProps, ...customStateProps },
-        ...initialState,
+  const createComponent = ({
+    customStateProps = {},
+    featureFlags = {},
+    initialState = {},
+    props = {},
+  } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(IntegrationForm, {
+        propsData: { ...props },
+        store: createStore({
+          customState: { ...mockIntegrationProps, ...customStateProps },
+          ...initialState,
+        }),
+        stubs: {
+          OverrideDropdown,
+          ActiveCheckbox,
+          ConfirmationModal,
+          JiraTriggerFields,
+          TriggerFields,
+        },
+        provide: {
+          glFeatures: featureFlags,
+        },
       }),
-      stubs: {
-        OverrideDropdown,
-        ActiveCheckbox,
-        ConfirmationModal,
-        JiraTriggerFields,
-        TriggerFields,
-      },
-      provide: {
-        glFeatures: featureFlags,
-      },
-    });
+    );
   };
 
   afterEach(() => {
@@ -63,7 +71,9 @@ describe('IntegrationForm', () => {
     describe('showActive is false', () => {
       it('does not render ActiveCheckbox', () => {
         createComponent({
-          showActive: false,
+          customStateProps: {
+            showActive: false,
+          },
         });
 
         expect(findActiveCheckbox().exists()).toBe(false);
@@ -73,7 +83,9 @@ describe('IntegrationForm', () => {
     describe('integrationLevel is instance', () => {
       it('renders ConfirmationModal', () => {
         createComponent({
-          integrationLevel: integrationLevels.INSTANCE,
+          customStateProps: {
+            integrationLevel: integrationLevels.INSTANCE,
+          },
         });
 
         expect(findConfirmationModal().exists()).toBe(true);
@@ -82,7 +94,9 @@ describe('IntegrationForm', () => {
       describe('resetPath is empty', () => {
         it('does not render ResetConfirmationModal and button', () => {
           createComponent({
-            integrationLevel: integrationLevels.INSTANCE,
+            customStateProps: {
+              integrationLevel: integrationLevels.INSTANCE,
+            },
           });
 
           expect(findResetButton().exists()).toBe(false);
@@ -93,8 +107,10 @@ describe('IntegrationForm', () => {
       describe('resetPath is present', () => {
         it('renders ResetConfirmationModal and button', () => {
           createComponent({
-            integrationLevel: integrationLevels.INSTANCE,
-            resetPath: 'resetPath',
+            customStateProps: {
+              integrationLevel: integrationLevels.INSTANCE,
+              resetPath: 'resetPath',
+            },
           });
 
           expect(findResetButton().exists()).toBe(true);
@@ -106,7 +122,9 @@ describe('IntegrationForm', () => {
     describe('integrationLevel is group', () => {
       it('renders ConfirmationModal', () => {
         createComponent({
-          integrationLevel: integrationLevels.GROUP,
+          customStateProps: {
+            integrationLevel: integrationLevels.GROUP,
+          },
         });
 
         expect(findConfirmationModal().exists()).toBe(true);
@@ -115,7 +133,9 @@ describe('IntegrationForm', () => {
       describe('resetPath is empty', () => {
         it('does not render ResetConfirmationModal and button', () => {
           createComponent({
-            integrationLevel: integrationLevels.GROUP,
+            customStateProps: {
+              integrationLevel: integrationLevels.GROUP,
+            },
           });
 
           expect(findResetButton().exists()).toBe(false);
@@ -126,8 +146,10 @@ describe('IntegrationForm', () => {
       describe('resetPath is present', () => {
         it('renders ResetConfirmationModal and button', () => {
           createComponent({
-            integrationLevel: integrationLevels.GROUP,
-            resetPath: 'resetPath',
+            customStateProps: {
+              integrationLevel: integrationLevels.GROUP,
+              resetPath: 'resetPath',
+            },
           });
 
           expect(findResetButton().exists()).toBe(true);
@@ -139,7 +161,9 @@ describe('IntegrationForm', () => {
     describe('integrationLevel is project', () => {
       it('does not render ConfirmationModal', () => {
         createComponent({
-          integrationLevel: 'project',
+          customStateProps: {
+            integrationLevel: 'project',
+          },
         });
 
         expect(findConfirmationModal().exists()).toBe(false);
@@ -147,8 +171,10 @@ describe('IntegrationForm', () => {
 
       it('does not render ResetConfirmationModal and button', () => {
         createComponent({
-          integrationLevel: 'project',
-          resetPath: 'resetPath',
+          customStateProps: {
+            integrationLevel: 'project',
+            resetPath: 'resetPath',
+          },
         });
 
         expect(findResetButton().exists()).toBe(false);
@@ -158,7 +184,9 @@ describe('IntegrationForm', () => {
 
     describe('type is "slack"', () => {
       beforeEach(() => {
-        createComponent({ type: 'slack' });
+        createComponent({
+          customStateProps: { type: 'slack' },
+        });
       });
 
       it('does not render JiraTriggerFields', () => {
@@ -172,14 +200,19 @@ describe('IntegrationForm', () => {
 
     describe('type is "jira"', () => {
       it('renders JiraTriggerFields', () => {
-        createComponent({ type: 'jira' });
+        createComponent({
+          customStateProps: { type: 'jira' },
+        });
 
         expect(findJiraTriggerFields().exists()).toBe(true);
       });
 
       describe('featureFlag jiraIssuesIntegration is false', () => {
         it('does not render JiraIssuesFields', () => {
-          createComponent({ type: 'jira' }, { jiraIssuesIntegration: false });
+          createComponent({
+            customStateProps: { type: 'jira' },
+            featureFlags: { jiraIssuesIntegration: false },
+          });
 
           expect(findJiraIssuesFields().exists()).toBe(false);
         });
@@ -187,8 +220,10 @@ describe('IntegrationForm', () => {
 
       describe('featureFlag jiraIssuesIntegration is true', () => {
         it('renders JiraIssuesFields', () => {
-          createComponent({ type: 'jira' }, { jiraIssuesIntegration: true });
-
+          createComponent({
+            customStateProps: { type: 'jira' },
+            featureFlags: { jiraIssuesIntegration: true },
+          });
           expect(findJiraIssuesFields().exists()).toBe(true);
         });
       });
@@ -200,8 +235,10 @@ describe('IntegrationForm', () => {
         const type = 'slack';
 
         createComponent({
-          triggerEvents: events,
-          type,
+          customStateProps: {
+            triggerEvents: events,
+            type,
+          },
         });
 
         expect(findTriggerFields().exists()).toBe(true);
@@ -218,7 +255,9 @@ describe('IntegrationForm', () => {
         ];
 
         createComponent({
-          fields,
+          customStateProps: {
+            fields,
+          },
         });
 
         const dynamicFields = wrapper.findAll(DynamicField);
@@ -232,13 +271,11 @@ describe('IntegrationForm', () => {
 
     describe('defaultState state is null', () => {
       it('does not render OverrideDropdown', () => {
-        createComponent(
-          {},
-          {},
-          {
+        createComponent({
+          initialState: {
             defaultState: null,
           },
-        );
+        });
 
         expect(findOverrideDropdown().exists()).toBe(false);
       });
@@ -246,18 +283,39 @@ describe('IntegrationForm', () => {
 
     describe('defaultState state is an object', () => {
       it('renders OverrideDropdown', () => {
-        createComponent(
-          {},
-          {},
-          {
+        createComponent({
+          initialState: {
             defaultState: {
               ...mockIntegrationProps,
             },
           },
-        );
+        });
 
         expect(findOverrideDropdown().exists()).toBe(true);
       });
     });
+
+    describe('with `helpHtml` prop', () => {
+      const mockTestId = 'jest-helpHtml-test';
+      const mockHelpHtml = document.createElement('div');
+      mockHelpHtml.setAttribute('data-testid', mockTestId);
+      mockHelpHtml.appendChild(document.createElement('svg'));
+
+      const mockHelpHtmlContainer = document.createElement('div');
+      mockHelpHtmlContainer.appendChild(mockHelpHtml);
+
+      it('renders `helpHtml`', async () => {
+        createComponent({
+          props: {
+            helpHtml: mockHelpHtmlContainer.innerHTML,
+          },
+        });
+
+        const helpHtml = wrapper.findByTestId(mockTestId);
+
+        expect(helpHtml.isVisible()).toBe(true);
+        expect(helpHtml.find('svg').isVisible()).toBe(true);
+      });
+    });
   });
 });