diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-08 15:08:26 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-08 15:08:26 +0300 |
commit | f149549c3432ffb179f6904e4ba0ea64027202d0 (patch) | |
tree | 9c6dca1e76c0de43e5e5f6b5d34c5616abbc7501 /spec/javascripts | |
parent | b001207ce2033589373cd7558ca69c4e5732ce6b (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/javascripts')
4 files changed, 0 insertions, 672 deletions
diff --git a/spec/javascripts/vue_shared/components/deprecated_modal_2_spec.js b/spec/javascripts/vue_shared/components/deprecated_modal_2_spec.js deleted file mode 100644 index e031583b43a..00000000000 --- a/spec/javascripts/vue_shared/components/deprecated_modal_2_spec.js +++ /dev/null @@ -1,261 +0,0 @@ -import $ from 'jquery'; -import Vue from 'vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; - -const modalComponent = Vue.extend(DeprecatedModal2); - -describe('DeprecatedModal2', () => { - let vm; - - afterEach(() => { - vm.$destroy(); - }); - - describe('props', () => { - describe('with id', () => { - const props = { - id: 'my-modal', - }; - - beforeEach(() => { - vm = mountComponent(modalComponent, props); - }); - - it('assigns the id to the modal', () => { - expect(vm.$el.id).toBe(props.id); - }); - }); - - describe('without id', () => { - beforeEach(() => { - vm = mountComponent(modalComponent, {}); - }); - - it('does not add an id attribute to the modal', () => { - expect(vm.$el.hasAttribute('id')).toBe(false); - }); - }); - - describe('with headerTitleText', () => { - const props = { - headerTitleText: 'my title text', - }; - - beforeEach(() => { - vm = mountComponent(modalComponent, props); - }); - - it('sets the modal title', () => { - const modalTitle = vm.$el.querySelector('.modal-title'); - - expect(modalTitle.innerHTML.trim()).toBe(props.headerTitleText); - }); - }); - - describe('with footerPrimaryButtonVariant', () => { - const props = { - footerPrimaryButtonVariant: 'danger', - }; - - beforeEach(() => { - vm = mountComponent(modalComponent, props); - }); - - it('sets the primary button class', () => { - const primaryButton = vm.$el.querySelector('.modal-footer button:last-of-type'); - - expect(primaryButton).toHaveClass(`btn-${props.footerPrimaryButtonVariant}`); - }); - }); - - describe('with footerPrimaryButtonText', () => { - const props = { - footerPrimaryButtonText: 'my button text', - }; - - beforeEach(() => { - vm = mountComponent(modalComponent, props); - }); - - it('sets the primary button text', () => { - const primaryButton = vm.$el.querySelector('.modal-footer button:last-of-type'); - - expect(primaryButton.innerHTML.trim()).toBe(props.footerPrimaryButtonText); - }); - }); - }); - - it('works with data-toggle="modal"', done => { - setFixtures(` - <button id="modal-button" data-toggle="modal" data-target="#my-modal"></button> - <div id="modal-container"></div> - `); - - const modalContainer = document.getElementById('modal-container'); - const modalButton = document.getElementById('modal-button'); - vm = mountComponent( - modalComponent, - { - id: 'my-modal', - }, - modalContainer, - ); - $(vm.$el).on('shown.bs.modal', () => done()); - - modalButton.click(); - }); - - describe('methods', () => { - const dummyEvent = 'not really an event'; - - beforeEach(() => { - vm = mountComponent(modalComponent, {}); - spyOn(vm, '$emit'); - }); - - describe('emitCancel', () => { - it('emits a cancel event', () => { - vm.emitCancel(dummyEvent); - - expect(vm.$emit).toHaveBeenCalledWith('cancel', dummyEvent); - }); - }); - - describe('emitSubmit', () => { - it('emits a submit event', () => { - vm.emitSubmit(dummyEvent); - - expect(vm.$emit).toHaveBeenCalledWith('submit', dummyEvent); - }); - }); - - describe('opened', () => { - it('emits a open event', () => { - vm.opened(); - - expect(vm.$emit).toHaveBeenCalledWith('open'); - }); - }); - - describe('closed', () => { - it('emits a closed event', () => { - vm.closed(); - - expect(vm.$emit).toHaveBeenCalledWith('closed'); - }); - }); - }); - - describe('slots', () => { - const slotContent = 'this should go into the slot'; - const modalWithSlot = slotName => { - let template; - if (slotName) { - template = ` - <deprecated-modal-2> - <template slot="${slotName}">${slotContent}</template> - </deprecated-modal-2> - `; - } else { - template = `<deprecated-modal-2>${slotContent}</deprecated-modal-2>`; - } - - return Vue.extend({ - components: { - DeprecatedModal2, - }, - template, - }); - }; - - describe('default slot', () => { - beforeEach(() => { - vm = mountComponent(modalWithSlot()); - }); - - it('sets the modal body', () => { - const modalBody = vm.$el.querySelector('.modal-body'); - - expect(modalBody.innerHTML).toBe(slotContent); - }); - }); - - describe('header slot', () => { - beforeEach(() => { - vm = mountComponent(modalWithSlot('header')); - }); - - it('sets the modal header', () => { - const modalHeader = vm.$el.querySelector('.modal-header'); - - expect(modalHeader.innerHTML).toBe(slotContent); - }); - }); - - describe('title slot', () => { - beforeEach(() => { - vm = mountComponent(modalWithSlot('title')); - }); - - it('sets the modal title', () => { - const modalTitle = vm.$el.querySelector('.modal-title'); - - expect(modalTitle.innerHTML).toBe(slotContent); - }); - }); - - describe('footer slot', () => { - beforeEach(() => { - vm = mountComponent(modalWithSlot('footer')); - }); - - it('sets the modal footer', () => { - const modalFooter = vm.$el.querySelector('.modal-footer'); - - expect(modalFooter.innerHTML).toBe(slotContent); - }); - }); - }); - - describe('handling sizes', () => { - it('should render modal-sm', () => { - vm = mountComponent(modalComponent, { - modalSize: 'sm', - }); - - expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(true); - }); - - it('should render modal-lg', () => { - vm = mountComponent(modalComponent, { - modalSize: 'lg', - }); - - expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(true); - }); - - it('should render modal-xl', () => { - vm = mountComponent(modalComponent, { - modalSize: 'xl', - }); - - expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-xl')).toEqual(true); - }); - - it('should not add modal size classes when md size is passed', () => { - vm = mountComponent(modalComponent, { - modalSize: 'md', - }); - - expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-md')).toEqual(false); - }); - - it('should not add modal size classes by default', () => { - vm = mountComponent(modalComponent, {}); - - expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-sm')).toEqual(false); - expect(vm.$el.querySelector('.modal-dialog').classList.contains('modal-lg')).toEqual(false); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/deprecated_modal_spec.js b/spec/javascripts/vue_shared/components/deprecated_modal_spec.js deleted file mode 100644 index d6c10e32794..00000000000 --- a/spec/javascripts/vue_shared/components/deprecated_modal_spec.js +++ /dev/null @@ -1,71 +0,0 @@ -import $ from 'jquery'; -import Vue from 'vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; - -const modalComponent = Vue.extend(DeprecatedModal); - -describe('DeprecatedModal', () => { - let vm; - - afterEach(() => { - vm.$destroy(); - }); - - describe('props', () => { - describe('without primaryButtonLabel', () => { - beforeEach(() => { - vm = mountComponent(modalComponent, { - primaryButtonLabel: null, - }); - }); - - it('does not render a primary button', () => { - expect(vm.$el.querySelector('.js-primary-button')).toBeNull(); - }); - }); - - describe('with id', () => { - describe('does not render a primary button', () => { - beforeEach(() => { - vm = mountComponent(modalComponent, { - id: 'my-modal', - }); - }); - - it('assigns the id to the modal', () => { - expect(vm.$el.querySelector('#my-modal.modal')).not.toBeNull(); - }); - - it('does not show the modal immediately', () => { - expect(vm.$el.querySelector('#my-modal.modal')).not.toHaveClass('show'); - }); - - it('does not show a backdrop', () => { - expect(vm.$el.querySelector('modal-backdrop')).toBeNull(); - }); - }); - }); - - it('works with data-toggle="modal"', done => { - setFixtures(` - <button id="modal-button" data-toggle="modal" data-target="#my-modal"></button> - <div id="modal-container"></div> - `); - - const modalContainer = document.getElementById('modal-container'); - const modalButton = document.getElementById('modal-button'); - vm = mountComponent( - modalComponent, - { - id: 'my-modal', - }, - modalContainer, - ); - const modalElement = vm.$el.querySelector('#my-modal'); - $(modalElement).on('shown.bs.modal', () => done()); - - modalButton.click(); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/directives/tooltip_spec.js b/spec/javascripts/vue_shared/directives/tooltip_spec.js deleted file mode 100644 index 1d516a280b0..00000000000 --- a/spec/javascripts/vue_shared/directives/tooltip_spec.js +++ /dev/null @@ -1,89 +0,0 @@ -import $ from 'jquery'; -import Vue from 'vue'; -import tooltip from '~/vue_shared/directives/tooltip'; - -describe('Tooltip directive', () => { - let vm; - - afterEach(() => { - if (vm) { - vm.$destroy(); - } - }); - - describe('with a single tooltip', () => { - beforeEach(() => { - setFixtures('<div id="dummy-element"></div>'); - vm = new Vue({ - el: '#dummy-element', - directives: { - tooltip, - }, - data() { - return { - tooltip: 'some text', - }; - }, - template: '<div v-tooltip :title="tooltip"></div>', - }); - }); - - it('should have tooltip plugin applied', () => { - expect($(vm.$el).data('bs.tooltip')).toBeDefined(); - }); - - it('displays the title as tooltip', () => { - $(vm.$el).tooltip('show'); - const tooltipElement = document.querySelector('.tooltip-inner'); - - expect(tooltipElement.innerText).toContain('some text'); - }); - - it('updates a visible tooltip', done => { - $(vm.$el).tooltip('show'); - const tooltipElement = document.querySelector('.tooltip-inner'); - - vm.tooltip = 'other text'; - - Vue.nextTick() - .then(() => { - expect(tooltipElement).toContainText('other text'); - done(); - }) - .catch(done.fail); - }); - }); - - describe('with multiple tooltips', () => { - beforeEach(() => { - const SomeComponent = Vue.extend({ - directives: { - tooltip, - }, - template: ` - <div> - <div - v-tooltip - class="js-look-for-tooltip" - title="foo"> - </div> - <div - v-tooltip - title="bar"> - </div> - </div> - `, - }); - - vm = new SomeComponent().$mount(); - }); - - it('should have tooltip plugin applied to all instances', () => { - expect( - $(vm.$el) - .find('.js-look-for-tooltip') - .data('bs.tooltip'), - ).toBeDefined(); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/translate_spec.js b/spec/javascripts/vue_shared/translate_spec.js deleted file mode 100644 index adca7cd64a1..00000000000 --- a/spec/javascripts/vue_shared/translate_spec.js +++ /dev/null @@ -1,251 +0,0 @@ -import Vue from 'vue'; -import Jed from 'jed'; - -import { trimText } from 'spec/helpers/text_helper'; -import locale from '~/locale'; -import Translate from '~/vue_shared/translate'; - -describe('Vue translate filter', () => { - let el; - - const createTranslationMock = (key, ...translations) => { - const fakeLocale = new Jed({ - domain: 'app', - locale_data: { - app: { - '': { - domain: 'app', - lang: 'vo', - plural_forms: 'nplurals=2; plural=(n != 1);', - }, - [key]: translations, - }, - }, - }); - - // eslint-disable-next-line no-underscore-dangle - locale.__Rewire__('locale', fakeLocale); - }; - - afterEach(() => { - // eslint-disable-next-line no-underscore-dangle - locale.__ResetDependency__('locale'); - }); - - beforeEach(() => { - Vue.use(Translate); - - el = document.createElement('div'); - - document.body.appendChild(el); - }); - - it('translate singular text (`__`)', done => { - const key = 'singular'; - const translation = 'singular_translated'; - createTranslationMock(key, translation); - - const vm = new Vue({ - el, - template: ` - <span> - {{ __('${key}') }} - </span> - `, - }).$mount(); - - Vue.nextTick(() => { - expect(trimText(vm.$el.textContent)).toBe(translation); - - done(); - }); - }); - - it('translate plural text (`n__`) without any substituting text', done => { - const key = 'plural'; - const translationPlural = 'plural_multiple translation'; - createTranslationMock(key, 'plural_singular translation', translationPlural); - - const vm = new Vue({ - el, - template: ` - <span> - {{ n__('${key}', 'plurals', 2) }} - </span> - `, - }).$mount(); - - Vue.nextTick(() => { - expect(trimText(vm.$el.textContent)).toBe(translationPlural); - - done(); - }); - }); - - describe('translate plural text (`n__`) with substituting %d', () => { - const key = '%d day'; - - beforeEach(() => { - createTranslationMock(key, '%d singular translated', '%d plural translated'); - }); - - it('and n === 1', done => { - const vm = new Vue({ - el, - template: ` - <span> - {{ n__('${key}', '%d days', 1) }} - </span> - `, - }).$mount(); - - Vue.nextTick(() => { - expect(trimText(vm.$el.textContent)).toBe('1 singular translated'); - - done(); - }); - }); - - it('and n > 1', done => { - const vm = new Vue({ - el, - template: ` - <span> - {{ n__('${key}', '%d days', 2) }} - </span> - `, - }).$mount(); - - Vue.nextTick(() => { - expect(trimText(vm.$el.textContent)).toBe('2 plural translated'); - - done(); - }); - }); - }); - - describe('translates text with context `s__`', () => { - const key = 'Context|Foobar'; - const translation = 'Context|Foobar translated'; - const expectation = 'Foobar translated'; - - beforeEach(() => { - createTranslationMock(key, translation); - }); - - it('and using two parameters', done => { - const vm = new Vue({ - el, - template: ` - <span> - {{ s__('Context', 'Foobar') }} - </span> - `, - }).$mount(); - - Vue.nextTick(() => { - expect(trimText(vm.$el.textContent)).toBe(expectation); - - done(); - }); - }); - - it('and using the pipe syntax', done => { - const vm = new Vue({ - el, - template: ` - <span> - {{ s__('${key}') }} - </span> - `, - }).$mount(); - - Vue.nextTick(() => { - expect(trimText(vm.$el.textContent)).toBe(expectation); - - done(); - }); - }); - }); - - it('translate multi line text', done => { - const translation = 'multiline string translated'; - createTranslationMock('multiline string', translation); - - const vm = new Vue({ - el, - template: ` - <span> - {{ __(\` - multiline - string - \`) }} - </span> - `, - }).$mount(); - - Vue.nextTick(() => { - expect(trimText(vm.$el.textContent)).toBe(translation); - - done(); - }); - }); - - it('translate pluralized multi line text', done => { - const translation = 'multiline string plural'; - - createTranslationMock('multiline string', 'multiline string singular', translation); - - const vm = new Vue({ - el, - template: ` - <span> - {{ n__( - \` - multiline - string - \`, - \` - multiline - strings - \`, - 2 - ) }} - </span> - `, - }).$mount(); - - Vue.nextTick(() => { - expect(trimText(vm.$el.textContent)).toBe(translation); - - done(); - }); - }); - - it('translate pluralized multi line text with context', done => { - const translation = 'multiline string with context'; - - createTranslationMock('Context| multiline string', translation); - - const vm = new Vue({ - el, - template: ` - <span> - {{ s__( - \` - Context| - multiline - string - \` - ) }} - </span> - `, - }).$mount(); - - Vue.nextTick(() => { - expect(trimText(vm.$el.textContent)).toBe(translation); - - done(); - }); - }); -}); |