diff options
Diffstat (limited to 'spec/frontend/integrations')
10 files changed, 105 insertions, 101 deletions
diff --git a/spec/frontend/integrations/edit/components/active_checkbox_spec.js b/spec/frontend/integrations/edit/components/active_checkbox_spec.js index 0e56fb6454e..df7ffd19747 100644 --- a/spec/frontend/integrations/edit/components/active_checkbox_spec.js +++ b/spec/frontend/integrations/edit/components/active_checkbox_spec.js @@ -1,5 +1,6 @@ import { GlFormCheckbox } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; + import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue'; import { createStore } from '~/integrations/edit/store'; diff --git a/spec/frontend/integrations/edit/components/confirmation_modal_spec.js b/spec/frontend/integrations/edit/components/confirmation_modal_spec.js index 1c126f60c37..805d3971994 100644 --- a/spec/frontend/integrations/edit/components/confirmation_modal_spec.js +++ b/spec/frontend/integrations/edit/components/confirmation_modal_spec.js @@ -1,5 +1,6 @@ import { GlModal } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; + import ConfirmationModal from '~/integrations/edit/components/confirmation_modal.vue'; import { createStore } from '~/integrations/edit/store'; @@ -13,13 +14,10 @@ describe('ConfirmationModal', () => { }; afterEach(() => { - if (wrapper) { - wrapper.destroy(); - wrapper = null; - } + wrapper.destroy(); }); - const findGlModal = () => wrapper.find(GlModal); + const findGlModal = () => wrapper.findComponent(GlModal); describe('template', () => { beforeEach(() => { diff --git a/spec/frontend/integrations/edit/components/dynamic_field_spec.js b/spec/frontend/integrations/edit/components/dynamic_field_spec.js index 2ebb3333c0f..8784b3c2b00 100644 --- a/spec/frontend/integrations/edit/components/dynamic_field_spec.js +++ b/spec/frontend/integrations/edit/components/dynamic_field_spec.js @@ -1,5 +1,6 @@ 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', () => { @@ -24,17 +25,14 @@ describe('DynamicField', () => { }; afterEach(() => { - if (wrapper) { - wrapper.destroy(); - wrapper = null; - } + wrapper.destroy(); }); - const findGlFormGroup = () => wrapper.find(GlFormGroup); - const findGlFormCheckbox = () => wrapper.find(GlFormCheckbox); - const findGlFormInput = () => wrapper.find(GlFormInput); - const findGlFormSelect = () => wrapper.find(GlFormSelect); - const findGlFormTextarea = () => wrapper.find(GlFormTextarea); + const findGlFormGroup = () => wrapper.findComponent(GlFormGroup); + const findGlFormCheckbox = () => wrapper.findComponent(GlFormCheckbox); + const findGlFormInput = () => wrapper.findComponent(GlFormInput); + const findGlFormSelect = () => wrapper.findComponent(GlFormSelect); + const findGlFormTextarea = () => wrapper.findComponent(GlFormTextarea); describe('template', () => { describe.each([ diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js index c015fd0b9e0..cbce26762b1 100644 --- a/spec/frontend/integrations/edit/components/integration_form_spec.js +++ b/spec/frontend/integrations/edit/components/integration_form_spec.js @@ -1,6 +1,6 @@ -import { shallowMount } from '@vue/test-utils'; import { setHTMLFixture } from 'helpers/fixtures'; -import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; + import { mockIntegrationProps } from 'jest/integrations/edit/mock_data'; import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue'; import ConfirmationModal from '~/integrations/edit/components/confirmation_modal.vue'; @@ -23,42 +23,37 @@ describe('IntegrationForm', () => { initialState = {}, props = {}, } = {}) => { - wrapper = extendedWrapper( - shallowMount(IntegrationForm, { - propsData: { ...props }, - store: createStore({ - customState: { ...mockIntegrationProps, ...customStateProps }, - ...initialState, - }), - stubs: { - OverrideDropdown, - ActiveCheckbox, - ConfirmationModal, - JiraTriggerFields, - TriggerFields, - }, - provide: { - glFeatures: featureFlags, - }, + wrapper = shallowMountExtended(IntegrationForm, { + propsData: { ...props }, + store: createStore({ + customState: { ...mockIntegrationProps, ...customStateProps }, + ...initialState, }), - ); + stubs: { + OverrideDropdown, + ActiveCheckbox, + ConfirmationModal, + JiraTriggerFields, + TriggerFields, + }, + provide: { + glFeatures: featureFlags, + }, + }); }; afterEach(() => { - if (wrapper) { - wrapper.destroy(); - wrapper = null; - } + wrapper.destroy(); }); - const findOverrideDropdown = () => wrapper.find(OverrideDropdown); - const findActiveCheckbox = () => wrapper.find(ActiveCheckbox); - const findConfirmationModal = () => wrapper.find(ConfirmationModal); - const findResetConfirmationModal = () => wrapper.find(ResetConfirmationModal); - const findResetButton = () => wrapper.find('[data-testid="reset-button"]'); - const findJiraTriggerFields = () => wrapper.find(JiraTriggerFields); - const findJiraIssuesFields = () => wrapper.find(JiraIssuesFields); - const findTriggerFields = () => wrapper.find(TriggerFields); + const findOverrideDropdown = () => wrapper.findComponent(OverrideDropdown); + const findActiveCheckbox = () => wrapper.findComponent(ActiveCheckbox); + const findConfirmationModal = () => wrapper.findComponent(ConfirmationModal); + const findResetConfirmationModal = () => wrapper.findComponent(ResetConfirmationModal); + const findResetButton = () => wrapper.findByTestId('reset-button'); + const findJiraTriggerFields = () => wrapper.findComponent(JiraTriggerFields); + const findJiraIssuesFields = () => wrapper.findComponent(JiraIssuesFields); + const findTriggerFields = () => wrapper.findComponent(TriggerFields); describe('template', () => { describe('showActive is true', () => { @@ -286,7 +281,7 @@ describe('IntegrationForm', () => { </div> `); - it('renders `helpHtml`', async () => { + it('renders `helpHtml`', () => { const mockHelpHtml = document.querySelector(`[data-testid="${mockTestId}"]`); createComponent({ 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 f121a148f27..eb5f7e9fe40 100644 --- a/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js +++ b/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js @@ -1,10 +1,13 @@ import { GlFormCheckbox, GlFormInput } from '@gitlab/ui'; -import { mount } from '@vue/test-utils'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; + import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue'; import JiraUpgradeCta from '~/integrations/edit/components/jira_upgrade_cta.vue'; import eventHub from '~/integrations/edit/event_hub'; +import { createStore } from '~/integrations/edit/store'; describe('JiraIssuesFields', () => { + let store; let wrapper; const defaultProps = { @@ -13,25 +16,29 @@ describe('JiraIssuesFields', () => { showJiraVulnerabilitiesIntegration: true, }; - const createComponent = ({ props, ...options } = {}) => { - wrapper = mount(JiraIssuesFields, { + const createComponent = ({ isInheriting = false, props, ...options } = {}) => { + store = createStore({ + defaultState: isInheriting ? {} : undefined, + }); + + wrapper = mountExtended(JiraIssuesFields, { propsData: { ...defaultProps, ...props }, + store, stubs: ['jira-issue-creation-vulnerabilities'], ...options, }); }; afterEach(() => { - if (wrapper) { - wrapper.destroy(); - wrapper = null; - } + wrapper.destroy(); }); const findEnableCheckbox = () => wrapper.findComponent(GlFormCheckbox); + const findEnableCheckboxDisabled = () => + findEnableCheckbox().find('[type=checkbox]').attributes('disabled'); const findProjectKey = () => wrapper.findComponent(GlFormInput); const findJiraUpgradeCta = () => wrapper.findComponent(JiraUpgradeCta); - const findJiraForVulnerabilities = () => wrapper.find('[data-testid="jira-for-vulnerabilities"]'); + const findJiraForVulnerabilities = () => wrapper.findByTestId('jira-for-vulnerabilities'); const setEnableCheckbox = async (isEnabled = true) => findEnableCheckbox().vm.$emit('input', isEnabled); @@ -79,6 +86,19 @@ describe('JiraIssuesFields', () => { createComponent({ props: { initialProjectKey: '' } }); }); + it('renders enabled checkbox', () => { + expect(findEnableCheckbox().exists()).toBe(true); + expect(findEnableCheckboxDisabled()).toBeUndefined(); + }); + + it('renders disabled project_key input', () => { + const projectKey = findProjectKey(); + + expect(projectKey.exists()).toBe(true); + expect(projectKey.attributes('disabled')).toBe('disabled'); + expect(projectKey.attributes('required')).toBeUndefined(); + }); + it('does not show upgrade banner', () => { expect(findJiraUpgradeCta().exists()).toBe(false); }); @@ -89,24 +109,20 @@ describe('JiraIssuesFields', () => { expect(wrapper.find('input[name="service[issues_enabled]"]').exists()).toBe(true); }); - it('disables project_key input', () => { - expect(findProjectKey().attributes('disabled')).toBe('disabled'); - }); + describe('when isInheriting = true', () => { + it('disables checkbox and sets input as readonly', () => { + createComponent({ isInheriting: true }); - it('does not require project_key', () => { - expect(findProjectKey().attributes('required')).toBeUndefined(); + expect(findEnableCheckboxDisabled()).toBe('disabled'); + expect(findProjectKey().attributes('readonly')).toBe('readonly'); + }); }); describe('on enable issues', () => { - it('enables project_key input', async () => { + it('enables project_key input as required', async () => { await setEnableCheckbox(true); expect(findProjectKey().attributes('disabled')).toBeUndefined(); - }); - - it('requires project_key input', async () => { - await setEnableCheckbox(true); - expect(findProjectKey().attributes('required')).toBe('required'); }); }); 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 5c04add61a1..9e01371f542 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,6 @@ import { GlFormCheckbox } from '@gitlab/ui'; -import { mount } from '@vue/test-utils'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; + import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue'; describe('JiraTriggerFields', () => { @@ -12,7 +13,7 @@ describe('JiraTriggerFields', () => { }; const createComponent = (props, isInheriting = false) => { - wrapper = mount(JiraTriggerFields, { + wrapper = mountExtended(JiraTriggerFields, { propsData: { ...defaultProps, ...props }, computed: { isInheriting: () => isInheriting, @@ -21,18 +22,15 @@ describe('JiraTriggerFields', () => { }; afterEach(() => { - if (wrapper) { - wrapper.destroy(); - wrapper = null; - } + wrapper.destroy(); }); - const findCommentSettings = () => wrapper.find('[data-testid="comment-settings"]'); - const findCommentDetail = () => wrapper.find('[data-testid="comment-detail"]'); - const findCommentSettingsCheckbox = () => findCommentSettings().find(GlFormCheckbox); + const findCommentSettings = () => wrapper.findByTestId('comment-settings'); + const findCommentDetail = () => wrapper.findByTestId('comment-detail'); + const findCommentSettingsCheckbox = () => findCommentSettings().findComponent(GlFormCheckbox); const findIssueTransitionEnabled = () => wrapper.find('[data-testid="issue-transition-enabled"] input[type="checkbox"]'); - const findIssueTransitionMode = () => wrapper.find('[data-testid="issue-transition-mode"]'); + const findIssueTransitionMode = () => wrapper.findByTestId('issue-transition-mode'); const findIssueTransitionModeRadios = () => findIssueTransitionMode().findAll('input[type="radio"]'); const findIssueTransitionIdsField = () => diff --git a/spec/frontend/integrations/edit/components/jira_upgrade_cta_spec.js b/spec/frontend/integrations/edit/components/jira_upgrade_cta_spec.js index e49a1619627..e90e9a5d2ac 100644 --- a/spec/frontend/integrations/edit/components/jira_upgrade_cta_spec.js +++ b/spec/frontend/integrations/edit/components/jira_upgrade_cta_spec.js @@ -1,4 +1,5 @@ import { shallowMount } from '@vue/test-utils'; + import JiraUpgradeCta from '~/integrations/edit/components/jira_upgrade_cta.vue'; describe('JiraUpgradeCta', () => { @@ -18,13 +19,13 @@ describe('JiraUpgradeCta', () => { it('displays the correct message for premium and lower users', () => { createComponent({ showPremiumMessage: true }); - expect(wrapper.html()).toContain('This is a Premium feature'); - expect(wrapper.html()).toContain(contentMessage); + expect(wrapper.text()).toContain('This is a Premium feature'); + expect(wrapper.text()).toContain(contentMessage); }); it('displays the correct message for ultimate and lower users', () => { createComponent({ showUltimateMessage: true }); - expect(wrapper.html()).toContain('This is an Ultimate feature'); - expect(wrapper.html()).toContain(contentMessage); + expect(wrapper.text()).toContain('This is an Ultimate feature'); + expect(wrapper.text()).toContain(contentMessage); }); }); diff --git a/spec/frontend/integrations/edit/components/override_dropdown_spec.js b/spec/frontend/integrations/edit/components/override_dropdown_spec.js index 592f4514e45..eb43d940f5e 100644 --- a/spec/frontend/integrations/edit/components/override_dropdown_spec.js +++ b/spec/frontend/integrations/edit/components/override_dropdown_spec.js @@ -1,5 +1,6 @@ import { GlDropdown, GlLink } from '@gitlab/ui'; 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'; @@ -26,14 +27,11 @@ describe('OverrideDropdown', () => { }; afterEach(() => { - if (wrapper) { - wrapper.destroy(); - wrapper = null; - } + wrapper.destroy(); }); - const findGlLink = () => wrapper.find(GlLink); - const findGlDropdown = () => wrapper.find(GlDropdown); + const findGlLink = () => wrapper.findComponent(GlLink); + const findGlDropdown = () => wrapper.findComponent(GlDropdown); describe('template', () => { describe('override prop is true', () => { diff --git a/spec/frontend/integrations/edit/components/trigger_fields_spec.js b/spec/frontend/integrations/edit/components/trigger_fields_spec.js index b9d16464e72..a0816682741 100644 --- a/spec/frontend/integrations/edit/components/trigger_fields_spec.js +++ b/spec/frontend/integrations/edit/components/trigger_fields_spec.js @@ -1,5 +1,6 @@ import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui'; -import { mount } from '@vue/test-utils'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; + import TriggerFields from '~/integrations/edit/components/trigger_fields.vue'; describe('TriggerFields', () => { @@ -10,7 +11,7 @@ describe('TriggerFields', () => { }; const createComponent = (props, isInheriting = false) => { - wrapper = mount(TriggerFields, { + wrapper = mountExtended(TriggerFields, { propsData: { ...defaultProps, ...props }, computed: { isInheriting: () => isInheriting, @@ -19,21 +20,19 @@ describe('TriggerFields', () => { }; afterEach(() => { - if (wrapper) { - wrapper.destroy(); - wrapper = null; - } + wrapper.destroy(); }); + const findTriggerLabel = () => wrapper.findByTestId('trigger-fields-group').find('label'); const findAllGlFormGroups = () => wrapper.find('#trigger-fields').findAll(GlFormGroup); - const findAllGlFormCheckboxes = () => wrapper.findAll(GlFormCheckbox); - const findAllGlFormInputs = () => wrapper.findAll(GlFormInput); + const findAllGlFormCheckboxes = () => wrapper.findAllComponents(GlFormCheckbox); + const findAllGlFormInputs = () => wrapper.findAllComponents(GlFormInput); describe.each([true, false])('template, isInheriting = `%p`', (isInheriting) => { it('renders a label with text "Trigger"', () => { createComponent(); - const triggerLabel = wrapper.find('[data-testid="trigger-fields-group"]').find('label'); + const triggerLabel = findTriggerLabel(); expect(triggerLabel.exists()).toBe(true); expect(triggerLabel.text()).toBe('Trigger'); }); @@ -68,7 +67,7 @@ describe('TriggerFields', () => { }); it('renders GlFormInput with description for each event', () => { - const groups = wrapper.find('#trigger-fields').findAll(GlFormGroup); + const groups = findAllGlFormGroups(); expect(groups).toHaveLength(2); groups.wrappers.forEach((group, index) => { @@ -138,11 +137,11 @@ describe('TriggerFields', () => { const expectedResults = [ { name: 'service[push_channel]', - placeholder: 'general, development', + placeholder: '#general, #development', }, { name: 'service[merge_request_channel]', - placeholder: 'general, development', + placeholder: '#general, #development', }, ]; diff --git a/spec/frontend/integrations/index/components/integrations_list_spec.js b/spec/frontend/integrations/index/components/integrations_list_spec.js index 94fd7fc84ee..ee54a5fd359 100644 --- a/spec/frontend/integrations/index/components/integrations_list_spec.js +++ b/spec/frontend/integrations/index/components/integrations_list_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; -import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; + import IntegrationsList from '~/integrations/index/components/integrations_list.vue'; import { mockActiveIntegrations, mockInactiveIntegrations } from '../mock_data'; @@ -10,7 +10,7 @@ describe('IntegrationsList', () => { const findInactiveIntegrationsTable = () => wrapper.findByTestId('inactive-integrations-table'); const createComponent = (propsData = {}) => { - wrapper = extendedWrapper(shallowMount(IntegrationsList, { propsData })); + wrapper = shallowMountExtended(IntegrationsList, { propsData }); }; afterEach(() => { |