diff options
Diffstat (limited to 'spec/javascripts/vue_shared')
24 files changed, 0 insertions, 2021 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 deleted file mode 100644 index 367e07d3ad3..00000000000 --- a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js +++ /dev/null @@ -1,100 +0,0 @@ -import Vue from '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; - let vm; - - const statuses = { - canceled: { - text: 'canceled', - label: 'canceled', - group: 'canceled', - icon: 'status_canceled', - details_path: 'status/canceled', - }, - created: { - text: 'created', - label: 'created', - group: 'created', - icon: 'status_created', - details_path: 'status/created', - }, - failed: { - text: 'failed', - label: 'failed', - group: 'failed', - icon: 'status_failed', - details_path: 'status/failed', - }, - manual: { - text: 'manual', - label: 'manual action', - group: 'manual', - icon: 'status_manual', - details_path: 'status/manual', - }, - pending: { - text: 'pending', - label: 'pending', - group: 'pending', - icon: 'status_pending', - details_path: 'status/pending', - }, - running: { - text: 'running', - label: 'running', - group: 'running', - icon: 'status_running', - details_path: 'status/running', - }, - skipped: { - text: 'skipped', - label: 'skipped', - group: 'skipped', - icon: 'status_skipped', - details_path: 'status/skipped', - }, - success_warining: { - text: 'passed', - label: 'passed', - group: 'success-with-warnings', - icon: 'status_warning', - details_path: 'status/warning', - }, - success: { - text: 'passed', - label: 'passed', - group: 'passed', - icon: 'status_success', - details_path: 'status/passed', - }, - }; - - beforeEach(() => { - CIBadge = Vue.extend(ciBadge); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('should render each status badge', () => { - Object.keys(statuses).map(status => { - vm = mountComponent(CIBadge, { status: statuses[status] }); - - expect(vm.$el.getAttribute('href')).toEqual(statuses[status].details_path); - expect(vm.$el.textContent.trim()).toEqual(statuses[status].text); - expect(vm.$el.getAttribute('class')).toContain(`ci-status ci-${statuses[status].group}`); - expect(vm.$el.querySelector('svg')).toBeDefined(); - return vm; - }); - }); - - it('should not render label', () => { - vm = mountComponent(CIBadge, { status: statuses.canceled, showText: false }); - - expect(vm.$el.textContent.trim()).toEqual(''); - }); -}); diff --git a/spec/javascripts/vue_shared/components/ci_icon_spec.js b/spec/javascripts/vue_shared/components/ci_icon_spec.js deleted file mode 100644 index 9486d7d4f23..00000000000 --- a/spec/javascripts/vue_shared/components/ci_icon_spec.js +++ /dev/null @@ -1,122 +0,0 @@ -import Vue from '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); - let vm; - - afterEach(() => { - vm.$destroy(); - }); - - it('should render a span element with an svg', () => { - vm = mountComponent(Component, { - status: { - icon: 'status_success', - }, - }); - - expect(vm.$el.tagName).toEqual('SPAN'); - expect(vm.$el.querySelector('span > svg')).toBeDefined(); - }); - - it('should render a success status', () => { - vm = mountComponent(Component, { - status: { - icon: 'status_success', - group: 'success', - }, - }); - - expect(vm.$el.classList.contains('ci-status-icon-success')).toEqual(true); - }); - - it('should render a failed status', () => { - vm = mountComponent(Component, { - status: { - icon: 'status_failed', - group: 'failed', - }, - }); - - expect(vm.$el.classList.contains('ci-status-icon-failed')).toEqual(true); - }); - - it('should render success with warnings status', () => { - vm = mountComponent(Component, { - status: { - icon: 'status_warning', - group: 'warning', - }, - }); - - expect(vm.$el.classList.contains('ci-status-icon-warning')).toEqual(true); - }); - - it('should render pending status', () => { - vm = mountComponent(Component, { - status: { - icon: 'status_pending', - group: 'pending', - }, - }); - - expect(vm.$el.classList.contains('ci-status-icon-pending')).toEqual(true); - }); - - it('should render running status', () => { - vm = mountComponent(Component, { - status: { - icon: 'status_running', - group: 'running', - }, - }); - - expect(vm.$el.classList.contains('ci-status-icon-running')).toEqual(true); - }); - - it('should render created status', () => { - vm = mountComponent(Component, { - status: { - icon: 'status_created', - group: 'created', - }, - }); - - expect(vm.$el.classList.contains('ci-status-icon-created')).toEqual(true); - }); - - it('should render skipped status', () => { - vm = mountComponent(Component, { - status: { - icon: 'status_skipped', - group: 'skipped', - }, - }); - - expect(vm.$el.classList.contains('ci-status-icon-skipped')).toEqual(true); - }); - - it('should render canceled status', () => { - vm = mountComponent(Component, { - status: { - icon: 'status_canceled', - group: 'canceled', - }, - }); - - expect(vm.$el.classList.contains('ci-status-icon-canceled')).toEqual(true); - }); - - it('should render status for manual action', () => { - vm = mountComponent(Component, { - status: { - icon: 'status_manual', - group: 'manual', - }, - }); - - expect(vm.$el.classList.contains('ci-status-icon-manual')).toEqual(true); - }); -}); 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 deleted file mode 100644 index fbe9337ecf4..00000000000 --- a/spec/javascripts/vue_shared/components/content_viewer/content_viewer_spec.js +++ /dev/null @@ -1,123 +0,0 @@ -import Vue from 'vue'; -import MockAdapter from 'axios-mock-adapter'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import waitForPromises from 'spec/helpers/wait_for_promises'; -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', () => { - 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`).replyOnce(200, { - body: '<b>testing</b>', - }); - - createComponent({ - path: 'test.md', - content: '* Test', - projectPath: 'testproject', - type: 'markdown', - }); - - waitForPromises() - .then(() => { - expect(vm.$el.querySelector('.md-previewer').textContent).toContain('testing'); - }) - .then(done) - .catch(done.fail); - }); - - it('renders image preview', done => { - createComponent({ - path: GREEN_BOX_IMAGE_URL, - fileSize: 1024, - type: 'image', - }); - - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelector('img').getAttribute('src')).toBe(GREEN_BOX_IMAGE_URL); - }) - .then(done) - .catch(done.fail); - }); - - it('renders fallback download control', done => { - createComponent({ - path: 'somepath/test.abc', - fileSize: 1024, - }); - - vm.$nextTick() - .then(() => { - expect( - vm.$el - .querySelector('.file-info') - .textContent.trim() - .replace(/\s+/, ' '), - ).toEqual('test.abc (1.00 KiB)'); - - expect(vm.$el.querySelector('.btn.btn-default').textContent.trim()).toEqual('Download'); - }) - .then(done) - .catch(done.fail); - }); - - it('renders fallback download control for file with a data URL path properly', done => { - createComponent({ - path: 'data:application/octet-stream;base64,U0VMRUNUICfEhHNnc2cnIGZyb20gVGFibGVuYW1lOwoK', - filePath: 'somepath/test.abc', - }); - - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelector('.file-info').textContent.trim()).toEqual('test.abc'); - expect(vm.$el.querySelector('.btn.btn-default')).toHaveAttr('download', 'test.abc'); - expect(vm.$el.querySelector('.btn.btn-default').textContent.trim()).toEqual('Download'); - }) - .then(done) - .catch(done.fail); - }); - - it('markdown preview receives the file path as a parameter', done => { - mock = new MockAdapter(axios); - spyOn(axios, 'post').and.callThrough(); - mock.onPost(`${gon.relative_url_root}/testproject/preview_markdown`).reply(200, { - body: '<b>testing</b>', - }); - - createComponent({ - path: 'test.md', - content: '* Test', - projectPath: 'testproject', - type: 'markdown', - filePath: 'foo/test.md', - }); - - vm.$nextTick() - .then(() => { - expect(axios.post).toHaveBeenCalledWith( - `${gon.relative_url_root}/testproject/preview_markdown`, - { path: 'foo/test.md', text: '* Test' }, - jasmine.any(Object), - ); - }) - .then(done) - .catch(done.fail); - }); -}); 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 deleted file mode 100644 index 6a83790093a..00000000000 --- a/spec/javascripts/vue_shared/components/diff_viewer/diff_viewer_spec.js +++ /dev/null @@ -1,105 +0,0 @@ -import Vue from '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 = { - diffMode: 'replaced', - diffViewerMode: 'image', - newPath: GREEN_BOX_IMAGE_URL, - newSha: 'ABC', - oldPath: RED_BOX_IMAGE_URL, - oldSha: 'DEF', - }; - 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( - Object.assign({}, requiredProps, { - projectPath: '', - }), - ); - - setTimeout(() => { - expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe( - `//-/raw/DEF/${RED_BOX_IMAGE_URL}`, - ); - - expect(vm.$el.querySelector('.added img').getAttribute('src')).toBe( - `//-/raw/ABC/${GREEN_BOX_IMAGE_URL}`, - ); - - done(); - }); - }); - - it('renders fallback download diff display', done => { - createComponent( - Object.assign({}, requiredProps, { - diffViewerMode: 'added', - newPath: 'test.abc', - oldPath: 'testold.abc', - }), - ); - - 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(); - }); - }); - - it('renders renamed component', () => { - createComponent( - Object.assign({}, requiredProps, { - diffMode: 'renamed', - diffViewerMode: 'renamed', - newPath: 'test.abc', - oldPath: 'testold.abc', - }), - ); - - expect(vm.$el.textContent).toContain('File moved'); - }); - - it('renders mode changed component', () => { - createComponent( - Object.assign({}, requiredProps, { - diffMode: 'mode_changed', - newPath: 'test.abc', - oldPath: 'testold.abc', - aMode: '123', - bMode: '321', - }), - ); - - expect(vm.$el.textContent).toContain('File mode changed from 123 to 321'); - }); -}); diff --git a/spec/javascripts/vue_shared/components/dropdown/dropdown_button_spec.js b/spec/javascripts/vue_shared/components/dropdown/dropdown_button_spec.js deleted file mode 100644 index b00fa785a0e..00000000000 --- a/spec/javascripts/vue_shared/components/dropdown/dropdown_button_spec.js +++ /dev/null @@ -1,81 +0,0 @@ -import Vue from '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'; - -const createComponent = (props, slots = {}) => { - const Component = Vue.extend(dropdownButtonComponent); - - return mountComponentWithSlots(Component, { props, slots }); -}; - -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); - }); - - it('renders slot, if default slot exists', () => { - 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/dropdown/dropdown_hidden_input_spec.js b/spec/javascripts/vue_shared/components/dropdown/dropdown_hidden_input_spec.js deleted file mode 100644 index 402de2a8788..00000000000 --- a/spec/javascripts/vue_shared/components/dropdown/dropdown_hidden_input_spec.js +++ /dev/null @@ -1,36 +0,0 @@ -import Vue from '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'; - -const createComponent = (name = 'label_id[]', value = mockLabels[0].id) => { - const Component = Vue.extend(dropdownHiddenInputComponent); - - return mountComponent(Component, { - name, - value, - }); -}; - -describe('DropdownHiddenInputComponent', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('template', () => { - it('renders input element of type `hidden`', () => { - 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.value}`); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/dropdown/mock_data.js b/spec/javascripts/vue_shared/components/dropdown/mock_data.js deleted file mode 100644 index b09d42da401..00000000000 --- a/spec/javascripts/vue_shared/components/dropdown/mock_data.js +++ /dev/null @@ -1,11 +0,0 @@ -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/file_finder/item_spec.js b/spec/javascripts/vue_shared/components/file_finder/item_spec.js deleted file mode 100644 index e18d0a46223..00000000000 --- a/spec/javascripts/vue_shared/components/file_finder/item_spec.js +++ /dev/null @@ -1,140 +0,0 @@ -import Vue from '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', () => { - const Component = Vue.extend(ItemComponent); - let vm; - let localFile; - - beforeEach(() => { - localFile = { - ...file(), - name: 'test file', - path: 'test/file', - }; - - vm = createComponent(Component, { - file: localFile, - focused: true, - searchText: '', - index: 0, - }); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('renders file name & path', () => { - expect(vm.$el.textContent).toContain('test file'); - expect(vm.$el.textContent).toContain('test/file'); - }); - - describe('focused', () => { - it('adds is-focused class', () => { - expect(vm.$el.classList).toContain('is-focused'); - }); - - it('does not have is-focused class when not focused', done => { - vm.focused = false; - - vm.$nextTick(() => { - expect(vm.$el.classList).not.toContain('is-focused'); - - done(); - }); - }); - }); - - describe('changed file icon', () => { - it('does not render when not a changed or temp file', () => { - expect(vm.$el.querySelector('.diff-changed-stats')).toBe(null); - }); - - it('renders when a changed file', done => { - vm.file.changed = true; - - vm.$nextTick(() => { - expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null); - - done(); - }); - }); - - it('renders when a temp file', done => { - vm.file.tempFile = true; - - vm.$nextTick(() => { - expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null); - - done(); - }); - }); - }); - - it('emits event when clicked', () => { - spyOn(vm, '$emit'); - - vm.$el.click(); - - expect(vm.$emit).toHaveBeenCalledWith('click', vm.file); - }); - - describe('path', () => { - let el; - - beforeEach(done => { - vm.searchText = 'file'; - - el = vm.$el.querySelector('.diff-changed-file-path'); - - vm.$nextTick(done); - }); - - it('highlights text', () => { - expect(el.querySelectorAll('.highlighted').length).toBe(4); - }); - - it('adds ellipsis to long text', done => { - vm.file.path = new Array(70) - .fill() - .map((_, i) => `${i}-`) - .join(''); - - vm.$nextTick(() => { - expect(el.textContent).toBe(`...${vm.file.path.substr(vm.file.path.length - 60)}`); - done(); - }); - }); - }); - - describe('name', () => { - let el; - - beforeEach(done => { - vm.searchText = 'file'; - - el = vm.$el.querySelector('.diff-changed-file-name'); - - vm.$nextTick(done); - }); - - it('highlights text', () => { - expect(el.querySelectorAll('.highlighted').length).toBe(4); - }); - - it('does not add ellipsis to long text', done => { - vm.file.name = new Array(70) - .fill() - .map((_, i) => `${i}-`) - .join(''); - - vm.$nextTick(() => { - expect(el.textContent).not.toBe(`...${vm.file.name.substr(vm.file.name.length - 60)}`); - done(); - }); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/filtered_search_dropdown_spec.js b/spec/javascripts/vue_shared/components/filtered_search_dropdown_spec.js deleted file mode 100644 index 0bb4a04557b..00000000000 --- a/spec/javascripts/vue_shared/components/filtered_search_dropdown_spec.js +++ /dev/null @@ -1,190 +0,0 @@ -import Vue from '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); - let vm; - - afterEach(() => { - vm.$destroy(); - }); - - describe('with an empty array of items', () => { - beforeEach(() => { - vm = mountComponent(Component, { - items: [], - filterKey: '', - }); - }); - - it('renders empty list', () => { - expect(vm.$el.querySelectorAll('.js-filtered-dropdown-result').length).toEqual(0); - }); - - it('renders filter input', () => { - expect(vm.$el.querySelector('.js-filtered-dropdown-input')).not.toBeNull(); - }); - }); - - describe('when visible numbers is less than the items length', () => { - beforeEach(() => { - vm = mountComponent(Component, { - items: [{ title: 'One' }, { title: 'Two' }, { title: 'Three' }], - visibleItems: 2, - filterKey: 'title', - }); - }); - - it('it renders only the maximum number provided', () => { - expect(vm.$el.querySelectorAll('.js-filtered-dropdown-result').length).toEqual(2); - }); - }); - - describe('when visible number is bigger than the items length', () => { - beforeEach(() => { - vm = mountComponent(Component, { - items: [{ title: 'One' }, { title: 'Two' }, { title: 'Three' }], - filterKey: 'title', - }); - }); - - it('it renders the full list of items the maximum number provided', () => { - expect(vm.$el.querySelectorAll('.js-filtered-dropdown-result').length).toEqual(3); - }); - }); - - describe('while filtering', () => { - beforeEach(() => { - vm = mountComponent(Component, { - items: [ - { title: 'One' }, - { title: 'Two/three' }, - { title: 'Three four' }, - { title: 'Five' }, - ], - filterKey: 'title', - }); - }); - - it('updates the results to match the typed value', done => { - vm.$el.querySelector('.js-filtered-dropdown-input').value = 'three'; - vm.$el.querySelector('.js-filtered-dropdown-input').dispatchEvent(new Event('input')); - vm.$nextTick(() => { - expect(vm.$el.querySelectorAll('.js-filtered-dropdown-result').length).toEqual(2); - done(); - }); - }); - - describe('when no value matches the typed one', () => { - it('does not render any result', done => { - vm.$el.querySelector('.js-filtered-dropdown-input').value = 'six'; - vm.$el.querySelector('.js-filtered-dropdown-input').dispatchEvent(new Event('input')); - - vm.$nextTick(() => { - expect(vm.$el.querySelectorAll('.js-filtered-dropdown-result').length).toEqual(0); - done(); - }); - }); - }); - }); - - describe('with create mode enabled', () => { - describe('when there are no matches', () => { - beforeEach(() => { - vm = mountComponent(Component, { - items: [ - { title: 'One' }, - { title: 'Two/three' }, - { title: 'Three four' }, - { title: 'Five' }, - ], - filterKey: 'title', - showCreateMode: true, - }); - - vm.$el.querySelector('.js-filtered-dropdown-input').value = 'eleven'; - vm.$el.querySelector('.js-filtered-dropdown-input').dispatchEvent(new Event('input')); - }); - - it('renders a create button', done => { - vm.$nextTick(() => { - expect(vm.$el.querySelector('.js-dropdown-create-button')).not.toBeNull(); - done(); - }); - }); - - it('renders computed button text', done => { - vm.$nextTick(() => { - expect(vm.$el.querySelector('.js-dropdown-create-button').textContent.trim()).toEqual( - 'Create eleven', - ); - done(); - }); - }); - - describe('on click create button', () => { - it('emits createItem event with the filter', done => { - spyOn(vm, '$emit'); - vm.$nextTick(() => { - vm.$el.querySelector('.js-dropdown-create-button').click(); - - expect(vm.$emit).toHaveBeenCalledWith('createItem', 'eleven'); - done(); - }); - }); - }); - }); - - describe('when there are matches', () => { - beforeEach(() => { - vm = mountComponent(Component, { - items: [ - { title: 'One' }, - { title: 'Two/three' }, - { title: 'Three four' }, - { title: 'Five' }, - ], - filterKey: 'title', - showCreateMode: true, - }); - - vm.$el.querySelector('.js-filtered-dropdown-input').value = 'one'; - vm.$el.querySelector('.js-filtered-dropdown-input').dispatchEvent(new Event('input')); - }); - - it('does not render a create button', done => { - vm.$nextTick(() => { - expect(vm.$el.querySelector('.js-dropdown-create-button')).toBeNull(); - done(); - }); - }); - }); - }); - - describe('with create mode disabled', () => { - describe('when there are no matches', () => { - beforeEach(() => { - vm = mountComponent(Component, { - items: [ - { title: 'One' }, - { title: 'Two/three' }, - { title: 'Three four' }, - { title: 'Five' }, - ], - filterKey: 'title', - }); - - vm.$el.querySelector('.js-filtered-dropdown-input').value = 'eleven'; - vm.$el.querySelector('.js-filtered-dropdown-input').dispatchEvent(new Event('input')); - }); - - it('does not render a create button', done => { - vm.$nextTick(() => { - expect(vm.$el.querySelector('.js-dropdown-create-button')).toBeNull(); - done(); - }); - }); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/gl_countdown_spec.js b/spec/javascripts/vue_shared/components/gl_countdown_spec.js deleted file mode 100644 index 929ffe219f4..00000000000 --- a/spec/javascripts/vue_shared/components/gl_countdown_spec.js +++ /dev/null @@ -1,77 +0,0 @@ -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import Vue from 'vue'; -import GlCountdown from '~/vue_shared/components/gl_countdown.vue'; - -describe('GlCountdown', () => { - const Component = Vue.extend(GlCountdown); - let vm; - let now = '2000-01-01T00:00:00Z'; - - beforeEach(() => { - spyOn(Date, 'now').and.callFake(() => new Date(now).getTime()); - jasmine.clock().install(); - }); - - afterEach(() => { - vm.$destroy(); - jasmine.clock().uninstall(); - }); - - describe('when there is time remaining', () => { - beforeEach(done => { - vm = mountComponent(Component, { - endDateString: '2000-01-01T01:02:03Z', - }); - - Vue.nextTick() - .then(done) - .catch(done.fail); - }); - - it('displays remaining time', () => { - expect(vm.$el).toContainText('01:02:03'); - }); - - it('updates remaining time', done => { - now = '2000-01-01T00:00:01Z'; - jasmine.clock().tick(1000); - - Vue.nextTick() - .then(() => { - expect(vm.$el).toContainText('01:02:02'); - done(); - }) - .catch(done.fail); - }); - }); - - describe('when there is no time remaining', () => { - beforeEach(done => { - vm = mountComponent(Component, { - endDateString: '1900-01-01T00:00:00Z', - }); - - Vue.nextTick() - .then(done) - .catch(done.fail); - }); - - it('displays 00:00:00', () => { - expect(vm.$el).toContainText('00:00:00'); - }); - }); - - describe('when an invalid date is passed', () => { - it('throws a validation error', () => { - spyOn(Vue.config, 'warnHandler').and.stub(); - vm = mountComponent(Component, { - endDateString: 'this is invalid', - }); - - expect(Vue.config.warnHandler).toHaveBeenCalledTimes(1); - const [errorMessage] = Vue.config.warnHandler.calls.argsFor(0); - - expect(errorMessage).toMatch(/^Invalid prop: .* "endDateString"/); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/header_ci_component_spec.js b/spec/javascripts/vue_shared/components/header_ci_component_spec.js deleted file mode 100644 index b1abc972e1d..00000000000 --- a/spec/javascripts/vue_shared/components/header_ci_component_spec.js +++ /dev/null @@ -1,93 +0,0 @@ -import Vue from 'vue'; -import mountComponent, { mountComponentWithSlots } from 'spec/helpers/vue_mount_component_helper'; -import headerCi from '~/vue_shared/components/header_ci_component.vue'; - -describe('Header CI Component', () => { - let HeaderCi; - let vm; - let props; - - beforeEach(() => { - HeaderCi = Vue.extend(headerCi); - props = { - status: { - group: 'failed', - icon: 'status_failed', - label: 'failed', - text: 'failed', - details_path: 'path', - }, - itemName: 'job', - itemId: 123, - time: '2017-05-08T14:57:39.781Z', - user: { - web_url: 'path', - name: 'Foo', - username: 'foobar', - email: 'foo@bar.com', - avatar_url: 'link', - }, - hasSidebarButton: true, - }; - }); - - afterEach(() => { - vm.$destroy(); - }); - - const findActionButtons = () => vm.$el.querySelector('.header-action-buttons'); - - describe('render', () => { - beforeEach(() => { - vm = mountComponent(HeaderCi, props); - }); - - 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, - ); - }); - - it('should render item name and id', () => { - expect(vm.$el.querySelector('strong').textContent.trim()).toEqual('job #123'); - }); - - it('should render timeago date', () => { - expect(vm.$el.querySelector('time')).toBeDefined(); - }); - - it('should render user icon and name', () => { - expect(vm.$el.querySelector('.js-user-link').innerText.trim()).toContain(props.user.name); - }); - - it('should render sidebar toggle button', () => { - expect(vm.$el.querySelector('.js-sidebar-build-toggle')).not.toBeNull(); - }); - - it('should not render header action buttons when empty', () => { - expect(findActionButtons()).toBeNull(); - }); - }); - - describe('slot', () => { - it('should render header action buttons', () => { - vm = mountComponentWithSlots(HeaderCi, { props, slots: { default: 'Test Actions' } }); - - const buttons = findActionButtons(); - - expect(buttons).not.toBeNull(); - expect(buttons.textContent).toEqual('Test Actions'); - }); - }); - - describe('shouldRenderTriggeredLabel', () => { - it('should rendered created keyword when the shouldRenderTriggeredLabel is false', () => { - vm = mountComponent(HeaderCi, { ...props, shouldRenderTriggeredLabel: false }); - - expect(vm.$el.textContent).toContain('created'); - expect(vm.$el.textContent).not.toContain('triggered'); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/markdown/suggestions_spec.js b/spec/javascripts/vue_shared/components/markdown/suggestions_spec.js deleted file mode 100644 index b7de40b4831..00000000000 --- a/spec/javascripts/vue_shared/components/markdown/suggestions_spec.js +++ /dev/null @@ -1,106 +0,0 @@ -import Vue from 'vue'; -import SuggestionsComponent from '~/vue_shared/components/markdown/suggestions.vue'; - -const MOCK_DATA = { - suggestions: [ - { - id: 1, - appliable: true, - applied: false, - current_user: { - can_apply: true, - }, - diff_lines: [ - { - can_receive_suggestion: false, - line_code: null, - meta_data: null, - new_line: null, - old_line: 5, - rich_text: '-test', - text: '-test', - type: 'old', - }, - { - can_receive_suggestion: true, - line_code: null, - meta_data: null, - new_line: 5, - old_line: null, - rich_text: '+new test', - text: '+new test', - type: 'new', - }, - ], - }, - ], - noteHtml: ` - <div class="suggestion"> - <div class="line">-oldtest</div> - </div> - <div class="suggestion"> - <div class="line">+newtest</div> - </div> - `, - isApplied: false, - helpPagePath: 'path_to_docs', -}; - -describe('Suggestion component', () => { - let vm; - let diffTable; - - beforeEach(done => { - const Component = Vue.extend(SuggestionsComponent); - - vm = new Component({ - propsData: MOCK_DATA, - }).$mount(); - - diffTable = vm.generateDiff(0).$mount().$el; - - spyOn(vm, 'renderSuggestions'); - vm.renderSuggestions(); - Vue.nextTick(done); - }); - - describe('mounted', () => { - it('renders a flash container', () => { - expect(vm.$el.querySelector('.js-suggestions-flash')).not.toBeNull(); - }); - - it('renders a container for suggestions', () => { - expect(vm.$refs.container).not.toBeNull(); - }); - - it('renders suggestions', () => { - expect(vm.renderSuggestions).toHaveBeenCalled(); - expect(vm.$el.innerHTML.includes('oldtest')).toBe(true); - expect(vm.$el.innerHTML.includes('newtest')).toBe(true); - }); - }); - - describe('generateDiff', () => { - it('generates a diff table', () => { - expect(diffTable.querySelector('.md-suggestion-diff')).not.toBeNull(); - }); - - it('generates a diff table that contains contents of `oldLineContent`', () => { - expect(diffTable.innerHTML.includes(vm.fromContent)).toBe(true); - }); - - it('generates a diff table that contains contents the suggested lines', () => { - MOCK_DATA.suggestions[0].diff_lines.forEach(line => { - const text = line.text.substring(1); - - expect(diffTable.innerHTML.includes(text)).toBe(true); - }); - }); - - it('generates a diff table with the correct line number for each suggested line', () => { - const lines = diffTable.querySelectorAll('.old_line'); - - expect(parseInt([...lines][0].innerHTML, 10)).toBe(5); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/markdown/toolbar_spec.js b/spec/javascripts/vue_shared/components/markdown/toolbar_spec.js deleted file mode 100644 index 288eb40cc76..00000000000 --- a/spec/javascripts/vue_shared/components/markdown/toolbar_spec.js +++ /dev/null @@ -1,40 +0,0 @@ -import Vue from 'vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import toolbar from '~/vue_shared/components/markdown/toolbar.vue'; - -describe('toolbar', () => { - let vm; - const Toolbar = Vue.extend(toolbar); - const props = { - markdownDocsPath: '', - }; - - afterEach(() => { - vm.$destroy(); - }); - - describe('user can attach file', () => { - beforeEach(() => { - vm = mountComponent(Toolbar, props); - }); - - it('should render uploading-container', () => { - expect(vm.$el.querySelector('.uploading-container')).not.toBeNull(); - }); - }); - - describe('user cannot attach file', () => { - beforeEach(() => { - vm = mountComponent( - Toolbar, - Object.assign({}, props, { - canAttachFile: false, - }), - ); - }); - - it('should not render uploading-container', () => { - expect(vm.$el.querySelector('.uploading-container')).toBeNull(); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/navigation_tabs_spec.js b/spec/javascripts/vue_shared/components/navigation_tabs_spec.js deleted file mode 100644 index beb980a6556..00000000000 --- a/spec/javascripts/vue_shared/components/navigation_tabs_spec.js +++ /dev/null @@ -1,64 +0,0 @@ -import Vue from '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; - let Component; - let data; - - beforeEach(() => { - data = [ - { - name: 'All', - scope: 'all', - count: 1, - isActive: true, - }, - { - name: 'Pending', - scope: 'pending', - count: 0, - isActive: false, - }, - { - name: 'Running', - scope: 'running', - isActive: false, - }, - ]; - - Component = Vue.extend(navigationTabs); - vm = mountComponent(Component, { tabs: data, scope: 'pipelines' }); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('should render tabs', () => { - expect(vm.$el.querySelectorAll('li').length).toEqual(data.length); - }); - - it('should render active tab', () => { - expect(vm.$el.querySelector('.active .js-pipelines-tab-all')).toBeDefined(); - }); - - 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', - ); - }); - - it('should not render badge', () => { - expect(vm.$el.querySelector('.js-pipelines-tab-running .badge')).toEqual(null); - }); - - it('should trigger onTabClick', () => { - spyOn(vm, '$emit'); - vm.$el.querySelector('.js-pipelines-tab-pending').click(); - - expect(vm.$emit).toHaveBeenCalledWith('onChangeTab', 'pending'); - }); -}); diff --git a/spec/javascripts/vue_shared/components/pikaday_spec.js b/spec/javascripts/vue_shared/components/pikaday_spec.js deleted file mode 100644 index b787ba7596f..00000000000 --- a/spec/javascripts/vue_shared/components/pikaday_spec.js +++ /dev/null @@ -1,30 +0,0 @@ -import Vue from 'vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import datePicker from '~/vue_shared/components/pikaday.vue'; - -describe('datePicker', () => { - let vm; - beforeEach(() => { - const DatePicker = Vue.extend(datePicker); - vm = mountComponent(DatePicker, { - label: 'label', - }); - }); - - it('should render label text', () => { - expect(vm.$el.querySelector('.dropdown-toggle-text').innerText.trim()).toEqual('label'); - }); - - it('should show calendar', () => { - expect(vm.$el.querySelector('.pika-single')).toBeDefined(); - }); - - it('should toggle when dropdown is clicked', () => { - const hidePicker = jasmine.createSpy(); - vm.$on('hidePicker', hidePicker); - - vm.$el.querySelector('.dropdown-menu-toggle').click(); - - expect(hidePicker).toHaveBeenCalled(); - }); -}); diff --git a/spec/javascripts/vue_shared/components/project_avatar/default_spec.js b/spec/javascripts/vue_shared/components/project_avatar/default_spec.js deleted file mode 100644 index 2ec19ebf80e..00000000000 --- a/spec/javascripts/vue_shared/components/project_avatar/default_spec.js +++ /dev/null @@ -1,58 +0,0 @@ -import Vue from 'vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import { projectData } from 'spec/ide/mock_data'; -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); - let vm; - - beforeEach(() => { - vm = mountComponent(Component, { - project: projectData, - }); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('renders identicon if project has no avatar_url', done => { - const expectedText = getFirstCharacterCapitalized(projectData.name); - - vm.project = { - ...vm.project, - avatar_url: null, - }; - - vm.$nextTick() - .then(() => { - const identiconEl = vm.$el.querySelector('.identicon'); - - expect(identiconEl).not.toBe(null); - expect(identiconEl.textContent.trim()).toEqual(expectedText); - }) - .then(done) - .catch(done.fail); - }); - - it('renders avatar image if project has avatar_url', done => { - const avatarUrl = `${TEST_HOST}/images/home/nasa.svg`; - - vm.project = { - ...vm.project, - avatar_url: avatarUrl, - }; - - vm.$nextTick() - .then(() => { - expect(vm.$el).toContainElement('.avatar'); - expect(vm.$el).not.toContainElement('.identicon'); - expect(vm.$el.querySelector('img')).toHaveAttr('src', avatarUrl); - }) - .then(done) - .catch(done.fail); - }); -}); 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 deleted file mode 100644 index e73fb97b741..00000000000 --- a/spec/javascripts/vue_shared/components/project_selector/project_list_item_spec.js +++ /dev/null @@ -1,109 +0,0 @@ -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(); - -describe('ProjectListItem component', () => { - const Component = localVue.extend(ProjectListItem); - let wrapper; - let vm; - let options; - loadJSONFixtures('static/projects.json'); - const project = getJSONFixture('static/projects.json')[0]; - - beforeEach(() => { - options = { - propsData: { - project, - selected: false, - }, - localVue, - }; - }); - - afterEach(() => { - wrapper.vm.$destroy(); - }); - - it('does not render a check mark icon if selected === false', () => { - wrapper = shallowMount(Component, options); - - expect(wrapper.contains('.js-selected-icon.js-unselected')).toBe(true); - }); - - it('renders a check mark icon if selected === true', () => { - options.propsData.selected = true; - - wrapper = shallowMount(Component, options); - - expect(wrapper.contains('.js-selected-icon.js-selected')).toBe(true); - }); - - it(`emits a "clicked" event when clicked`, () => { - wrapper = shallowMount(Component, options); - ({ vm } = wrapper); - - spyOn(vm, '$emit'); - wrapper.vm.onClick(); - - expect(wrapper.vm.$emit).toHaveBeenCalledWith('click'); - }); - - it(`renders the project avatar`, () => { - wrapper = shallowMount(Component, options); - - expect(wrapper.contains('.js-project-avatar')).toBe(true); - }); - - it(`renders a simple namespace name with a trailing slash`, () => { - options.propsData.project.name_with_namespace = 'a / b'; - - wrapper = shallowMount(Component, options); - const renderedNamespace = trimText(wrapper.find('.js-project-namespace').text()); - - expect(renderedNamespace).toBe('a /'); - }); - - it(`renders a properly truncated namespace with a trailing slash`, () => { - options.propsData.project.name_with_namespace = 'a / b / c / d / e / f'; - - wrapper = shallowMount(Component, options); - const renderedNamespace = trimText(wrapper.find('.js-project-namespace').text()); - - expect(renderedNamespace).toBe('a / ... / e /'); - }); - - it(`renders the project name`, () => { - options.propsData.project.name = 'my-test-project'; - - wrapper = shallowMount(Component, options); - const renderedName = trimText(wrapper.find('.js-project-name').text()); - - expect(renderedName).toBe('my-test-project'); - }); - - it(`renders the project name with highlighting in the case of a search query match`, () => { - options.propsData.project.name = 'my-test-project'; - options.propsData.matcher = 'pro'; - - wrapper = shallowMount(Component, options); - const renderedName = trimText(wrapper.find('.js-project-name').html()); - const expected = 'my-test-<b>p</b><b>r</b><b>o</b>ject'; - - expect(renderedName).toContain(expected); - }); - - it('prevents search query and project name XSS', () => { - const alertSpy = spyOn(window, 'alert'); - options.propsData.project.name = "my-xss-pro<script>alert('XSS');</script>ject"; - options.propsData.matcher = "pro<script>alert('XSS');</script>"; - - wrapper = shallowMount(Component, options); - const renderedName = trimText(wrapper.find('.js-project-name').html()); - const expected = 'my-xss-project'; - - expect(renderedName).toContain(expected); - expect(alertSpy).not.toHaveBeenCalled(); - }); -}); 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 deleted file mode 100644 index 5d995f06abb..00000000000 --- a/spec/javascripts/vue_shared/components/project_selector/project_selector_spec.js +++ /dev/null @@ -1,142 +0,0 @@ -import Vue from 'vue'; -import { head } from 'lodash'; - -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(); - -describe('ProjectSelector component', () => { - let wrapper; - let vm; - loadJSONFixtures('static/projects.json'); - const allProjects = getJSONFixture('static/projects.json'); - const searchResults = allProjects.slice(0, 5); - let selected = []; - selected = selected.concat(allProjects.slice(0, 3)).concat(allProjects.slice(5, 8)); - - const findSearchInput = () => wrapper.find(GlSearchBoxByType).find('input'); - - beforeEach(() => { - jasmine.clock().install(); - jasmine.clock().mockDate(); - - wrapper = mount(Vue.extend(ProjectSelector), { - localVue, - propsData: { - projectSearchResults: searchResults, - selectedProjects: selected, - showNoResultsMessage: false, - showMinimumSearchQueryMessage: false, - showLoadingIndicator: false, - showSearchErrorMessage: false, - }, - attachToDocument: true, - }); - - ({ vm } = wrapper); - }); - - afterEach(() => { - jasmine.clock().uninstall(); - vm.$destroy(); - }); - - it('renders the search results', () => { - expect(wrapper.findAll('.js-project-list-item').length).toBe(5); - }); - - it(`triggers a (debounced) search when the search input value changes`, () => { - spyOn(vm, '$emit'); - const query = 'my test query!'; - const searchInput = findSearchInput(); - - searchInput.setValue(query); - searchInput.trigger('input'); - - expect(vm.$emit).not.toHaveBeenCalledWith(); - jasmine.clock().tick(501); - - expect(vm.$emit).toHaveBeenCalledWith('searched', query); - }); - - it(`debounces the search input`, () => { - spyOn(vm, '$emit'); - const searchInput = findSearchInput(); - - const updateSearchQuery = (count = 0) => { - if (count === 10) { - jasmine.clock().tick(101); - - expect(vm.$emit).toHaveBeenCalledTimes(1); - expect(vm.$emit).toHaveBeenCalledWith('searched', `search query #9`); - } else { - searchInput.setValue(`search query #${count}`); - searchInput.trigger('input'); - - jasmine.clock().tick(400); - updateSearchQuery(count + 1); - } - }; - - updateSearchQuery(); - }); - - it(`includes a placeholder in the search box`, () => { - const searchInput = findSearchInput(); - - expect(searchInput.attributes('placeholder')).toBe('Search your projects'); - }); - - it(`triggers a "bottomReached" event when user has scrolled to the bottom of the list`, () => { - spyOn(vm, '$emit'); - wrapper.find(GlInfiniteScroll).vm.$emit('bottomReached'); - - expect(vm.$emit).toHaveBeenCalledWith('bottomReached'); - }); - - it(`triggers a "projectClicked" event when a project is clicked`, () => { - spyOn(vm, '$emit'); - wrapper.find(ProjectListItem).vm.$emit('click', head(searchResults)); - - expect(vm.$emit).toHaveBeenCalledWith('projectClicked', head(searchResults)); - }); - - it(`shows a "no results" message if showNoResultsMessage === true`, () => { - wrapper.setProps({ showNoResultsMessage: true }); - - return vm.$nextTick().then(() => { - const noResultsEl = wrapper.find('.js-no-results-message'); - - expect(noResultsEl.exists()).toBe(true); - expect(trimText(noResultsEl.text())).toEqual('Sorry, no projects matched your search'); - }); - }); - - it(`shows a "minimum search query" message if showMinimumSearchQueryMessage === true`, () => { - wrapper.setProps({ showMinimumSearchQueryMessage: true }); - - return vm.$nextTick().then(() => { - const minimumSearchEl = wrapper.find('.js-minimum-search-query-message'); - - expect(minimumSearchEl.exists()).toBe(true); - expect(trimText(minimumSearchEl.text())).toEqual('Enter at least three characters to search'); - }); - }); - - it(`shows a error message if showSearchErrorMessage === true`, () => { - wrapper.setProps({ showSearchErrorMessage: true }); - - return vm.$nextTick().then(() => { - const errorMessageEl = wrapper.find('.js-search-error-message'); - - expect(errorMessageEl.exists()).toBe(true); - expect(trimText(errorMessageEl.text())).toEqual( - 'Something went wrong, unable to search projects', - ); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data.js deleted file mode 100644 index 6564c012e67..00000000000 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data.js +++ /dev/null @@ -1,57 +0,0 @@ -export const mockLabels = [ - { - id: 26, - title: 'Foo Label', - description: 'Foobar', - color: '#BADA55', - text_color: '#FFFFFF', - }, - { - id: 27, - title: 'Foo::Bar', - description: 'Foobar', - color: '#0033CC', - text_color: '#FFFFFF', - }, -]; - -export const mockSuggestedColors = [ - '#0033CC', - '#428BCA', - '#44AD8E', - '#A8D695', - '#5CB85C', - '#69D100', - '#004E00', - '#34495E', - '#7F8C8D', - '#A295D6', - '#5843AD', - '#8E44AD', - '#FFECDB', - '#AD4363', - '#D10069', - '#CC0033', - '#FF0000', - '#D9534F', - '#D1D100', - '#F0AD4E', - '#AD8D43', -]; - -export const mockConfig = { - showCreate: true, - isProject: true, - abilityName: 'issue', - context: { - labels: mockLabels, - }, - namespace: 'gitlab-org', - updatePath: '/gitlab-org/my-project/issue/1', - labelsPath: '/gitlab-org/my-project/-/labels.json', - labelsWebUrl: '/gitlab-org/my-project/-/labels', - labelFilterBasePath: '/gitlab-org/my-project/issues', - canEdit: true, - suggestedColors: mockSuggestedColors, - emptyValueText: 'None', -}; diff --git a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js deleted file mode 100644 index c062ee13231..00000000000 --- a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js +++ /dev/null @@ -1,107 +0,0 @@ -import Vue from '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); - const defaultConfig = Object.assign( - {}, - { - successLabel: 'Synced', - failureLabel: 'Failed', - neutralLabel: 'Out of sync', - successCount: 25, - failureCount: 10, - totalCount: 5000, - }, - config, - ); - - return mountComponent(Component, defaultConfig); -}; - -describe('StackedProgressBarComponent', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('computed', () => { - describe('neutralCount', () => { - it('returns neutralCount based on totalCount, successCount and failureCount', () => { - expect(vm.neutralCount).toBe(4965); // 5000 - 25 - 10 - }); - }); - }); - - describe('methods', () => { - describe('getPercent', () => { - it('returns percentage from provided count based on `totalCount`', () => { - expect(vm.getPercent(500)).toBe(10); - }); - - it('returns percentage with decimal place from provided count based on `totalCount`', () => { - expect(vm.getPercent(67)).toBe(1.3); - }); - - 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', () => { - it('returns style string based on percentage provided', () => { - expect(vm.barStyle(50)).toBe('width: 50%;'); - }); - }); - - describe('getTooltip', () => { - describe('when hideTooltips is false', () => { - it('returns label string based on label and count provided', () => { - expect(vm.getTooltip('Synced', 10)).toBe('Synced: 10'); - }); - }); - - describe('when hideTooltips is true', () => { - beforeEach(() => { - vm = createComponent({ hideTooltips: true }); - }); - - it('returns an empty string', () => { - expect(vm.getTooltip('Synced', 10)).toBe(''); - }); - }); - }); - }); - - describe('template', () => { - it('renders container element', () => { - expect(vm.$el.classList.contains('stacked-progress-bar')).toBeTruthy(); - }); - - it('renders empty state when count is unavailable', () => { - const vmX = createComponent({ totalCount: 0, successCount: 0, failureCount: 0 }); - - expect(vmX.$el.querySelectorAll('.status-unavailable').length).not.toBe(0); - vmX.$destroy(); - }); - - it('renders bar elements when count is available', () => { - expect(vm.$el.querySelectorAll('.status-green').length).not.toBe(0); - expect(vm.$el.querySelectorAll('.status-neutral').length).not.toBe(0); - expect(vm.$el.querySelectorAll('.status-red').length).not.toBe(0); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/tabs/tab_spec.js b/spec/javascripts/vue_shared/components/tabs/tab_spec.js deleted file mode 100644 index 8437fe37738..00000000000 --- a/spec/javascripts/vue_shared/components/tabs/tab_spec.js +++ /dev/null @@ -1,32 +0,0 @@ -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 deleted file mode 100644 index 50ba18cd338..00000000000 --- a/spec/javascripts/vue_shared/components/tabs/tabs_spec.js +++ /dev/null @@ -1,68 +0,0 @@ -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/toggle_button_spec.js b/spec/javascripts/vue_shared/components/toggle_button_spec.js deleted file mode 100644 index ea0a89a3ab5..00000000000 --- a/spec/javascripts/vue_shared/components/toggle_button_spec.js +++ /dev/null @@ -1,101 +0,0 @@ -import Vue from 'vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; -import toggleButton from '~/vue_shared/components/toggle_button.vue'; - -describe('Toggle Button', () => { - let vm; - let Component; - - beforeEach(() => { - Component = Vue.extend(toggleButton); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('render output', () => { - beforeEach(() => { - vm = mountComponent(Component, { - value: true, - name: 'foo', - }); - }); - - it('renders input with provided name', () => { - expect(vm.$el.querySelector('input').getAttribute('name')).toEqual('foo'); - }); - - it('renders input with provided value', () => { - expect(vm.$el.querySelector('input').getAttribute('value')).toEqual('true'); - }); - - it('renders input status icon', () => { - expect(vm.$el.querySelectorAll('span.toggle-icon').length).toEqual(1); - expect(vm.$el.querySelectorAll('svg.s16.toggle-icon-svg').length).toEqual(1); - }); - }); - - describe('is-checked', () => { - beforeEach(() => { - vm = mountComponent(Component, { - value: true, - }); - - spyOn(vm, '$emit'); - }); - - it('renders is checked class', () => { - expect(vm.$el.querySelector('button').classList.contains('is-checked')).toEqual(true); - }); - - it('sets aria-label representing toggle state', () => { - vm.value = true; - - expect(vm.ariaLabel).toEqual('Toggle Status: ON'); - - vm.value = false; - - expect(vm.ariaLabel).toEqual('Toggle Status: OFF'); - }); - - it('emits change event when clicked', () => { - vm.$el.querySelector('button').click(); - - expect(vm.$emit).toHaveBeenCalledWith('change', false); - }); - }); - - describe('is-disabled', () => { - beforeEach(() => { - vm = mountComponent(Component, { - value: true, - disabledInput: true, - }); - spyOn(vm, '$emit'); - }); - - it('renders disabled button', () => { - expect(vm.$el.querySelector('button').classList.contains('is-disabled')).toEqual(true); - }); - - it('does not emit change event when clicked', () => { - vm.$el.querySelector('button').click(); - - expect(vm.$emit).not.toHaveBeenCalled(); - }); - }); - - describe('is-loading', () => { - beforeEach(() => { - vm = mountComponent(Component, { - value: true, - isLoading: true, - }); - }); - - it('renders loading class', () => { - expect(vm.$el.querySelector('button').classList.contains('is-loading')).toEqual(true); - }); - }); -}); 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 deleted file mode 100644 index 31644416439..00000000000 --- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_svg_spec.js +++ /dev/null @@ -1,29 +0,0 @@ -import Vue from '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); - -describe('User Avatar Svg Component', function() { - describe('Initialization', function() { - beforeEach(function() { - this.propsData = { - size: 99, - svg: avatarSvg, - }; - - this.userAvatarSvg = new UserAvatarSvgComponent({ - propsData: this.propsData, - }).$mount(); - }); - - it('should return a defined Vue component', function() { - expect(this.userAvatarSvg).toBeDefined(); - }); - - it('should have <svg> as a child element', function() { - expect(this.userAvatarSvg.$el.tagName).toEqual('svg'); - expect(this.userAvatarSvg.$el.innerHTML).toContain('<path'); - }); - }); -}); |