diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-20 03:12:08 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-08-20 03:12:08 +0300 |
commit | b0e1e54ce9918a83ad41de7e2a1f57cad687e654 (patch) | |
tree | f7a2dc0a4a091e7cfbc39aaab7a54618c376f787 /spec/frontend | |
parent | ce5c259086445d71b405833c60ca71cd8c33de63 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
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'), }), ); }); |