diff options
Diffstat (limited to 'spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js')
-rw-r--r-- | spec/frontend/ci/ci_variable_list/components/ci_environments_dropdown_spec.js | 65 |
1 files changed, 43 insertions, 22 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 1937e3b34b7..64227872af3 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,4 +1,10 @@ -import { GlListboxItem, GlCollapsibleListbox, GlDropdownItem, GlIcon } from '@gitlab/ui'; +import { + GlListboxItem, + GlCollapsibleListbox, + GlDropdownDivider, + GlDropdownItem, + 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'; @@ -10,6 +16,7 @@ describe('Ci environments dropdown', () => { const defaultProps = { areEnvironmentsLoading: false, environments: envs, + hasEnvScopeQuery: false, selectedEnvironmentScope: '', }; @@ -19,19 +26,15 @@ describe('Ci environments dropdown', () => { const findListbox = () => wrapper.findComponent(GlCollapsibleListbox); const findListboxText = () => findListbox().props('toggleText'); const findCreateWildcardButton = () => wrapper.findComponent(GlDropdownItem); + const findDropdownDivider = () => wrapper.findComponent(GlDropdownDivider); const findMaxEnvNote = () => wrapper.findByTestId('max-envs-notice'); - const createComponent = ({ props = {}, searchTerm = '', enableFeatureFlag = false } = {}) => { + const createComponent = ({ props = {}, searchTerm = '' } = {}) => { wrapper = mountExtended(CiEnvironmentsDropdown, { propsData: { ...defaultProps, ...props, }, - provide: { - glFeatures: { - ciLimitEnvironmentScope: enableFeatureFlag, - }, - }, }); findListbox().vm.$emit('search', searchTerm); @@ -42,6 +45,10 @@ describe('Ci environments dropdown', () => { 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); @@ -51,14 +58,14 @@ describe('Ci environments dropdown', () => { describe('Search term is empty', () => { describe.each` - featureFlag | flagStatus | defaultEnvStatus | firstItemValue | envIndices - ${true} | ${'enabled'} | ${'prepends'} | ${'*'} | ${[1, 2, 3]} - ${false} | ${'disabled'} | ${'does not prepend'} | ${envs[0]} | ${[0, 1, 2]} + hasEnvScopeQuery | status | defaultEnvStatus | firstItemValue | envIndices + ${true} | ${'exists'} | ${'prepends'} | ${'*'} | ${[1, 2, 3]} + ${false} | ${'does not exist'} | ${'does not prepend'} | ${envs[0]} | ${[0, 1, 2]} `( - 'when ciLimitEnvironmentScope feature flag is $flagStatus', - ({ featureFlag, defaultEnvStatus, firstItemValue, envIndices }) => { + 'when query for fetching environment scope $status', + ({ defaultEnvStatus, firstItemValue, hasEnvScopeQuery, envIndices }) => { beforeEach(() => { - createComponent({ props: { environments: envs }, enableFeatureFlag: featureFlag }); + createComponent({ props: { environments: envs, hasEnvScopeQuery } }); }); it(`${defaultEnvStatus} * in listbox`, () => { @@ -91,7 +98,7 @@ describe('Ci environments dropdown', () => { }); }); - describe('When ciLimitEnvironmentScope feature flag is disabled', () => { + describe('when environments are not fetched via graphql', () => { const currentEnv = envs[2]; beforeEach(() => { @@ -118,11 +125,15 @@ describe('Ci environments dropdown', () => { }); }); - describe('When ciLimitEnvironmentScope feature flag is enabled', () => { + describe('when fetching environments via graphql', () => { const currentEnv = envs[2]; beforeEach(() => { - createComponent({ enableFeatureFlag: true }); + createComponent({ props: { hasEnvScopeQuery: true } }); + }); + + it('renders dropdown divider', () => { + expect(findDropdownDivider().exists()).toBe(true); }); it('renders environments passed down to it', async () => { @@ -131,6 +142,22 @@ describe('Ci environments dropdown', () => { expect(findAllListboxItems()).toHaveLength(envs.length); }); + it('renders dropdown loading icon while fetch query is loading', () => { + createComponent({ props: { areEnvironmentsLoading: true, hasEnvScopeQuery: 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, hasEnvScopeQuery: 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); @@ -140,12 +167,6 @@ describe('Ci environments dropdown', () => { expect(wrapper.emitted('search-environment-scope')[1]).toEqual([currentEnv]); }); - it('renders loading icon while search query is loading', () => { - createComponent({ enableFeatureFlag: true, props: { areEnvironmentsLoading: true } }); - - expect(findListbox().props('searching')).toBe(true); - }); - it('displays note about max environments shown', () => { expect(findMaxEnvNote().exists()).toBe(true); expect(findMaxEnvNote().text()).toContain(String(ENVIRONMENT_QUERY_LIMIT)); |