Add latest changes from gitlab-org/gitlab@master

5 files changed, 190 insertions, 9 deletions

diff --git a/spec/frontend/ide/init_gitlab_web_ide_spec.js b/spec/frontend/ide/init_gitlab_web_ide_spec.js
new file mode 100644
index 00000000000..ec8559f1b56
--- /dev/null
+++ b/spec/frontend/ide/init_gitlab_web_ide_spec.js
@@ -0,0 +1,62 @@
+import { start } from '@gitlab/web-ide';
+import { initGitlabWebIDE } from '~/ide/init_gitlab_web_ide';
+import { TEST_HOST } from 'helpers/test_constants';
+
+jest.mock('@gitlab/web-ide');
+
+const ROOT_ELEMENT_ID = 'ide';
+const TEST_NONCE = 'test123nonce';
+const TEST_PROJECT = { path_with_namespace: 'group1/project1' };
+const TEST_BRANCH_NAME = '12345-foo-patch';
+const TEST_GITLAB_URL = 'https://test-gitlab/';
+const TEST_GITLAB_WEB_IDE_PUBLIC_PATH = 'test/webpack/assets/gitlab-web-ide/public/path';
+
+describe('ide/init_gitlab_web_ide', () => {
+  const createRootElement = () => {
+    const el = document.createElement('div');
+
+    el.id = ROOT_ELEMENT_ID;
+    // why: We'll test that this class is removed later
+    el.classList.add('ide-loading');
+    el.dataset.project = JSON.stringify(TEST_PROJECT);
+    el.dataset.cspNonce = TEST_NONCE;
+    el.dataset.branchName = TEST_BRANCH_NAME;
+
+    document.body.append(el);
+  };
+  const findRootElement = () => document.getElementById(ROOT_ELEMENT_ID);
+  const act = () => initGitlabWebIDE(findRootElement());
+
+  beforeEach(() => {
+    process.env.GITLAB_WEB_IDE_PUBLIC_PATH = TEST_GITLAB_WEB_IDE_PUBLIC_PATH;
+    window.gon.gitlab_url = TEST_GITLAB_URL;
+
+    createRootElement();
+
+    act();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('calls start with element', () => {
+    expect(start).toHaveBeenCalledWith(findRootElement(), {
+      baseUrl: `${TEST_HOST}/${TEST_GITLAB_WEB_IDE_PUBLIC_PATH}`,
+      projectPath: TEST_PROJECT.path_with_namespace,
+      ref: TEST_BRANCH_NAME,
+      gitlabUrl: TEST_GITLAB_URL,
+      nonce: TEST_NONCE,
+    });
+  });
+
+  it('clears classes and data from root element', () => {
+    const rootEl = findRootElement();
+
+    // why: Snapshot to test that `ide-loading` was removed and no other
+    //      artifacts are remaining.
+    expect(rootEl.outerHTML).toBe(
+      '<div id="ide" class="gl--flex-center gl-relative gl-h-full"></div>',
+    );
+  });
+});
diff --git a/spec/frontend/pipeline_wizard/components/editor_spec.js b/spec/frontend/pipeline_wizard/components/editor_spec.js
index 540a08d2c7f..b4ddc6e7d42 100644
--- a/spec/frontend/pipeline_wizard/components/editor_spec.js
+++ b/spec/frontend/pipeline_wizard/components/editor_spec.js
@@ -57,13 +57,4 @@ describe('Pages Yaml Editor wrapper', () => {
       });
     });
   });
-
-  describe('events', () => {
-    const wrapper = mount(YamlEditor, defaultOptions);
-
-    it('emits touch if content is changed in editor', async () => {
-      await wrapper.vm.editor.setValue('foo: boo');
-      expect(wrapper.emitted('touch')).toEqual([expect.any(Array)]);
-    });
-  });
 });
diff --git a/spec/frontend/pipeline_wizard/components/wrapper_spec.js b/spec/frontend/pipeline_wizard/components/wrapper_spec.js
index 357a9d21723..9e73ca6c9b7 100644
--- a/spec/frontend/pipeline_wizard/components/wrapper_spec.js
+++ b/spec/frontend/pipeline_wizard/components/wrapper_spec.js
@@ -2,6 +2,7 @@ import { Document, parseDocument } from 'yaml';
 import { GlProgressBar } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
+import { mockTracking } from 'helpers/tracking_helper';
 import PipelineWizardWrapper, { i18n } from '~/pipeline_wizard/components/wrapper.vue';
 import WizardStep from '~/pipeline_wizard/components/step.vue';
 import CommitStep from '~/pipeline_wizard/components/commit.vue';
