diff options
Diffstat (limited to 'spec/frontend/vue_shared')
9 files changed, 192 insertions, 11 deletions
diff --git a/spec/frontend/vue_shared/components/changed_file_icon_spec.js b/spec/frontend/vue_shared/components/changed_file_icon_spec.js index d0586f9e63f..d5861b18318 100644 --- a/spec/frontend/vue_shared/components/changed_file_icon_spec.js +++ b/spec/frontend/vue_shared/components/changed_file_icon_spec.js @@ -28,10 +28,7 @@ describe('Changed file icon', () => { const findIcon = () => wrapper.find(Icon); const findIconName = () => findIcon().props('name'); - const findIconClasses = () => - findIcon() - .props('cssClasses') - .split(' '); + const findIconClasses = () => findIcon().classes(); const findTooltipText = () => wrapper.attributes('data-original-title'); it('with isCentered true, adds center class', () => { diff --git a/spec/frontend/vue_shared/components/file_icon_spec.js b/spec/frontend/vue_shared/components/file_icon_spec.js index 328eec0a80a..f8f68a6a77a 100644 --- a/spec/frontend/vue_shared/components/file_icon_spec.js +++ b/spec/frontend/vue_shared/components/file_icon_spec.js @@ -49,7 +49,7 @@ describe('File Icon component', () => { }); expect(findIcon().exists()).toBe(false); - expect(wrapper.find(Icon).props('cssClasses')).toContain('folder-icon'); + expect(wrapper.find(Icon).classes()).toContain('folder-icon'); }); it('should render a loading icon', () => { diff --git a/spec/frontend/vue_shared/components/modal_copy_button_spec.js b/spec/frontend/vue_shared/components/modal_copy_button_spec.js index f1943861523..d8c55bee8e0 100644 --- a/spec/frontend/vue_shared/components/modal_copy_button_spec.js +++ b/spec/frontend/vue_shared/components/modal_copy_button_spec.js @@ -14,7 +14,7 @@ describe('modal copy button', () => { wrapper = shallowMount(Component, { propsData: { text: 'copy me', - title: 'Copy this value into Clipboard!', + title: 'Copy this value', }, }); }); diff --git a/spec/frontend/vue_shared/components/recaptcha_eventhub_spec.js b/spec/frontend/vue_shared/components/recaptcha_eventhub_spec.js new file mode 100644 index 00000000000..d86d627886f --- /dev/null +++ b/spec/frontend/vue_shared/components/recaptcha_eventhub_spec.js @@ -0,0 +1,21 @@ +import { eventHub, callbackName } from '~/vue_shared/components/recaptcha_eventhub'; + +describe('reCAPTCHA event hub', () => { + // the following test case currently crashes + // see https://gitlab.com/gitlab-org/gitlab/issues/29192#note_217840035 + // eslint-disable-next-line jest/no-disabled-tests + it.skip('throws an error for overriding the callback', () => { + expect(() => { + window[callbackName] = 'something'; + }).toThrow(); + }); + + it('triggering callback emits a submit event', () => { + const eventHandler = jest.fn(); + eventHub.$once('submit', eventHandler); + + window[callbackName](); + + expect(eventHandler).toHaveBeenCalled(); + }); +}); diff --git a/spec/frontend/vue_shared/components/recaptcha_modal_spec.js b/spec/frontend/vue_shared/components/recaptcha_modal_spec.js new file mode 100644 index 00000000000..e509fe09d94 --- /dev/null +++ b/spec/frontend/vue_shared/components/recaptcha_modal_spec.js @@ -0,0 +1,36 @@ +import { shallowMount } from '@vue/test-utils'; + +import { eventHub } from '~/vue_shared/components/recaptcha_eventhub'; + +import RecaptchaModal from '~/vue_shared/components/recaptcha_modal'; + +describe('RecaptchaModal', () => { + const recaptchaFormId = 'recaptcha-form'; + const recaptchaHtml = `<form id="${recaptchaFormId}"></form>`; + + let wrapper; + + const findRecaptchaForm = () => wrapper.find(`#${recaptchaFormId}`).element; + + beforeEach(() => { + wrapper = shallowMount(RecaptchaModal, { + sync: false, + propsData: { + html: recaptchaHtml, + }, + }); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('submits the form if event hub emits submit event', () => { + const form = findRecaptchaForm(); + jest.spyOn(form, 'submit').mockImplementation(); + + eventHub.$emit('submit'); + + expect(form.submit).toHaveBeenCalled(); + }); +}); diff --git a/spec/frontend/vue_shared/directives/track_event_spec.js b/spec/frontend/vue_shared/directives/track_event_spec.js new file mode 100644 index 00000000000..d63f6ae05b4 --- /dev/null +++ b/spec/frontend/vue_shared/directives/track_event_spec.js @@ -0,0 +1,49 @@ +import Vue from 'vue'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import Tracking from '~/tracking'; +import TrackEvent from '~/vue_shared/directives/track_event'; + +jest.mock('~/tracking'); + +const Component = Vue.component('dummy-element', { + directives: { + TrackEvent, + }, + data() { + return { + trackingOptions: null, + }; + }, + template: '<button id="trackable" v-track-event="trackingOptions"></button>', +}); + +const localVue = createLocalVue(); +let wrapper; +let button; + +describe('Error Tracking directive', () => { + beforeEach(() => { + wrapper = shallowMount(localVue.extend(Component), { + localVue, + }); + button = wrapper.find('#trackable'); + }); + + it('should not track the event if required arguments are not provided', () => { + button.trigger('click'); + expect(Tracking.event).not.toHaveBeenCalled(); + }); + + it('should track event on click if tracking info provided', () => { + const trackingOptions = { + category: 'Tracking', + action: 'click_trackable_btn', + label: 'Trackable Info', + }; + + wrapper.setData({ trackingOptions }); + const { category, action, label, property, value } = trackingOptions; + button.trigger('click'); + expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property, value }); + }); +}); diff --git a/spec/frontend/vue_shared/gl_feature_flags_plugin_spec.js b/spec/frontend/vue_shared/gl_feature_flags_plugin_spec.js new file mode 100644 index 00000000000..6ecc330b5af --- /dev/null +++ b/spec/frontend/vue_shared/gl_feature_flags_plugin_spec.js @@ -0,0 +1,42 @@ +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import GlFeatureFlags from '~/vue_shared/gl_feature_flags_plugin'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; + +const localVue = createLocalVue(); + +describe('GitLab Feature Flags Plugin', () => { + beforeEach(() => { + window.gon = { + features: { + aFeature: true, + bFeature: false, + }, + }; + + localVue.use(GlFeatureFlags); + }); + + it('should provide glFeatures to components', () => { + const component = { + template: `<span></span>`, + inject: ['glFeatures'], + }; + const wrapper = shallowMount(component, { localVue }); + expect(wrapper.vm.glFeatures).toEqual({ + aFeature: true, + bFeature: false, + }); + }); + + it('should integrate with the glFeatureMixin', () => { + const component = { + template: `<span></span>`, + mixins: [glFeatureFlagsMixin()], + }; + const wrapper = shallowMount(component, { localVue }); + expect(wrapper.vm.glFeatures).toEqual({ + aFeature: true, + bFeature: false, + }); + }); +}); diff --git a/spec/frontend/vue_shared/mixins/gl_feature_flags_mixin_spec.js b/spec/frontend/vue_shared/mixins/gl_feature_flags_mixin_spec.js new file mode 100644 index 00000000000..a3e3270a4e8 --- /dev/null +++ b/spec/frontend/vue_shared/mixins/gl_feature_flags_mixin_spec.js @@ -0,0 +1,36 @@ +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; + +const localVue = createLocalVue(); + +describe('GitLab Feature Flags Mixin', () => { + let wrapper; + + beforeEach(() => { + const gon = { + features: { + aFeature: true, + bFeature: false, + }, + }; + + const component = { + template: `<span></span>`, + mixins: [glFeatureFlagsMixin()], + }; + + wrapper = shallowMount(component, { + localVue, + provide: { + glFeatures: { ...(gon.features || {}) }, + }, + }); + }); + + it('should provide glFeatures to components', () => { + expect(wrapper.vm.glFeatures).toEqual({ + aFeature: true, + bFeature: false, + }); + }); +}); diff --git a/spec/frontend/vue_shared/plugins/global_toast_spec.js b/spec/frontend/vue_shared/plugins/global_toast_spec.js index 551abe3cb41..89f43a5e556 100644 --- a/spec/frontend/vue_shared/plugins/global_toast_spec.js +++ b/spec/frontend/vue_shared/plugins/global_toast_spec.js @@ -1,24 +1,24 @@ -import toast from '~/vue_shared/plugins/global_toast'; import Vue from 'vue'; +import toast from '~/vue_shared/plugins/global_toast'; describe('Global toast', () => { let spyFunc; beforeEach(() => { - spyFunc = jest.spyOn(Vue.toasted, 'show').mockImplementation(() => {}); + spyFunc = jest.spyOn(Vue.prototype.$toast, 'show').mockImplementation(() => {}); }); afterEach(() => { spyFunc.mockRestore(); }); - it('should pass all args to Vue toasted', () => { + it("should call GitLab UI's toast method", () => { const arg1 = 'TestMessage'; const arg2 = { className: 'foo' }; toast(arg1, arg2); - expect(Vue.toasted.show).toHaveBeenCalledTimes(1); - expect(Vue.toasted.show).toHaveBeenCalledWith(arg1, arg2); + expect(Vue.prototype.$toast.show).toHaveBeenCalledTimes(1); + expect(Vue.prototype.$toast.show).toHaveBeenCalledWith(arg1, arg2); }); }); |