diff options
Diffstat (limited to 'spec/frontend/integrations/edit')
8 files changed, 225 insertions, 109 deletions
diff --git a/spec/frontend/integrations/edit/components/active_checkbox_spec.js b/spec/frontend/integrations/edit/components/active_checkbox_spec.js new file mode 100644 index 00000000000..38bcb1e0aab --- /dev/null +++ b/spec/frontend/integrations/edit/components/active_checkbox_spec.js @@ -0,0 +1,76 @@ +import { mount } from '@vue/test-utils'; +import { GlFormCheckbox } from '@gitlab/ui'; +import { createStore } from '~/integrations/edit/store'; + +import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue'; + +describe('ActiveCheckbox', () => { + let wrapper; + + const createComponent = (customStateProps = {}, isInheriting = false) => { + wrapper = mount(ActiveCheckbox, { + store: createStore({ + customState: { ...customStateProps }, + }), + computed: { + isInheriting: () => isInheriting, + }, + }); + }; + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + const findGlFormCheckbox = () => wrapper.find(GlFormCheckbox); + const findInputInCheckbox = () => findGlFormCheckbox().find('input'); + + describe('template', () => { + describe('is inheriting adminSettings', () => { + it('renders GlFormCheckbox as disabled', () => { + createComponent({}, true); + + expect(findGlFormCheckbox().exists()).toBe(true); + expect(findInputInCheckbox().attributes('disabled')).toBe('disabled'); + }); + }); + + describe('initialActivated is false', () => { + it('renders GlFormCheckbox as unchecked', () => { + createComponent({ + initialActivated: false, + }); + + expect(findGlFormCheckbox().exists()).toBe(true); + expect(findGlFormCheckbox().vm.$attrs.checked).toBe(false); + expect(findInputInCheckbox().attributes('disabled')).toBeUndefined(); + }); + }); + + describe('initialActivated is true', () => { + beforeEach(() => { + createComponent({ + initialActivated: true, + }); + }); + + it('renders GlFormCheckbox as checked', () => { + expect(findGlFormCheckbox().exists()).toBe(true); + expect(findGlFormCheckbox().vm.$attrs.checked).toBe(true); + }); + + describe('on checkbox click', () => { + it('switches the form value', async () => { + findInputInCheckbox().trigger('click'); + + await wrapper.vm.$nextTick(); + + expect(findGlFormCheckbox().vm.$attrs.checked).toBe(false); + }); + }); + }); + }); +}); diff --git a/spec/frontend/integrations/edit/components/active_toggle_spec.js b/spec/frontend/integrations/edit/components/active_toggle_spec.js deleted file mode 100644 index 228d8f5fc30..00000000000 --- a/spec/frontend/integrations/edit/components/active_toggle_spec.js +++ /dev/null @@ -1,81 +0,0 @@ -import { mount } from '@vue/test-utils'; -import { GlToggle } from '@gitlab/ui'; - -import ActiveToggle from '~/integrations/edit/components/active_toggle.vue'; - -const GL_TOGGLE_ACTIVE_CLASS = 'is-checked'; -const GL_TOGGLE_DISABLED_CLASS = 'is-disabled'; - -describe('ActiveToggle', () => { - let wrapper; - - const defaultProps = { - initialActivated: true, - }; - - const createComponent = (props = {}, isInheriting = false) => { - wrapper = mount(ActiveToggle, { - propsData: { ...defaultProps, ...props }, - computed: { - isInheriting: () => isInheriting, - }, - }); - }; - - afterEach(() => { - if (wrapper) { - wrapper.destroy(); - wrapper = null; - } - }); - - const findGlToggle = () => wrapper.find(GlToggle); - const findButtonInToggle = () => findGlToggle().find('button'); - const findInputInToggle = () => findGlToggle().find('input'); - - describe('template', () => { - describe('is inheriting adminSettings', () => { - it('renders GlToggle as disabled', () => { - createComponent({}, true); - - expect(findGlToggle().exists()).toBe(true); - expect(findButtonInToggle().classes()).toContain(GL_TOGGLE_DISABLED_CLASS); - }); - }); - - describe('initialActivated is false', () => { - it('renders GlToggle as inactive', () => { - createComponent({ - initialActivated: false, - }); - - expect(findGlToggle().exists()).toBe(true); - expect(findButtonInToggle().classes()).not.toContain(GL_TOGGLE_ACTIVE_CLASS); - expect(findInputInToggle().attributes('value')).toBe('false'); - }); - }); - - describe('initialActivated is true', () => { - beforeEach(() => { - createComponent(); - }); - - it('renders GlToggle as active', () => { - expect(findGlToggle().exists()).toBe(true); - expect(findButtonInToggle().classes()).toContain(GL_TOGGLE_ACTIVE_CLASS); - expect(findInputInToggle().attributes('value')).toBe('true'); - }); - - describe('on toggle click', () => { - it('switches the form value', () => { - findButtonInToggle().trigger('click'); - - wrapper.vm.$nextTick(() => { - expect(findButtonInToggle().classes()).not.toContain(GL_TOGGLE_ACTIVE_CLASS); - expect(findInputInToggle().attributes('value')).toBe('false'); - }); - }); - }); - }); - }); -}); diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js index f8e2eb5e7f4..eeb5d21d62c 100644 --- a/spec/frontend/integrations/edit/components/integration_form_spec.js +++ b/spec/frontend/integrations/edit/components/integration_form_spec.js @@ -3,7 +3,7 @@ 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 ActiveToggle from '~/integrations/edit/components/active_toggle.vue'; +import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue'; import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue'; import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue'; import TriggerFields from '~/integrations/edit/components/trigger_fields.vue'; @@ -21,7 +21,7 @@ describe('IntegrationForm', () => { }), stubs: { OverrideDropdown, - ActiveToggle, + ActiveCheckbox, JiraTriggerFields, TriggerFields, }, @@ -39,27 +39,27 @@ describe('IntegrationForm', () => { }); const findOverrideDropdown = () => wrapper.find(OverrideDropdown); - const findActiveToggle = () => wrapper.find(ActiveToggle); + const findActiveCheckbox = () => wrapper.find(ActiveCheckbox); const findJiraTriggerFields = () => wrapper.find(JiraTriggerFields); const findJiraIssuesFields = () => wrapper.find(JiraIssuesFields); const findTriggerFields = () => wrapper.find(TriggerFields); describe('template', () => { describe('showActive is true', () => { - it('renders ActiveToggle', () => { + it('renders ActiveCheckbox', () => { createComponent(); - expect(findActiveToggle().exists()).toBe(true); + expect(findActiveCheckbox().exists()).toBe(true); }); }); describe('showActive is false', () => { - it('does not render ActiveToggle', () => { + it('does not render ActiveCheckbox', () => { createComponent({ showActive: false, }); - expect(findActiveToggle().exists()).toBe(false); + expect(findActiveCheckbox().exists()).toBe(false); }); }); @@ -137,13 +137,13 @@ describe('IntegrationForm', () => { }); }); - describe('adminState state is null', () => { + describe('defaultState state is null', () => { it('does not render OverrideDropdown', () => { createComponent( {}, {}, { - adminState: null, + defaultState: null, }, ); @@ -151,13 +151,13 @@ describe('IntegrationForm', () => { }); }); - describe('adminState state is an object', () => { + describe('defaultState state is an object', () => { it('renders OverrideDropdown', () => { createComponent( {}, {}, { - adminState: { + defaultState: { ...mockIntegrationProps, }, }, 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 f58825f6297..a727bb9c734 100644 --- a/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js +++ b/spec/frontend/integrations/edit/components/jira_issues_fields_spec.js @@ -57,7 +57,7 @@ describe('JiraIssuesFields', () => { // As per https://vuejs.org/v2/guide/forms.html#Checkbox-1, // browsers don't include unchecked boxes in form submissions. it('includes issues_enabled as false even if unchecked', () => { - expect(wrapper.contains('input[name="service[issues_enabled]"]')).toBe(true); + expect(wrapper.find('input[name="service[issues_enabled]"]').exists()).toBe(true); }); it('disables project_key input', () => { @@ -90,7 +90,23 @@ describe('JiraIssuesFields', () => { it('contains link to editProjectPath', () => { createComponent(); - expect(wrapper.contains(`a[href="${defaultProps.editProjectPath}"]`)).toBe(true); + expect(wrapper.find(`a[href="${defaultProps.editProjectPath}"]`).exists()).toBe(true); + }); + + describe('GitLab issues warning', () => { + const expectedText = 'Consider disabling GitLab issues'; + + it('contains warning when GitLab issues is enabled', () => { + createComponent(); + + expect(wrapper.text()).toContain(expectedText); + }); + + it('does not contain warning when GitLab issues is disabled', () => { + createComponent({ gitlabIssuesEnabled: false }); + + expect(wrapper.text()).not.toContain(expectedText); + }); }); }); }); diff --git a/spec/frontend/integrations/edit/components/override_dropdown_spec.js b/spec/frontend/integrations/edit/components/override_dropdown_spec.js new file mode 100644 index 00000000000..f312c456d5f --- /dev/null +++ b/spec/frontend/integrations/edit/components/override_dropdown_spec.js @@ -0,0 +1,106 @@ +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 OverrideDropdown from '~/integrations/edit/components/override_dropdown.vue'; + +describe('OverrideDropdown', () => { + let wrapper; + + const defaultProps = { + inheritFromId: 1, + override: true, + }; + + const defaultDefaultStateProps = { + integrationLevel: 'group', + }; + + const createComponent = (props = {}, defaultStateProps = {}) => { + wrapper = shallowMount(OverrideDropdown, { + propsData: { ...defaultProps, ...props }, + store: createStore({ + defaultState: { ...defaultDefaultStateProps, ...defaultStateProps }, + }), + }); + }; + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + const findGlLink = () => wrapper.find(GlLink); + const findGlDropdown = () => wrapper.find(GlDropdown); + + describe('template', () => { + describe('override prop is true', () => { + it('renders GlToggle as disabled', () => { + createComponent(); + + expect(findGlDropdown().props('text')).toBe('Use custom settings'); + }); + }); + + describe('override prop is false', () => { + it('renders GlToggle as disabled', () => { + createComponent({ override: false }); + + expect(findGlDropdown().props('text')).toBe('Use default settings'); + }); + }); + + describe('integrationLevel is "project"', () => { + it('renders copy mentioning instance (as default fallback)', () => { + createComponent( + {}, + { + integrationLevel: 'project', + }, + ); + + expect(wrapper.text()).toContain(overrideDropdownDescriptions[integrationLevels.INSTANCE]); + }); + }); + + describe('integrationLevel is "group"', () => { + it('renders copy mentioning group', () => { + createComponent( + {}, + { + integrationLevel: 'group', + }, + ); + + expect(wrapper.text()).toContain(overrideDropdownDescriptions[integrationLevels.GROUP]); + }); + }); + + describe('integrationLevel is "instance"', () => { + it('renders copy mentioning instance', () => { + createComponent( + {}, + { + integrationLevel: 'instance', + }, + ); + + expect(wrapper.text()).toContain(overrideDropdownDescriptions[integrationLevels.INSTANCE]); + }); + }); + + describe('learnMorePath is present', () => { + it('renders GlLink with correct link', () => { + createComponent({ + learnMorePath: '/docs', + }); + + expect(findGlLink().text()).toBe('Learn more'); + expect(findGlLink().attributes('href')).toBe('/docs'); + }); + }); + }); +}); diff --git a/spec/frontend/integrations/edit/mock_data.js b/spec/frontend/integrations/edit/mock_data.js index da2758ec15c..821972b7698 100644 --- a/spec/frontend/integrations/edit/mock_data.js +++ b/spec/frontend/integrations/edit/mock_data.js @@ -1,9 +1,6 @@ -// eslint-disable-next-line import/prefer-default-export export const mockIntegrationProps = { id: 25, - activeToggleProps: { - initialActivated: true, - }, + initialActivated: true, showActive: true, triggerFieldsProps: { initialTriggerCommit: false, diff --git a/spec/frontend/integrations/edit/store/getters_spec.js b/spec/frontend/integrations/edit/store/getters_spec.js index 700d36edaad..3353e0c84cc 100644 --- a/spec/frontend/integrations/edit/store/getters_spec.js +++ b/spec/frontend/integrations/edit/store/getters_spec.js @@ -5,22 +5,22 @@ import { mockIntegrationProps } from '../mock_data'; describe('Integration form store getters', () => { let state; const customState = { ...mockIntegrationProps, type: 'CustomState' }; - const adminState = { ...mockIntegrationProps, type: 'AdminState' }; + const defaultState = { ...mockIntegrationProps, type: 'DefaultState' }; beforeEach(() => { state = createState({ customState }); }); describe('isInheriting', () => { - describe('when adminState is null', () => { + describe('when defaultState is null', () => { it('returns false', () => { expect(isInheriting(state)).toBe(false); }); }); - describe('when adminState is an object', () => { + describe('when defaultState is an object', () => { beforeEach(() => { - state.adminState = adminState; + state.defaultState = defaultState; }); describe('when override is false', () => { @@ -47,11 +47,11 @@ describe('Integration form store getters', () => { describe('propsSource', () => { beforeEach(() => { - state.adminState = adminState; + state.defaultState = defaultState; }); - it('equals adminState if inheriting', () => { - expect(propsSource(state, { isInheriting: true })).toEqual(adminState); + it('equals defaultState if inheriting', () => { + expect(propsSource(state, { isInheriting: true })).toEqual(defaultState); }); it('equals customState if not inheriting', () => { diff --git a/spec/frontend/integrations/edit/store/state_spec.js b/spec/frontend/integrations/edit/store/state_spec.js index a8b431aa310..fc193850a94 100644 --- a/spec/frontend/integrations/edit/store/state_spec.js +++ b/spec/frontend/integrations/edit/store/state_spec.js @@ -3,8 +3,10 @@ import createState from '~/integrations/edit/store/state'; describe('Integration form state factory', () => { it('states default to null', () => { expect(createState()).toEqual({ - adminState: null, + defaultState: null, customState: {}, + isSaving: false, + isTesting: false, override: false, }); }); @@ -17,9 +19,9 @@ describe('Integration form state factory', () => { [null, { inheritFromId: null }, false], [null, { inheritFromId: 25 }, false], ])( - 'for adminState: %p, customState: %p: override = `%p`', - (adminState, customState, expected) => { - expect(createState({ adminState, customState }).override).toEqual(expected); + 'for defaultState: %p, customState: %p: override = `%p`', + (defaultState, customState, expected) => { + expect(createState({ defaultState, customState }).override).toEqual(expected); }, ); }); |