diff options
Diffstat (limited to 'spec/frontend/ci/ci_variable_list')
7 files changed, 189 insertions, 178 deletions
diff --git a/spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js index 64227872af3..353b5fd3c47 100644 --- a/spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js +++ b/spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js @@ -1,10 +1,4 @@ -import { - GlListboxItem, - GlCollapsibleListbox, - GlDropdownDivider, - GlDropdownItem, - GlIcon, -} from '@gitlab/ui'; +import { GlListboxItem, GlCollapsibleListbox, GlDropdownDivider, GlIcon } from '@gitlab/ui'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import { allEnvironments, ENVIRONMENT_QUERY_LIMIT } from '~/ci/ci_variable_list/constants'; import CiEnvironmentsDropdown from '~/ci/ci_variable_list/components/ci_environments_dropdown.vue'; @@ -16,7 +10,6 @@ describe('Ci environments dropdown', () => { const defaultProps = { areEnvironmentsLoading: false, environments: envs, - hasEnvScopeQuery: false, selectedEnvironmentScope: '', }; @@ -25,7 +18,7 @@ describe('Ci environments dropdown', () => { const findActiveIconByIndex = (index) => findListboxItemByIndex(index).findComponent(GlIcon); const findListbox = () => wrapper.findComponent(GlCollapsibleListbox); const findListboxText = () => findListbox().props('toggleText'); - const findCreateWildcardButton = () => wrapper.findComponent(GlDropdownItem); + const findCreateWildcardButton = () => wrapper.findByTestId('create-wildcard-button'); const findDropdownDivider = () => wrapper.findComponent(GlDropdownDivider); const findMaxEnvNote = () => wrapper.findByTestId('max-envs-notice'); @@ -57,32 +50,23 @@ describe('Ci environments dropdown', () => { }); describe('Search term is empty', () => { - describe.each` - hasEnvScopeQuery | status | defaultEnvStatus | firstItemValue | envIndices - ${true} | ${'exists'} | ${'prepends'} | ${'*'} | ${[1, 2, 3]} - ${false} | ${'does not exist'} | ${'does not prepend'} | ${envs[0]} | ${[0, 1, 2]} - `( - 'when query for fetching environment scope $status', - ({ defaultEnvStatus, firstItemValue, hasEnvScopeQuery, envIndices }) => { - beforeEach(() => { - createComponent({ props: { environments: envs, hasEnvScopeQuery } }); - }); - - it(`${defaultEnvStatus} * in listbox`, () => { - expect(findListboxItemByIndex(0).text()).toBe(firstItemValue); - }); - - it('renders all environments', () => { - expect(findListboxItemByIndex(envIndices[0]).text()).toBe(envs[0]); - expect(findListboxItemByIndex(envIndices[1]).text()).toBe(envs[1]); - expect(findListboxItemByIndex(envIndices[2]).text()).toBe(envs[2]); - }); - - it('does not display active checkmark', () => { - expect(findActiveIconByIndex(0).classes('gl-visibility-hidden')).toBe(true); - }); - }, - ); + beforeEach(() => { + createComponent({ props: { environments: envs } }); + }); + + it(`prepends * in listbox`, () => { + expect(findListboxItemByIndex(0).text()).toBe('*'); + }); + + it('renders all environments', () => { + expect(findListboxItemByIndex(1).text()).toBe(envs[0]); + expect(findListboxItemByIndex(2).text()).toBe(envs[1]); + expect(findListboxItemByIndex(3).text()).toBe(envs[2]); + }); + + it('does not display active checkmark', () => { + expect(findActiveIconByIndex(0).classes('gl-visibility-hidden')).toBe(true); + }); }); describe('when `*` is the value of selectedEnvironmentScope props', () => { @@ -98,40 +82,13 @@ describe('Ci environments dropdown', () => { }); }); - describe('when environments are not fetched via graphql', () => { + describe('when fetching environments', () => { const currentEnv = envs[2]; beforeEach(() => { createComponent(); }); - it('filters on the frontend and renders only the environment searched for', async () => { - await findListbox().vm.$emit('search', currentEnv); - - expect(findAllListboxItems()).toHaveLength(1); - expect(findListboxItemByIndex(0).text()).toBe(currentEnv); - }); - - it('does not emit event when searching', async () => { - expect(wrapper.emitted('search-environment-scope')).toBeUndefined(); - - await findListbox().vm.$emit('search', currentEnv); - - expect(wrapper.emitted('search-environment-scope')).toBeUndefined(); - }); - - it('does not display note about max environments shown', () => { - expect(findMaxEnvNote().exists()).toBe(false); - }); - }); - - describe('when fetching environments via graphql', () => { - const currentEnv = envs[2]; - - beforeEach(() => { - createComponent({ props: { hasEnvScopeQuery: true } }); - }); - it('renders dropdown divider', () => { expect(findDropdownDivider().exists()).toBe(true); }); @@ -143,7 +100,7 @@ describe('Ci environments dropdown', () => { }); it('renders dropdown loading icon while fetch query is loading', () => { - createComponent({ props: { areEnvironmentsLoading: true, hasEnvScopeQuery: true } }); + createComponent({ props: { areEnvironmentsLoading: true } }); expect(findListbox().props('loading')).toBe(true); expect(findListbox().props('searching')).toBe(false); @@ -151,7 +108,7 @@ describe('Ci environments dropdown', () => { }); it('renders search loading icon while search query is loading and dropdown is open', async () => { - createComponent({ props: { areEnvironmentsLoading: true, hasEnvScopeQuery: true } }); + createComponent({ props: { areEnvironmentsLoading: true } }); await findListbox().vm.$emit('shown'); expect(findListbox().props('loading')).toBe(false); @@ -188,16 +145,35 @@ describe('Ci environments dropdown', () => { }); }); - describe('when creating a new environment from a search term', () => { - const search = 'new-env'; + describe('when creating a new environment scope from a search term', () => { + const searchTerm = 'new-env'; beforeEach(() => { - createComponent({ searchTerm: search }); + createComponent({ searchTerm }); }); - it('emits create-environment-scope', () => { - findCreateWildcardButton().vm.$emit('click'); + it('sets new environment scope as the selected environment scope', async () => { + findCreateWildcardButton().trigger('click'); + + await findListbox().vm.$emit('search', searchTerm); + + expect(findListbox().props('selected')).toBe(searchTerm); + }); + + it('includes new environment scope in search if it matches search term', async () => { + findCreateWildcardButton().trigger('click'); + + await findListbox().vm.$emit('search', searchTerm); + + expect(findAllListboxItems()).toHaveLength(envs.length + 1); + expect(findListboxItemByIndex(1).text()).toBe(searchTerm); + }); + + it('excludes new environment scope in search if it does not match the search term', async () => { + findCreateWildcardButton().trigger('click'); + + await findListbox().vm.$emit('search', 'not-new-env'); - expect(wrapper.emitted('create-environment-scope')).toEqual([[search]]); + expect(findAllListboxItems()).toHaveLength(envs.length); }); }); }); diff --git a/spec/frontend/ci/ci_variable_list/components/ci_variable_drawer_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_variable_drawer_spec.js index ab5d914a6a1..207ea7aa060 100644 --- a/spec/frontend/ci/ci_variable_list/components/ci_variable_drawer_spec.js +++ b/spec/frontend/ci/ci_variable_list/components/ci_variable_drawer_spec.js @@ -1,4 +1,5 @@ -import { GlDrawer, GlFormCombobox, GlFormInput, GlFormSelect } from '@gitlab/ui'; +import { nextTick } from 'vue'; +import { GlDrawer, GlFormCombobox, GlFormInput, GlFormSelect, GlModal } from '@gitlab/ui'; import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper'; import CiEnvironmentsDropdown from '~/ci/ci_variable_list/components/ci_environments_dropdown.vue'; import CiVariableDrawer from '~/ci/ci_variable_list/components/ci_variable_drawer.vue'; @@ -67,6 +68,8 @@ describe('CI Variable Drawer', () => { }; const findConfirmBtn = () => wrapper.findByTestId('ci-variable-confirm-btn'); + const findConfirmDeleteModal = () => wrapper.findComponent(GlModal); + const findDeleteBtn = () => wrapper.findByTestId('ci-variable-delete-btn'); const findDisabledEnvironmentScopeDropdown = () => wrapper.findComponent(GlFormInput); const findDrawer = () => wrapper.findComponent(GlDrawer); const findEnvironmentScopeDropdown = () => wrapper.findComponent(CiEnvironmentsDropdown); @@ -363,22 +366,118 @@ describe('CI Variable Drawer', () => { }); it('title and confirm button renders the correct text', () => { - expect(findTitle().text()).toBe('Add Variable'); - expect(findConfirmBtn().text()).toBe('Add Variable'); + expect(findTitle().text()).toBe('Add variable'); + expect(findConfirmBtn().text()).toBe('Add variable'); + }); + + it('does not render delete button', () => { + expect(findDeleteBtn().exists()).toBe(false); + }); + + it('dispatches the add-variable event', async () => { + await findKeyField().vm.$emit('input', 'NEW_VARIABLE'); + await findProtectedCheckbox().vm.$emit('input', false); + await findExpandedCheckbox().vm.$emit('input', true); + await findMaskedCheckbox().vm.$emit('input', true); + await findValueField().vm.$emit('input', 'NEW_VALUE'); + + findConfirmBtn().vm.$emit('click'); + + expect(wrapper.emitted('add-variable')).toEqual([ + [ + { + environmentScope: '*', + key: 'NEW_VARIABLE', + masked: true, + protected: false, + raw: false, // opposite of expanded + value: 'NEW_VALUE', + variableType: 'ENV_VAR', + }, + ], + ]); }); }); describe('when editing a variable', () => { beforeEach(() => { createComponent({ - props: { mode: EDIT_VARIABLE_ACTION }, + props: { mode: EDIT_VARIABLE_ACTION, selectedVariable: mockProjectVariableFileType }, stubs: { GlDrawer }, }); }); it('title and confirm button renders the correct text', () => { - expect(findTitle().text()).toBe('Edit Variable'); - expect(findConfirmBtn().text()).toBe('Edit Variable'); + expect(findTitle().text()).toBe('Edit variable'); + expect(findConfirmBtn().text()).toBe('Edit variable'); + }); + + it('dispatches the edit-variable event', async () => { + await findValueField().vm.$emit('input', 'EDITED_VALUE'); + + findConfirmBtn().vm.$emit('click'); + + expect(wrapper.emitted('update-variable')).toEqual([ + [ + { + ...mockProjectVariableFileType, + value: 'EDITED_VALUE', + }, + ], + ]); + }); + }); + + describe('when deleting a variable', () => { + beforeEach(() => { + createComponent({ + mountFn: mountExtended, + props: { mode: EDIT_VARIABLE_ACTION, selectedVariable: mockProjectVariableFileType }, + }); + }); + + it('bubbles up the delete-variable event', async () => { + findDeleteBtn().vm.$emit('click'); + + await nextTick(); + + findConfirmDeleteModal().vm.$emit('primary'); + + expect(wrapper.emitted('delete-variable')).toEqual([[mockProjectVariableFileType]]); + }); + }); + + describe('environment scope events', () => { + beforeEach(() => { + createComponent({ + mountFn: mountExtended, + props: { + mode: EDIT_VARIABLE_ACTION, + selectedVariable: mockProjectVariableFileType, + areScopedVariablesAvailable: true, + hideEnvironmentScope: false, + }, + }); + }); + + it('sets the environment scope', async () => { + await findEnvironmentScopeDropdown().vm.$emit('select-environment', 'staging'); + await findConfirmBtn().vm.$emit('click'); + + expect(wrapper.emitted('update-variable')).toEqual([ + [ + { + ...mockProjectVariableFileType, + environmentScope: 'staging', + }, + ], + ]); + }); + + it('bubbles up the search event', async () => { + await findEnvironmentScopeDropdown().vm.$emit('search-environment-scope', 'staging'); + + expect(wrapper.emitted('search-environment-scope')).toEqual([['staging']]); }); }); }); diff --git a/spec/frontend/ci/ci_variable_list/components/ci_variable_modal_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_variable_modal_spec.js index 7dce23f72c0..5ba9b3b8c20 100644 --- a/spec/frontend/ci/ci_variable_list/components/ci_variable_modal_spec.js +++ b/spec/frontend/ci/ci_variable_list/components/ci_variable_modal_spec.js @@ -12,12 +12,10 @@ import { ENVIRONMENT_SCOPE_LINK_TITLE, AWS_TIP_TITLE, AWS_TIP_MESSAGE, - groupString, instanceString, - projectString, variableOptions, } from '~/ci/ci_variable_list/constants'; -import { mockEnvs, mockVariablesWithScopes, mockVariablesWithUniqueScopes } from '../mocks'; +import { mockVariablesWithScopes } from '../mocks'; import ModalStub from '../stubs'; describe('Ci variable modal', () => { @@ -46,7 +44,6 @@ describe('Ci variable modal', () => { areScopedVariablesAvailable: true, environments: [], hideEnvironmentScope: false, - hasEnvScopeQuery: false, mode: ADD_VARIABLE_ACTION, selectedVariable: {}, variables: [], @@ -352,42 +349,6 @@ describe('Ci variable modal', () => { expect(link.attributes('title')).toBe(ENVIRONMENT_SCOPE_LINK_TITLE); expect(link.attributes('href')).toBe(defaultProvide.environmentScopeLink); }); - - describe('when query for envioronment scope exists', () => { - beforeEach(() => { - createComponent({ - props: { - environments: mockEnvs, - hasEnvScopeQuery: true, - variables: mockVariablesWithUniqueScopes(projectString), - }, - }); - }); - - it('does not merge environment scope sources', () => { - const expectedLength = mockEnvs.length; - - expect(findCiEnvironmentsDropdown().props('environments')).toHaveLength(expectedLength); - }); - }); - - describe('when feature flag is disabled', () => { - const mockGroupVariables = mockVariablesWithUniqueScopes(groupString); - beforeEach(() => { - createComponent({ - props: { - environments: mockEnvs, - variables: mockGroupVariables, - }, - }); - }); - - it('merges environment scope sources', () => { - const expectedLength = mockGroupVariables.length + mockEnvs.length; - - expect(findCiEnvironmentsDropdown().props('environments')).toHaveLength(expectedLength); - }); - }); }); describe('and section is hidden', () => { diff --git a/spec/frontend/ci/ci_variable_list/components/ci_variable_settings_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_variable_settings_spec.js index 79dd638e2bd..04145c2c6aa 100644 --- a/spec/frontend/ci/ci_variable_list/components/ci_variable_settings_spec.js +++ b/spec/frontend/ci/ci_variable_list/components/ci_variable_settings_spec.js @@ -23,7 +23,6 @@ describe('Ci variable table', () => { environments: mapEnvironmentNames(mockEnvs), hideEnvironmentScope: false, isLoading: false, - hasEnvScopeQuery: false, maxVariableLimit: 5, pageInfo: { after: '' }, variables: mockVariablesWithScopes(projectString), @@ -70,7 +69,6 @@ describe('Ci variable table', () => { areEnvironmentsLoading: defaultProps.areEnvironmentsLoading, areScopedVariablesAvailable: defaultProps.areScopedVariablesAvailable, environments: defaultProps.environments, - hasEnvScopeQuery: defaultProps.hasEnvScopeQuery, hideEnvironmentScope: defaultProps.hideEnvironmentScope, variables: defaultProps.variables, mode: ADD_VARIABLE_ACTION, @@ -142,7 +140,7 @@ describe('Ci variable table', () => { }); }); - describe('variable events', () => { + describe('variable events for modal', () => { beforeEach(() => { createComponent(); }); @@ -161,6 +159,25 @@ describe('Ci variable table', () => { }); }); + describe('variable events for drawer', () => { + beforeEach(() => { + createComponent({ featureFlags: { ciVariableDrawer: true } }); + }); + + it.each` + eventName + ${'add-variable'} + ${'update-variable'} + ${'delete-variable'} + `('bubbles up the $eventName event', async ({ eventName }) => { + await findCiVariableTable().vm.$emit('set-selected-variable'); + + await findCiVariableDrawer().vm.$emit(eventName, newVariable); + + expect(wrapper.emitted(eventName)).toEqual([[newVariable]]); + }); + }); + describe('pages events', () => { beforeEach(() => { createComponent(); @@ -178,7 +195,7 @@ describe('Ci variable table', () => { }); }); - describe('environment events', () => { + describe('environment events for modal', () => { beforeEach(() => { createComponent(); }); @@ -191,4 +208,18 @@ describe('Ci variable table', () => { expect(wrapper.emitted('search-environment-scope')).toEqual([['staging']]); }); }); + + describe('environment events for drawer', () => { + beforeEach(() => { + createComponent({ featureFlags: { ciVariableDrawer: true } }); + }); + + it('bubbles up the search event', async () => { + await findCiVariableTable().vm.$emit('set-selected-variable'); + + await findCiVariableDrawer().vm.$emit('search-environment-scope', 'staging'); + + expect(wrapper.emitted('search-environment-scope')).toEqual([['staging']]); + }); + }); }); diff --git a/spec/frontend/ci/ci_variable_list/components/ci_variable_shared_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_variable_shared_spec.js index 6fa1915f3c1..c90ff4cc682 100644 --- a/spec/frontend/ci/ci_variable_list/components/ci_variable_shared_spec.js +++ b/spec/frontend/ci/ci_variable_list/components/ci_variable_shared_spec.js @@ -52,7 +52,6 @@ const mockProvide = { const defaultProps = { areScopedVariablesAvailable: true, - hasEnvScopeQuery: false, pageInfo: {}, hideEnvironmentScope: false, refetchAfterMutation: false, @@ -514,7 +513,6 @@ describe('Ci Variable Shared Component', () => { areEnvironmentsLoading: false, areScopedVariablesAvailable: wrapper.props().areScopedVariablesAvailable, hideEnvironmentScope: defaultProps.hideEnvironmentScope, - hasEnvScopeQuery: props.hasEnvScopeQuery, pageInfo: defaultProps.pageInfo, isLoading: false, maxVariableLimit, diff --git a/spec/frontend/ci/ci_variable_list/mocks.js b/spec/frontend/ci/ci_variable_list/mocks.js index 41dfc0ebfda..9c9c99ad5ea 100644 --- a/spec/frontend/ci/ci_variable_list/mocks.js +++ b/spec/frontend/ci/ci_variable_list/mocks.js @@ -189,7 +189,6 @@ export const createProjectProps = () => { componentName: 'ProjectVariable', entity: 'project', fullPath: '/namespace/project/', - hasEnvScopeQuery: true, id: 'gid://gitlab/Project/20', mutationData: { [ADD_MUTATION_ACTION]: addProjectVariable, @@ -214,7 +213,6 @@ export const createGroupProps = () => { componentName: 'GroupVariable', entity: 'group', fullPath: '/my-group', - hasEnvScopeQuery: false, id: 'gid://gitlab/Group/20', mutationData: { [ADD_MUTATION_ACTION]: addGroupVariable, @@ -233,7 +231,6 @@ export const createGroupProps = () => { export const createInstanceProps = () => { return { componentName: 'InstanceVariable', - hasEnvScopeQuery: false, entity: '', mutationData: { [ADD_MUTATION_ACTION]: addAdminVariable, diff --git a/spec/frontend/ci/ci_variable_list/utils_spec.js b/spec/frontend/ci/ci_variable_list/utils_spec.js index beeae71376a..fbcf0e7c5a5 100644 --- a/spec/frontend/ci/ci_variable_list/utils_spec.js +++ b/spec/frontend/ci/ci_variable_list/utils_spec.js @@ -1,58 +1,7 @@ -import { - createJoinedEnvironments, - convertEnvironmentScope, - mapEnvironmentNames, -} from '~/ci/ci_variable_list/utils'; +import { convertEnvironmentScope, mapEnvironmentNames } from '~/ci/ci_variable_list/utils'; import { allEnvironments } from '~/ci/ci_variable_list/constants'; describe('utils', () => { - const environments = ['dev', 'prod']; - const newEnvironments = ['staging']; - - describe('createJoinedEnvironments', () => { - it('returns only `environments` if `variables` argument is undefined', () => { - const variables = undefined; - - expect(createJoinedEnvironments(variables, environments, [])).toEqual(environments); - }); - - it('returns a list of environments and environment scopes taken from variables in alphabetical order', () => { - const envScope1 = 'new1'; - const envScope2 = 'new2'; - - const variables = [{ environmentScope: envScope1 }, { environmentScope: envScope2 }]; - - expect(createJoinedEnvironments(variables, environments, [])).toEqual([ - environments[0], - envScope1, - envScope2, - environments[1], - ]); - }); - - it('returns combined list with new environments included', () => { - const variables = undefined; - - expect(createJoinedEnvironments(variables, environments, newEnvironments)).toEqual([ - ...environments, - ...newEnvironments, - ]); - }); - - it('removes duplicate environments', () => { - const envScope1 = environments[0]; - const envScope2 = 'new2'; - - const variables = [{ environmentScope: envScope1 }, { environmentScope: envScope2 }]; - - expect(createJoinedEnvironments(variables, environments, [])).toEqual([ - environments[0], - envScope2, - environments[1], - ]); - }); - }); - describe('convertEnvironmentScope', () => { it('converts the * to the `All environments` text', () => { expect(convertEnvironmentScope('*')).toBe(allEnvironments.text); |