diff options
Diffstat (limited to 'spec/javascripts/vue_shared/components')
36 files changed, 45 insertions, 653 deletions
diff --git a/spec/javascripts/vue_shared/components/bar_chart_spec.js b/spec/javascripts/vue_shared/components/bar_chart_spec.js index 8f753876e44..8f673c146ec 100644 --- a/spec/javascripts/vue_shared/components/bar_chart_spec.js +++ b/spec/javascripts/vue_shared/components/bar_chart_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import BarChart from '~/vue_shared/components/bar_chart.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import BarChart from '~/vue_shared/components/bar_chart.vue'; function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; 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 42481f8c334..367e07d3ad3 100644 --- a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js +++ b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import ciBadge from '~/vue_shared/components/ci_badge_link.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import ciBadge from '~/vue_shared/components/ci_badge_link.vue'; describe('CI Badge Link Component', () => { let CIBadge; diff --git a/spec/javascripts/vue_shared/components/ci_icon_spec.js b/spec/javascripts/vue_shared/components/ci_icon_spec.js index b59a7d7544f..9486d7d4f23 100644 --- a/spec/javascripts/vue_shared/components/ci_icon_spec.js +++ b/spec/javascripts/vue_shared/components/ci_icon_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import ciIcon from '~/vue_shared/components/ci_icon.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import ciIcon from '~/vue_shared/components/ci_icon.vue'; describe('CI Icon component', () => { const Component = Vue.extend(ciIcon); diff --git a/spec/javascripts/vue_shared/components/clipboard_button_spec.js b/spec/javascripts/vue_shared/components/clipboard_button_spec.js deleted file mode 100644 index 29a76574b89..00000000000 --- a/spec/javascripts/vue_shared/components/clipboard_button_spec.js +++ /dev/null @@ -1,51 +0,0 @@ -import Vue from 'vue'; -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; - - afterEach(() => { - vm.$destroy(); - }); - - describe('without gfm', () => { - beforeEach(() => { - vm = mountComponent(Component, { - text: 'copy me', - title: 'Copy this value', - cssClass: 'btn-danger', - }); - }); - - it('renders a button for clipboard', () => { - expect(vm.$el.tagName).toEqual('BUTTON'); - expect(vm.$el.getAttribute('data-clipboard-text')).toEqual('copy me'); - expect(vm.$el).toHaveSpriteIcon('duplicate'); - }); - - it('should have a tooltip with default values', () => { - expect(vm.$el.getAttribute('data-original-title')).toEqual('Copy this value'); - }); - - it('should render provided classname', () => { - expect(vm.$el.classList).toContain('btn-danger'); - }); - }); - - describe('with gfm', () => { - it('sets data-clipboard-text with gfm', () => { - vm = mountComponent(Component, { - text: 'copy me', - gfm: '`path/to/file`', - title: 'Copy this value', - cssClass: 'btn-danger', - }); - - expect(vm.$el.getAttribute('data-clipboard-text')).toEqual( - '{"text":"copy me","gfm":"`path/to/file`"}', - ); - }); - }); -}); 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 index 16997e9dc67..e3f6609f128 100644 --- a/spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js +++ b/spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js @@ -1,9 +1,9 @@ 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'; +import axios from '~/lib/utils/axios_utils'; +import contentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue'; import '~/behaviors/markdown/render_gfm'; describe('ContentViewer', () => { diff --git a/spec/javascripts/vue_shared/components/deprecated_modal_2_spec.js b/spec/javascripts/vue_shared/components/deprecated_modal_2_spec.js index 64fb984d9fc..e031583b43a 100644 --- a/spec/javascripts/vue_shared/components/deprecated_modal_2_spec.js +++ b/spec/javascripts/vue_shared/components/deprecated_modal_2_spec.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import Vue from 'vue'; -import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; const modalComponent = Vue.extend(DeprecatedModal2); diff --git a/spec/javascripts/vue_shared/components/deprecated_modal_spec.js b/spec/javascripts/vue_shared/components/deprecated_modal_spec.js index be75be92158..d6c10e32794 100644 --- a/spec/javascripts/vue_shared/components/deprecated_modal_spec.js +++ b/spec/javascripts/vue_shared/components/deprecated_modal_spec.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import Vue from 'vue'; -import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; const modalComponent = Vue.extend(DeprecatedModal); 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 index 1acd6b3ebe7..c743f1f6ad7 100644 --- a/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js +++ b/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js @@ -1,8 +1,8 @@ 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'; +import diffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue'; describe('DiffViewer', () => { const requiredProps = { 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 index 0cb26d5000b..81f194395ef 100644 --- 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 @@ -1,7 +1,7 @@ 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'; +import imageDiffViewer from '~/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue'; describe('ImageDiffViewer', () => { const requiredProps = { 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 2fc4943de30..b00fa785a0e 100644 --- a/spec/javascripts/vue_shared/components/dropdown/dropdown_button_spec.js +++ b/spec/javascripts/vue_shared/components/dropdown/dropdown_button_spec.js @@ -1,8 +1,7 @@ import Vue from 'vue'; -import dropdownButtonComponent from '~/vue_shared/components/dropdown/dropdown_button.vue'; - import { mountComponentWithSlots } from 'spec/helpers/vue_mount_component_helper'; +import dropdownButtonComponent from '~/vue_shared/components/dropdown/dropdown_button.vue'; const defaultLabel = 'Select'; const customLabel = 'Select project'; diff --git a/spec/javascripts/vue_shared/components/dropdown/dropdown_hidden_input_spec.js b/spec/javascripts/vue_shared/components/dropdown/dropdown_hidden_input_spec.js index 445ab0cb40e..402de2a8788 100644 --- a/spec/javascripts/vue_shared/components/dropdown/dropdown_hidden_input_spec.js +++ b/spec/javascripts/vue_shared/components/dropdown/dropdown_hidden_input_spec.js @@ -1,8 +1,7 @@ import Vue from 'vue'; -import dropdownHiddenInputComponent from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue'; - import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import dropdownHiddenInputComponent from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue'; import { mockLabels } from './mock_data'; 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 deleted file mode 100644 index 551520721e5..00000000000 --- a/spec/javascripts/vue_shared/components/dropdown/dropdown_search_input_spec.js +++ /dev/null @@ -1,52 +0,0 @@ -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/expand_button_spec.js b/spec/javascripts/vue_shared/components/expand_button_spec.js deleted file mode 100644 index 2af4abc299a..00000000000 --- a/spec/javascripts/vue_shared/components/expand_button_spec.js +++ /dev/null @@ -1,32 +0,0 @@ -import Vue from 'vue'; -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(() => { - vm = mountComponent(Component, { - slots: { - expanded: '<p>Expanded!</p>', - }, - }); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('renders a collapsed button', () => { - expect(vm.$children[0].iconTestClass).toEqual('ic-ellipsis_h'); - }); - - it('hides expander on click', done => { - vm.$el.querySelector('button').click(); - vm.$nextTick(() => { - expect(vm.$el.querySelector('button').getAttribute('style')).toEqual('display: none;'); - done(); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/file_finder/index_spec.js b/spec/javascripts/vue_shared/components/file_finder/index_spec.js index bae4741f652..7ded228d3ea 100644 --- a/spec/javascripts/vue_shared/components/file_finder/index_spec.js +++ b/spec/javascripts/vue_shared/components/file_finder/index_spec.js @@ -1,9 +1,9 @@ import Vue from 'vue'; import Mousetrap from 'mousetrap'; -import FindFileComponent from '~/vue_shared/components/file_finder/index.vue'; -import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes'; import { file } from 'spec/ide/helpers'; import timeoutPromise from 'spec/helpers/set_timeout_promise_helper'; +import FindFileComponent from '~/vue_shared/components/file_finder/index.vue'; +import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes'; describe('File finder item spec', () => { const Component = Vue.extend(FindFileComponent); diff --git a/spec/javascripts/vue_shared/components/file_finder/item_spec.js b/spec/javascripts/vue_shared/components/file_finder/item_spec.js index c1511643a9d..e18d0a46223 100644 --- a/spec/javascripts/vue_shared/components/file_finder/item_spec.js +++ b/spec/javascripts/vue_shared/components/file_finder/item_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import ItemComponent from '~/vue_shared/components/file_finder/item.vue'; import { file } from 'spec/ide/helpers'; +import ItemComponent from '~/vue_shared/components/file_finder/item.vue'; import createComponent from '../../../helpers/vue_mount_component_helper'; describe('File finder item spec', () => { diff --git a/spec/javascripts/vue_shared/components/file_row_spec.js b/spec/javascripts/vue_shared/components/file_row_spec.js index 7da69e3fa84..2d80099fafe 100644 --- a/spec/javascripts/vue_shared/components/file_row_spec.js +++ b/spec/javascripts/vue_shared/components/file_row_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; +import { file } from 'spec/ide/helpers'; import FileRow from '~/vue_shared/components/file_row.vue'; import FileRowExtra from '~/ide/components/file_row_extra.vue'; -import { file } from 'spec/ide/helpers'; import mountComponent from '../../helpers/vue_mount_component_helper'; describe('File row component', () => { diff --git a/spec/javascripts/vue_shared/components/filtered_search_dropdown_spec.js b/spec/javascripts/vue_shared/components/filtered_search_dropdown_spec.js index 3d251426b5a..0bb4a04557b 100644 --- a/spec/javascripts/vue_shared/components/filtered_search_dropdown_spec.js +++ b/spec/javascripts/vue_shared/components/filtered_search_dropdown_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import component from '~/vue_shared/components/filtered_search_dropdown.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import component from '~/vue_shared/components/filtered_search_dropdown.vue'; describe('Filtered search dropdown', () => { const Component = Vue.extend(component); 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 2b059e5e9f4..7bd5e5a64b1 100644 --- a/spec/javascripts/vue_shared/components/header_ci_component_spec.js +++ b/spec/javascripts/vue_shared/components/header_ci_component_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import headerCi from '~/vue_shared/components/header_ci_component.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import headerCi from '~/vue_shared/components/header_ci_component.vue'; describe('Header CI Component', () => { let HeaderCi; diff --git a/spec/javascripts/vue_shared/components/icon_spec.js b/spec/javascripts/vue_shared/components/icon_spec.js index ecaef414464..5a3e483fb03 100644 --- a/spec/javascripts/vue_shared/components/icon_spec.js +++ b/spec/javascripts/vue_shared/components/icon_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; -import Icon from '~/vue_shared/components/icon.vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { mount } from '@vue/test-utils'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import Icon from '~/vue_shared/components/icon.vue'; describe('Sprite Icon Component', function() { describe('Initialization', function() { diff --git a/spec/javascripts/vue_shared/components/loading_button_spec.js b/spec/javascripts/vue_shared/components/loading_button_spec.js index db89d4a934c..6b03c354e01 100644 --- a/spec/javascripts/vue_shared/components/loading_button_spec.js +++ b/spec/javascripts/vue_shared/components/loading_button_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import loadingButton from '~/vue_shared/components/loading_button.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import loadingButton from '~/vue_shared/components/loading_button.vue'; const LABEL = 'Hello'; diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js deleted file mode 100644 index da984175f9f..00000000000 --- a/spec/javascripts/vue_shared/components/markdown/field_spec.js +++ /dev/null @@ -1,173 +0,0 @@ -import $ from 'jquery'; -import '~/behaviors/markdown/render_gfm'; -import Vue from 'vue'; -import AxiosMockAdapter from 'axios-mock-adapter'; -import axios from '~/lib/utils/axios_utils'; -import fieldComponent from '~/vue_shared/components/markdown/field.vue'; -import { TEST_HOST } from 'spec/test_constants'; - -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-holder').style.display).toEqual(isWrite ? 'none' : ''); -} - -describe('Markdown field component', () => { - const markdownPreviewPath = `${TEST_HOST}/preview`; - const markdownDocsPath = `${TEST_HOST}/docs`; - let axiosMock; - let vm; - - beforeEach(done => { - axiosMock = new AxiosMockAdapter(axios); - vm = new Vue({ - components: { - fieldComponent, - }, - data() { - return { - text: 'testing\n123', - }; - }, - template: ` - <field-component - markdown-preview-path="${markdownPreviewPath}" - markdown-docs-path="${markdownDocsPath}" - > - <textarea - slot="textarea" - v-model="text"> - </textarea> - </field-component> - `, - }).$mount(); - - Vue.nextTick(done); - }); - - afterEach(() => { - axiosMock.restore(); - }); - - describe('mounted', () => { - const previewHTML = '<p>markdown preview</p>'; - - it('renders textarea inside backdrop', () => { - expect(vm.$el.querySelector('.zen-backdrop textarea')).not.toBeNull(); - }); - - describe('markdown preview', () => { - let previewLink; - let writeLink; - - beforeEach(() => { - axiosMock.onPost(markdownPreviewPath).replyOnce(200, { body: previewHTML }); - - 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 => { - previewLink.click(); - - Vue.nextTick(() => { - expect(previewLink.parentNode.classList.contains('active')).toBeTruthy(); - - done(); - }); - }); - - it('shows preview loading text', done => { - previewLink.click(); - - Vue.nextTick(() => { - expect(vm.$el.querySelector('.md-preview-holder').textContent.trim()).toContain( - 'Loading…', - ); - - done(); - }); - }); - - it('renders markdown preview', done => { - previewLink.click(); - - setTimeout(() => { - expect(vm.$el.querySelector('.md-preview-holder').innerHTML).toContain(previewHTML); - - done(); - }); - }); - - it('renders GFM with jQuery', done => { - spyOn($.fn, 'renderGFM'); - - previewLink.click(); - - setTimeout(() => { - expect($.fn.renderGFM).toHaveBeenCalled(); - - done(); - }, 0); - }); - - it('clicking already active write or preview link does nothing', done => { - writeLink.click(); - Vue.nextTick() - .then(() => assertMarkdownTabs(true, writeLink, previewLink, vm)) - .then(() => writeLink.click()) - .then(() => Vue.nextTick()) - .then(() => assertMarkdownTabs(true, writeLink, previewLink, vm)) - .then(() => previewLink.click()) - .then(() => Vue.nextTick()) - .then(() => assertMarkdownTabs(false, writeLink, previewLink, vm)) - .then(() => previewLink.click()) - .then(() => Vue.nextTick()) - .then(() => assertMarkdownTabs(false, writeLink, previewLink, vm)) - .then(done) - .catch(done.fail); - }); - }); - - describe('markdown buttons', () => { - 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**'); - - 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'); - - 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'); - - done(); - }); - }); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/markdown/toolbar_spec.js b/spec/javascripts/vue_shared/components/markdown/toolbar_spec.js index e6c7abd9d3b..288eb40cc76 100644 --- a/spec/javascripts/vue_shared/components/markdown/toolbar_spec.js +++ b/spec/javascripts/vue_shared/components/markdown/toolbar_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import toolbar from '~/vue_shared/components/markdown/toolbar.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import toolbar from '~/vue_shared/components/markdown/toolbar.vue'; describe('toolbar', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/memory_graph_spec.js b/spec/javascripts/vue_shared/components/memory_graph_spec.js deleted file mode 100644 index 78c3ae3ddb3..00000000000 --- a/spec/javascripts/vue_shared/components/memory_graph_spec.js +++ /dev/null @@ -1,131 +0,0 @@ -import Vue from 'vue'; -import MemoryGraph from '~/vue_shared/components/memory_graph.vue'; -import { mockMetrics, mockMedian, mockMedianIndex } from './mock_data'; - -const defaultHeight = '25'; -const defaultWidth = '100'; - -const createComponent = () => { - const Component = Vue.extend(MemoryGraph); - - return new Component({ - el: document.createElement('div'), - propsData: { - metrics: [], - deploymentTime: 0, - width: '', - height: '', - pathD: '', - pathViewBox: '', - dotX: '', - dotY: '', - }, - }); -}; - -describe('MemoryGraph', () => { - let vm; - let el; - - beforeEach(() => { - vm = createComponent(); - el = vm.$el; - }); - - describe('data', () => { - it('should have default data', () => { - const data = MemoryGraph.data(); - const dataValidator = (dataItem, expectedType, defaultVal) => { - expect(typeof dataItem).toBe(expectedType); - expect(dataItem).toBe(defaultVal); - }; - - dataValidator(data.pathD, 'string', ''); - dataValidator(data.pathViewBox, 'string', ''); - dataValidator(data.dotX, 'string', ''); - dataValidator(data.dotY, 'string', ''); - }); - }); - - describe('computed', () => { - describe('getFormattedMedian', () => { - it('should show human readable median value based on provided median timestamp', () => { - vm.deploymentTime = mockMedian; - const formattedMedian = vm.getFormattedMedian; - - expect(formattedMedian.indexOf('Deployed')).toBeGreaterThan(-1); - expect(formattedMedian.indexOf('ago')).toBeGreaterThan(-1); - }); - }); - }); - - describe('methods', () => { - describe('getMedianMetricIndex', () => { - it('should return index of closest metric timestamp to that of median', () => { - const matchingIndex = vm.getMedianMetricIndex(mockMedian, mockMetrics); - - expect(matchingIndex).toBe(mockMedianIndex); - }); - }); - - describe('getGraphPlotValues', () => { - it('should return Object containing values to plot graph', () => { - const plotValues = vm.getGraphPlotValues(mockMedian, mockMetrics); - - expect(plotValues.pathD).toBeDefined(); - expect(Array.isArray(plotValues.pathD)).toBeTruthy(); - - expect(plotValues.pathViewBox).toBeDefined(); - expect(typeof plotValues.pathViewBox).toBe('object'); - - expect(plotValues.dotX).toBeDefined(); - expect(typeof plotValues.dotX).toBe('number'); - - expect(plotValues.dotY).toBeDefined(); - expect(typeof plotValues.dotY).toBe('number'); - }); - }); - }); - - describe('template', () => { - it('should render template elements correctly', () => { - expect(el.classList.contains('memory-graph-container')).toBeTruthy(); - expect(el.querySelector('svg')).toBeDefined(); - }); - - 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; - vm.pathD = `M ${pathD}`; - vm.pathViewBox = `0 0 ${pathViewBox.lineWidth} ${pathViewBox.diff}`; - vm.dotX = dotX; - vm.dotY = dotY; - - Vue.nextTick(() => { - const svgEl = el.querySelector('svg'); - - expect(svgEl).toBeDefined(); - expect(svgEl.getAttribute('height')).toBe(defaultHeight); - expect(svgEl.getAttribute('width')).toBe(defaultWidth); - - const pathEl = el.querySelector('path'); - - expect(pathEl).toBeDefined(); - expect(pathEl.getAttribute('d')).toBe(`M ${pathD}`); - expect(pathEl.getAttribute('viewBox')).toBe( - `0 0 ${pathViewBox.lineWidth} ${pathViewBox.diff}`, - ); - - const circleEl = el.querySelector('circle'); - - expect(circleEl).toBeDefined(); - expect(circleEl.getAttribute('r')).toBe('1.5'); - expect(circleEl.getAttribute('transform')).toBe('translate(0 -1)'); - expect(circleEl.getAttribute('cx')).toBe(`${dotX}`); - expect(circleEl.getAttribute('cy')).toBe(`${dotY}`); - done(); - }); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/mock_data.js b/spec/javascripts/vue_shared/components/mock_data.js deleted file mode 100644 index 15b56c58c33..00000000000 --- a/spec/javascripts/vue_shared/components/mock_data.js +++ /dev/null @@ -1,67 +0,0 @@ -export const mockMetrics = [ - [1493716685, '4.30859375'], - [1493716745, '4.30859375'], - [1493716805, '4.30859375'], - [1493716865, '4.30859375'], - [1493716925, '4.30859375'], - [1493716985, '4.30859375'], - [1493717045, '4.30859375'], - [1493717105, '4.30859375'], - [1493717165, '4.30859375'], - [1493717225, '4.30859375'], - [1493717285, '4.30859375'], - [1493717345, '4.30859375'], - [1493717405, '4.30859375'], - [1493717465, '4.30859375'], - [1493717525, '4.30859375'], - [1493717585, '4.30859375'], - [1493717645, '4.30859375'], - [1493717705, '4.30859375'], - [1493717765, '4.30859375'], - [1493717825, '4.30859375'], - [1493717885, '4.30859375'], - [1493717945, '4.30859375'], - [1493718005, '4.30859375'], - [1493718065, '4.30859375'], - [1493718125, '4.30859375'], - [1493718185, '4.30859375'], - [1493718245, '4.30859375'], - [1493718305, '4.234375'], - [1493718365, '4.234375'], - [1493718425, '4.234375'], - [1493718485, '4.234375'], - [1493718545, '4.243489583333333'], - [1493718605, '4.2109375'], - [1493718665, '4.2109375'], - [1493718725, '4.2109375'], - [1493718785, '4.26171875'], - [1493718845, '4.26171875'], - [1493718905, '4.26171875'], - [1493718965, '4.26171875'], - [1493719025, '4.26171875'], - [1493719085, '4.26171875'], - [1493719145, '4.26171875'], - [1493719205, '4.26171875'], - [1493719265, '4.26171875'], - [1493719325, '4.26171875'], - [1493719385, '4.26171875'], - [1493719445, '4.26171875'], - [1493719505, '4.26171875'], - [1493719565, '4.26171875'], - [1493719625, '4.26171875'], - [1493719685, '4.26171875'], - [1493719745, '4.26171875'], - [1493719805, '4.26171875'], - [1493719865, '4.26171875'], - [1493719925, '4.26171875'], - [1493719985, '4.26171875'], - [1493720045, '4.26171875'], - [1493720105, '4.26171875'], - [1493720165, '4.26171875'], - [1493720225, '4.26171875'], - [1493720285, '4.26171875'], -]; - -export const mockMedian = 1493718485; - -export const mockMedianIndex = 30; diff --git a/spec/javascripts/vue_shared/components/navigation_tabs_spec.js b/spec/javascripts/vue_shared/components/navigation_tabs_spec.js index 462bfc10664..beb980a6556 100644 --- a/spec/javascripts/vue_shared/components/navigation_tabs_spec.js +++ b/spec/javascripts/vue_shared/components/navigation_tabs_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import navigationTabs from '~/vue_shared/components/navigation_tabs.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import navigationTabs from '~/vue_shared/components/navigation_tabs.vue'; describe('navigation tabs component', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/pagination/graphql_pagination_spec.js b/spec/javascripts/vue_shared/components/pagination/graphql_pagination_spec.js index 7445da6cdee..204c0decfd8 100644 --- a/spec/javascripts/vue_shared/components/pagination/graphql_pagination_spec.js +++ b/spec/javascripts/vue_shared/components/pagination/graphql_pagination_spec.js @@ -1,14 +1,18 @@ -import { shallowMount } from '@vue/test-utils'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; import GraphqlPagination from '~/vue_shared/components/pagination/graphql_pagination.vue'; +const localVue = createLocalVue(); + describe('Graphql Pagination component', () => { let wrapper; function factory({ hasNextPage = true, hasPreviousPage = true }) { - wrapper = shallowMount(GraphqlPagination, { + wrapper = shallowMount(localVue.extend(GraphqlPagination), { propsData: { hasNextPage, hasPreviousPage, }, + sync: false, + localVue, }); } diff --git a/spec/javascripts/vue_shared/components/panel_resizer_spec.js b/spec/javascripts/vue_shared/components/panel_resizer_spec.js index caabe3aa260..d65ee8eeb2d 100644 --- a/spec/javascripts/vue_shared/components/panel_resizer_spec.js +++ b/spec/javascripts/vue_shared/components/panel_resizer_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import panelResizer from '~/vue_shared/components/panel_resizer.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import panelResizer from '~/vue_shared/components/panel_resizer.vue'; describe('Panel Resizer component', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/pikaday_spec.js b/spec/javascripts/vue_shared/components/pikaday_spec.js index 61f05e7a230..b787ba7596f 100644 --- a/spec/javascripts/vue_shared/components/pikaday_spec.js +++ b/spec/javascripts/vue_shared/components/pikaday_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import datePicker from '~/vue_shared/components/pikaday.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import datePicker from '~/vue_shared/components/pikaday.vue'; describe('datePicker', () => { let vm; diff --git a/spec/javascripts/vue_shared/components/project_avatar/default_spec.js b/spec/javascripts/vue_shared/components/project_avatar/default_spec.js index 5fed3f4b892..2ec19ebf80e 100644 --- a/spec/javascripts/vue_shared/components/project_avatar/default_spec.js +++ b/spec/javascripts/vue_shared/components/project_avatar/default_spec.js @@ -1,9 +1,9 @@ import Vue from 'vue'; -import ProjectAvatarDefault from '~/vue_shared/components/project_avatar/default.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { projectData } from 'spec/ide/mock_data'; -import { getFirstCharacterCapitalized } from '~/lib/utils/text_utility'; import { TEST_HOST } from 'spec/test_constants'; +import { getFirstCharacterCapitalized } from '~/lib/utils/text_utility'; +import ProjectAvatarDefault from '~/vue_shared/components/project_avatar/default.vue'; describe('ProjectAvatarDefault component', () => { const Component = Vue.extend(ProjectAvatarDefault); diff --git a/spec/javascripts/vue_shared/components/project_selector/project_list_item_spec.js b/spec/javascripts/vue_shared/components/project_selector/project_list_item_spec.js index 47964a1702a..271ae1b645f 100644 --- a/spec/javascripts/vue_shared/components/project_selector/project_list_item_spec.js +++ b/spec/javascripts/vue_shared/components/project_selector/project_list_item_spec.js @@ -1,6 +1,6 @@ -import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import { trimText } from 'spec/helpers/text_helper'; +import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue'; const localVue = createLocalVue(); diff --git a/spec/javascripts/vue_shared/components/project_selector/project_selector_spec.js b/spec/javascripts/vue_shared/components/project_selector/project_selector_spec.js index 323a0f03017..6815da31436 100644 --- a/spec/javascripts/vue_shared/components/project_selector/project_selector_spec.js +++ b/spec/javascripts/vue_shared/components/project_selector/project_selector_spec.js @@ -1,11 +1,11 @@ import Vue from 'vue'; import _ from 'underscore'; -import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue'; -import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue'; import { GlSearchBoxByType, GlInfiniteScroll } from '@gitlab/ui'; import { mount, createLocalVue } from '@vue/test-utils'; import { trimText } from 'spec/helpers/text_helper'; +import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue'; +import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue'; const localVue = createLocalVue(); diff --git a/spec/javascripts/vue_shared/components/smart_virtual_list_spec.js b/spec/javascripts/vue_shared/components/smart_virtual_list_spec.js index e723fead65e..47ebdc505c9 100644 --- a/spec/javascripts/vue_shared/components/smart_virtual_list_spec.js +++ b/spec/javascripts/vue_shared/components/smart_virtual_list_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import SmartVirtualScrollList from '~/vue_shared/components/smart_virtual_list.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import SmartVirtualScrollList from '~/vue_shared/components/smart_virtual_list.vue'; describe('Toggle Button', () => { let vm; 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 073d111989c..f226dabb8a0 100644 --- a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js +++ b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js @@ -1,8 +1,7 @@ import Vue from 'vue'; -import stackedProgressBarComponent from '~/vue_shared/components/stacked_progress_bar.vue'; - import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import stackedProgressBarComponent from '~/vue_shared/components/stacked_progress_bar.vue'; const createComponent = config => { const Component = Vue.extend(stackedProgressBarComponent); @@ -54,6 +53,12 @@ describe('StackedProgressBarComponent', () => { it('returns percentage as `< 1` from provided count based on `totalCount` when evaluated value is less than 1', () => { expect(vm.getPercent(10)).toBe('< 1'); }); + + it('returns 0 if totalCount is falsy', () => { + vm = createComponent({ totalCount: 0 }); + + expect(vm.getPercent(100)).toBe(0); + }); }); describe('barStyle', () => { diff --git a/spec/javascripts/vue_shared/components/toggle_button_spec.js b/spec/javascripts/vue_shared/components/toggle_button_spec.js index 444ca451534..ea0a89a3ab5 100644 --- a/spec/javascripts/vue_shared/components/toggle_button_spec.js +++ b/spec/javascripts/vue_shared/components/toggle_button_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; -import toggleButton from '~/vue_shared/components/toggle_button.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import toggleButton from '~/vue_shared/components/toggle_button.vue'; describe('Toggle Button', () => { let vm; 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 deleted file mode 100644 index 80aa75847ae..00000000000 --- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js +++ /dev/null @@ -1,109 +0,0 @@ -import _ from 'underscore'; -import Vue from 'vue'; -import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; -import { TEST_HOST } from 'spec/test_constants'; - -describe('User Avatar Link Component', function() { - beforeEach(function() { - this.propsData = { - linkHref: `${TEST_HOST}/myavatarurl.com`, - imgSize: 99, - imgSrc: `${TEST_HOST}/myavatarurl.com`, - imgAlt: 'mydisplayname', - imgCssClasses: 'myextraavatarclass', - tooltipText: 'tooltip text', - tooltipPlacement: 'bottom', - username: 'username', - }; - - const UserAvatarLinkComponent = Vue.extend(UserAvatarLink); - - this.userAvatarLink = new UserAvatarLinkComponent({ - propsData: this.propsData, - }).$mount(); - - [this.userAvatarImage] = this.userAvatarLink.$children; - }); - - it('should return a defined Vue component', function() { - expect(this.userAvatarLink).toBeDefined(); - }); - - 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() { - expect(this.userAvatarImage).toBeDefined(); - }); - - it('should render <a> as a child element', function() { - const link = this.userAvatarLink.$el; - - expect(link.tagName).toBe('A'); - expect(link.href).toBe(this.propsData.linkHref); - }); - - it('renders imgSrc with imgSize as image', function() { - const { imgSrc, imgSize } = this.propsData; - const image = this.userAvatarLink.$el.querySelector('img'); - - expect(image).not.toBeNull(); - expect(image.src).toBe(`${imgSrc}?width=${imgSize}`); - }); - - it('should return necessary props as defined', function() { - _.each(this.propsData, (val, key) => { - expect(this.userAvatarLink[key]).toBeDefined(); - }); - }); - - describe('no username', function() { - beforeEach(function(done) { - this.userAvatarLink.username = ''; - - Vue.nextTick(done); - }); - - it('should only render image tag in link', function() { - const childElements = this.userAvatarLink.$el.childNodes; - - expect(this.userAvatarLink.$el.querySelector('img')).not.toBe('null'); - - // Vue will render the hidden component as <!----> - expect(childElements[1].tagName).toBeUndefined(); - }); - - it('should render avatar image tooltip', function() { - expect(this.userAvatarLink.shouldShowUsername).toBe(false); - expect(this.userAvatarLink.avatarTooltipText).toEqual(this.propsData.tooltipText); - }); - }); - - describe('username', function() { - it('should not render avatar image tooltip', function() { - expect(this.userAvatarLink.$el.querySelector('.js-user-avatar-image-toolip')).toBeNull(); - }); - - it('should render username prop in <span>', function() { - expect( - this.userAvatarLink.$el.querySelector('.js-user-avatar-link-username').innerText.trim(), - ).toEqual(this.propsData.username); - }); - - it('should render text tooltip for <span>', function() { - expect( - this.userAvatarLink.$el.querySelector('.js-user-avatar-link-username').dataset - .originalTitle, - ).toEqual(this.propsData.tooltipText); - }); - - it('should render text tooltip placement for <span>', function() { - expect( - this.userAvatarLink.$el - .querySelector('.js-user-avatar-link-username') - .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 9152fa8e12f..31644416439 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 @@ -1,6 +1,6 @@ import Vue from 'vue'; -import UserAvatarSvg from '~/vue_shared/components/user_avatar/user_avatar_svg.vue'; import avatarSvg from 'icons/_icon_random.svg'; +import UserAvatarSvg from '~/vue_shared/components/user_avatar/user_avatar_svg.vue'; const UserAvatarSvgComponent = Vue.extend(UserAvatarSvg); |