Add latest changes from gitlab-org/gitlab@master

4 files changed, 155 insertions, 1 deletions

diff --git a/spec/frontend/ci/pipeline_editor/components/editor/ci_editor_header_spec.js b/spec/frontend/ci/pipeline_editor/components/editor/ci_editor_header_spec.js
index d7f0ce838d6..dc72694d26f 100644
--- a/spec/frontend/ci/pipeline_editor/components/editor/ci_editor_header_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/editor/ci_editor_header_spec.js
@@ -11,11 +11,12 @@ describe('CI Editor Header', () => {
   let wrapper;
   let trackingSpy = null;
 
-  const createComponent = ({ showDrawer = false } = {}) => {
+  const createComponent = ({ showDrawer = false, showJobAssistantDrawer = false } = {}) => {
     wrapper = extendedWrapper(
       shallowMount(CiEditorHeader, {
         propsData: {
           showDrawer,
+          showJobAssistantDrawer,
         },
       }),
     );
diff --git a/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer_spec.js b/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer_spec.js
new file mode 100644
index 00000000000..79200d92598
--- /dev/null
+++ b/spec/frontend/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer_spec.js
@@ -0,0 +1,45 @@
+import { GlDrawer } from '@gitlab/ui';
+import VueApollo from 'vue-apollo';
+import Vue from 'vue';
+import JobAssistantDrawer from '~/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue';
+import waitForPromises from 'helpers/wait_for_promises';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+
+Vue.use(VueApollo);
+
+describe('Job assistant drawer', () => {
+  let wrapper;
+
+  const findDrawer = () => wrapper.findComponent(GlDrawer);
+
+  const findCancelButton = () => wrapper.findByTestId('cancel-button');
+
+  const createComponent = () => {
+    wrapper = mountExtended(JobAssistantDrawer, {
+      propsData: {
+        isVisible: true,
+      },
+    });
+  };
+
+  beforeEach(async () => {
+    createComponent();
+    await waitForPromises();
+  });
+
+  it('should emit close job assistant drawer event when closing the drawer', () => {
+    expect(wrapper.emitted('close-job-assistant-drawer')).toBeUndefined();
+
+    findDrawer().vm.$emit('close');
+
+    expect(wrapper.emitted('close-job-assistant-drawer')).toHaveLength(1);
+  });
+
+  it('should emit close job assistant drawer event when click cancel button', () => {
+    expect(wrapper.emitted('close-job-assistant-drawer')).toBeUndefined();
+
+    findCancelButton().trigger('click');
+
+    expect(wrapper.emitted('close-job-assistant-drawer')).toHaveLength(1);
+  });
+});
diff --git a/spec/frontend/ci/pipeline_editor/components/pipeline_editor_tabs_spec.js b/spec/frontend/ci/pipeline_editor/components/pipeline_editor_tabs_spec.js
index 70310cbdb10..f40db50aab7 100644
--- a/spec/frontend/ci/pipeline_editor/components/pipeline_editor_tabs_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/pipeline_editor_tabs_spec.js
@@ -56,6 +56,7 @@ describe('Pipeline editor tabs component', () => {
         currentTab: CREATE_TAB,
         isNewCiConfigFile: true,
         showDrawer: false,
+        showJobAssistantDrawer: false,
         ...props,
       },
       data() {
diff --git a/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js b/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js
index 621e015e825..4f8f2112abe 100644
--- a/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js
+++ b/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js
@@ -6,6 +6,7 @@ import setWindowLocation from 'helpers/set_window_location_helper';
 import CiEditorHeader from '~/ci/pipeline_editor/components/editor/ci_editor_header.vue';
 import CommitSection from '~/ci/pipeline_editor/components/commit/commit_section.vue';
 import PipelineEditorDrawer from '~/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue';
+import JobAssistantDrawer from '~/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue';
 import PipelineEditorFileNav from '~/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue';
 import PipelineEditorFileTree from '~/ci/pipeline_editor/components/file_tree/container.vue';
 import BranchSwitcher from '~/ci/pipeline_editor/components/file_nav/branch_switcher.vue';
@@ -56,11 +57,13 @@ describe('Pipeline editor home wrapper', () => {
   const findFileNav = () => wrapper.findComponent(PipelineEditorFileNav);
   const findModal = () => wrapper.findComponent(GlModal);
   const findPipelineEditorDrawer = () => wrapper.findComponent(PipelineEditorDrawer);
+  const findJobAssistantDrawer = () => wrapper.findComponent(JobAssistantDrawer);
   const findPipelineEditorFileTree = () => wrapper.findComponent(PipelineEditorFileTree);
   const findPipelineEditorHeader = () => wrapper.findComponent(PipelineEditorHeader);
   const findPipelineEditorTabs = () => wrapper.findComponent(PipelineEditorTabs);
   const findFileTreeBtn = () => wrapper.findByTestId('file-tree-toggle');
   const findHelpBtn = () => wrapper.findByTestId('drawer-toggle');
+  const findJobAssistantBtn = () => wrapper.findByTestId('job-assistant-drawer-toggle');
 
   afterEach(() => {
     localStorage.clear();
@@ -261,6 +264,110 @@ describe('Pipeline editor home wrapper', () => {
     });
   });
 
+  describe('job assistant drawer', () => {
+    const clickHelpBtn = async () => {
+      findHelpBtn().vm.$emit('click');
+      await nextTick();
+    };
+    const clickJobAssistantBtn = async () => {
+      findJobAssistantBtn().vm.$emit('click');
+      await nextTick();
+    };
+
+    const stubs = {
+      CiEditorHeader,
+      GlButton,
+      GlDrawer,
+      PipelineEditorTabs,
+      JobAssistantDrawer,
+    };
+
+    it('hides the job assistant drawer by default', () => {
+      createComponent({
+        glFeatures: {
+          ciJobAssistantDrawer: true,
+        },
+      });
+
+      expect(findJobAssistantDrawer().props('isVisible')).toBe(false);
+    });
+
+    it('toggles the job assistant drawer on button click', async () => {
+      createComponent({
+        stubs,
+        glFeatures: {
+          ciJobAssistantDrawer: true,
+        },
+      });
+
+      await clickJobAssistantBtn();
+
+      expect(findJobAssistantDrawer().props('isVisible')).toBe(true);
+
+      await clickJobAssistantBtn();
+
+      expect(findJobAssistantDrawer().props('isVisible')).toBe(false);
+    });
+
+    it("closes the job assistant drawer through the drawer's close button", async () => {
+      createComponent({
+        stubs,
+        glFeatures: {
+          ciJobAssistantDrawer: true,
+        },
+      });
+
+      await clickJobAssistantBtn();
+
+      expect(findJobAssistantDrawer().props('isVisible')).toBe(true);
+
+      findJobAssistantDrawer().findComponent(GlDrawer).vm.$emit('close');
+      await nextTick();
+
+      expect(findJobAssistantDrawer().props('isVisible')).toBe(false);
+    });
+
+    it('covers helper drawer when opened last', async () => {
+      createComponent({
+        stubs: {
+          ...stubs,
+          PipelineEditorDrawer,
+        },
+        glFeatures: {
+          ciJobAssistantDrawer: true,
+        },
+      });
+
+      await clickHelpBtn();
+      await clickJobAssistantBtn();
+
+      const jobAssistantIndex = Number(findJobAssistantDrawer().props().zIndex);
+      const pipelineEditorDrawerIndex = Number(findPipelineEditorDrawer().props().zIndex);
+
+      expect(jobAssistantIndex).toBeGreaterThan(pipelineEditorDrawerIndex);
+    });
+
+    it('covered by helper drawer when opened first', async () => {
+      createComponent({
+        stubs: {
+          ...stubs,
+          PipelineEditorDrawer,
+        },
+        glFeatures: {
+          ciJobAssistantDrawer: true,
+        },
+      });
+
+      await clickJobAssistantBtn();
+      await clickHelpBtn();
+
+      const jobAssistantIndex = Number(findJobAssistantDrawer().props().zIndex);
+      const pipelineEditorDrawerIndex = Number(findPipelineEditorDrawer().props().zIndex);
+
+      expect(jobAssistantIndex).toBeLessThan(pipelineEditorDrawerIndex);
+    });
+  });
+
   describe('file tree', () => {
     const toggleFileTree = async () => {
       findFileTreeBtn().vm.$emit('click');