diff options
Diffstat (limited to 'spec/javascripts/vue_shared')
29 files changed, 250 insertions, 177 deletions
diff --git a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js index 55b19989bc7..21e7afaf78f 100644 --- a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js +++ b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js @@ -81,7 +81,7 @@ describe('CI Badge Link Component', () => { }); it('should render each status badge', () => { - Object.keys(statuses).map((status) => { + Object.keys(statuses).map(status => { vm = mountComponent(CIBadge, { status: statuses[status] }); expect(vm.$el.getAttribute('href')).toEqual(statuses[status].details_path); diff --git a/spec/javascripts/vue_shared/components/deprecated_modal_spec.js b/spec/javascripts/vue_shared/components/deprecated_modal_spec.js index 59d4e549a91..be75be92158 100644 --- a/spec/javascripts/vue_shared/components/deprecated_modal_spec.js +++ b/spec/javascripts/vue_shared/components/deprecated_modal_spec.js @@ -47,7 +47,7 @@ describe('DeprecatedModal', () => { }); }); - it('works with data-toggle="modal"', (done) => { + 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> @@ -55,9 +55,13 @@ describe('DeprecatedModal', () => { const modalContainer = document.getElementById('modal-container'); const modalButton = document.getElementById('modal-button'); - vm = mountComponent(modalComponent, { - id: 'my-modal', - }, modalContainer); + vm = mountComponent( + modalComponent, + { + id: 'my-modal', + }, + modalContainer, + ); const modalElement = vm.$el.querySelector('#my-modal'); $(modalElement).on('shown.bs.modal', () => 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 index 6965677c5ef..2fc4943de30 100644 --- a/spec/javascripts/vue_shared/components/dropdown/dropdown_button_spec.js +++ b/spec/javascripts/vue_shared/components/dropdown/dropdown_button_spec.js @@ -68,9 +68,12 @@ describe('DropdownButtonComponent', () => { }); it('renders slot, if default slot exists', () => { - vm = createComponent({}, { - default: ['Lorem Ipsum Dolar'], - }); + vm = createComponent( + {}, + { + default: ['Lorem Ipsum Dolar'], + }, + ); expect(vm.$el).not.toContainElement('.dropdown-toggle-text'); expect(vm.$el).toHaveText('Lorem Ipsum Dolar'); diff --git a/spec/javascripts/vue_shared/components/file_icon_spec.js b/spec/javascripts/vue_shared/components/file_icon_spec.js index 8c1345ff52a..34c9b35e02a 100644 --- a/spec/javascripts/vue_shared/components/file_icon_spec.js +++ b/spec/javascripts/vue_shared/components/file_icon_spec.js @@ -28,7 +28,9 @@ describe('File Icon component', () => { fileName: 'test.js', }); - expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#javascript`); + expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe( + `${gon.sprite_file_icons}#javascript`, + ); }); it('should render a image icon based on file ending', () => { @@ -36,7 +38,9 @@ describe('File Icon component', () => { fileName: 'test.png', }); - expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#image`); + expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe( + `${gon.sprite_file_icons}#image`, + ); }); it('should render a webpack icon based on file namer', () => { @@ -44,7 +48,9 @@ describe('File Icon component', () => { fileName: 'webpack.js', }); - expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#webpack`); + expect(vm.$el.firstChild.firstChild.getAttribute('xlink:href')).toBe( + `${gon.sprite_file_icons}#webpack`, + ); }); it('should render a standard folder icon', () => { @@ -53,7 +59,9 @@ describe('File Icon component', () => { folder: true, }); - expect(vm.$el.querySelector('span > svg > use').getAttribute('xlink:href')).toBe(`${gon.sprite_file_icons}#folder`); + expect(vm.$el.querySelector('span > svg > use').getAttribute('xlink:href')).toBe( + `${gon.sprite_file_icons}#folder`, + ); }); it('should render a loading icon', () => { 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 43750c74b99..3bf497bc00b 100644 --- a/spec/javascripts/vue_shared/components/header_ci_component_spec.js +++ b/spec/javascripts/vue_shared/components/header_ci_component_spec.js @@ -59,9 +59,9 @@ describe('Header CI Component', () => { it('should render status badge', () => { expect(vm.$el.querySelector('.ci-failed')).toBeDefined(); expect(vm.$el.querySelector('.ci-status-icon-failed svg')).toBeDefined(); - expect( - vm.$el.querySelector('.ci-failed').getAttribute('href'), - ).toEqual(props.status.details_path); + expect(vm.$el.querySelector('.ci-failed').getAttribute('href')).toEqual( + props.status.details_path, + ); }); it('should render item name and id', () => { @@ -84,7 +84,7 @@ describe('Header CI Component', () => { expect(vm.$el.querySelector('.link').getAttribute('href')).toEqual(props.actions[0].path); }); - it('should show loading icon', (done) => { + it('should show loading icon', done => { vm.actions[0].isLoading = true; Vue.nextTick(() => { diff --git a/spec/javascripts/vue_shared/components/icon_spec.js b/spec/javascripts/vue_shared/components/icon_spec.js index f2ae6997c2a..45eef2ad737 100644 --- a/spec/javascripts/vue_shared/components/icon_spec.js +++ b/spec/javascripts/vue_shared/components/icon_spec.js @@ -2,11 +2,11 @@ import Vue from 'vue'; import Icon from '~/vue_shared/components/icon.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; -describe('Sprite Icon Component', function () { - describe('Initialization', function () { +describe('Sprite Icon Component', function() { + describe('Initialization', function() { let icon; - beforeEach(function () { + beforeEach(function() { const IconComponent = Vue.extend(Icon); icon = mountComponent(IconComponent, { @@ -21,20 +21,20 @@ describe('Sprite Icon Component', function () { icon.$destroy(); }); - it('should return a defined Vue component', function () { + it('should return a defined Vue component', function() { expect(icon).toBeDefined(); }); - it('should have <svg> as a child element', function () { + it('should have <svg> as a child element', function() { expect(icon.$el.tagName).toBe('svg'); }); - it('should have <use> as a child element with the correct href', function () { + it('should have <use> as a child element with the correct href', function() { expect(icon.$el.firstChild.tagName).toBe('use'); expect(icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_icons}#commit`); }); - it('should properly compute iconSizeClass', function () { + it('should properly compute iconSizeClass', function() { expect(icon.iconSizeClass).toBe('s32'); }); @@ -44,7 +44,7 @@ describe('Sprite Icon Component', function () { expect(icon.$options.props.size.validator(9001)).toBeFalsy(); }); - it('should properly render img css', function () { + it('should properly render img css', function() { const { classList } = icon.$el; const containsSizeClass = classList.contains('s32'); const containsCustomClass = classList.contains('extraclasses'); diff --git a/spec/javascripts/vue_shared/components/identicon_spec.js b/spec/javascripts/vue_shared/components/identicon_spec.js index 0719800c682..0b3dbb61c96 100644 --- a/spec/javascripts/vue_shared/components/identicon_spec.js +++ b/spec/javascripts/vue_shared/components/identicon_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import identiconComponent from '~/vue_shared/components/identicon.vue'; -const createComponent = (sizeClass) => { +const createComponent = sizeClass => { const Component = Vue.extend(identiconComponent); return new Component({ diff --git a/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js b/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js index e6ed77dbb52..aa7d6ea2e34 100644 --- a/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js +++ b/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js @@ -6,7 +6,10 @@ const IssueWarning = Vue.extend(issueWarning); function formatWarning(string) { // Replace newlines with a space then replace multiple spaces with one space - return string.trim().replace(/\n/g, ' ').replace(/\s\s+/g, ' '); + return string + .trim() + .replace(/\n/g, ' ') + .replace(/\s\s+/g, ' '); } describe('Issue Warning Component', () => { @@ -17,7 +20,9 @@ describe('Issue Warning Component', () => { }); expect(vm.$el.querySelector('.icon use').href.baseVal).toMatch(/lock$/); - expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual('This issue is locked. Only project members can comment.'); + expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual( + 'This issue is locked. Only project members can comment.', + ); }); }); @@ -28,7 +33,9 @@ describe('Issue Warning Component', () => { }); expect(vm.$el.querySelector('.icon use').href.baseVal).toMatch(/eye-slash$/); - expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual('This is a confidential issue. Your comment will not be visible to the public.'); + expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual( + 'This is a confidential issue. Your comment will not be visible to the public.', + ); }); }); @@ -40,7 +47,9 @@ describe('Issue Warning Component', () => { }); expect(vm.$el.querySelector('.icon')).toBeFalsy(); - expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual('This issue is confidential and locked. People without permission will never get a notification and won\'t be able to comment.'); + expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual( + "This issue is confidential and locked. People without permission will never get a notification and won't be able to comment.", + ); }); }); }); diff --git a/spec/javascripts/vue_shared/components/loading_button_spec.js b/spec/javascripts/vue_shared/components/loading_button_spec.js index 44e3fcab77e..db89d4a934c 100644 --- a/spec/javascripts/vue_shared/components/loading_button_spec.js +++ b/spec/javascripts/vue_shared/components/loading_button_spec.js @@ -4,7 +4,7 @@ import mountComponent from 'spec/helpers/vue_mount_component_helper'; const LABEL = 'Hello'; -describe('LoadingButton', function () { +describe('LoadingButton', function() { let vm; let LoadingButton; diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js index 0dea9278cc2..abb17440c0e 100644 --- a/spec/javascripts/vue_shared/components/markdown/field_spec.js +++ b/spec/javascripts/vue_shared/components/markdown/field_spec.js @@ -11,7 +11,7 @@ function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) { describe('Markdown field component', () => { let vm; - beforeEach((done) => { + beforeEach(done => { vm = new Vue({ components: { fieldComponent, @@ -39,9 +39,7 @@ describe('Markdown field component', () => { describe('mounted', () => { it('renders textarea inside backdrop', () => { - expect( - vm.$el.querySelector('.zen-backdrop textarea'), - ).not.toBeNull(); + expect(vm.$el.querySelector('.zen-backdrop textarea')).not.toBeNull(); }); describe('markdown preview', () => { @@ -49,73 +47,70 @@ describe('Markdown field component', () => { let writeLink; beforeEach(() => { - spyOn(Vue.http, 'post').and.callFake(() => new Promise((resolve) => { - setTimeout(() => { - resolve({ - json() { - return { - body: '<p>markdown preview</p>', - }; - }, - }); - }); - })); + spyOn(Vue.http, 'post').and.callFake( + () => + new Promise(resolve => { + setTimeout(() => { + resolve({ + json() { + return { + body: '<p>markdown preview</p>', + }; + }, + }); + }); + }), + ); previewLink = vm.$el.querySelector('.nav-links .js-preview-link'); writeLink = vm.$el.querySelector('.nav-links .js-write-link'); }); - it('sets preview link as active', (done) => { + it('sets preview link as active', done => { previewLink.click(); Vue.nextTick(() => { - expect( - previewLink.parentNode.classList.contains('active'), - ).toBeTruthy(); + expect(previewLink.parentNode.classList.contains('active')).toBeTruthy(); done(); }); }); - it('shows preview loading text', (done) => { + it('shows preview loading text', done => { previewLink.click(); Vue.nextTick(() => { - expect( - vm.$el.querySelector('.md-preview').textContent.trim(), - ).toContain('Loading...'); + expect(vm.$el.querySelector('.md-preview').textContent.trim()).toContain('Loading...'); done(); }); }); - it('renders markdown preview', (done) => { + it('renders markdown preview', done => { previewLink.click(); setTimeout(() => { - expect( - vm.$el.querySelector('.md-preview').innerHTML, - ).toContain('<p>markdown preview</p>'); + expect(vm.$el.querySelector('.md-preview').innerHTML).toContain( + '<p>markdown preview</p>', + ); done(); }); }); - it('renders GFM with jQuery', (done) => { + it('renders GFM with jQuery', done => { spyOn($.fn, 'renderGFM'); previewLink.click(); setTimeout(() => { - expect( - $.fn.renderGFM, - ).toHaveBeenCalled(); + expect($.fn.renderGFM).toHaveBeenCalled(); done(); }, 0); }); - it('clicking already active write or preview link does nothing', (done) => { + it('clicking already active write or preview link does nothing', done => { writeLink.click(); Vue.nextTick() .then(() => assertMarkdownTabs(true, writeLink, previewLink, vm)) @@ -134,46 +129,40 @@ describe('Markdown field component', () => { }); describe('markdown buttons', () => { - it('converts single words', (done) => { + it('converts single words', done => { const textarea = vm.$el.querySelector('textarea'); textarea.setSelectionRange(0, 7); vm.$el.querySelector('.js-md').click(); Vue.nextTick(() => { - expect( - textarea.value, - ).toContain('**testing**'); + expect(textarea.value).toContain('**testing**'); done(); }); }); - it('converts a line', (done) => { + it('converts a line', done => { const textarea = vm.$el.querySelector('textarea'); textarea.setSelectionRange(0, 0); vm.$el.querySelectorAll('.js-md')[5].click(); Vue.nextTick(() => { - expect( - textarea.value, - ).toContain('* testing'); + expect(textarea.value).toContain('* testing'); done(); }); }); - it('converts multiple lines', (done) => { + it('converts multiple lines', done => { const textarea = vm.$el.querySelector('textarea'); textarea.setSelectionRange(0, 50); vm.$el.querySelectorAll('.js-md')[5].click(); Vue.nextTick(() => { - expect( - textarea.value, - ).toContain('* testing\n* 123'); + expect(textarea.value).toContain('* testing\n* 123'); done(); }); diff --git a/spec/javascripts/vue_shared/components/markdown/header_spec.js b/spec/javascripts/vue_shared/components/markdown/header_spec.js index a4681617e66..6c4bc3602c1 100644 --- a/spec/javascripts/vue_shared/components/markdown/header_spec.js +++ b/spec/javascripts/vue_shared/components/markdown/header_spec.js @@ -18,7 +18,18 @@ describe('Markdown field header component', () => { }); it('renders markdown header buttons', () => { - const buttons = ['Add bold text', 'Add italic text', 'Insert a quote', 'Insert code', 'Add a link', 'Add a bullet list', 'Add a numbered list', 'Add a task list', 'Add a table', 'Go full screen']; + const buttons = [ + 'Add bold text', + 'Add italic text', + 'Insert a quote', + 'Insert code', + 'Add a link', + 'Add a bullet list', + 'Add a numbered list', + 'Add a task list', + 'Add a table', + 'Go full screen', + ]; const elements = vm.$el.querySelectorAll('.toolbar-btn'); elements.forEach((buttonEl, index) => { @@ -56,7 +67,9 @@ describe('Markdown field header component', () => { spyOn(vm, '$emit'); $(document).triggerHandler('markdown-preview:show', [ - $('<form><div class="js-vue-markdown-field"><textarea class="markdown-area"></textarea></div></form>'), + $( + '<form><div class="js-vue-markdown-field"><textarea class="markdown-area"></textarea></div></form>', + ), ]); expect(vm.$emit).not.toHaveBeenCalled(); @@ -76,6 +89,8 @@ describe('Markdown field header component', () => { }); it('renders markdown table template', () => { - expect(vm.mdTable).toEqual('| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |'); + expect(vm.mdTable).toEqual( + '| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |', + ); }); }); diff --git a/spec/javascripts/vue_shared/components/markdown/toolbar_spec.js b/spec/javascripts/vue_shared/components/markdown/toolbar_spec.js index 3e708f865c8..e6c7abd9d3b 100644 --- a/spec/javascripts/vue_shared/components/markdown/toolbar_spec.js +++ b/spec/javascripts/vue_shared/components/markdown/toolbar_spec.js @@ -25,9 +25,12 @@ describe('toolbar', () => { describe('user cannot attach file', () => { beforeEach(() => { - vm = mountComponent(Toolbar, Object.assign({}, props, { - canAttachFile: false, - })); + vm = mountComponent( + Toolbar, + Object.assign({}, props, { + canAttachFile: false, + }), + ); }); it('should not render uploading-container', () => { diff --git a/spec/javascripts/vue_shared/components/memory_graph_spec.js b/spec/javascripts/vue_shared/components/memory_graph_spec.js index 588f05970f6..78c3ae3ddb3 100644 --- a/spec/javascripts/vue_shared/components/memory_graph_spec.js +++ b/spec/javascripts/vue_shared/components/memory_graph_spec.js @@ -93,7 +93,7 @@ describe('MemoryGraph', () => { expect(el.querySelector('svg')).toBeDefined(); }); - it('should render graph when renderGraph is called internally', (done) => { + it('should render graph when renderGraph is called internally', done => { const { pathD, pathViewBox, dotX, dotY } = vm.getGraphPlotValues(mockMedian, mockMetrics); vm.height = defaultHeight; vm.width = defaultWidth; @@ -113,7 +113,9 @@ describe('MemoryGraph', () => { expect(pathEl).toBeDefined(); expect(pathEl.getAttribute('d')).toBe(`M ${pathD}`); - expect(pathEl.getAttribute('viewBox')).toBe(`0 0 ${pathViewBox.lineWidth} ${pathViewBox.diff}`); + expect(pathEl.getAttribute('viewBox')).toBe( + `0 0 ${pathViewBox.lineWidth} ${pathViewBox.diff}`, + ); const circleEl = el.querySelector('circle'); diff --git a/spec/javascripts/vue_shared/components/navigation_tabs_spec.js b/spec/javascripts/vue_shared/components/navigation_tabs_spec.js index 77e15425d85..462bfc10664 100644 --- a/spec/javascripts/vue_shared/components/navigation_tabs_spec.js +++ b/spec/javascripts/vue_shared/components/navigation_tabs_spec.js @@ -46,7 +46,9 @@ describe('navigation tabs component', () => { it('should render badge', () => { expect(vm.$el.querySelector('.js-pipelines-tab-all .badge').textContent.trim()).toEqual('1'); - expect(vm.$el.querySelector('.js-pipelines-tab-pending .badge').textContent.trim()).toEqual('0'); + expect(vm.$el.querySelector('.js-pipelines-tab-pending .badge').textContent.trim()).toEqual( + '0', + ); }); it('should not render badge', () => { diff --git a/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js b/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js index 262571efcb8..6013e85811a 100644 --- a/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js +++ b/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js @@ -20,6 +20,8 @@ describe('placeholder system note component', () => { }); expect(vm.$el.tagName).toEqual('LI'); - expect(vm.$el.querySelector('.timeline-content em').textContent.trim()).toEqual('This is a placeholder'); + expect(vm.$el.querySelector('.timeline-content em').textContent.trim()).toEqual( + 'This is a placeholder', + ); }); }); diff --git a/spec/javascripts/vue_shared/components/pagination_links_spec.js b/spec/javascripts/vue_shared/components/pagination_links_spec.js index a27dc3bfbbb..d0cb3731050 100644 --- a/spec/javascripts/vue_shared/components/pagination_links_spec.js +++ b/spec/javascripts/vue_shared/components/pagination_links_spec.js @@ -23,13 +23,10 @@ describe('Pagination links component', () => { let destinationComponent; beforeEach(() => { - paginationLinks = mountComponent( - paginationLinksComponent, - { - change, - pageInfo, - }, - ); + paginationLinks = mountComponent(paginationLinksComponent, { + change, + pageInfo, + }); [glPagination] = paginationLinks.$children; [destinationComponent] = glPagination.$children; }); @@ -40,33 +37,23 @@ describe('Pagination links component', () => { it('should provide translated text to GitLab UI pagination', () => { Object.entries(translations).forEach(entry => { - expect( - destinationComponent[entry[0]], - ).toBe(entry[1]) + expect(destinationComponent[entry[0]]).toBe(entry[1]); }); }); it('should pass change to GitLab UI pagination', () => { - expect( - Object.is(glPagination.change, change), - ).toBe(true); + expect(Object.is(glPagination.change, change)).toBe(true); }); it('should pass page from pageInfo to GitLab UI pagination', () => { - expect( - destinationComponent.value, - ).toBe(pageInfo.page); + expect(destinationComponent.value).toBe(pageInfo.page); }); it('should pass per page from pageInfo to GitLab UI pagination', () => { - expect( - destinationComponent.perPage, - ).toBe(pageInfo.perPage); + expect(destinationComponent.perPage).toBe(pageInfo.perPage); }); it('should pass total items from pageInfo to GitLab UI pagination', () => { - expect( - destinationComponent.totalRows, - ).toBe(pageInfo.total); + expect(destinationComponent.totalRows).toBe(pageInfo.total); }); }); diff --git a/spec/javascripts/vue_shared/components/panel_resizer_spec.js b/spec/javascripts/vue_shared/components/panel_resizer_spec.js index 58505a9df4d..37237154266 100644 --- a/spec/javascripts/vue_shared/components/panel_resizer_spec.js +++ b/spec/javascripts/vue_shared/components/panel_resizer_spec.js @@ -8,8 +8,23 @@ describe('Panel Resizer component', () => { 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); + event.initMouseEvent( + eventName, + true, + true, + window, + 1, + clientX, + 0, + clientX, + 0, + false, + false, + false, + false, + 0, + null, + ); el.dispatchEvent(event); }; @@ -54,7 +69,11 @@ describe('Panel Resizer component', () => { triggerEvent('mousemove', document); triggerEvent('mouseup', document); - expect(vm.$emit.calls.allArgs()).toEqual([['resize-start', 100], ['update:size', 100], ['resize-end', 100]]); + expect(vm.$emit.calls.allArgs()).toEqual([ + ['resize-start', 100], + ['update:size', 100], + ['resize-end', 100], + ]); expect(vm.size).toBe(100); }); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js index d729848a184..cef06e77141 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js @@ -6,7 +6,7 @@ import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { mockSuggestedColors } from './mock_data'; -const createComponent = (headerTitle) => { +const createComponent = headerTitle => { const Component = Vue.extend(dropdownCreateLabelComponent); return mountComponent(Component, { @@ -38,7 +38,9 @@ describe('DropdownCreateLabelComponent', () => { }); it('renders `Go back` button on component header', () => { - const backButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-back'); + const backButtonEl = vm.$el.querySelector( + '.dropdown-title button.dropdown-title-button.dropdown-menu-back', + ); expect(backButtonEl).not.toBe(null); expect(backButtonEl.querySelector('.fa-arrow-left')).not.toBe(null); @@ -60,7 +62,9 @@ describe('DropdownCreateLabelComponent', () => { }); it('renders `Close` button on component header', () => { - const closeButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close'); + const closeButtonEl = vm.$el.querySelector( + '.dropdown-title button.dropdown-title-button.dropdown-menu-close', + ); expect(closeButtonEl).not.toBe(null); expect(closeButtonEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBe(null); @@ -85,7 +89,9 @@ describe('DropdownCreateLabelComponent', () => { it('renders color input element', () => { expect(vm.$el.querySelector('.dropdown-label-color-input')).not.toBe(null); - expect(vm.$el.querySelector('.dropdown-label-color-preview.js-dropdown-label-color-preview')).not.toBe(null); + expect( + vm.$el.querySelector('.dropdown-label-color-preview.js-dropdown-label-color-preview'), + ).not.toBe(null); expect(vm.$el.querySelector('input#new_label_color.default-dropdown-input')).not.toBe(null); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js index e242dfbfe87..3711e9dac8c 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js @@ -43,7 +43,9 @@ describe('DropdownFooterComponent', () => { it('renders link element with value of `createLabelTitle` prop', () => { const vmWithCreateLabelTitle = createComponent(mockConfig.labelsWebUrl, createLabelTitle); - const createLabelEl = vmWithCreateLabelTitle.$el.querySelector('.dropdown-footer-list .dropdown-toggle-page'); + const createLabelEl = vmWithCreateLabelTitle.$el.querySelector( + '.dropdown-footer-list .dropdown-toggle-page', + ); expect(createLabelEl.innerText.trim()).toBe(createLabelTitle); vmWithCreateLabelTitle.$destroy(); @@ -63,7 +65,9 @@ describe('DropdownFooterComponent', () => { createLabelTitle, manageLabelsTitle, ); - const manageLabelsEl = vmWithManageLabelsTitle.$el.querySelector('.dropdown-footer-list .dropdown-external-link'); + const manageLabelsEl = vmWithManageLabelsTitle.$el.querySelector( + '.dropdown-footer-list .dropdown-external-link', + ); expect(manageLabelsEl.innerText.trim()).toBe(manageLabelsTitle); vmWithManageLabelsTitle.$destroy(); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js index e8fcf51135c..115e21e4f9f 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js @@ -29,7 +29,9 @@ describe('DropdownHeaderComponent', () => { }); it('renders `Close` button element', () => { - const closeBtnEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close'); + const closeBtnEl = vm.$el.querySelector( + '.dropdown-title button.dropdown-title-button.dropdown-menu-close', + ); expect(closeBtnEl).not.toBeNull(); expect(closeBtnEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBeNull(); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js index deef7dc5eeb..c30e619e76b 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js @@ -34,7 +34,9 @@ describe('DropdownSearchInputComponent', () => { }); it('renders clear search icon element', () => { - expect(vm.$el.querySelector('.fa-times.dropdown-input-clear.js-dropdown-input-clear')).not.toBeNull(); + expect( + vm.$el.querySelector('.fa-times.dropdown-input-clear.js-dropdown-input-clear'), + ).not.toBeNull(); }); }); }); 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 bef7143da42..3fff781594f 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 @@ -47,9 +47,11 @@ describe('DropdownValueComponent', () => { describe('methods', () => { describe('labelFilterUrl', () => { it('returns URL string starting with labelFilterBasePath and encoded label.title', () => { - expect(vm.labelFilterUrl({ - title: 'Foo bar', - })).toBe('/gitlab-org/my-project/issues?label_name[]=Foo%20bar'); + expect( + vm.labelFilterUrl({ + title: 'Foo bar', + }), + ).toBe('/gitlab-org/my-project/issues?label_name[]=Foo%20bar'); }); }); @@ -69,18 +71,24 @@ describe('DropdownValueComponent', () => { describe('template', () => { it('renders component container element with classes `hide-collapsed value issuable-show-labels`', () => { - expect(vm.$el.classList.contains('hide-collapsed', 'value', 'issuable-show-labels')).toBe(true); + expect(vm.$el.classList.contains('hide-collapsed', 'value', 'issuable-show-labels')).toBe( + true, + ); }); it('render slot content inside component when `labels` prop is empty', () => { const vmEmptyLabels = createComponent([]); - expect(vmEmptyLabels.$el.querySelector('.text-secondary').innerText.trim()).toBe(mockConfig.emptyValueText); + expect(vmEmptyLabels.$el.querySelector('.text-secondary').innerText.trim()).toBe( + mockConfig.emptyValueText, + ); vmEmptyLabels.$destroy(); }); it('renders label element with filter URL', () => { - expect(vm.$el.querySelector('a').getAttribute('href')).toBe('/gitlab-org/my-project/issues?label_name[]=Foo%20Label'); + expect(vm.$el.querySelector('a').getAttribute('href')).toBe( + '/gitlab-org/my-project/issues?label_name[]=Foo%20Label', + ); }); it('renders label element with tooltip and styles based on label details', () => { diff --git a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js index 568bc502119..073d111989c 100644 --- a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js +++ b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js @@ -4,16 +4,20 @@ import stackedProgressBarComponent from '~/vue_shared/components/stacked_progres import mountComponent from 'spec/helpers/vue_mount_component_helper'; -const createComponent = (config) => { +const createComponent = config => { const Component = Vue.extend(stackedProgressBarComponent); - const defaultConfig = Object.assign({}, { - successLabel: 'Synced', - failureLabel: 'Failed', - neutralLabel: 'Out of sync', - successCount: 25, - failureCount: 10, - totalCount: 5000, - }, config); + const defaultConfig = Object.assign( + {}, + { + successLabel: 'Synced', + failureLabel: 'Failed', + neutralLabel: 'Out of sync', + successCount: 25, + failureCount: 10, + totalCount: 5000, + }, + config, + ); return mountComponent(Component, defaultConfig); }; diff --git a/spec/javascripts/vue_shared/components/table_pagination_spec.js b/spec/javascripts/vue_shared/components/table_pagination_spec.js index 8dfcfb82ba4..0dcb712e720 100644 --- a/spec/javascripts/vue_shared/components/table_pagination_spec.js +++ b/spec/javascripts/vue_shared/components/table_pagination_spec.js @@ -11,7 +11,7 @@ describe('Pagination component', () => { spy = jasmine.createSpy('spy'); PaginationComponent = Vue.extend(paginationComp); - mountComponent = function (props) { + mountComponent = function(props) { return new PaginationComponent({ propsData: props, }).$mount(); @@ -139,9 +139,7 @@ describe('Pagination component', () => { change: spy, }); - expect( - component.$el.querySelector('.js-next-button').textContent.trim(), - ).toEqual('Next'); + expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next'); component.$el.querySelector('.js-next-button a').click(); diff --git a/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js b/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js index 1c7c88f4bda..745571d0a97 100644 --- a/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js +++ b/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js @@ -22,9 +22,9 @@ describe('Time ago with tooltip component', () => { }).$mount(); expect(vm.$el.tagName).toEqual('TIME'); - expect( - vm.$el.getAttribute('data-original-title'), - ).toEqual(formatDate('2017-05-08T14:57:39.781Z')); + expect(vm.$el.getAttribute('data-original-title')).toEqual( + formatDate('2017-05-08T14:57:39.781Z'), + ); expect(vm.$el.getAttribute('data-placement')).toEqual('top'); diff --git a/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js b/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js index 8465757deb6..997d84dcc42 100644 --- a/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js +++ b/spec/javascripts/vue_shared/components/tooltip_on_truncate_spec.js @@ -79,9 +79,7 @@ describe('TooltipOnTruncate component', () => { }, }; - vm = mountTooltipOnTruncate(options, (h) => [ - h('a', { style: STYLE_TRUNCATED }, TEST_TITLE), - ]); + vm = mountTooltipOnTruncate(options, h => [h('a', { style: STYLE_TRUNCATED }, TEST_TITLE)]); vm.$nextTick() .then(() => { @@ -99,9 +97,7 @@ describe('TooltipOnTruncate component', () => { }, }; - vm = mountTooltipOnTruncate(options, (h) => [ - h('a', { style: STYLE_NORMAL }, TEST_TITLE), - ]); + vm = mountTooltipOnTruncate(options, h => [h('a', { style: STYLE_NORMAL }, TEST_TITLE)]); vm.$nextTick() .then(() => { @@ -118,11 +114,11 @@ describe('TooltipOnTruncate component', () => { style: STYLE_NORMAL, props: { title: TEST_TITLE, - truncateTarget: (el) => el.childNodes[1], + truncateTarget: el => el.childNodes[1], }, }; - vm = mountTooltipOnTruncate(options, (h) => [ + vm = mountTooltipOnTruncate(options, h => [ h('a', { style: STYLE_NORMAL }, TEST_TITLE), h('span', { style: STYLE_TRUNCATED }, TEST_TITLE), ]); @@ -146,9 +142,7 @@ describe('TooltipOnTruncate component', () => { }, }; - vm = mountTooltipOnTruncate(options, (h) => [ - h('a', { style: STYLE_TRUNCATED }, TEST_TITLE), - ]); + vm = mountTooltipOnTruncate(options, h => [h('a', { style: STYLE_TRUNCATED }, TEST_TITLE)]); vm.$nextTick() .then(() => { 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 1b496bbabca..50b8d49d4bd 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 @@ -2,8 +2,8 @@ import _ from 'underscore'; import Vue from 'vue'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; -describe('User Avatar Link Component', function () { - beforeEach(function () { +describe('User Avatar Link Component', function() { + beforeEach(function() { this.propsData = { linkHref: 'myavatarurl.com', imgSize: 99, @@ -24,40 +24,40 @@ describe('User Avatar Link Component', function () { [this.userAvatarImage] = this.userAvatarLink.$children; }); - it('should return a defined Vue component', function () { + it('should return a defined Vue component', function() { expect(this.userAvatarLink).toBeDefined(); }); - it('should have user-avatar-image registered as child component', function () { + it('should have user-avatar-image registered as child component', function() { expect(this.userAvatarLink.$options.components.userAvatarImage).toBeDefined(); }); - it('user-avatar-link should have user-avatar-image as child component', function () { + it('user-avatar-link should have user-avatar-image as child component', function() { expect(this.userAvatarImage).toBeDefined(); }); - it('should render <a> as a child element', function () { + it('should render <a> as a child element', function() { expect(this.userAvatarLink.$el.tagName).toBe('A'); }); - it('should have <img> as a child element', function () { + it('should have <img> as a child element', function() { expect(this.userAvatarLink.$el.querySelector('img')).not.toBeNull(); }); - it('should return neccessary props as defined', function () { + it('should return neccessary props as defined', function() { _.each(this.propsData, (val, key) => { expect(this.userAvatarLink[key]).toBeDefined(); }); }); - describe('no username', function () { - beforeEach(function (done) { + describe('no username', function() { + beforeEach(function(done) { this.userAvatarLink.username = ''; Vue.nextTick(done); }); - it('should only render image tag in link', function () { + it('should only render image tag in link', function() { const childElements = this.userAvatarLink.$el.childNodes; expect(childElements[0].tagName).toBe('IMG'); @@ -66,26 +66,34 @@ describe('User Avatar Link Component', function () { expect(childElements[1].tagName).toBeUndefined(); }); - it('should render avatar image tooltip', function () { - expect(this.userAvatarLink.$el.querySelector('img').dataset.originalTitle).toEqual(this.propsData.tooltipText); + it('should render avatar image tooltip', function() { + expect(this.userAvatarLink.$el.querySelector('img').dataset.originalTitle).toEqual( + this.propsData.tooltipText, + ); }); }); - describe('username', function () { - it('should not render avatar image tooltip', function () { + describe('username', function() { + it('should not render avatar image tooltip', function() { expect(this.userAvatarLink.$el.querySelector('img').dataset.originalTitle).toEqual(''); }); - it('should render username prop in <span>', function () { - expect(this.userAvatarLink.$el.querySelector('span').innerText.trim()).toEqual(this.propsData.username); + it('should render username prop in <span>', function() { + expect(this.userAvatarLink.$el.querySelector('span').innerText.trim()).toEqual( + this.propsData.username, + ); }); - it('should render text tooltip for <span>', function () { - expect(this.userAvatarLink.$el.querySelector('span').dataset.originalTitle).toEqual(this.propsData.tooltipText); + it('should render text tooltip for <span>', function() { + expect(this.userAvatarLink.$el.querySelector('span').dataset.originalTitle).toEqual( + this.propsData.tooltipText, + ); }); - it('should render text tooltip placement for <span>', function () { - expect(this.userAvatarLink.$el.querySelector('span').getAttribute('tooltip-placement')).toEqual(this.propsData.tooltipPlacement); + it('should render text tooltip placement for <span>', function() { + expect( + this.userAvatarLink.$el.querySelector('span').getAttribute('tooltip-placement'), + ).toEqual(this.propsData.tooltipPlacement); }); }); }); diff --git a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_svg_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_svg_spec.js index b8d639ffbec..9152fa8e12f 100644 --- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_svg_spec.js +++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_svg_spec.js @@ -4,9 +4,9 @@ import avatarSvg from 'icons/_icon_random.svg'; const UserAvatarSvgComponent = Vue.extend(UserAvatarSvg); -describe('User Avatar Svg Component', function () { - describe('Initialization', function () { - beforeEach(function () { +describe('User Avatar Svg Component', function() { + describe('Initialization', function() { + beforeEach(function() { this.propsData = { size: 99, svg: avatarSvg, @@ -17,11 +17,11 @@ describe('User Avatar Svg Component', function () { }).$mount(); }); - it('should return a defined Vue component', function () { + it('should return a defined Vue component', function() { expect(this.userAvatarSvg).toBeDefined(); }); - it('should have <svg> as a child element', function () { + it('should have <svg> as a child element', function() { expect(this.userAvatarSvg.$el.tagName).toEqual('svg'); expect(this.userAvatarSvg.$el.innerHTML).toContain('<path'); }); diff --git a/spec/javascripts/vue_shared/directives/tooltip_spec.js b/spec/javascripts/vue_shared/directives/tooltip_spec.js index 4a644913e44..305d2fd5af4 100644 --- a/spec/javascripts/vue_shared/directives/tooltip_spec.js +++ b/spec/javascripts/vue_shared/directives/tooltip_spec.js @@ -58,7 +58,11 @@ describe('Tooltip directive', () => { }); it('should have tooltip plugin applied to all instances', () => { - expect($(vm.$el).find('.js-look-for-tooltip').data('bs.tooltip')).toBeDefined(); + expect( + $(vm.$el) + .find('.js-look-for-tooltip') + .data('bs.tooltip'), + ).toBeDefined(); }); }); }); |