1 files changed, 96 insertions, 1 deletions
diff --git a/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js b/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
index 98e2c17967c..bf0f7fd8c9f 100644
--- a/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
+++ b/spec/frontend/pipeline_editor/pipeline_editor_home_spec.js
@@ -6,10 +6,17 @@ import CiEditorHeader from '~/pipeline_editor/components/editor/ci_editor_header
 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 PipelineEditorFileTree from '~/pipeline_editor/components/file_tree/container.vue';
 import BranchSwitcher from '~/pipeline_editor/components/file_nav/branch_switcher.vue';
 import PipelineEditorHeader from '~/pipeline_editor/components/header/pipeline_editor_header.vue';
 import PipelineEditorTabs from '~/pipeline_editor/components/pipeline_editor_tabs.vue';
-import { MERGED_TAB, VISUALIZE_TAB, CREATE_TAB, LINT_TAB } from '~/pipeline_editor/constants';
+import {
+  MERGED_TAB,
+  VISUALIZE_TAB,
+  CREATE_TAB,
+  LINT_TAB,
+  FILE_TREE_DISPLAY_KEY,
+} from '~/pipeline_editor/constants';
 import PipelineEditorHome from '~/pipeline_editor/pipeline_editor_home.vue';
 
 import { mockLintResponse, mockCiYml } from './mock_data';
@@ -47,11 +54,14 @@ describe('Pipeline editor home wrapper', () => {
   const findFileNav = () => wrapper.findComponent(PipelineEditorFileNav);
   const findModal = () => wrapper.findComponent(GlModal);
   const findPipelineEditorDrawer = () => wrapper.findComponent(PipelineEditorDrawer);
+  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');
 
   afterEach(() => {
+    localStorage.clear();
     wrapper.destroy();
   });
 
@@ -230,4 +240,89 @@ describe('Pipeline editor home wrapper', () => {
       expect(findPipelineEditorDrawer().props('isVisible')).toBe(false);
     });
   });
+
+  describe('file tree', () => {
+    const toggleFileTree = async () => {
+      findFileTreeBtn().vm.$emit('click');
+      await nextTick();
+    };
+
+    describe('with pipelineEditorFileTree feature flag OFF', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('hides the file tree', () => {
+        expect(findFileTreeBtn().exists()).toBe(false);
+        expect(findPipelineEditorFileTree().exists()).toBe(false);
+      });
+    });
+
+    describe('with pipelineEditorFileTree feature flag ON', () => {
+      describe('button toggle', () => {
+        beforeEach(() => {
+          createComponent({
+            glFeatures: {
+              pipelineEditorFileTree: true,
+            },
+            stubs: {
+              GlButton,
+              PipelineEditorFileNav,
+            },
+          });
+        });
+
+        it('shows button toggle', () => {
+          expect(findFileTreeBtn().exists()).toBe(true);
+        });
+
+        it('toggles the drawer on button click', async () => {
+          await toggleFileTree();
+
+          expect(findPipelineEditorFileTree().exists()).toBe(true);
+
+          await toggleFileTree();
+
+          expect(findPipelineEditorFileTree().exists()).toBe(false);
+        });
+
+        it('sets the display state in local storage', async () => {
+          await toggleFileTree();
+
+          expect(localStorage.getItem(FILE_TREE_DISPLAY_KEY)).toBe('true');
+
+          await toggleFileTree();
+
+          expect(localStorage.getItem(FILE_TREE_DISPLAY_KEY)).toBe('false');
+        });
+      });
+
+      describe('when file tree display state is saved in local storage', () => {
+        beforeEach(() => {
+          localStorage.setItem(FILE_TREE_DISPLAY_KEY, 'true');
+          createComponent({
+            glFeatures: { pipelineEditorFileTree: true },
+            stubs: { PipelineEditorFileNav },
+          });
+        });
+
+        it('shows the file tree by default', () => {
+          expect(findPipelineEditorFileTree().exists()).toBe(true);
+        });
+      });
+
+      describe('when file tree display state is not saved in local storage', () => {
+        beforeEach(() => {
+          createComponent({
+            glFeatures: { pipelineEditorFileTree: true },
+            stubs: { PipelineEditorFileNav },
+          });
+        });
+
+        it('hides the file tree by default', () => {
+          expect(findPipelineEditorFileTree().exists()).toBe(false);
+        });
+      });
+    });
+  });
 });