1 files changed, 23 insertions, 3 deletions

diff --git a/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js b/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
index a1e3d24acfa..7aba336b8e8 100644
--- a/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
+++ b/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from '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';
 import PipelineEditorHeader from '~/pipeline_editor/components/header/pipeline_editor_header.vue';
 import PipelineEditorTabs from '~/pipeline_editor/components/pipeline_editor_tabs.vue';
@@ -13,7 +14,7 @@ import { mockLintResponse, mockCiYml } from './mock_data';
 describe('Pipeline editor home wrapper', () => {
   let wrapper;
 
-  const createComponent = ({ props = {} } = {}) => {
+  const createComponent = ({ props = {}, glFeatures = {} } = {}) => {
     wrapper = shallowMount(PipelineEditorHome, {
       propsData: {
         ciConfigData: mockLintResponse,
@@ -22,13 +23,20 @@ describe('Pipeline editor home wrapper', () => {
         isNewCiConfigFile: false,
         ...props,
       },
+      provide: {
+        glFeatures: {
+          pipelineEditorDrawer: true,
+          ...glFeatures,
+        },
+      },
     });
   };
 
-  const findPipelineEditorHeader = () => wrapper.findComponent(PipelineEditorHeader);
-  const findPipelineEditorTabs = () => wrapper.findComponent(PipelineEditorTabs);
   const findCommitSection = () => wrapper.findComponent(CommitSection);
   const findFileNav = () => wrapper.findComponent(PipelineEditorFileNav);
+  const findPipelineEditorDrawer = () => wrapper.findComponent(PipelineEditorDrawer);
+  const findPipelineEditorHeader = () => wrapper.findComponent(PipelineEditorHeader);
+  const findPipelineEditorTabs = () => wrapper.findComponent(PipelineEditorTabs);
 
   afterEach(() => {
     wrapper.destroy();
@@ -55,6 +63,10 @@ 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('commit form toggle', () => {
@@ -82,4 +94,12 @@ describe('Pipeline editor home wrapper', () => {
       expect(findCommitSection().exists()).toBe(true);
     });
   });
+
+  describe('Pipeline drawer', () => {
+    it('hides the drawer when the feature flag is off', () => {
+      createComponent({ glFeatures: { pipelineEditorDrawer: false } });
+
+      expect(findPipelineEditorDrawer().exists()).toBe(false);
+    });
+  });
 });