diff options
Diffstat (limited to 'spec/javascripts/vue_shared')
30 files changed, 861 insertions, 172 deletions
diff --git a/spec/javascripts/vue_shared/components/callout_spec.js b/spec/javascripts/vue_shared/components/callout_spec.js new file mode 100644 index 00000000000..e62bd86f4ca --- /dev/null +++ b/spec/javascripts/vue_shared/components/callout_spec.js @@ -0,0 +1,45 @@ +import Vue from 'vue'; +import callout from '~/vue_shared/components/callout.vue'; +import createComponent from 'spec/helpers/vue_mount_component_helper'; + +describe('Callout Component', () => { + let CalloutComponent; + let vm; + const exampleMessage = 'This is a callout message!'; + + beforeEach(() => { + CalloutComponent = Vue.extend(callout); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('should render the appropriate variant of callout', () => { + vm = createComponent(CalloutComponent, { + category: 'info', + message: exampleMessage, + }); + + expect(vm.$el.getAttribute('class')).toEqual('bs-callout bs-callout-info'); + + expect(vm.$el.tagName).toEqual('DIV'); + }); + + it('should render accessibility attributes', () => { + vm = createComponent(CalloutComponent, { + message: exampleMessage, + }); + + expect(vm.$el.getAttribute('role')).toEqual('alert'); + expect(vm.$el.getAttribute('aria-live')).toEqual('assertive'); + }); + + it('should render the provided message', () => { + vm = createComponent(CalloutComponent, { + message: exampleMessage, + }); + + expect(vm.$el.innerHTML.trim()).toEqual(exampleMessage); + }); +}); diff --git a/spec/javascripts/vue_shared/components/ci_icon_spec.js b/spec/javascripts/vue_shared/components/ci_icon_spec.js index d8664408595..423bc746a22 100644 --- a/spec/javascripts/vue_shared/components/ci_icon_spec.js +++ b/spec/javascripts/vue_shared/components/ci_icon_spec.js @@ -1,139 +1,122 @@ import Vue from 'vue'; import ciIcon from '~/vue_shared/components/ci_icon.vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('CI Icon component', () => { - let CiIcon; - beforeEach(() => { - CiIcon = Vue.extend(ciIcon); + const Component = Vue.extend(ciIcon); + let vm; + + afterEach(() => { + vm.$destroy(); }); it('should render a span element with an svg', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_success', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_success', }, - }).$mount(); + }); - expect(component.$el.tagName).toEqual('SPAN'); - expect(component.$el.querySelector('span > svg')).toBeDefined(); + expect(vm.$el.tagName).toEqual('SPAN'); + expect(vm.$el.querySelector('span > svg')).toBeDefined(); }); it('should render a success status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_success', - group: 'success', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_success', + group: 'success', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-success')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-success')).toEqual(true); }); it('should render a failed status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_failed', - group: 'failed', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_failed', + group: 'failed', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-failed')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-failed')).toEqual(true); }); it('should render success with warnings status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_warning', - group: 'warning', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_warning', + group: 'warning', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-warning')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-warning')).toEqual(true); }); it('should render pending status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_pending', - group: 'pending', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_pending', + group: 'pending', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-pending')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-pending')).toEqual(true); }); it('should render running status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_running', - group: 'running', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_running', + group: 'running', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-running')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-running')).toEqual(true); }); it('should render created status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_created', - group: 'created', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_created', + group: 'created', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-created')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-created')).toEqual(true); }); it('should render skipped status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_skipped', - group: 'skipped', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_skipped', + group: 'skipped', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-skipped')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-skipped')).toEqual(true); }); it('should render canceled status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_canceled', - group: 'canceled', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_canceled', + group: 'canceled', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-canceled')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-canceled')).toEqual(true); }); it('should render status for manual action', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_manual', - group: 'manual', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_manual', + group: 'manual', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-manual')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-manual')).toEqual(true); }); }); diff --git a/spec/javascripts/vue_shared/components/clipboard_button_spec.js b/spec/javascripts/vue_shared/components/clipboard_button_spec.js index f598b1afa74..97f0fbb04db 100644 --- a/spec/javascripts/vue_shared/components/clipboard_button_spec.js +++ b/spec/javascripts/vue_shared/components/clipboard_button_spec.js @@ -3,10 +3,10 @@ import clipboardButton from '~/vue_shared/components/clipboard_button.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('clipboard button', () => { + const Component = Vue.extend(clipboardButton); let vm; beforeEach(() => { - const Component = Vue.extend(clipboardButton); vm = mountComponent(Component, { text: 'copy me', title: 'Copy this value into Clipboard!', diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js index fdead874209..7189e8cfcfa 100644 --- a/spec/javascripts/vue_shared/components/commit_spec.js +++ b/spec/javascripts/vue_shared/components/commit_spec.js @@ -1,5 +1,6 @@ import Vue from 'vue'; import commitComp from '~/vue_shared/components/commit.vue'; +import mountComponent from '../../helpers/vue_mount_component_helper'; describe('Commit component', () => { let props; @@ -10,25 +11,28 @@ describe('Commit component', () => { CommitComponent = Vue.extend(commitComp); }); + afterEach(() => { + component.$destroy(); + }); + it('should render a fork icon if it does not represent a tag', () => { - component = new CommitComponent({ - propsData: { - 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: 'Commit message', - author: { - avatar_url: 'https://gitlab.com/uploads/-/system/user/avatar/300478/avatar.png', - web_url: 'https://gitlab.com/jschatz1', - path: '/jschatz1', - username: 'jschatz1', - }, + component = mountComponent(CommitComponent, { + 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: 'Commit message', + author: { + avatar_url: 'https://gitlab.com/uploads/-/system/user/avatar/300478/avatar.png', + web_url: 'https://gitlab.com/jschatz1', + path: '/jschatz1', + username: 'jschatz1', }, - }).$mount(); + }); expect(component.$el.querySelector('.icon-container').children).toContain('svg'); }); @@ -41,7 +45,8 @@ describe('Commit component', () => { name: 'master', ref_url: 'http://localhost/namespace2/gitlabhq/tree/master', }, - commitUrl: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067', + commitUrl: + 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067', shortSha: 'b7836edd', title: 'Commit message', author: { @@ -50,12 +55,9 @@ describe('Commit component', () => { path: '/jschatz1', username: 'jschatz1', }, - commitIconSvg: '<svg></svg>', }; - component = new CommitComponent({ - propsData: props, - }).$mount(); + component = mountComponent(CommitComponent, props); }); it('should render a tag icon if it represents a tag', () => { @@ -63,7 +65,9 @@ describe('Commit component', () => { }); it('should render a link to the ref url', () => { - expect(component.$el.querySelector('.ref-name').getAttribute('href')).toEqual(props.commitRef.ref_url); + expect(component.$el.querySelector('.ref-name').getAttribute('href')).toEqual( + props.commitRef.ref_url, + ); }); it('should render the ref name', () => { @@ -71,12 +75,16 @@ describe('Commit component', () => { }); it('should render the commit short sha with a link to the commit url', () => { - expect(component.$el.querySelector('.commit-sha').getAttribute('href')).toEqual(props.commitUrl); + expect(component.$el.querySelector('.commit-sha').getAttribute('href')).toEqual( + props.commitUrl, + ); expect(component.$el.querySelector('.commit-sha').textContent).toContain(props.shortSha); }); - it('should render the given commitIconSvg', () => { - expect(component.$el.querySelector('.js-commit-icon').children).toContain('svg'); + it('should render icon for commit', () => { + expect( + component.$el.querySelector('.js-commit-icon use').getAttribute('xlink:href'), + ).toContain('commit'); }); describe('Given commit title and author props', () => { @@ -88,21 +96,25 @@ describe('Commit component', () => { it('Should render the author avatar with title and alt attributes', () => { expect( - component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('data-original-title'), + component.$el + .querySelector('.commit-title .avatar-image-container img') + .getAttribute('data-original-title'), ).toContain(props.author.username); expect( - component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('alt'), + component.$el + .querySelector('.commit-title .avatar-image-container img') + .getAttribute('alt'), ).toContain(`${props.author.username}'s avatar`); }); }); it('should render the commit title', () => { - expect( - component.$el.querySelector('a.commit-row-message').getAttribute('href'), - ).toEqual(props.commitUrl); - expect( - component.$el.querySelector('a.commit-row-message').textContent, - ).toContain(props.title); + expect(component.$el.querySelector('a.commit-row-message').getAttribute('href')).toEqual( + props.commitUrl, + ); + expect(component.$el.querySelector('a.commit-row-message').textContent).toContain( + props.title, + ); }); }); @@ -114,19 +126,18 @@ describe('Commit component', () => { name: 'master', ref_url: 'http://localhost/namespace2/gitlabhq/tree/master', }, - commitUrl: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067', + commitUrl: + 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067', shortSha: 'b7836edd', title: null, author: {}, }; - component = new CommitComponent({ - propsData: props, - }).$mount(); + component = mountComponent(CommitComponent, props); - expect( - component.$el.querySelector('.commit-title span').textContent, - ).toContain('Cant find HEAD commit for this branch'); + expect(component.$el.querySelector('.commit-title span').textContent).toContain( + "Can't find HEAD commit for this branch", + ); }); }); }); diff --git a/spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js b/spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js new file mode 100644 index 00000000000..e2c34508b0d --- /dev/null +++ b/spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js @@ -0,0 +1,70 @@ +import Vue from 'vue'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import contentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import { GREEN_BOX_IMAGE_URL } from 'spec/test_constants'; + +describe('ContentViewer', () => { + let vm; + let mock; + + function createComponent(props) { + const ContentViewer = Vue.extend(contentViewer); + vm = mountComponent(ContentViewer, props); + } + + afterEach(() => { + vm.$destroy(); + if (mock) mock.restore(); + }); + + it('markdown preview renders + loads rendered markdown from server', done => { + mock = new MockAdapter(axios); + mock.onPost(`${gon.relative_url_root}/testproject/preview_markdown`).reply(200, { + body: '<b>testing</b>', + }); + + createComponent({ + path: 'test.md', + content: '* Test', + projectPath: 'testproject', + }); + + const previewContainer = vm.$el.querySelector('.md-previewer'); + + setTimeout(() => { + expect(previewContainer.textContent).toContain('testing'); + + done(); + }); + }); + + it('renders image preview', done => { + createComponent({ + path: GREEN_BOX_IMAGE_URL, + fileSize: 1024, + }); + + setTimeout(() => { + expect(vm.$el.querySelector('.image_file img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL); + + done(); + }); + }); + + it('renders fallback download control', done => { + createComponent({ + path: 'test.abc', + fileSize: 1024, + }); + + setTimeout(() => { + expect(vm.$el.querySelector('.file-info').textContent.trim()).toContain('test.abc'); + expect(vm.$el.querySelector('.file-info').textContent.trim()).toContain('(1.00 KiB)'); + expect(vm.$el.querySelector('.btn.btn-default').textContent.trim()).toContain('Download'); + + done(); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/modal_spec.js b/spec/javascripts/vue_shared/components/deprecated_modal_spec.js index d01a94c25e5..59d4e549a91 100644 --- a/spec/javascripts/vue_shared/components/modal_spec.js +++ b/spec/javascripts/vue_shared/components/deprecated_modal_spec.js @@ -1,11 +1,11 @@ import $ from 'jquery'; import Vue from 'vue'; -import modal from '~/vue_shared/components/modal.vue'; +import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; -const modalComponent = Vue.extend(modal); +const modalComponent = Vue.extend(DeprecatedModal); -describe('Modal', () => { +describe('DeprecatedModal', () => { let vm; afterEach(() => { diff --git a/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js b/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js new file mode 100644 index 00000000000..71d9145bf22 --- /dev/null +++ b/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js @@ -0,0 +1,70 @@ +import Vue from 'vue'; +import diffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants'; + +describe('DiffViewer', () => { + let vm; + + function createComponent(props) { + const DiffViewer = Vue.extend(diffViewer); + vm = mountComponent(DiffViewer, props); + } + + afterEach(() => { + vm.$destroy(); + }); + + it('renders image diff', done => { + window.gon = { + relative_url_root: '', + }; + + createComponent({ + diffMode: 'replaced', + newPath: GREEN_BOX_IMAGE_URL, + newSha: 'ABC', + oldPath: RED_BOX_IMAGE_URL, + oldSha: 'DEF', + projectPath: '', + }); + + setTimeout(() => { + expect(vm.$el.querySelector('.deleted .image_file img').getAttribute('src')).toBe( + `//raw/DEF/${RED_BOX_IMAGE_URL}`, + ); + + expect(vm.$el.querySelector('.added .image_file img').getAttribute('src')).toBe( + `//raw/ABC/${GREEN_BOX_IMAGE_URL}`, + ); + + done(); + }); + }); + + it('renders fallback download diff display', done => { + createComponent({ + diffMode: 'replaced', + newPath: 'test.abc', + newSha: 'ABC', + oldPath: 'testold.abc', + oldSha: 'DEF', + }); + + setTimeout(() => { + expect(vm.$el.querySelector('.deleted .file-info').textContent.trim()).toContain( + 'testold.abc', + ); + expect(vm.$el.querySelector('.deleted .btn.btn-default').textContent.trim()).toContain( + 'Download', + ); + + expect(vm.$el.querySelector('.added .file-info').textContent.trim()).toContain('test.abc'); + expect(vm.$el.querySelector('.added .btn.btn-default').textContent.trim()).toContain( + 'Download', + ); + + done(); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js b/spec/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js new file mode 100644 index 00000000000..b878286ae3f --- /dev/null +++ b/spec/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer_spec.js @@ -0,0 +1,185 @@ +import Vue from 'vue'; +import imageDiffViewer from '~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants'; + +describe('ImageDiffViewer', () => { + let vm; + + function createComponent(props) { + const ImageDiffViewer = Vue.extend(imageDiffViewer); + vm = mountComponent(ImageDiffViewer, props); + } + + const triggerEvent = (eventName, el = vm.$el, clientX = 0) => { + const event = document.createEvent('MouseEvents'); + event.initMouseEvent( + eventName, + true, + true, + window, + 1, + clientX, + 0, + clientX, + 0, + false, + false, + false, + false, + 0, + null, + ); + + el.dispatchEvent(event); + }; + + const dragSlider = (sliderElement, dragPixel = 20) => { + triggerEvent('mousedown', sliderElement); + triggerEvent('mousemove', document.body, dragPixel); + triggerEvent('mouseup', document.body); + }; + + afterEach(() => { + vm.$destroy(); + }); + + it('renders image diff for replaced', done => { + createComponent({ + diffMode: 'replaced', + newPath: GREEN_BOX_IMAGE_URL, + oldPath: RED_BOX_IMAGE_URL, + }); + + setTimeout(() => { + expect(vm.$el.querySelector('.added .image_file img').getAttribute('src')).toBe( + GREEN_BOX_IMAGE_URL, + ); + expect(vm.$el.querySelector('.deleted .image_file img').getAttribute('src')).toBe( + RED_BOX_IMAGE_URL, + ); + + expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe('2-up'); + expect(vm.$el.querySelector('.view-modes-menu li:nth-child(2)').textContent.trim()).toBe( + 'Swipe', + ); + expect(vm.$el.querySelector('.view-modes-menu li:nth-child(3)').textContent.trim()).toBe( + 'Onion skin', + ); + + done(); + }); + }); + + it('renders image diff for new', done => { + createComponent({ + diffMode: 'new', + newPath: GREEN_BOX_IMAGE_URL, + oldPath: '', + }); + + setTimeout(() => { + expect(vm.$el.querySelector('.added .image_file img').getAttribute('src')).toBe( + GREEN_BOX_IMAGE_URL, + ); + + done(); + }); + }); + + it('renders image diff for deleted', done => { + createComponent({ + diffMode: 'deleted', + newPath: '', + oldPath: RED_BOX_IMAGE_URL, + }); + + setTimeout(() => { + expect(vm.$el.querySelector('.deleted .image_file img').getAttribute('src')).toBe( + RED_BOX_IMAGE_URL, + ); + + done(); + }); + }); + + describe('swipeMode', () => { + beforeEach(done => { + createComponent({ + diffMode: 'replaced', + newPath: GREEN_BOX_IMAGE_URL, + oldPath: RED_BOX_IMAGE_URL, + }); + + setTimeout(() => { + done(); + }); + }); + + it('switches to Swipe Mode', done => { + vm.$el.querySelector('.view-modes-menu li:nth-child(2)').click(); + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe('Swipe'); + done(); + }); + }); + + it('drag handler is working', done => { + vm.$el.querySelector('.view-modes-menu li:nth-child(2)').click(); + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.swipe-bar').style.left).toBe('1px'); + expect(vm.$el.querySelector('.top-handle')).not.toBeNull(); + + dragSlider(vm.$el.querySelector('.swipe-bar'), 40); + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.swipe-bar').style.left).toBe('-20px'); + done(); + }); + }); + }); + }); + + describe('onionSkin', () => { + beforeEach(done => { + createComponent({ + diffMode: 'replaced', + newPath: GREEN_BOX_IMAGE_URL, + oldPath: RED_BOX_IMAGE_URL, + }); + + setTimeout(() => { + done(); + }); + }); + + it('switches to Onion Skin Mode', done => { + vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click(); + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.view-modes-menu li.active').textContent.trim()).toBe( + 'Onion skin', + ); + done(); + }); + }); + + it('has working drag handler', done => { + vm.$el.querySelector('.view-modes-menu li:nth-child(3)').click(); + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.dragger').style.left).toBe('100px'); + + dragSlider(vm.$el.querySelector('.dragger')); + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.dragger').style.left).toBe('20px'); + expect(vm.$el.querySelector('.added.frame').style.opacity).toBe('0.2'); + done(); + }); + }); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/dropdown/dropdown_button_spec.js b/spec/javascripts/vue_shared/components/dropdown/dropdown_button_spec.js new file mode 100644 index 00000000000..ba897f4660d --- /dev/null +++ b/spec/javascripts/vue_shared/components/dropdown/dropdown_button_spec.js @@ -0,0 +1,69 @@ +import Vue from 'vue'; + +import dropdownButtonComponent from '~/vue_shared/components/dropdown/dropdown_button.vue'; + +import mountComponent from 'spec/helpers/vue_mount_component_helper'; + +const defaultLabel = 'Select'; +const customLabel = 'Select project'; + +const createComponent = config => { + const Component = Vue.extend(dropdownButtonComponent); + + return mountComponent(Component, config); +}; + +describe('DropdownButtonComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('computed', () => { + describe('dropdownToggleText', () => { + it('returns default toggle text', () => { + expect(vm.toggleText).toBe(defaultLabel); + }); + + it('returns custom toggle text when provided via props', () => { + const vmEmptyLabels = createComponent({ toggleText: customLabel }); + + expect(vmEmptyLabels.toggleText).toBe(customLabel); + vmEmptyLabels.$destroy(); + }); + }); + }); + + describe('template', () => { + it('renders component container element of type `button`', () => { + expect(vm.$el.nodeName).toBe('BUTTON'); + }); + + it('renders component container element with required data attributes', () => { + expect(vm.$el.dataset.abilityName).toBe(vm.abilityName); + expect(vm.$el.dataset.fieldName).toBe(vm.fieldName); + expect(vm.$el.dataset.issueUpdate).toBe(vm.updatePath); + expect(vm.$el.dataset.labels).toBe(vm.labelsPath); + expect(vm.$el.dataset.namespacePath).toBe(vm.namespace); + expect(vm.$el.dataset.showAny).not.toBeDefined(); + }); + + it('renders dropdown toggle text element', () => { + const dropdownToggleTextEl = vm.$el.querySelector('.dropdown-toggle-text'); + expect(dropdownToggleTextEl).not.toBeNull(); + expect(dropdownToggleTextEl.innerText.trim()).toBe(defaultLabel); + }); + + it('renders dropdown button icon', () => { + const dropdownIconEl = vm.$el.querySelector('.dropdown-toggle-icon i.fa'); + + expect(dropdownIconEl).not.toBeNull(); + expect(dropdownIconEl.classList.contains('fa-chevron-down')).toBe(true); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input_spec.js b/spec/javascripts/vue_shared/components/dropdown/dropdown_hidden_input_spec.js index 88733922a59..445ab0cb40e 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input_spec.js +++ b/spec/javascripts/vue_shared/components/dropdown/dropdown_hidden_input_spec.js @@ -1,17 +1,17 @@ import Vue from 'vue'; -import dropdownHiddenInputComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue'; +import dropdownHiddenInputComponent from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { mockLabels } from './mock_data'; -const createComponent = (name = 'label_id[]', label = mockLabels[0]) => { +const createComponent = (name = 'label_id[]', value = mockLabels[0].id) => { const Component = Vue.extend(dropdownHiddenInputComponent); return mountComponent(Component, { name, - label, + value, }); }; @@ -31,7 +31,7 @@ describe('DropdownHiddenInputComponent', () => { expect(vm.$el.nodeName).toBe('INPUT'); expect(vm.$el.getAttribute('type')).toBe('hidden'); expect(vm.$el.getAttribute('name')).toBe(vm.name); - expect(vm.$el.getAttribute('value')).toBe(`${vm.label.id}`); + expect(vm.$el.getAttribute('value')).toBe(`${vm.value}`); }); }); }); diff --git a/spec/javascripts/vue_shared/components/dropdown/dropdown_search_input_spec.js b/spec/javascripts/vue_shared/components/dropdown/dropdown_search_input_spec.js new file mode 100644 index 00000000000..551520721e5 --- /dev/null +++ b/spec/javascripts/vue_shared/components/dropdown/dropdown_search_input_spec.js @@ -0,0 +1,52 @@ +import Vue from 'vue'; + +import dropdownSearchInputComponent from '~/vue_shared/components/dropdown/dropdown_search_input.vue'; + +import mountComponent from 'spec/helpers/vue_mount_component_helper'; + +const componentConfig = { + placeholderText: 'Search something', +}; + +const createComponent = (config = componentConfig) => { + const Component = Vue.extend(dropdownSearchInputComponent); + + return mountComponent(Component, config); +}; + +describe('DropdownSearchInputComponent', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('template', () => { + it('renders input element with type `search`', () => { + const inputEl = vm.$el.querySelector('input.dropdown-input-field'); + + expect(inputEl).not.toBeNull(); + expect(inputEl.getAttribute('type')).toBe('search'); + }); + + it('renders search icon element', () => { + expect(vm.$el.querySelector('.fa-search.dropdown-input-search')).not.toBeNull(); + }); + + it('renders clear search icon element', () => { + expect( + vm.$el.querySelector('.fa-times.dropdown-input-clear.js-dropdown-input-clear'), + ).not.toBeNull(); + }); + + it('displays custom placeholder text', () => { + const inputEl = vm.$el.querySelector('input.dropdown-input-field'); + + expect(inputEl.getAttribute('placeholder')).toBe(componentConfig.placeholderText); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/dropdown/mock_data.js b/spec/javascripts/vue_shared/components/dropdown/mock_data.js new file mode 100644 index 00000000000..b09d42da401 --- /dev/null +++ b/spec/javascripts/vue_shared/components/dropdown/mock_data.js @@ -0,0 +1,11 @@ +export const mockLabels = [ + { + id: 26, + title: 'Foo Label', + description: 'Foobar', + color: '#BADA55', + text_color: '#FFFFFF', + }, +]; + +export default mockLabels; diff --git a/spec/javascripts/vue_shared/components/expand_button_spec.js b/spec/javascripts/vue_shared/components/expand_button_spec.js index f19589d3b75..98fee9a74a5 100644 --- a/spec/javascripts/vue_shared/components/expand_button_spec.js +++ b/spec/javascripts/vue_shared/components/expand_button_spec.js @@ -3,10 +3,10 @@ import expandButton from '~/vue_shared/components/expand_button.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('expand button', () => { + const Component = Vue.extend(expandButton); let vm; beforeEach(() => { - const Component = Vue.extend(expandButton); vm = mountComponent(Component, { slots: { expanded: '<p>Expanded!</p>', @@ -19,10 +19,10 @@ describe('expand button', () => { }); it('renders a collpased button', () => { - expect(vm.$el.textContent.trim()).toEqual('...'); + expect(vm.$children[0].iconTestClass).toEqual('ic-ellipsis_h'); }); - it('hides expander on click', (done) => { + it('hides expander on click', done => { vm.$el.querySelector('button').click(); vm.$nextTick(() => { expect(vm.$el.querySelector('button').getAttribute('style')).toEqual('display: none;'); diff --git a/spec/javascripts/vue_shared/components/file_icon_spec.js b/spec/javascripts/vue_shared/components/file_icon_spec.js index f7581251bf0..1c666fc6c55 100644 --- a/spec/javascripts/vue_shared/components/file_icon_spec.js +++ b/spec/javascripts/vue_shared/components/file_icon_spec.js @@ -74,7 +74,7 @@ describe('File Icon component', () => { size: 120, }); - const classList = vm.$el.firstChild.classList; + const { classList } = vm.$el.firstChild; const containsSizeClass = classList.contains('s120'); const containsCustomClass = classList.contains('extraclasses'); expect(containsSizeClass).toBe(true); diff --git a/spec/javascripts/vue_shared/components/gl_modal_spec.js b/spec/javascripts/vue_shared/components/gl_modal_spec.js index 85cb1b90fc6..e4737714312 100644 --- a/spec/javascripts/vue_shared/components/gl_modal_spec.js +++ b/spec/javascripts/vue_shared/components/gl_modal_spec.js @@ -190,4 +190,45 @@ describe('GlModal', () => { }); }); }); + + 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/icon_spec.js b/spec/javascripts/vue_shared/components/icon_spec.js index 68d57ebc8f0..cc030e29d61 100644 --- a/spec/javascripts/vue_shared/components/icon_spec.js +++ b/spec/javascripts/vue_shared/components/icon_spec.js @@ -44,7 +44,7 @@ describe('Sprite Icon Component', function () { }); it('should properly render img css', function () { - const classList = icon.$el.classList; + const { classList } = icon.$el; const containsSizeClass = classList.contains('s32'); const containsCustomClass = classList.contains('extraclasses'); expect(containsSizeClass).toBe(true); 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 new file mode 100644 index 00000000000..2388660b0c2 --- /dev/null +++ b/spec/javascripts/vue_shared/components/lib/utils/dom_utils_spec.js @@ -0,0 +1,13 @@ +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/header_spec.js b/spec/javascripts/vue_shared/components/markdown/header_spec.js index edebd822295..02117638b63 100644 --- a/spec/javascripts/vue_shared/components/markdown/header_spec.js +++ b/spec/javascripts/vue_shared/components/markdown/header_spec.js @@ -1,10 +1,11 @@ import Vue from 'vue'; +import $ from 'jquery'; import headerComponent from '~/vue_shared/components/markdown/header.vue'; describe('Markdown field header component', () => { let vm; - beforeEach((done) => { + beforeEach(done => { const Component = Vue.extend(headerComponent); vm = new Component({ @@ -17,24 +18,18 @@ describe('Markdown field header component', () => { }); it('renders markdown buttons', () => { - expect( - vm.$el.querySelectorAll('.js-md').length, - ).toBe(7); + expect(vm.$el.querySelectorAll('.js-md').length).toBe(7); }); it('renders `write` link as active when previewMarkdown is false', () => { - expect( - vm.$el.querySelector('li:nth-child(1)').classList.contains('active'), - ).toBeTruthy(); + expect(vm.$el.querySelector('li:nth-child(1)').classList.contains('active')).toBeTruthy(); }); - it('renders `preview` link as active when previewMarkdown is true', (done) => { + it('renders `preview` link as active when previewMarkdown is true', done => { vm.previewMarkdown = true; Vue.nextTick(() => { - expect( - vm.$el.querySelector('li:nth-child(2)').classList.contains('active'), - ).toBeTruthy(); + expect(vm.$el.querySelector('li:nth-child(2)').classList.contains('active')).toBeTruthy(); done(); }); @@ -52,16 +47,24 @@ describe('Markdown field header component', () => { expect(vm.$emit).toHaveBeenCalledWith('write-markdown'); }); - it('blurs preview link after click', (done) => { + it('does not emit toggle markdown event when triggered from another form', () => { + spyOn(vm, '$emit'); + + $(document).triggerHandler('markdown-preview:show', [ + $('<form><textarea class="markdown-area"></textarea></textarea></form>'), + ]); + + expect(vm.$emit).not.toHaveBeenCalled(); + }); + + it('blurs preview link after click', done => { const link = vm.$el.querySelector('li:nth-child(2) a'); spyOn(HTMLElement.prototype, 'blur'); link.click(); setTimeout(() => { - expect( - link.blur, - ).toHaveBeenCalled(); + expect(link.blur).toHaveBeenCalled(); done(); }); diff --git a/spec/javascripts/vue_shared/components/mock_data.js b/spec/javascripts/vue_shared/components/mock_data.js index 0d781bdca74..15b56c58c33 100644 --- a/spec/javascripts/vue_shared/components/mock_data.js +++ b/spec/javascripts/vue_shared/components/mock_data.js @@ -1,5 +1,3 @@ -/* eslint-disable */ - export const mockMetrics = [ [1493716685, '4.30859375'], [1493716745, '4.30859375'], diff --git a/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js b/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js index ba8ab0b2cd7..7e57c51bf29 100644 --- a/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js +++ b/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js @@ -1,13 +1,15 @@ import Vue from 'vue'; import issuePlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue'; -import store from '~/notes/stores'; +import createStore from '~/notes/stores'; import { userDataMock } from '../../../notes/mock_data'; describe('issue placeholder system note component', () => { + let store; let vm; beforeEach(() => { const Component = Vue.extend(issuePlaceholderNote); + store = createStore(); store.dispatch('setUserData', userDataMock); vm = new Component({ store, @@ -21,15 +23,23 @@ describe('issue placeholder system note component', () => { describe('user information', () => { it('should render user avatar with link', () => { - expect(vm.$el.querySelector('.user-avatar-link').getAttribute('href')).toEqual(userDataMock.path); - expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual(userDataMock.avatar_url); + expect(vm.$el.querySelector('.user-avatar-link').getAttribute('href')).toEqual( + userDataMock.path, + ); + expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual( + userDataMock.avatar_url, + ); }); }); describe('note content', () => { it('should render note header information', () => { - expect(vm.$el.querySelector('.note-header-info a').getAttribute('href')).toEqual(userDataMock.path); - expect(vm.$el.querySelector('.note-header-info .note-headline-light').textContent.trim()).toEqual(`@${userDataMock.username}`); + expect(vm.$el.querySelector('.note-header-info a').getAttribute('href')).toEqual( + userDataMock.path, + ); + expect( + vm.$el.querySelector('.note-header-info .note-headline-light').textContent.trim(), + ).toEqual(`@${userDataMock.username}`); }); it('should render note body', () => { diff --git a/spec/javascripts/vue_shared/components/notes/system_note_spec.js b/spec/javascripts/vue_shared/components/notes/system_note_spec.js index 36aaf0a6c2e..aa4c9c4c88c 100644 --- a/spec/javascripts/vue_shared/components/notes/system_note_spec.js +++ b/spec/javascripts/vue_shared/components/notes/system_note_spec.js @@ -1,8 +1,8 @@ import Vue from 'vue'; import issueSystemNote from '~/vue_shared/components/notes/system_note.vue'; -import store from '~/notes/stores'; +import createStore from '~/notes/stores'; -describe('issue system note', () => { +describe('system note component', () => { let vm; let props; @@ -24,6 +24,7 @@ describe('issue system note', () => { }, }; + const store = createStore(); store.dispatch('setTargetNoteHash', `note_${props.note.id}`); const Component = Vue.extend(issueSystemNote); @@ -49,9 +50,10 @@ describe('issue system note', () => { expect(vm.$el.querySelector('.timeline-icon svg')).toBeDefined(); }); - it('should render note header component', () => { - expect( - vm.$el.querySelector('.system-note-message').innerHTML, - ).toEqual(props.note.note_html); + // Redcarpet Markdown renderer wraps text in `<p>` tags + // we need to strip them because they break layout of commit lists in system notes: + // https://gitlab.com/gitlab-org/gitlab-ce/uploads/b07a10670919254f0220d3ff5c1aa110/jqzI.png + it('removes wrapping paragraph from note HTML', () => { + expect(vm.$el.querySelector('.system-note-message').innerHTML).toEqual('<span>closed</span>'); }); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js index 6fe95153204..e8685ab48be 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js @@ -73,6 +73,22 @@ describe('BaseComponent', () => { expect(vm.$emit).toHaveBeenCalledWith('onLabelClick', mockLabels[0]); }); }); + + describe('handleCollapsedValueClick', () => { + it('emits toggleCollapse event on component', () => { + spyOn(vm, '$emit'); + vm.handleCollapsedValueClick(); + expect(vm.$emit).toHaveBeenCalledWith('toggleCollapse'); + }); + }); + + describe('handleDropdownHidden', () => { + it('emits onDropdownClose event on component', () => { + spyOn(vm, '$emit'); + vm.handleDropdownHidden(); + expect(vm.$emit).toHaveBeenCalledWith('onDropdownClose'); + }); + }); }); describe('mounted', () => { diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js index 39040670a87..da74595bcdc 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js @@ -56,6 +56,16 @@ describe('DropdownValueCollapsedComponent', () => { }); }); + describe('methods', () => { + describe('handleClick', () => { + it('emits onValueClick event on component', () => { + spyOn(vm, '$emit'); + vm.handleClick(); + expect(vm.$emit).toHaveBeenCalledWith('onValueClick'); + }); + }); + }); + describe('template', () => { it('renders component container element with tooltip`', () => { expect(vm.$el.dataset.placement).toBe('left'); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js index 4397b00acfa..370a296bd8f 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js @@ -82,7 +82,7 @@ describe('DropdownValueComponent', () => { }); it('renders label element with tooltip and styles based on label details', () => { - const labelEl = vm.$el.querySelector('a span.label.color-label'); + const labelEl = vm.$el.querySelector('a span.badge.color-label'); expect(labelEl).not.toBeNull(); expect(labelEl.dataset.placement).toBe('bottom'); expect(labelEl.dataset.container).toBe('body'); diff --git a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js index bbd50863069..34487885cf0 100644 --- a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js +++ b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js @@ -14,8 +14,8 @@ describe('Skeleton loading container', () => { vm.$destroy(); }); - it('renders 6 skeleton lines by default', () => { - expect(vm.$el.querySelector('.skeleton-line-6')).not.toBeNull(); + it('renders 3 skeleton lines by default', () => { + expect(vm.$el.querySelector('.skeleton-line-3')).not.toBeNull(); }); it('renders in full mode by default', () => { diff --git a/spec/javascripts/vue_shared/components/table_pagination_spec.js b/spec/javascripts/vue_shared/components/table_pagination_spec.js index c63f15e5880..c36b607a34e 100644 --- a/spec/javascripts/vue_shared/components/table_pagination_spec.js +++ b/spec/javascripts/vue_shared/components/table_pagination_spec.js @@ -51,7 +51,7 @@ describe('Pagination component', () => { expect( component.$el.querySelector('.js-previous-button').classList.contains('disabled'), - ).toEqual(true); + ).toEqual(true); component.$el.querySelector('.js-previous-button a').click(); diff --git a/spec/javascripts/vue_shared/components/tabs/tab_spec.js b/spec/javascripts/vue_shared/components/tabs/tab_spec.js new file mode 100644 index 00000000000..8437fe37738 --- /dev/null +++ b/spec/javascripts/vue_shared/components/tabs/tab_spec.js @@ -0,0 +1,32 @@ +import Vue from 'vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import Tab from '~/vue_shared/components/tabs/tab.vue'; + +describe('Tab component', () => { + const Component = Vue.extend(Tab); + let vm; + + beforeEach(() => { + vm = mountComponent(Component); + }); + + it('sets localActive to equal active', done => { + vm.active = true; + + vm.$nextTick(() => { + expect(vm.localActive).toBe(true); + + done(); + }); + }); + + it('sets active class', done => { + vm.active = true; + + vm.$nextTick(() => { + expect(vm.$el.classList).toContain('active'); + + done(); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/tabs/tabs_spec.js b/spec/javascripts/vue_shared/components/tabs/tabs_spec.js new file mode 100644 index 00000000000..50ba18cd338 --- /dev/null +++ b/spec/javascripts/vue_shared/components/tabs/tabs_spec.js @@ -0,0 +1,68 @@ +import Vue from 'vue'; +import Tabs from '~/vue_shared/components/tabs/tabs'; +import Tab from '~/vue_shared/components/tabs/tab.vue'; + +describe('Tabs component', () => { + let vm; + + beforeEach(done => { + vm = new Vue({ + components: { + Tabs, + Tab, + }, + template: ` + <div> + <tabs> + <tab title="Testing" active> + First tab + </tab> + <tab> + <template slot="title">Test slot</template> + Second tab + </tab> + </tabs> + </div> + `, + }).$mount(); + + setTimeout(done); + }); + + describe('tab links', () => { + it('renders links for tabs', () => { + expect(vm.$el.querySelectorAll('a').length).toBe(2); + }); + + it('renders link titles from props', () => { + expect(vm.$el.querySelector('a').textContent).toContain('Testing'); + }); + + it('renders link titles from slot', () => { + expect(vm.$el.querySelectorAll('a')[1].textContent).toContain('Test slot'); + }); + + it('renders active class', () => { + expect(vm.$el.querySelector('a').classList).toContain('active'); + }); + + it('updates active class on click', done => { + vm.$el.querySelectorAll('a')[1].click(); + + setTimeout(() => { + expect(vm.$el.querySelector('a').classList).not.toContain('active'); + expect(vm.$el.querySelectorAll('a')[1].classList).toContain('active'); + + done(); + }); + }); + }); + + describe('content', () => { + it('renders content panes', () => { + expect(vm.$el.querySelectorAll('.tab-pane').length).toBe(2); + expect(vm.$el.querySelectorAll('.tab-pane')[0].textContent).toContain('First tab'); + expect(vm.$el.querySelectorAll('.tab-pane')[1].textContent).toContain('Second tab'); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js index 446f025c127..656b57d764e 100644 --- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js +++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js @@ -51,7 +51,7 @@ describe('User Avatar Image Component', function () { }); it('should properly render img css', function () { - const classList = vm.$el.classList; + const { classList } = vm.$el; const containsAvatar = classList.contains('avatar'); const containsSizeClass = classList.contains('s99'); const containsCustomClass = classList.contains(DEFAULT_PROPS.cssClasses); @@ -73,7 +73,7 @@ describe('User Avatar Image Component', function () { }); it('should add lazy attributes', function () { - const classList = vm.$el.classList; + const { classList } = vm.$el; const lazyClass = classList.contains('lazy'); expect(lazyClass).toBe(true); diff --git a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js index adf80d0c2bb..4c5c242cbb3 100644 --- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js +++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js @@ -21,7 +21,7 @@ describe('User Avatar Link Component', function () { propsData: this.propsData, }).$mount(); - this.userAvatarImage = this.userAvatarLink.$children[0]; + [this.userAvatarImage] = this.userAvatarLink.$children; }); it('should return a defined Vue component', function () { |