diff options
Diffstat (limited to 'spec/javascripts/vue_shared')
12 files changed, 98 insertions, 314 deletions
diff --git a/spec/javascripts/vue_shared/components/callout_spec.js b/spec/javascripts/vue_shared/components/callout_spec.js deleted file mode 100644 index 91208dfb31a..00000000000 --- a/spec/javascripts/vue_shared/components/callout_spec.js +++ /dev/null @@ -1,66 +0,0 @@ -import { createLocalVue, shallowMount } from '@vue/test-utils'; -import Callout from '~/vue_shared/components/callout.vue'; - -const TEST_MESSAGE = 'This is a callout message!'; -const TEST_SLOT = '<button>This is a callout slot!</button>'; - -const localVue = createLocalVue(); - -describe('Callout Component', () => { - let wrapper; - - const factory = options => { - wrapper = shallowMount(localVue.extend(Callout), { - localVue, - ...options, - }); - }; - - afterEach(() => { - wrapper.destroy(); - }); - - it('should render the appropriate variant of callout', () => { - factory({ - propsData: { - category: 'info', - message: TEST_MESSAGE, - }, - }); - - expect(wrapper.classes()).toEqual(['bs-callout', 'bs-callout-info']); - - expect(wrapper.element.tagName).toEqual('DIV'); - }); - - it('should render accessibility attributes', () => { - factory({ - propsData: { - message: TEST_MESSAGE, - }, - }); - - expect(wrapper.attributes('role')).toEqual('alert'); - expect(wrapper.attributes('aria-live')).toEqual('assertive'); - }); - - it('should render the provided message', () => { - factory({ - propsData: { - message: TEST_MESSAGE, - }, - }); - - expect(wrapper.element.innerHTML.trim()).toEqual(TEST_MESSAGE); - }); - - it('should render the provided slot', () => { - factory({ - slots: { - default: TEST_SLOT, - }, - }); - - expect(wrapper.element.innerHTML.trim()).toEqual(TEST_SLOT); - }); -}); diff --git a/spec/javascripts/vue_shared/components/code_block_spec.js b/spec/javascripts/vue_shared/components/code_block_spec.js deleted file mode 100644 index 6b91a20ff76..00000000000 --- a/spec/javascripts/vue_shared/components/code_block_spec.js +++ /dev/null @@ -1,33 +0,0 @@ -import Vue from 'vue'; -import component from '~/vue_shared/components/code_block.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; - -describe('Code Block', () => { - const Component = Vue.extend(component); - let vm; - - afterEach(() => { - vm.$destroy(); - }); - - it('renders a code block with the provided code', () => { - const code = - "Failure/Error: is_expected.to eq(3)\n\n expected: 3\n got: -1\n\n (compared using ==)\n./spec/test_spec.rb:12:in `block (4 levels) in \u003ctop (required)\u003e'"; - - vm = mountComponent(Component, { - code, - }); - - expect(vm.$el.querySelector('code').textContent).toEqual(code); - }); - - it('escapes XSS injections', () => { - const code = 'CCC<img src=x onerror=alert(document.domain)>'; - - vm = mountComponent(Component, { - code, - }); - - expect(vm.$el.querySelector('code').textContent).toEqual(code); - }); -}); diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js index 18fcdf7ede1..f2e20f626b5 100644 --- a/spec/javascripts/vue_shared/components/commit_spec.js +++ b/spec/javascripts/vue_shared/components/commit_spec.js @@ -61,7 +61,7 @@ describe('Commit component', () => { }); it('should render a tag icon if it represents a tag', () => { - expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-tag'); + expect(component.$el.querySelector('.icon-container svg.ic-tag')).not.toBeNull(); }); it('should render a link to the ref url', () => { @@ -143,4 +143,92 @@ describe('Commit component', () => { ); }); }); + + describe('When commit ref is provided, but merge ref is not', () => { + it('should render the commit ref', () => { + props = { + tag: false, + commitRef: { + name: 'master', + ref_url: 'http://localhost/namespace2/gitlabhq/tree/master', + }, + commitUrl: + 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067', + shortSha: 'b7836edd', + title: null, + author: {}, + }; + + component = mountComponent(CommitComponent, props); + const refEl = component.$el.querySelector('.ref-name'); + + expect(refEl.textContent).toContain('master'); + + expect(refEl.href).toBe(props.commitRef.ref_url); + + expect(refEl.getAttribute('data-original-title')).toBe(props.commitRef.name); + + expect(component.$el.querySelector('.icon-container .ic-branch')).not.toBeNull(); + }); + }); + + describe('When both commit and merge ref are provided', () => { + it('should render the merge ref', () => { + props = { + tag: false, + commitRef: { + name: 'master', + ref_url: 'http://localhost/namespace2/gitlabhq/tree/master', + }, + commitUrl: + 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067', + mergeRequestRef: { + iid: 1234, + path: 'https://example.com/path/to/mr', + title: 'Test MR', + }, + shortSha: 'b7836edd', + title: null, + author: {}, + }; + + component = mountComponent(CommitComponent, props); + const refEl = component.$el.querySelector('.ref-name'); + + expect(refEl.textContent).toContain('1234'); + + expect(refEl.href).toBe(props.mergeRequestRef.path); + + expect(refEl.getAttribute('data-original-title')).toBe(props.mergeRequestRef.title); + + expect(component.$el.querySelector('.icon-container .ic-git-merge')).not.toBeNull(); + }); + }); + + describe('When showRefInfo === false', () => { + it('should not render any ref info', () => { + props = { + tag: false, + commitRef: { + name: 'master', + ref_url: 'http://localhost/namespace2/gitlabhq/tree/master', + }, + commitUrl: + 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067', + mergeRequestRef: { + iid: 1234, + path: '/path/to/mr', + title: 'Test MR', + }, + shortSha: 'b7836edd', + title: null, + author: {}, + showRefInfo: false, + }; + + component = mountComponent(CommitComponent, props); + + expect(component.$el.querySelector('.ref-name')).toBeNull(); + }); + }); }); diff --git a/spec/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed_spec.js b/spec/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed_spec.js deleted file mode 100644 index c4358f0d9cb..00000000000 --- a/spec/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed_spec.js +++ /dev/null @@ -1,23 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import ModeChanged from '~/vue_shared/components/diff_viewer/viewers/mode_changed.vue'; - -describe('Diff viewer mode changed component', () => { - let vm; - - beforeEach(() => { - vm = shallowMount(ModeChanged, { - propsData: { - aMode: '123', - bMode: '321', - }, - }); - }); - - afterEach(() => { - vm.destroy(); - }); - - it('renders aMode & bMode', () => { - expect(vm.text()).toContain('File mode changed from 123 to 321'); - }); -}); diff --git a/spec/javascripts/vue_shared/components/file_icon_spec.js b/spec/javascripts/vue_shared/components/file_icon_spec.js index 34c9b35e02a..5bea8c43da3 100644 --- a/spec/javascripts/vue_shared/components/file_icon_spec.js +++ b/spec/javascripts/vue_shared/components/file_icon_spec.js @@ -70,12 +70,9 @@ describe('File Icon component', () => { loading: true, }); - const { classList } = vm.$el.querySelector('i'); + const { classList } = vm.$el.querySelector('.loading-container span'); - expect(classList.contains('fa')).toEqual(true); - expect(classList.contains('fa-spin')).toEqual(true); - expect(classList.contains('fa-spinner')).toEqual(true); - expect(classList.contains('fa-1x')).toEqual(true); + expect(classList.contains('spinner')).toEqual(true); }); it('should add a special class and a size class', () => { diff --git a/spec/javascripts/vue_shared/components/header_ci_component_spec.js b/spec/javascripts/vue_shared/components/header_ci_component_spec.js index 7a741bdc067..a9c1a67b39b 100644 --- a/spec/javascripts/vue_shared/components/header_ci_component_spec.js +++ b/spec/javascripts/vue_shared/components/header_ci_component_spec.js @@ -88,7 +88,7 @@ describe('Header CI Component', () => { vm.actions[0].isLoading = true; Vue.nextTick(() => { - expect(vm.$el.querySelector('.btn .fa-spinner').getAttribute('style')).toBeFalsy(); + expect(vm.$el.querySelector('.btn .spinner').getAttribute('style')).toBeFalsy(); done(); }); }); diff --git a/spec/javascripts/vue_shared/components/identicon_spec.js b/spec/javascripts/vue_shared/components/identicon_spec.js deleted file mode 100644 index 0b3dbb61c96..00000000000 --- a/spec/javascripts/vue_shared/components/identicon_spec.js +++ /dev/null @@ -1,65 +0,0 @@ -import Vue from 'vue'; -import identiconComponent from '~/vue_shared/components/identicon.vue'; - -const createComponent = sizeClass => { - const Component = Vue.extend(identiconComponent); - - return new Component({ - propsData: { - entityId: 1, - entityName: 'entity-name', - sizeClass, - }, - }).$mount(); -}; - -describe('IdenticonComponent', () => { - describe('computed', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('identiconBackgroundClass', () => { - it('should return bg class based on entityId', () => { - vm.entityId = 4; - - expect(vm.identiconBackgroundClass).toBeDefined(); - expect(vm.identiconBackgroundClass).toBe('bg5'); - }); - }); - - describe('identiconTitle', () => { - it('should return first letter of entity title in uppercase', () => { - vm.entityName = 'dummy-group'; - - expect(vm.identiconTitle).toBeDefined(); - expect(vm.identiconTitle).toBe('D'); - }); - }); - }); - - describe('template', () => { - it('should render identicon', () => { - const vm = createComponent(); - - expect(vm.$el.nodeName).toBe('DIV'); - expect(vm.$el.classList.contains('identicon')).toBeTruthy(); - expect(vm.$el.classList.contains('s40')).toBeTruthy(); - expect(vm.$el.classList.contains('bg2')).toBeTruthy(); - vm.$destroy(); - }); - - it('should render identicon with provided sizing class', () => { - const vm = createComponent('s32'); - - expect(vm.$el.classList.contains('s32')).toBeTruthy(); - vm.$destroy(); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/lib/utils/dom_utils_spec.js b/spec/javascripts/vue_shared/components/lib/utils/dom_utils_spec.js deleted file mode 100644 index 2388660b0c2..00000000000 --- a/spec/javascripts/vue_shared/components/lib/utils/dom_utils_spec.js +++ /dev/null @@ -1,13 +0,0 @@ -import * as domUtils from '~/vue_shared/components/lib/utils/dom_utils'; - -describe('domUtils', () => { - describe('pixeliseValue', () => { - it('should add px to a given Number', () => { - expect(domUtils.pixeliseValue(12)).toEqual('12px'); - }); - - it('should not add px to 0', () => { - expect(domUtils.pixeliseValue(0)).toEqual(''); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js index 79e0e756a7a..02d73e1849a 100644 --- a/spec/javascripts/vue_shared/components/markdown/field_spec.js +++ b/spec/javascripts/vue_shared/components/markdown/field_spec.js @@ -5,7 +5,7 @@ import fieldComponent from '~/vue_shared/components/markdown/field.vue'; function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) { expect(writeLink.parentNode.classList.contains('active')).toEqual(isWrite); expect(previewLink.parentNode.classList.contains('active')).toEqual(!isWrite); - expect(vm.$el.querySelector('.md-preview').style.display).toEqual(isWrite ? 'none' : ''); + expect(vm.$el.querySelector('.md-preview-holder').style.display).toEqual(isWrite ? 'none' : ''); } describe('Markdown field component', () => { @@ -80,7 +80,9 @@ describe('Markdown field component', () => { previewLink.click(); Vue.nextTick(() => { - expect(vm.$el.querySelector('.md-preview').textContent.trim()).toContain('Loading…'); + expect(vm.$el.querySelector('.md-preview-holder').textContent.trim()).toContain( + 'Loading…', + ); done(); }); @@ -90,7 +92,7 @@ describe('Markdown field component', () => { previewLink.click(); setTimeout(() => { - expect(vm.$el.querySelector('.md-preview').innerHTML).toContain( + expect(vm.$el.querySelector('.md-preview-holder').innerHTML).toContain( '<p>markdown preview</p>', ); diff --git a/spec/javascripts/vue_shared/components/pagination_links_spec.js b/spec/javascripts/vue_shared/components/pagination_links_spec.js deleted file mode 100644 index d0cb3731050..00000000000 --- a/spec/javascripts/vue_shared/components/pagination_links_spec.js +++ /dev/null @@ -1,59 +0,0 @@ -import Vue from 'vue'; -import PaginationLinks from '~/vue_shared/components/pagination_links.vue'; -import { s__ } from '~/locale'; -import mountComponent from '../../helpers/vue_mount_component_helper'; - -describe('Pagination links component', () => { - const paginationLinksComponent = Vue.extend(PaginationLinks); - const change = page => page; - const pageInfo = { - page: 3, - perPage: 5, - total: 30, - }; - const translations = { - firstText: s__('Pagination|« First'), - prevText: s__('Pagination|Prev'), - nextText: s__('Pagination|Next'), - lastText: s__('Pagination|Last »'), - }; - - let paginationLinks; - let glPagination; - let destinationComponent; - - beforeEach(() => { - paginationLinks = mountComponent(paginationLinksComponent, { - change, - pageInfo, - }); - [glPagination] = paginationLinks.$children; - [destinationComponent] = glPagination.$children; - }); - - afterEach(() => { - paginationLinks.$destroy(); - }); - - it('should provide translated text to GitLab UI pagination', () => { - Object.entries(translations).forEach(entry => { - expect(destinationComponent[entry[0]]).toBe(entry[1]); - }); - }); - - it('should pass change to GitLab UI pagination', () => { - expect(Object.is(glPagination.change, change)).toBe(true); - }); - - it('should pass page from pageInfo to GitLab UI pagination', () => { - expect(destinationComponent.value).toBe(pageInfo.page); - }); - - it('should pass per page from pageInfo to GitLab UI pagination', () => { - expect(destinationComponent.perPage).toBe(pageInfo.perPage); - }); - - it('should pass total items from pageInfo to GitLab UI pagination', () => { - expect(destinationComponent.totalRows).toBe(pageInfo.total); - }); -}); diff --git a/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js b/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js deleted file mode 100644 index 536bb57b946..00000000000 --- a/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js +++ /dev/null @@ -1,44 +0,0 @@ -import Vue from 'vue'; -import timeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; -import { formatDate, getTimeago } from '~/lib/utils/datetime_utility'; - -describe('Time ago with tooltip component', () => { - let TimeagoTooltip; - let vm; - - beforeEach(() => { - TimeagoTooltip = Vue.extend(timeagoTooltip); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('should render timeago with a bootstrap tooltip', () => { - vm = new TimeagoTooltip({ - propsData: { - time: '2017-05-08T14:57:39.781Z', - }, - }).$mount(); - - expect(vm.$el.tagName).toEqual('TIME'); - expect(vm.$el.getAttribute('data-original-title')).toEqual( - formatDate('2017-05-08T14:57:39.781Z'), - ); - - const timeago = getTimeago(); - - expect(vm.$el.textContent.trim()).toEqual(timeago.format('2017-05-08T14:57:39.781Z')); - }); - - it('should render provided html class', () => { - vm = new TimeagoTooltip({ - propsData: { - time: '2017-05-08T14:57:39.781Z', - cssClass: 'foo', - }, - }).$mount(); - - expect(vm.$el.classList.contains('foo')).toEqual(true); - }); -}); diff --git a/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js b/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js index e8b41e8eeff..852558a83bc 100644 --- a/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js +++ b/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js @@ -17,7 +17,7 @@ const DEFAULT_PROPS = { const UserPopover = Vue.extend(userPopover); describe('User Popover Component', () => { - const fixtureTemplate = 'merge_requests/diff_comment.html.raw'; + const fixtureTemplate = 'merge_requests/diff_comment.html'; preloadFixtures(fixtureTemplate); let vm; |