@@ -19,9 +20,11 @@ describe('Pipeline Wizard - wrapper.vue', () => {
   const steps = parseDocument(stepsYaml).toJS();
 
   const getAsYamlNode = (value) => new Document(value).contents;
+  const templateId = 'my-namespace/my-template';
   const createComponent = (props = {}, mountFn = shallowMountExtended) => {
     wrapper = mountFn(PipelineWizardWrapper, {
       propsData: {
+        templateId,
         projectPath: '/user/repo',
         defaultBranch: 'main',
         filename: '.gitlab-ci.yml',
@@ -311,4 +314,126 @@ describe('Pipeline Wizard - wrapper.vue', () => {
       });
     });
   });
+
+  describe('when commit step done', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('emits done', () => {
+      expect(wrapper.emitted('done')).toBeUndefined();
+
+      wrapper.findComponent(CommitStep).vm.$emit('done');
+
+      expect(wrapper.emitted('done')).toHaveLength(1);
+    });
+  });
+
+  describe('tracking', () => {
+    let trackingSpy;
+    const trackingCategory = `pipeline_wizard:${templateId}`;
+
+    const setUpTrackingSpy = () => {
+      trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+    };
+
+    it('tracks next button click event', () => {
+      createComponent();
+      setUpTrackingSpy();
+      findFirstVisibleStep().vm.$emit('next');
+
+      expect(trackingSpy).toHaveBeenCalledWith(trackingCategory, 'click_button', {
+        category: trackingCategory,
+        property: 'next',
+        label: 'pipeline_wizard_navigation',
+        extras: {
+          fromStep: 0,
+          toStep: 1,
+        },
+      });
+    });
+
+    it('tracks back button click event', () => {
+      createComponent();
+
+      // Navigate to step 1 without the spy set up
+      findFirstVisibleStep().vm.$emit('next');
+
+      // Now enable the tracking spy
+      setUpTrackingSpy();
+
+      findFirstVisibleStep().vm.$emit('back');
+
+      expect(trackingSpy).toHaveBeenCalledWith(trackingCategory, 'click_button', {
+        category: trackingCategory,
+        property: 'back',
+        label: 'pipeline_wizard_navigation',
+        extras: {
+          fromStep: 1,
+          toStep: 0,
+        },
+      });
+    });
+
+    it('tracks back button click event on the commit step', () => {
+      createComponent();
+
+      // Navigate to step 2 without the spy set up
+      findFirstVisibleStep().vm.$emit('next');
+      findFirstVisibleStep().vm.$emit('next');
+
+      // Now enable the tracking spy
+      setUpTrackingSpy();
+
+      wrapper.findComponent(CommitStep).vm.$emit('back');
+
+      expect(trackingSpy).toHaveBeenCalledWith(trackingCategory, 'click_button', {
+        category: trackingCategory,
+        property: 'back',
+        label: 'pipeline_wizard_navigation',
+        extras: {
+          fromStep: 2,
+          toStep: 1,
+        },
+      });
+    });
+
+    it('tracks done event on the commit step', () => {
+      createComponent();
+
+      // Navigate to step 2 without the spy set up
+      findFirstVisibleStep().vm.$emit('next');
+      findFirstVisibleStep().vm.$emit('next');
+
+      // Now enable the tracking spy
+      setUpTrackingSpy();
+
+      wrapper.findComponent(CommitStep).vm.$emit('done');
+
+      expect(trackingSpy).toHaveBeenCalledWith(trackingCategory, 'click_button', {
+        category: trackingCategory,
+        label: 'pipeline_wizard_commit',
+        property: 'commit',
+      });
+    });
+
+    it('tracks when editor emits touch events', () => {
+      createComponent();
+      setUpTrackingSpy();
+
+      wrapper.findComponent(YamlEditor).vm.$emit('touch');
+
+      expect(trackingSpy).toHaveBeenCalledWith(trackingCategory, 'edit', {
+        category: trackingCategory,
+        label: 'pipeline_wizard_editor_interaction',
+        extras: {
+          currentStep: 0,
+        },
+      });
+    });
+  });
 });
diff --git a/spec/frontend/pipeline_wizard/mock/yaml.js b/spec/frontend/pipeline_wizard/mock/yaml.js
index e7087b59ce7..12b6f1052b2 100644
--- a/spec/frontend/pipeline_wizard/mock/yaml.js
+++ b/spec/frontend/pipeline_wizard/mock/yaml.js
@@ -71,6 +71,7 @@ bar: barVal
 `;
 
 export const fullTemplate = `
+id: test/full-template
 title: some title
 description: some description
 filename: foo.yml
@@ -84,6 +85,7 @@ steps:
 `;
 
 export const fullTemplateWithoutFilename = `
+id: test/full-template-no-filename
 title: some title
 description: some description
 steps:
diff --git a/spec/frontend/pipeline_wizard/pipeline_wizard_spec.js b/spec/frontend/pipeline_wizard/pipeline_wizard_spec.js
index 3f689ffdbc8..13234525159 100644
--- a/spec/frontend/pipeline_wizard/pipeline_wizard_spec.js
+++ b/spec/frontend/pipeline_wizard/pipeline_wizard_spec.js
@@ -59,6 +59,7 @@ describe('PipelineWizard', () => {
         defaultBranch,
         projectPath,
         filename: parseDocument(template).get('filename'),
+        templateId: parseDocument(template).get('id'),
       }),
     );
   });