Add latest changes from gitlab-org/gitlab@master

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' }],
+      ]);
+    });
+  });
 });