diff options
Diffstat (limited to 'spec/frontend/ci/ci_variable_list')
8 files changed, 12 insertions, 219 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 deleted file mode 100644 index 353b5fd3c47..00000000000 --- a/spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js +++ /dev/null @@ -1,180 +0,0 @@ -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'; - -describe('Ci environments dropdown', () => { - let wrapper; - - const envs = ['dev', 'prod', 'staging']; - const defaultProps = { - areEnvironmentsLoading: false, - environments: envs, - selectedEnvironmentScope: '', - }; - - const findAllListboxItems = () => wrapper.findAllComponents(GlListboxItem); - const findListboxItemByIndex = (index) => wrapper.findAllComponents(GlListboxItem).at(index); - const findActiveIconByIndex = (index) => findListboxItemByIndex(index).findComponent(GlIcon); - const findListbox = () => wrapper.findComponent(GlCollapsibleListbox); - const findListboxText = () => findListbox().props('toggleText'); - const findCreateWildcardButton = () => wrapper.findByTestId('create-wildcard-button'); - const findDropdownDivider = () => wrapper.findComponent(GlDropdownDivider); - const findMaxEnvNote = () => wrapper.findByTestId('max-envs-notice'); - - const createComponent = ({ props = {}, searchTerm = '' } = {}) => { - wrapper = mountExtended(CiEnvironmentsDropdown, { - propsData: { - ...defaultProps, - ...props, - }, - }); - - findListbox().vm.$emit('search', searchTerm); - }; - - describe('No environments found', () => { - beforeEach(() => { - createComponent({ searchTerm: 'stable' }); - }); - - it('renders dropdown divider', () => { - expect(findDropdownDivider().exists()).toBe(true); - }); - - it('renders create button with search term if environments do not contain search term', () => { - const button = findCreateWildcardButton(); - expect(button.exists()).toBe(true); - expect(button.text()).toBe('Create wildcard: stable'); - }); - }); - - describe('Search term is empty', () => { - 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', () => { - const wildcardScope = '*'; - - beforeEach(() => { - createComponent({ props: { selectedEnvironmentScope: wildcardScope } }); - }); - - it('shows the `All environments` text and not the wildcard', () => { - expect(findListboxText()).toContain(allEnvironments.text); - expect(findListboxText()).not.toContain(wildcardScope); - }); - }); - - describe('when fetching environments', () => { - const currentEnv = envs[2]; - - beforeEach(() => { - createComponent(); - }); - - it('renders dropdown divider', () => { - expect(findDropdownDivider().exists()).toBe(true); - }); - - it('renders environments passed down to it', async () => { - await findListbox().vm.$emit('search', currentEnv); - - expect(findAllListboxItems()).toHaveLength(envs.length); - }); - - it('renders dropdown loading icon while fetch query is loading', () => { - createComponent({ props: { areEnvironmentsLoading: true } }); - - expect(findListbox().props('loading')).toBe(true); - expect(findListbox().props('searching')).toBe(false); - expect(findDropdownDivider().exists()).toBe(false); - }); - - it('renders search loading icon while search query is loading and dropdown is open', async () => { - createComponent({ props: { areEnvironmentsLoading: true } }); - await findListbox().vm.$emit('shown'); - - expect(findListbox().props('loading')).toBe(false); - expect(findListbox().props('searching')).toBe(true); - }); - - it('emits event when searching', async () => { - expect(wrapper.emitted('search-environment-scope')).toHaveLength(1); - - await findListbox().vm.$emit('search', currentEnv); - - expect(wrapper.emitted('search-environment-scope')).toHaveLength(2); - expect(wrapper.emitted('search-environment-scope')[1]).toEqual([currentEnv]); - }); - - it('displays note about max environments shown', () => { - expect(findMaxEnvNote().exists()).toBe(true); - expect(findMaxEnvNote().text()).toContain(String(ENVIRONMENT_QUERY_LIMIT)); - }); - }); - - describe('Custom events', () => { - describe('when selecting an environment', () => { - const itemIndex = 0; - - beforeEach(() => { - createComponent(); - }); - - it('emits `select-environment` when an environment is clicked', () => { - findListbox().vm.$emit('select', envs[itemIndex]); - - expect(wrapper.emitted('select-environment')).toEqual([[envs[itemIndex]]]); - }); - }); - - describe('when creating a new environment scope from a search term', () => { - const searchTerm = 'new-env'; - beforeEach(() => { - createComponent({ searchTerm }); - }); - - 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(findAllListboxItems()).toHaveLength(envs.length); - }); - }); - }); -}); diff --git a/spec/frontend/ci/ci_variable_list/components/ci_group_variables_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_group_variables_spec.js index 567a49d663c..0b5440d1bee 100644 --- a/spec/frontend/ci/ci_variable_list/components/ci_group_variables_spec.js +++ b/spec/frontend/ci/ci_variable_list/components/ci_group_variables_spec.js @@ -9,7 +9,7 @@ import { DELETE_MUTATION_ACTION, UPDATE_MUTATION_ACTION, } from '~/ci/ci_variable_list/constants'; -import getGroupEnvironments from '~/ci/ci_variable_list/graphql/queries/group_environments.query.graphql'; +import { getGroupEnvironments } from '~/ci/common/private/ci_environments_dropdown'; import getGroupVariables from '~/ci/ci_variable_list/graphql/queries/group_variables.query.graphql'; import addGroupVariable from '~/ci/ci_variable_list/graphql/mutations/group_add_variable.mutation.graphql'; import deleteGroupVariable from '~/ci/ci_variable_list/graphql/mutations/group_delete_variable.mutation.graphql'; diff --git a/spec/frontend/ci/ci_variable_list/components/ci_project_variables_spec.js b/spec/frontend/ci/ci_variable_list/components/ci_project_variables_spec.js index 69b0d4261b2..66a085f2661 100644 --- a/spec/frontend/ci/ci_variable_list/components/ci_project_variables_spec.js +++ b/spec/frontend/ci/ci_variable_list/components/ci_project_variables_spec.js @@ -9,7 +9,7 @@ import { DELETE_MUTATION_ACTION, UPDATE_MUTATION_ACTION, } from '~/ci/ci_variable_list/constants'; -import getProjectEnvironments from '~/ci/ci_variable_list/graphql/queries/project_environments.query.graphql'; +import { getProjectEnvironments } from '~/ci/common/private/ci_environments_dropdown'; import getProjectVariables from '~/ci/ci_variable_list/graphql/queries/project_variables.query.graphql'; import addProjectVariable from '~/ci/ci_variable_list/graphql/mutations/project_add_variable.mutation.graphql'; import deleteProjectVariable from '~/ci/ci_variable_list/graphql/mutations/project_delete_variable.mutation.graphql'; 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 721e2b831fc..645aaf798d4 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 @@ -11,7 +11,7 @@ import { } from '@gitlab/ui'; import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { helpPagePath } from '~/helpers/help_page_helper'; -import CiEnvironmentsDropdown from '~/ci/ci_variable_list/components/ci_environments_dropdown.vue'; +import CiEnvironmentsDropdown from '~/ci/common/private/ci_environments_dropdown'; import CiVariableDrawer from '~/ci/ci_variable_list/components/ci_variable_drawer.vue'; import { awsTokenList } from '~/ci/ci_variable_list/components/ci_variable_autocomplete_tokens'; import { @@ -113,6 +113,10 @@ describe('CI Variable Drawer', () => { helpPagePath('ci/variables/index', { anchor: 'define-a-cicd-variable-in-the-ui' }), ); }); + + it('value field is resizable', () => { + expect(findValueField().props('noResize')).toBe(false); + }); }); describe('validations', () => { @@ -513,7 +517,7 @@ describe('CI Variable Drawer', () => { it('title and confirm button renders the correct text', () => { expect(findTitle().text()).toBe('Edit variable'); - expect(findConfirmBtn().text()).toBe('Edit variable'); + expect(findConfirmBtn().text()).toBe('Save changes'); }); it('dispatches the edit-variable event', async () => { 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 01d3cdf504d..078958fe44a 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 @@ -2,14 +2,12 @@ import { shallowMount } from '@vue/test-utils'; import CiVariableSettings from '~/ci/ci_variable_list/components/ci_variable_settings.vue'; import CiVariableTable from '~/ci/ci_variable_list/components/ci_variable_table.vue'; import CiVariableDrawer from '~/ci/ci_variable_list/components/ci_variable_drawer.vue'; - import { ADD_VARIABLE_ACTION, EDIT_VARIABLE_ACTION, projectString, } from '~/ci/ci_variable_list/constants'; -import { mapEnvironmentNames } from '~/ci/ci_variable_list/utils'; - +import { mapEnvironmentNames } from '~/ci/common/private/ci_environments_dropdown'; import { mockEnvs, mockVariablesWithScopes, newVariable } from '../mocks'; describe('Ci variable table', () => { 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 c90ff4cc682..f9c1cbe0d30 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 @@ -11,13 +11,11 @@ import { resolvers } from '~/ci/ci_variable_list/graphql/settings'; import ciVariableShared from '~/ci/ci_variable_list/components/ci_variable_shared.vue'; import ciVariableSettings from '~/ci/ci_variable_list/components/ci_variable_settings.vue'; import ciVariableTable from '~/ci/ci_variable_list/components/ci_variable_table.vue'; -import getProjectEnvironments from '~/ci/ci_variable_list/graphql/queries/project_environments.query.graphql'; +import { getProjectEnvironments } from '~/ci/common/private/ci_environments_dropdown'; import getAdminVariables from '~/ci/ci_variable_list/graphql/queries/variables.query.graphql'; import getGroupVariables from '~/ci/ci_variable_list/graphql/queries/group_variables.query.graphql'; import getProjectVariables from '~/ci/ci_variable_list/graphql/queries/project_variables.query.graphql'; - import { - ENVIRONMENT_QUERY_LIMIT, environmentFetchErrorText, genericMutationErrorText, variableFetchErrorText, @@ -230,7 +228,7 @@ describe('Ci Variable Shared Component', () => { it('initial query is called with the correct variables', () => { expect(mockEnvironments).toHaveBeenCalledWith({ - first: ENVIRONMENT_QUERY_LIMIT, + first: 30, fullPath: '/namespace/project/', search: '', }); diff --git a/spec/frontend/ci/ci_variable_list/mocks.js b/spec/frontend/ci/ci_variable_list/mocks.js index 9c9c99ad5ea..35bca408f17 100644 --- a/spec/frontend/ci/ci_variable_list/mocks.js +++ b/spec/frontend/ci/ci_variable_list/mocks.js @@ -20,7 +20,7 @@ import updateProjectVariable from '~/ci/ci_variable_list/graphql/mutations/proje import getAdminVariables from '~/ci/ci_variable_list/graphql/queries/variables.query.graphql'; import getGroupVariables from '~/ci/ci_variable_list/graphql/queries/group_variables.query.graphql'; -import getProjectEnvironments from '~/ci/ci_variable_list/graphql/queries/project_environments.query.graphql'; +import { getProjectEnvironments } from '~/ci/common/private/ci_environments_dropdown'; import getProjectVariables from '~/ci/ci_variable_list/graphql/queries/project_variables.query.graphql'; export const devName = 'dev'; diff --git a/spec/frontend/ci/ci_variable_list/utils_spec.js b/spec/frontend/ci/ci_variable_list/utils_spec.js deleted file mode 100644 index fbcf0e7c5a5..00000000000 --- a/spec/frontend/ci/ci_variable_list/utils_spec.js +++ /dev/null @@ -1,27 +0,0 @@ -import { convertEnvironmentScope, mapEnvironmentNames } from '~/ci/ci_variable_list/utils'; -import { allEnvironments } from '~/ci/ci_variable_list/constants'; - -describe('utils', () => { - describe('convertEnvironmentScope', () => { - it('converts the * to the `All environments` text', () => { - expect(convertEnvironmentScope('*')).toBe(allEnvironments.text); - }); - - it('returns the environment as is if not the *', () => { - expect(convertEnvironmentScope('prod')).toBe('prod'); - }); - }); - - describe('mapEnvironmentNames', () => { - const envName = 'dev'; - const envName2 = 'prod'; - - const nodes = [ - { name: envName, otherProp: {} }, - { name: envName2, otherProp: {} }, - ]; - it('flatten a nodes array with only their names', () => { - expect(mapEnvironmentNames(nodes)).toEqual([envName, envName2]); - }); - }); -}); |