diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-05-30 00:09:49 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-05-30 00:09:49 +0300 |
commit | bfa7e92562904b670404e3ad8de5cac725240cd5 (patch) | |
tree | 92d76e8b308200762bf8a9b668dfa5ca211122b2 /spec/frontend/environments | |
parent | f0b765b425efe1f60732854bcf5c2609e1e254ed (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/environments')
-rw-r--r-- | spec/frontend/environments/edit_environment_spec.js | 5 | ||||
-rw-r--r-- | spec/frontend/environments/environment_form_spec.js | 105 |
2 files changed, 108 insertions, 2 deletions
diff --git a/spec/frontend/environments/edit_environment_spec.js b/spec/frontend/environments/edit_environment_spec.js index 853eb185786..c0be1558c43 100644 --- a/spec/frontend/environments/edit_environment_spec.js +++ b/spec/frontend/environments/edit_environment_spec.js @@ -20,7 +20,10 @@ jest.mock('~/alert'); const newExternalUrl = 'https://google.ca'; const environment = { id: '1', name: 'foo', externalUrl: 'https://foo.example.com' }; const resolvedEnvironment = { project: { id: '1', environment } }; -const environmentUpdate = { environment: { id: '1', path: 'path/to/environment' }, errors: [] }; +const environmentUpdate = { + environment: { id: '1', path: 'path/to/environment', clusterAgentId: null }, + errors: [], +}; const environmentUpdateError = { environment: null, errors: [{ message: 'uh oh!' }], diff --git a/spec/frontend/environments/environment_form_spec.js b/spec/frontend/environments/environment_form_spec.js index 50e4e637aa3..9c70d8924b2 100644 --- a/spec/frontend/environments/environment_form_spec.js +++ b/spec/frontend/environments/environment_form_spec.js @@ -1,6 +1,11 @@ -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlCollapsibleListbox } from '@gitlab/ui'; +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import waitForPromises from 'helpers/wait_for_promises'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import EnvironmentForm from '~/environments/components/environment_form.vue'; +import getUserAuthorizedAgents from '~/environments/graphql/queries/user_authorized_agents.query.graphql'; +import createMockApollo from '../__helpers__/mock_apollo_helper'; jest.mock('~/lib/utils/csrf'); @@ -11,6 +16,10 @@ const DEFAULT_PROPS = { }; const PROVIDE = { protectedEnvironmentSettingsPath: '/projects/not_real/settings/ci_cd' }; +const userAccessAuthorizedAgents = [ + { agent: { id: '1', name: 'agent-1' } }, + { agent: { id: '2', name: 'agent-2' } }, +]; describe('~/environments/components/form.vue', () => { let wrapper; @@ -25,6 +34,38 @@ describe('~/environments/components/form.vue', () => { }, }); + const createWrapperWithApollo = ({ propsData = {} } = {}) => { + Vue.use(VueApollo); + + return mountExtended(EnvironmentForm, { + provide: { + ...PROVIDE, + glFeatures: { + environmentSettingsToGraphql: true, + }, + }, + propsData: { + ...DEFAULT_PROPS, + ...propsData, + }, + apolloProvider: createMockApollo([ + [ + getUserAuthorizedAgents, + jest.fn().mockResolvedValue({ + data: { + project: { + id: '1', + userAccessAuthorizedAgents: { nodes: userAccessAuthorizedAgents }, + }, + }, + }), + ], + ]), + }); + }; + + const findAgentSelector = () => wrapper.findComponent(GlCollapsibleListbox); + describe('default', () => { beforeEach(() => { wrapper = createWrapper(); @@ -167,4 +208,66 @@ describe('~/environments/components/form.vue', () => { expect(urlInput.element.value).toBe('https://example.com'); }); }); + + describe('when `environmentSettingsToGraphql feature flag is enabled', () => { + beforeEach(() => { + wrapper = createWrapperWithApollo(); + }); + + it('renders an agent selector listbox', () => { + expect(findAgentSelector().props()).toMatchObject({ + searchable: true, + toggleText: EnvironmentForm.i18n.agentHelpText, + headerText: EnvironmentForm.i18n.agentHelpText, + resetButtonLabel: EnvironmentForm.i18n.reset, + loading: false, + items: [], + }); + }); + + it('sets the items prop of the agent selector after fetching the list', async () => { + findAgentSelector().vm.$emit('shown'); + await waitForPromises(); + + expect(findAgentSelector().props('items')).toEqual([ + { value: '1', text: 'agent-1' }, + { value: '2', text: 'agent-2' }, + ]); + }); + + it('sets the loading prop of the agent selector while fetching the list', async () => { + await findAgentSelector().vm.$emit('shown'); + expect(findAgentSelector().props('loading')).toBe(true); + + await waitForPromises(); + + expect(findAgentSelector().props('loading')).toBe(false); + }); + + it('filters the agent list on user search', async () => { + findAgentSelector().vm.$emit('shown'); + await waitForPromises(); + await findAgentSelector().vm.$emit('search', 'agent-2'); + + expect(findAgentSelector().props('items')).toEqual([{ value: '2', text: 'agent-2' }]); + }); + + it('updates agent selector field with the name of selected agent', async () => { + findAgentSelector().vm.$emit('shown'); + await waitForPromises(); + await findAgentSelector().vm.$emit('select', '2'); + + expect(findAgentSelector().props('toggleText')).toBe('agent-2'); + }); + + it('emits changes to the clusterAgentId', async () => { + findAgentSelector().vm.$emit('shown'); + await waitForPromises(); + await findAgentSelector().vm.$emit('select', '2'); + + expect(wrapper.emitted('change')).toEqual([ + [{ name: '', externalUrl: '', clusterAgentId: '2' }], + ]); + }); + }); }); |