1 files changed, 127 insertions, 5 deletions

diff --git a/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js b/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js
index 5cf8d47bc23..f6154f50bc0 100644
--- a/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js
+++ b/spec/frontend/pipeline_editor/components/pipeline_editor_tabs_spec.js
@@ -1,19 +1,27 @@
-import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { GlAlert, GlLoadingIcon, GlTabs } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import Vue, { nextTick } from 'vue';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import CiConfigMergedPreview from '~/pipeline_editor/components/editor/ci_config_merged_preview.vue';
+import WalkthroughPopover from '~/pipeline_editor/components/walkthrough_popover.vue';
 import CiLint from '~/pipeline_editor/components/lint/ci_lint.vue';
 import PipelineEditorTabs from '~/pipeline_editor/components/pipeline_editor_tabs.vue';
 import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue';
+import { stubExperiments } from 'helpers/experimentation_helper';
 import {
+  CREATE_TAB,
   EDITOR_APP_STATUS_EMPTY,
-  EDITOR_APP_STATUS_ERROR,
   EDITOR_APP_STATUS_LOADING,
   EDITOR_APP_STATUS_INVALID,
   EDITOR_APP_STATUS_VALID,
+  MERGED_TAB,
+  TAB_QUERY_PARAM,
+  TABS_INDEX,
 } from '~/pipeline_editor/constants';
 import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue';
-import { mockLintResponse, mockCiYml } from '../mock_data';
+import { mockLintResponse, mockLintResponseWithoutMerged, mockCiYml } from '../mock_data';
+
+Vue.config.ignoredElements = ['gl-emoji'];
 
 describe('Pipeline editor tabs component', () => {
   let wrapper;
@@ -22,6 +30,7 @@ describe('Pipeline editor tabs component', () => {
   };
 
   const createComponent = ({
+    listeners = {},
     props = {},
     provide = {},
     appStatus = EDITOR_APP_STATUS_VALID,
@@ -31,6 +40,7 @@ describe('Pipeline editor tabs component', () => {
       propsData: {
         ciConfigData: mockLintResponse,
         ciFileContent: mockCiYml,
+        isNewCiConfigFile: true,
         ...props,
       },
       data() {
@@ -43,6 +53,7 @@ describe('Pipeline editor tabs component', () => {
         TextEditor: MockTextEditor,
         EditorTab,
       },
+      listeners,
     });
   };
 
@@ -53,10 +64,12 @@ describe('Pipeline editor tabs component', () => {
 
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findCiLint = () => wrapper.findComponent(CiLint);
+  const findGlTabs = () => wrapper.findComponent(GlTabs);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findPipelineGraph = () => wrapper.findComponent(PipelineGraph);
   const findTextEditor = () => wrapper.findComponent(MockTextEditor);
   const findMergedPreview = () => wrapper.findComponent(CiConfigMergedPreview);
+  const findWalkthroughPopover = () => wrapper.findComponent(WalkthroughPopover);
 
   afterEach(() => {
     wrapper.destroy();
@@ -137,7 +150,7 @@ describe('Pipeline editor tabs component', () => {
 
     describe('when there is a fetch error', () => {
       beforeEach(() => {
-        createComponent({ appStatus: EDITOR_APP_STATUS_ERROR });
+        createComponent({ props: { ciConfigData: mockLintResponseWithoutMerged } });
       });
 
       it('show an error message', () => {
@@ -181,4 +194,113 @@ describe('Pipeline editor tabs component', () => {
       },
     );
   });
+
+  describe('default tab based on url query param', () => {
+    const gitlabUrl = 'https://gitlab.test/ci/editor/';
+    const matchObject = {
+      hostname: 'gitlab.test',
+      pathname: '/ci/editor/',
+      search: '',
+    };
+
+    it(`is ${CREATE_TAB} if the query param ${TAB_QUERY_PARAM} is not present`, () => {
+      setWindowLocation(gitlabUrl);
+      createComponent();
+
+      expect(window.location).toMatchObject(matchObject);
+    });
+
+    it(`is ${CREATE_TAB} tab if the query param ${TAB_QUERY_PARAM} is invalid`, () => {
+      const queryValue = 'FOO';
+      setWindowLocation(`${gitlabUrl}?${TAB_QUERY_PARAM}=${queryValue}`);
+      createComponent();
+
+      // If the query param remains unchanged, then we have ignored it.
+      expect(window.location).toMatchObject({
+        ...matchObject,
+        search: `?${TAB_QUERY_PARAM}=${queryValue}`,
+      });
+    });
+
+    it('is the tab specified in query param and transform it into an index value', async () => {
+      setWindowLocation(`${gitlabUrl}?${TAB_QUERY_PARAM}=${MERGED_TAB}`);
+      createComponent();
+
+      // If the query param has changed to an index, it means we have synced the
+      // query with.
+      expect(window.location).toMatchObject({
+        ...matchObject,
+        search: `?${TAB_QUERY_PARAM}=${TABS_INDEX[MERGED_TAB]}`,
+      });
+    });
+  });
+
+  describe('glTabs', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('passes the `sync-active-tab-with-query-params` prop', () => {
+      expect(findGlTabs().props('syncActiveTabWithQueryParams')).toBe(true);
+    });
+  });
+
+  describe('pipeline_editor_walkthrough experiment', () => {
+    describe('when in control path', () => {
+      beforeEach(() => {
+        stubExperiments({ pipeline_editor_walkthrough: 'control' });
+      });
+
+      it('does not show walkthrough popover', async () => {
+        createComponent({ mountFn: mount });
+        await nextTick();
+        expect(findWalkthroughPopover().exists()).toBe(false);
+      });
+    });
+
+    describe('when in candidate path', () => {
+      beforeEach(() => {
+        stubExperiments({ pipeline_editor_walkthrough: 'candidate' });
+      });
+
+      describe('when isNewCiConfigFile prop is true (default)', () => {
+        beforeEach(async () => {
+          createComponent({
+            mountFn: mount,
+          });
+          await nextTick();
+        });
+
+        it('shows walkthrough popover', async () => {
+          expect(findWalkthroughPopover().exists()).toBe(true);
+        });
+      });
+
+      describe('when isNewCiConfigFile prop is false', () => {
+        it('does not show walkthrough popover', async () => {
+          createComponent({ props: { isNewCiConfigFile: false }, mountFn: mount });
+          await nextTick();
+          expect(findWalkthroughPopover().exists()).toBe(false);
+        });
+      });
+    });
+  });
+
+  it('sets listeners on walkthrough popover', async () => {
+    stubExperiments({ pipeline_editor_walkthrough: 'candidate' });
+
+    const handler = jest.fn();
+
+    createComponent({
+      mountFn: mount,
+      listeners: {
+        event: handler,
+      },
+    });
+    await nextTick();
+
+    findWalkthroughPopover().vm.$emit('event');
+
+    expect(handler).toHaveBeenCalled();
+  });
 });