diff options
Diffstat (limited to 'spec/frontend/integrations/edit/components')
8 files changed, 195 insertions, 83 deletions
diff --git a/spec/frontend/integrations/edit/components/active_checkbox_spec.js b/spec/frontend/integrations/edit/components/active_checkbox_spec.js index 38bcb1e0aab..76fd6dd3a48 100644 --- a/spec/frontend/integrations/edit/components/active_checkbox_spec.js +++ b/spec/frontend/integrations/edit/components/active_checkbox_spec.js @@ -1,8 +1,7 @@ -import { mount } from '@vue/test-utils'; import { GlFormCheckbox } from '@gitlab/ui'; -import { createStore } from '~/integrations/edit/store'; - +import { mount } from '@vue/test-utils'; import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue'; +import { createStore } from '~/integrations/edit/store'; describe('ActiveCheckbox', () => { let wrapper; diff --git a/spec/frontend/integrations/edit/components/confirmation_modal_spec.js b/spec/frontend/integrations/edit/components/confirmation_modal_spec.js index b570ab4e844..1c126f60c37 100644 --- a/spec/frontend/integrations/edit/components/confirmation_modal_spec.js +++ b/spec/frontend/integrations/edit/components/confirmation_modal_spec.js @@ -1,8 +1,7 @@ -import { shallowMount } from '@vue/test-utils'; import { GlModal } from '@gitlab/ui'; -import { createStore } from '~/integrations/edit/store'; - +import { shallowMount } from '@vue/test-utils'; import ConfirmationModal from '~/integrations/edit/components/confirmation_modal.vue'; +import { createStore } from '~/integrations/edit/store'; describe('ConfirmationModal', () => { let wrapper; diff --git a/spec/frontend/integrations/edit/components/dynamic_field_spec.js b/spec/frontend/integrations/edit/components/dynamic_field_spec.js index ecd03103992..aaca9fc4e62 100644 --- a/spec/frontend/integrations/edit/components/dynamic_field_spec.js +++ b/spec/frontend/integrations/edit/components/dynamic_field_spec.js @@ -1,5 +1,5 @@ -import { mount } from '@vue/test-utils'; import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui'; +import { mount } from '@vue/test-utils'; import DynamicField from '~/integrations/edit/components/dynamic_field.vue'; describe('DynamicField', () => { diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js index 97e77ac87ab..df855674804 100644 --- a/spec/frontend/integrations/edit/components/integration_form_spec.js +++ b/spec/frontend/integrations/edit/components/integration_form_spec.js @@ -1,38 +1,47 @@ import { shallowMount } from '@vue/test-utils'; +import { setHTMLFixture } from 'helpers/fixtures'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { mockIntegrationProps } from 'jest/integrations/edit/mock_data'; -import { createStore } from '~/integrations/edit/store'; -import IntegrationForm from '~/integrations/edit/components/integration_form.vue'; -import OverrideDropdown from '~/integrations/edit/components/override_dropdown.vue'; import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue'; import ConfirmationModal from '~/integrations/edit/components/confirmation_modal.vue'; -import ResetConfirmationModal from '~/integrations/edit/components/reset_confirmation_modal.vue'; -import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue'; +import DynamicField from '~/integrations/edit/components/dynamic_field.vue'; +import IntegrationForm from '~/integrations/edit/components/integration_form.vue'; import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue'; +import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue'; +import OverrideDropdown from '~/integrations/edit/components/override_dropdown.vue'; +import ResetConfirmationModal from '~/integrations/edit/components/reset_confirmation_modal.vue'; import TriggerFields from '~/integrations/edit/components/trigger_fields.vue'; -import DynamicField from '~/integrations/edit/components/dynamic_field.vue'; import { integrationLevels } from '~/integrations/edit/constants'; +import { createStore } from '~/integrations/edit/store'; 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 +72,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 +84,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 +95,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 +108,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 +123,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 +134,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 +147,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 +162,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 +172,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 +185,9 @@ describe('IntegrationForm', () => { describe('type is "slack"', () => { beforeEach(() => { - createComponent({ type: 'slack' }); + createComponent({ + customStateProps: { type: 'slack' }, + }); }); it('does not render JiraTriggerFields', () => { @@ -172,14 +201,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 +221,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 +236,10 @@ describe('IntegrationForm', () => { const type = 'slack'; createComponent({ - triggerEvents: events, - type, + customStateProps: { + triggerEvents: events, + type, + }, }); expect(findTriggerFields().exists()).toBe(true); @@ -218,7 +256,9 @@ describe('IntegrationForm', () => { ]; createComponent({ - fields, + customStateProps: { + fields, + }, }); const dynamicFields = wrapper.findAll(DynamicField); @@ -232,13 +272,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 +284,43 @@ 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-help-html-test'; + + setHTMLFixture(` + <div data-testid="${mockTestId}"> + <svg class="gl-icon"> + <use></use> + </svg> + </div> + `); + + it('renders `helpHtml`', async () => { + const mockHelpHtml = document.querySelector(`[data-testid="${mockTestId}"]`); + + createComponent({ + props: { + helpHtml: mockHelpHtml.outerHTML, + }, + }); + + const helpHtml = wrapper.findByTestId(mockTestId); + + expect(helpHtml.isVisible()).toBe(true); + expect(helpHtml.find('svg').isVisible()).toBe(true); + }); + }); }); }); diff --git a/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js b/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js index eaeed2703d1..3938e7c7c22 100644 --- a/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js +++ b/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js @@ -1,20 +1,23 @@ -import { mount } from '@vue/test-utils'; - import { GlFormCheckbox, GlFormInput } from '@gitlab/ui'; +import { mount } from '@vue/test-utils'; import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue'; +import eventHub from '~/integrations/edit/event_hub'; describe('JiraIssuesFields', () => { let wrapper; const defaultProps = { - showJiraIssuesIntegration: true, editProjectPath: '/edit', + showJiraIssuesIntegration: true, + showJiraVulnerabilitiesIntegration: true, }; - const createComponent = (props) => { + const createComponent = ({ props, ...options } = {}) => { wrapper = mount(JiraIssuesFields, { propsData: { ...defaultProps, ...props }, + stubs: ['jira-issue-creation-vulnerabilities'], + ...options, }); }; @@ -28,11 +31,14 @@ describe('JiraIssuesFields', () => { const findEnableCheckbox = () => wrapper.find(GlFormCheckbox); const findProjectKey = () => wrapper.find(GlFormInput); const expectedBannerText = 'This is a Premium feature'; + const findJiraForVulnerabilities = () => wrapper.find('[data-testid="jira-for-vulnerabilities"]'); + const setEnableCheckbox = async (isEnabled = true) => + findEnableCheckbox().vm.$emit('input', isEnabled); describe('template', () => { describe('upgrade banner for non-Premium user', () => { beforeEach(() => { - createComponent({ initialProjectKey: '', showJiraIssuesIntegration: false }); + createComponent({ props: { initialProjectKey: '', showJiraIssuesIntegration: false } }); }); it('shows upgrade banner', () => { @@ -47,7 +53,7 @@ describe('JiraIssuesFields', () => { describe('Enable Jira issues checkbox', () => { beforeEach(() => { - createComponent({ initialProjectKey: '' }); + createComponent({ props: { initialProjectKey: '' } }); }); it('does not show upgrade banner', () => { @@ -69,20 +75,16 @@ describe('JiraIssuesFields', () => { }); describe('on enable issues', () => { - it('enables project_key input', () => { - findEnableCheckbox().vm.$emit('input', true); + it('enables project_key input', async () => { + await setEnableCheckbox(true); - return wrapper.vm.$nextTick().then(() => { - expect(findProjectKey().attributes('disabled')).toBeUndefined(); - }); + expect(findProjectKey().attributes('disabled')).toBeUndefined(); }); - it('requires project_key input', () => { - findEnableCheckbox().vm.$emit('input', true); + it('requires project_key input', async () => { + await setEnableCheckbox(true); - return wrapper.vm.$nextTick().then(() => { - expect(findProjectKey().attributes('required')).toBe('required'); - }); + expect(findProjectKey().attributes('required')).toBe('required'); }); }); }); @@ -103,10 +105,60 @@ describe('JiraIssuesFields', () => { }); it('does not contain warning when GitLab issues is disabled', () => { - createComponent({ gitlabIssuesEnabled: false }); + createComponent({ props: { gitlabIssuesEnabled: false } }); expect(wrapper.text()).not.toContain(expectedText); }); }); + + describe('Vulnerabilities creation', () => { + beforeEach(() => { + createComponent({ provide: { glFeatures: { jiraForVulnerabilities: true } } }); + }); + + it.each([true, false])( + 'shows the jira-vulnerabilities component correctly when jira issues enables is set to "%s"', + async (hasJiraIssuesEnabled) => { + await setEnableCheckbox(hasJiraIssuesEnabled); + + expect(findJiraForVulnerabilities().exists()).toBe(hasJiraIssuesEnabled); + }, + ); + + it('passes down the correct initial-issue-type-id value when value is empty', async () => { + await setEnableCheckbox(true); + expect(findJiraForVulnerabilities().attributes('initial-issue-type-id')).toBeUndefined(); + }); + + it('passes down the correct initial-issue-type-id value when value is not empty', async () => { + const jiraIssueType = 'some-jira-issue-type'; + wrapper.setProps({ initialVulnerabilitiesIssuetype: jiraIssueType }); + await setEnableCheckbox(true); + expect(findJiraForVulnerabilities().attributes('initial-issue-type-id')).toBe( + jiraIssueType, + ); + }); + + it('emits "getJiraIssueTypes" to the eventHub when the jira-vulnerabilities component requests to fetch issue types', async () => { + const eventHubEmitSpy = jest.spyOn(eventHub, '$emit'); + + await setEnableCheckbox(true); + await findJiraForVulnerabilities().vm.$emit('request-get-issue-types'); + + expect(eventHubEmitSpy).toHaveBeenCalledWith('getJiraIssueTypes'); + }); + + describe('with "jiraForVulnerabilities" feature flag disabled', () => { + beforeEach(async () => { + createComponent({ + provide: { glFeatures: { jiraForVulnerabilities: false } }, + }); + }); + + it('does not show section', () => { + expect(findJiraForVulnerabilities().exists()).toBe(false); + }); + }); + }); }); }); diff --git a/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js b/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js index a69e8d6e163..c6e7ee44355 100644 --- a/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js +++ b/spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js @@ -1,5 +1,5 @@ -import { mount } from '@vue/test-utils'; import { GlFormCheckbox } from '@gitlab/ui'; +import { mount } from '@vue/test-utils'; import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue'; describe('JiraTriggerFields', () => { diff --git a/spec/frontend/integrations/edit/components/override_dropdown_spec.js b/spec/frontend/integrations/edit/components/override_dropdown_spec.js index f312c456d5f..592f4514e45 100644 --- a/spec/frontend/integrations/edit/components/override_dropdown_spec.js +++ b/spec/frontend/integrations/edit/components/override_dropdown_spec.js @@ -1,9 +1,8 @@ -import { shallowMount } from '@vue/test-utils'; import { GlDropdown, GlLink } from '@gitlab/ui'; -import { createStore } from '~/integrations/edit/store'; - -import { integrationLevels, overrideDropdownDescriptions } from '~/integrations/edit/constants'; +import { shallowMount } from '@vue/test-utils'; import OverrideDropdown from '~/integrations/edit/components/override_dropdown.vue'; +import { integrationLevels, overrideDropdownDescriptions } from '~/integrations/edit/constants'; +import { createStore } from '~/integrations/edit/store'; describe('OverrideDropdown', () => { let wrapper; diff --git a/spec/frontend/integrations/edit/components/trigger_fields_spec.js b/spec/frontend/integrations/edit/components/trigger_fields_spec.js index 3fa1e5b5f5a..3e5326812b1 100644 --- a/spec/frontend/integrations/edit/components/trigger_fields_spec.js +++ b/spec/frontend/integrations/edit/components/trigger_fields_spec.js @@ -1,5 +1,5 @@ -import { mount } from '@vue/test-utils'; import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui'; +import { mount } from '@vue/test-utils'; import TriggerFields from '~/integrations/edit/components/trigger_fields.vue'; describe('TriggerFields', () => { |