1 files changed, 77 insertions, 22 deletions

diff --git a/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js b/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
index 6f969546171..98e2c17967c 100644
--- a/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
+++ b/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
@@ -1,6 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { GlModal } from '@gitlab/ui';
+import { GlButton, GlDrawer, GlModal } from '@gitlab/ui';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import CiEditorHeader from '~/pipeline_editor/components/editor/ci_editor_header.vue';
 import CommitSection from '~/pipeline_editor/components/commit/commit_section.vue';
 import PipelineEditorDrawer from '~/pipeline_editor/components/drawer/pipeline_editor_drawer.vue';
 import PipelineEditorFileNav from '~/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue';
@@ -18,24 +20,26 @@ describe('Pipeline editor home wrapper', () => {
   let wrapper;
 
   const createComponent = ({ props = {}, glFeatures = {}, data = {}, stubs = {} } = {}) => {
-    wrapper = shallowMount(PipelineEditorHome, {
-      data: () => data,
-      propsData: {
-        ciConfigData: mockLintResponse,
-        ciFileContent: mockCiYml,
-        isCiConfigDataLoading: false,
-        isNewCiConfigFile: false,
-        ...props,
-      },
-      provide: {
-        projectFullPath: '',
-        totalBranches: 19,
-        glFeatures: {
-          ...glFeatures,
+    wrapper = extendedWrapper(
+      shallowMount(PipelineEditorHome, {
+        data: () => data,
+        propsData: {
+          ciConfigData: mockLintResponse,
+          ciFileContent: mockCiYml,
+          isCiConfigDataLoading: false,
+          isNewCiConfigFile: false,
+          ...props,
         },
-      },
-      stubs,
-    });
+        provide: {
+          projectFullPath: '',
+          totalBranches: 19,
+          glFeatures: {
+            ...glFeatures,
+          },
+        },
+        stubs,
+      }),
+    );
   };
 
   const findBranchSwitcher = () => wrapper.findComponent(BranchSwitcher);
@@ -45,6 +49,7 @@ describe('Pipeline editor home wrapper', () => {
   const findPipelineEditorDrawer = () => wrapper.findComponent(PipelineEditorDrawer);
   const findPipelineEditorHeader = () => wrapper.findComponent(PipelineEditorHeader);
   const findPipelineEditorTabs = () => wrapper.findComponent(PipelineEditorTabs);
+  const findHelpBtn = () => wrapper.findByTestId('drawer-toggle');
 
   afterEach(() => {
     wrapper.destroy();
@@ -70,10 +75,6 @@ describe('Pipeline editor home wrapper', () => {
     it('shows the commit section by default', () => {
       expect(findCommitSection().exists()).toBe(true);
     });
-
-    it('show the pipeline drawer', () => {
-      expect(findPipelineEditorDrawer().exists()).toBe(true);
-    });
   });
 
   describe('modal when switching branch', () => {
@@ -175,4 +176,58 @@ describe('Pipeline editor home wrapper', () => {
       });
     });
   });
+
+  describe('help drawer', () => {
+    const clickHelpBtn = async () => {
+      findHelpBtn().vm.$emit('click');
+      await nextTick();
+    };
+
+    it('hides the drawer by default', () => {
+      createComponent();
+
+      expect(findPipelineEditorDrawer().props('isVisible')).toBe(false);
+    });
+
+    it('toggles the drawer on button click', async () => {
+      createComponent({
+        stubs: {
+          CiEditorHeader,
+          GlButton,
+          GlDrawer,
+          PipelineEditorTabs,
+          PipelineEditorDrawer,
+        },
+      });
+
+      await clickHelpBtn();
+
+      expect(findPipelineEditorDrawer().props('isVisible')).toBe(true);
+
+      await clickHelpBtn();
+
+      expect(findPipelineEditorDrawer().props('isVisible')).toBe(false);
+    });
+
+    it("closes the drawer through the drawer's close button", async () => {
+      createComponent({
+        stubs: {
+          CiEditorHeader,
+          GlButton,
+          GlDrawer,
+          PipelineEditorTabs,
+          PipelineEditorDrawer,
+        },
+      });
+
+      await clickHelpBtn();
+
+      expect(findPipelineEditorDrawer().props('isVisible')).toBe(true);
+
+      findPipelineEditorDrawer().find(GlDrawer).vm.$emit('close');
+      await nextTick();
+
+      expect(findPipelineEditorDrawer().props('isVisible')).toBe(false);
+    });
+  });
 });