diff options
Diffstat (limited to 'spec/javascripts/vue_shared/components')
33 files changed, 87 insertions, 4 deletions
diff --git a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js index 668742ebaee..55b19989bc7 100644 --- a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js +++ b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js @@ -83,6 +83,7 @@ describe('CI Badge Link Component', () => { 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')).toEqual(`ci-status ci-${statuses[status].group}`); @@ -93,6 +94,7 @@ describe('CI Badge Link Component', () => { 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/clipboard_button_spec.js b/spec/javascripts/vue_shared/components/clipboard_button_spec.js index ea525b1e44f..2f7ea077b54 100644 --- a/spec/javascripts/vue_shared/components/clipboard_button_spec.js +++ b/spec/javascripts/vue_shared/components/clipboard_button_spec.js @@ -44,6 +44,7 @@ describe('clipboard button', () => { title: 'Copy this value into Clipboard!', 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/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js index 7189e8cfcfa..97dacec1fce 100644 --- a/spec/javascripts/vue_shared/components/commit_spec.js +++ b/spec/javascripts/vue_shared/components/commit_spec.js @@ -78,6 +78,7 @@ describe('Commit component', () => { expect(component.$el.querySelector('.commit-sha').getAttribute('href')).toEqual( props.commitUrl, ); + expect(component.$el.querySelector('.commit-sha').textContent).toContain(props.shortSha); }); @@ -100,6 +101,7 @@ describe('Commit component', () => { .querySelector('.commit-title .avatar-image-container img') .getAttribute('data-original-title'), ).toContain(props.author.username); + expect( component.$el .querySelector('.commit-title .avatar-image-container img') @@ -112,6 +114,7 @@ describe('Commit component', () => { expect(component.$el.querySelector('a.commit-row-message').getAttribute('href')).toEqual( props.commitUrl, ); + expect(component.$el.querySelector('a.commit-row-message').textContent).toContain( props.title, ); 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 71d9145bf22..fcd231ec693 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 @@ -55,6 +55,7 @@ describe('DiffViewer', () => { expect(vm.$el.querySelector('.deleted .file-info').textContent.trim()).toContain( 'testold.abc', ); + expect(vm.$el.querySelector('.deleted .btn.btn-default').textContent.trim()).toContain( 'Download', ); 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 dde49b4a5d7..380effdb669 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 @@ -55,6 +55,7 @@ describe('ImageDiffViewer', () => { expect(vm.$el.querySelector('.added .image_file img').getAttribute('src')).toBe( GREEN_BOX_IMAGE_URL, ); + expect(vm.$el.querySelector('.deleted .image_file img').getAttribute('src')).toBe( RED_BOX_IMAGE_URL, ); @@ -63,6 +64,7 @@ describe('ImageDiffViewer', () => { expect(vm.$el.querySelector('.view-modes-menu li:nth-child(2)').textContent.trim()).toBe( 'Swipe', ); + expect(vm.$el.querySelector('.view-modes-menu li:nth-child(3)').textContent.trim()).toBe( 'Onion skin', ); 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 2796cd088c6..6965677c5ef 100644 --- a/spec/javascripts/vue_shared/components/dropdown/dropdown_button_spec.js +++ b/spec/javascripts/vue_shared/components/dropdown/dropdown_button_spec.js @@ -55,6 +55,7 @@ describe('DropdownButtonComponent', () => { it('renders dropdown toggle text element', () => { const dropdownToggleTextEl = vm.$el.querySelector('.dropdown-toggle-text'); + expect(dropdownToggleTextEl).not.toBeNull(); expect(dropdownToggleTextEl.innerText.trim()).toBe(defaultLabel); }); diff --git a/spec/javascripts/vue_shared/components/file_icon_spec.js b/spec/javascripts/vue_shared/components/file_icon_spec.js index f2a09d08829..8c1345ff52a 100644 --- a/spec/javascripts/vue_shared/components/file_icon_spec.js +++ b/spec/javascripts/vue_shared/components/file_icon_spec.js @@ -63,6 +63,7 @@ describe('File Icon component', () => { }); const { classList } = vm.$el.querySelector('i'); + expect(classList.contains('fa')).toEqual(true); expect(classList.contains('fa-spin')).toEqual(true); expect(classList.contains('fa-spinner')).toEqual(true); @@ -79,6 +80,7 @@ describe('File Icon component', () => { const { classList } = vm.$el.firstChild; const containsSizeClass = classList.contains('s120'); const containsCustomClass = classList.contains('extraclasses'); + expect(containsSizeClass).toBe(true); expect(containsCustomClass).toBe(true); }); diff --git a/spec/javascripts/vue_shared/components/gl_modal_spec.js b/spec/javascripts/vue_shared/components/gl_modal_spec.js index 263824a102a..19af8b5d2f7 100644 --- a/spec/javascripts/vue_shared/components/gl_modal_spec.js +++ b/spec/javascripts/vue_shared/components/gl_modal_spec.js @@ -48,6 +48,7 @@ describe('GlModal', () => { it('sets the modal title', () => { const modalTitle = vm.$el.querySelector('.modal-title'); + expect(modalTitle.innerHTML.trim()).toBe(props.headerTitleText); }); }); @@ -63,6 +64,7 @@ describe('GlModal', () => { it('sets the primary button class', () => { const primaryButton = vm.$el.querySelector('.modal-footer button:last-of-type'); + expect(primaryButton).toHaveClass(`btn-${props.footerPrimaryButtonVariant}`); }); }); @@ -78,6 +80,7 @@ describe('GlModal', () => { it('sets the primary button text', () => { const primaryButton = vm.$el.querySelector('.modal-footer button:last-of-type'); + expect(primaryButton.innerHTML.trim()).toBe(props.footerPrimaryButtonText); }); }); @@ -173,6 +176,7 @@ describe('GlModal', () => { it('sets the modal body', () => { const modalBody = vm.$el.querySelector('.modal-body'); + expect(modalBody.innerHTML).toBe(slotContent); }); }); @@ -184,6 +188,7 @@ describe('GlModal', () => { it('sets the modal header', () => { const modalHeader = vm.$el.querySelector('.modal-header'); + expect(modalHeader.innerHTML).toBe(slotContent); }); }); @@ -195,6 +200,7 @@ describe('GlModal', () => { it('sets the modal title', () => { const modalTitle = vm.$el.querySelector('.modal-title'); + expect(modalTitle.innerHTML).toBe(slotContent); }); }); @@ -206,6 +212,7 @@ describe('GlModal', () => { it('sets the modal footer', () => { const modalFooter = vm.$el.querySelector('.modal-footer'); + expect(modalFooter.innerHTML).toBe(slotContent); }); }); diff --git a/spec/javascripts/vue_shared/components/icon_spec.js b/spec/javascripts/vue_shared/components/icon_spec.js index 01f4649339e..f2ae6997c2a 100644 --- a/spec/javascripts/vue_shared/components/icon_spec.js +++ b/spec/javascripts/vue_shared/components/icon_spec.js @@ -48,6 +48,7 @@ describe('Sprite Icon Component', function () { const { classList } = icon.$el; const containsSizeClass = classList.contains('s32'); const containsCustomClass = classList.contains('extraclasses'); + expect(containsSizeClass).toBe(true); expect(containsCustomClass).toBe(true); }); diff --git a/spec/javascripts/vue_shared/components/loading_button_spec.js b/spec/javascripts/vue_shared/components/loading_button_spec.js index 51c19cd4080..44e3fcab77e 100644 --- a/spec/javascripts/vue_shared/components/loading_button_spec.js +++ b/spec/javascripts/vue_shared/components/loading_button_spec.js @@ -69,6 +69,7 @@ describe('LoadingButton', function () { describe('container class', () => { it('should default to btn btn-align-content', () => { vm = mountComponent(LoadingButton, {}); + expect(vm.$el.classList.contains('btn')).toEqual(true); expect(vm.$el.classList.contains('btn-align-content')).toEqual(true); }); @@ -77,6 +78,7 @@ describe('LoadingButton', function () { vm = mountComponent(LoadingButton, { containerClass: 'test-class', }); + expect(vm.$el.classList.contains('btn')).toEqual(false); expect(vm.$el.classList.contains('btn-align-content')).toEqual(false); expect(vm.$el.classList.contains('test-class')).toEqual(true); diff --git a/spec/javascripts/vue_shared/components/memory_graph_spec.js b/spec/javascripts/vue_shared/components/memory_graph_spec.js index 0982b3e1f38..588f05970f6 100644 --- a/spec/javascripts/vue_shared/components/memory_graph_spec.js +++ b/spec/javascripts/vue_shared/components/memory_graph_spec.js @@ -52,6 +52,7 @@ describe('MemoryGraph', () => { 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); }); @@ -62,6 +63,7 @@ describe('MemoryGraph', () => { describe('getMedianMetricIndex', () => { it('should return index of closest metric timestamp to that of median', () => { const matchingIndex = vm.getMedianMetricIndex(mockMedian, mockMetrics); + expect(matchingIndex).toBe(mockMedianIndex); }); }); @@ -69,6 +71,7 @@ describe('MemoryGraph', () => { 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(); @@ -101,16 +104,19 @@ describe('MemoryGraph', () => { 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)'); diff --git a/spec/javascripts/vue_shared/components/navigation_tabs_spec.js b/spec/javascripts/vue_shared/components/navigation_tabs_spec.js index 09fda95d7d3..77e15425d85 100644 --- a/spec/javascripts/vue_shared/components/navigation_tabs_spec.js +++ b/spec/javascripts/vue_shared/components/navigation_tabs_spec.js @@ -56,6 +56,7 @@ describe('navigation tabs component', () => { 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/notes/placeholder_note_spec.js b/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js index db665fdaad3..45f131194ca 100644 --- a/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js +++ b/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js @@ -26,6 +26,7 @@ describe('issue placeholder system note component', () => { expect(vm.$el.querySelector('.user-avatar-link').getAttribute('href')).toEqual( userDataMock.path, ); + expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual( `${userDataMock.avatar_url}?width=40`, ); @@ -37,6 +38,7 @@ describe('issue placeholder system note component', () => { expect(vm.$el.querySelector('.note-header-info a').getAttribute('href')).toEqual( userDataMock.path, ); + expect( vm.$el.querySelector('.note-header-info .note-headline-light').textContent.trim(), ).toEqual(`@${userDataMock.username}`); diff --git a/spec/javascripts/vue_shared/components/pagination_links_spec.js b/spec/javascripts/vue_shared/components/pagination_links_spec.js index c9d183872b4..a27dc3bfbbb 100644 --- a/spec/javascripts/vue_shared/components/pagination_links_spec.js +++ b/spec/javascripts/vue_shared/components/pagination_links_spec.js @@ -39,11 +39,11 @@ describe('Pagination links component', () => { }); it('should provide translated text to GitLab UI pagination', () => { - Object.entries(translations).forEach(entry => + Object.entries(translations).forEach(entry => { expect( - destinationComponent[entry[0]], - ).toBe(entry[1]), - ); + destinationComponent[entry[0]], + ).toBe(entry[1]) + }); }); it('should pass change to GitLab UI pagination', () => { diff --git a/spec/javascripts/vue_shared/components/panel_resizer_spec.js b/spec/javascripts/vue_shared/components/panel_resizer_spec.js index f1e62069462..58505a9df4d 100644 --- a/spec/javascripts/vue_shared/components/panel_resizer_spec.js +++ b/spec/javascripts/vue_shared/components/panel_resizer_spec.js @@ -53,6 +53,7 @@ describe('Panel Resizer component', () => { triggerEvent('mousedown', vm.$el); triggerEvent('mousemove', document); triggerEvent('mouseup', document); + expect(vm.$emit.calls.allArgs()).toEqual([['resize-start', 100], ['update:size', 100], ['resize-end', 100]]); expect(vm.size).toBe(100); }); diff --git a/spec/javascripts/vue_shared/components/pikaday_spec.js b/spec/javascripts/vue_shared/components/pikaday_spec.js index b349e2a2a81..61f05e7a230 100644 --- a/spec/javascripts/vue_shared/components/pikaday_spec.js +++ b/spec/javascripts/vue_shared/components/pikaday_spec.js @@ -24,6 +24,7 @@ describe('datePicker', () => { vm.$on('hidePicker', hidePicker); vm.$el.querySelector('.dropdown-menu-toggle').click(); + expect(hidePicker).toHaveBeenCalled(); }); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js b/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js index 8c296af6652..6bff1521695 100644 --- a/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js @@ -30,6 +30,7 @@ describe('collapsedCalendarIcon', () => { vm.$on('click', click); vm.$el.click(); + expect(click).toHaveBeenCalled(); }); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js b/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js index 9d60f9c758f..026a0c7ea09 100644 --- a/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js @@ -30,11 +30,13 @@ describe('collapsedGroupedDatePicker', () => { it('should emit when sidebar is toggled', () => { vm.$el.querySelector('.gutter-toggle').click(); + expect(vm.toggleSidebar).toHaveBeenCalled(); }); it('should emit when collapsed-calendar-icon is clicked', () => { vm.$el.querySelector('.sidebar-collapsed-icon').click(); + expect(vm.toggleSidebar).toHaveBeenCalled(); }); }); @@ -48,6 +50,7 @@ describe('collapsedGroupedDatePicker', () => { it('should render both collapsed-calendar-icon', () => { const icons = vm.$el.querySelectorAll('.sidebar-collapsed-icon'); + expect(icons.length).toEqual(2); expect(icons[0].innerText.trim()).toEqual('Jul 17 2016'); expect(icons[1].innerText.trim()).toEqual('Jul 17 2017'); @@ -62,6 +65,7 @@ describe('collapsedGroupedDatePicker', () => { it('should render minDate in collapsed-calendar-icon', () => { const icons = vm.$el.querySelectorAll('.sidebar-collapsed-icon'); + expect(icons.length).toEqual(1); expect(icons[0].innerText.trim()).toEqual('From Jul 17 2016'); }); @@ -75,6 +79,7 @@ describe('collapsedGroupedDatePicker', () => { it('should render maxDate in collapsed-calendar-icon', () => { const icons = vm.$el.querySelectorAll('.sidebar-collapsed-icon'); + expect(icons.length).toEqual(1); expect(icons[0].innerText.trim()).toEqual('Until Jul 17 2017'); }); @@ -83,6 +88,7 @@ describe('collapsedGroupedDatePicker', () => { describe('no dates', () => { it('should render None', () => { const icons = vm.$el.querySelectorAll('.sidebar-collapsed-icon'); + expect(icons.length).toEqual(1); expect(icons[0].innerText.trim()).toEqual('None'); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js b/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js index 8840a5a9dbf..1581f4e3eb1 100644 --- a/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js @@ -17,6 +17,7 @@ describe('sidebarDatePicker', () => { vm.$on('toggleCollapse', toggleCollapse); vm.$el.querySelector('.issuable-sidebar-header .gutter-toggle').click(); + expect(toggleCollapse).toHaveBeenCalled(); }); @@ -62,6 +63,7 @@ describe('sidebarDatePicker', () => { vm.isLoading = false; Vue.nextTick(() => { vm.$el.querySelector('.title .btn-blank').click(); + expect(vm.editing).toEqual(true); done(); }); @@ -92,6 +94,7 @@ describe('sidebarDatePicker', () => { vm.$on('saveDate', saveDate); vm.$el.querySelector('.value-content .btn-blank').click(); + expect(saveDate).toHaveBeenCalled(); }); }); @@ -111,6 +114,7 @@ describe('sidebarDatePicker', () => { vm.$on('toggleCollapse', toggleCollapse); vm.$el.querySelector('.title .gutter-toggle').click(); + expect(toggleCollapse).toHaveBeenCalled(); }); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js index e8685ab48be..c44b04009ca 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js @@ -33,6 +33,7 @@ describe('BaseComponent', () => { it('returns correct string when showCreate prop is `false`', () => { const mockConfigNonEditable = Object.assign({}, mockConfig, { showCreate: false }); const vmNonEditable = createComponent(mockConfigNonEditable); + expect(vmNonEditable.hiddenInputName).toBe('label_id[]'); vmNonEditable.$destroy(); }); @@ -46,6 +47,7 @@ describe('BaseComponent', () => { it('return `Create group label` when `isProject` prop is false', () => { const mockConfigGroup = Object.assign({}, mockConfig, { isProject: false }); const vmGroup = createComponent(mockConfigGroup); + expect(vmGroup.createLabelTitle).toBe('Create group label'); vmGroup.$destroy(); }); @@ -59,6 +61,7 @@ describe('BaseComponent', () => { it('return `Manage group labels` when `isProject` prop is false', () => { const mockConfigGroup = Object.assign({}, mockConfig, { isProject: false }); const vmGroup = createComponent(mockConfigGroup); + expect(vmGroup.manageLabelsTitle).toBe('Manage group labels'); vmGroup.$destroy(); }); @@ -70,6 +73,7 @@ describe('BaseComponent', () => { it('emits onLabelClick event with label and list of labels as params', () => { spyOn(vm, '$emit'); vm.handleClick(mockLabels[0]); + expect(vm.$emit).toHaveBeenCalledWith('onLabelClick', mockLabels[0]); }); }); @@ -78,6 +82,7 @@ describe('BaseComponent', () => { it('emits toggleCollapse event on component', () => { spyOn(vm, '$emit'); vm.handleCollapsedValueClick(); + expect(vm.$emit).toHaveBeenCalledWith('toggleCollapse'); }); }); @@ -86,6 +91,7 @@ describe('BaseComponent', () => { it('emits onDropdownClose event on component', () => { spyOn(vm, '$emit'); vm.handleDropdownHidden(); + expect(vm.$emit).toHaveBeenCalledWith('onDropdownClose'); }); }); @@ -114,6 +120,7 @@ describe('BaseComponent', () => { it('renders `.dropdown-menu` element', () => { const dropdownMenuEl = vm.$el.querySelector('.dropdown-menu'); + expect(dropdownMenuEl).not.toBeNull(); expect(dropdownMenuEl.querySelector('.dropdown-page-one')).not.toBeNull(); expect(dropdownMenuEl.querySelector('.dropdown-content')).not.toBeNull(); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js index f25c70db125..5cf6afebd7e 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js @@ -34,6 +34,7 @@ describe('DropdownButtonComponent', () => { it('returns text as `Label` when `labels` prop is empty array', () => { const mockEmptyLabels = Object.assign({}, componentConfig, { labels: [] }); const vmEmptyLabels = createComponent(mockEmptyLabels); + expect(vmEmptyLabels.dropdownToggleText).toBe('Label'); vmEmptyLabels.$destroy(); }); @@ -43,6 +44,7 @@ describe('DropdownButtonComponent', () => { labels: mockLabels.concat(mockLabels), }); const vmMoreLabels = createComponent(mockMoreLabels); + expect(vmMoreLabels.dropdownToggleText).toBe('Foo Label +1 more'); vmMoreLabels.$destroy(); }); @@ -69,12 +71,14 @@ describe('DropdownButtonComponent', () => { it('renders dropdown toggle text element', () => { const dropdownToggleTextEl = vm.$el.querySelector('.dropdown-toggle-text'); + expect(dropdownToggleTextEl).not.toBeNull(); expect(dropdownToggleTextEl.innerText.trim()).toBe('Foo Label'); }); it('renders dropdown button icon', () => { const dropdownIconEl = vm.$el.querySelector('i.fa'); + expect(dropdownIconEl).not.toBeNull(); expect(dropdownIconEl.classList.contains('fa-chevron-down')).toBe(true); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js index ce559fe0335..d729848a184 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js @@ -39,12 +39,14 @@ describe('DropdownCreateLabelComponent', () => { it('renders `Go back` button on component header', () => { const backButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-back'); + expect(backButtonEl).not.toBe(null); expect(backButtonEl.querySelector('.fa-arrow-left')).not.toBe(null); }); it('renders component header element as `Create new label` when `headerTitle` prop is not provided', () => { const headerEl = vm.$el.querySelector('.dropdown-title'); + expect(headerEl.innerText.trim()).toContain('Create new label'); }); @@ -52,12 +54,14 @@ describe('DropdownCreateLabelComponent', () => { const headerTitle = 'Create project label'; const vmWithHeaderTitle = createComponent(headerTitle); const headerEl = vmWithHeaderTitle.$el.querySelector('.dropdown-title'); + expect(headerEl.innerText.trim()).toContain(headerTitle); vmWithHeaderTitle.$destroy(); }); it('renders `Close` button on component header', () => { const closeButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close'); + expect(closeButtonEl).not.toBe(null); expect(closeButtonEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBe(null); }); @@ -69,10 +73,12 @@ describe('DropdownCreateLabelComponent', () => { it('renders suggested colors list elements', () => { const colorsListContainerEl = vm.$el.querySelector('.suggest-colors.suggest-colors-dropdown'); + expect(colorsListContainerEl).not.toBe(null); expect(colorsListContainerEl.querySelectorAll('a').length).toBe(mockSuggestedColors.length); const colorItemEl = colorsListContainerEl.querySelectorAll('a')[0]; + expect(colorItemEl.dataset.color).toBe(vm.suggestedColors[0]); expect(colorItemEl.getAttribute('style')).toBe('background-color: rgb(0, 51, 204);'); }); @@ -86,6 +92,7 @@ describe('DropdownCreateLabelComponent', () => { it('renders component action buttons', () => { const createBtnEl = vm.$el.querySelector('button.js-new-label-btn'); const cancelBtnEl = vm.$el.querySelector('button.js-cancel-label-btn'); + expect(createBtnEl).not.toBe(null); expect(createBtnEl.innerText.trim()).toBe('Create'); expect(cancelBtnEl.innerText.trim()).toBe('Cancel'); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js index debeab25bd6..e242dfbfe87 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js @@ -36,6 +36,7 @@ describe('DropdownFooterComponent', () => { describe('template', () => { it('renders link element with `Create new label` when `createLabelTitle` prop is not provided', () => { const createLabelEl = vm.$el.querySelector('.dropdown-footer-list .dropdown-toggle-page'); + expect(createLabelEl).not.toBeNull(); expect(createLabelEl.innerText.trim()).toBe('Create new label'); }); @@ -43,12 +44,14 @@ describe('DropdownFooterComponent', () => { it('renders link element with value of `createLabelTitle` prop', () => { const vmWithCreateLabelTitle = createComponent(mockConfig.labelsWebUrl, createLabelTitle); const createLabelEl = vmWithCreateLabelTitle.$el.querySelector('.dropdown-footer-list .dropdown-toggle-page'); + expect(createLabelEl.innerText.trim()).toBe(createLabelTitle); vmWithCreateLabelTitle.$destroy(); }); it('renders link element with `Manage labels` when `manageLabelsTitle` prop is not provided', () => { const manageLabelsEl = vm.$el.querySelector('.dropdown-footer-list .dropdown-external-link'); + expect(manageLabelsEl).not.toBeNull(); expect(manageLabelsEl.getAttribute('href')).toBe(vm.labelsWebUrl); expect(manageLabelsEl.innerText.trim()).toBe('Manage labels'); @@ -61,6 +64,7 @@ describe('DropdownFooterComponent', () => { manageLabelsTitle, ); const manageLabelsEl = vmWithManageLabelsTitle.$el.querySelector('.dropdown-footer-list .dropdown-external-link'); + expect(manageLabelsEl.innerText.trim()).toBe(manageLabelsTitle); vmWithManageLabelsTitle.$destroy(); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js index cdf234bb0c4..e8fcf51135c 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js @@ -24,11 +24,13 @@ describe('DropdownHeaderComponent', () => { describe('template', () => { it('renders header text element', () => { const headerEl = vm.$el.querySelector('.dropdown-title span'); + expect(headerEl.innerText.trim()).toBe('Assign labels'); }); it('renders `Close` button element', () => { const closeBtnEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close'); + expect(closeBtnEl).not.toBeNull(); expect(closeBtnEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBeNull(); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js index 57608d957e7..deef7dc5eeb 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js @@ -24,6 +24,7 @@ describe('DropdownSearchInputComponent', () => { 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'); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js index 7c3d2711f65..6c84d2e167c 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js @@ -35,6 +35,7 @@ describe('DropdownTitleComponent', () => { it('renders `Edit` button element', () => { const editBtnEl = vm.$el.querySelector('button.edit-link.js-sidebar-dropdown-toggle'); + expect(editBtnEl).not.toBeNull(); expect(editBtnEl.innerText.trim()).toBe('Edit'); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js index da74595bcdc..9a691116cf8 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js @@ -29,12 +29,14 @@ describe('DropdownValueCollapsedComponent', () => { describe('labelsList', () => { it('returns empty text when `labels` prop is empty array', () => { const vmEmptyLabels = createComponent([]); + expect(vmEmptyLabels.labelsList).toBe(''); vmEmptyLabels.$destroy(); }); it('returns labels names separated by coma when `labels` prop has more than one item', () => { const vmMoreLabels = createComponent(mockLabels.concat(mockLabels)); + expect(vmMoreLabels.labelsList).toBe('Foo Label, Foo Label'); vmMoreLabels.$destroy(); }); @@ -46,6 +48,7 @@ describe('DropdownValueCollapsedComponent', () => { } const vmMoreLabels = createComponent(mockMoreLabels); + expect(vmMoreLabels.labelsList).toBe('Foo Label, Foo Label, Foo Label, Foo Label, Foo Label, and 2 more'); vmMoreLabels.$destroy(); }); @@ -61,6 +64,7 @@ describe('DropdownValueCollapsedComponent', () => { it('emits onValueClick event on component', () => { spyOn(vm, '$emit'); vm.handleClick(); + expect(vm.$emit).toHaveBeenCalledWith('onValueClick'); }); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js index 370a296bd8f..bef7143da42 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js @@ -33,6 +33,7 @@ describe('DropdownValueComponent', () => { describe('isEmpty', () => { it('returns true if `labels` prop is empty', () => { const vmEmptyLabels = createComponent([]); + expect(vmEmptyLabels.isEmpty).toBe(true); vmEmptyLabels.$destroy(); }); @@ -73,6 +74,7 @@ describe('DropdownValueComponent', () => { it('render slot content inside component when `labels` prop is empty', () => { const vmEmptyLabels = createComponent([]); + expect(vmEmptyLabels.$el.querySelector('.text-secondary').innerText.trim()).toBe(mockConfig.emptyValueText); vmEmptyLabels.$destroy(); }); @@ -83,6 +85,7 @@ describe('DropdownValueComponent', () => { it('renders label element with tooltip and styles based on label details', () => { const labelEl = vm.$el.querySelector('a span.badge.color-label'); + expect(labelEl).not.toBeNull(); expect(labelEl.dataset.placement).toBe('bottom'); expect(labelEl.dataset.container).toBe('body'); diff --git a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js index f1fe2e996fc..568bc502119 100644 --- a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js +++ b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js @@ -72,6 +72,7 @@ describe('StackedProgressBarComponent', () => { 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(); }); diff --git a/spec/javascripts/vue_shared/components/table_pagination_spec.js b/spec/javascripts/vue_shared/components/table_pagination_spec.js index d193667210b..8dfcfb82ba4 100644 --- a/spec/javascripts/vue_shared/components/table_pagination_spec.js +++ b/spec/javascripts/vue_shared/components/table_pagination_spec.js @@ -72,6 +72,7 @@ describe('Pagination component', () => { }); component.$el.querySelector('.js-previous-button a').click(); + expect(spy).toHaveBeenCalledWith(1); }); }); diff --git a/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js b/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js index b4fb568f1d4..1c7c88f4bda 100644 --- a/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js +++ b/spec/javascripts/vue_shared/components/time_ago_tooltip_spec.js @@ -25,6 +25,7 @@ describe('Time ago with tooltip component', () => { expect( vm.$el.getAttribute('data-original-title'), ).toEqual(formatDate('2017-05-08T14:57:39.781Z')); + expect(vm.$el.getAttribute('data-placement')).toEqual('top'); const timeago = getTimeago(); diff --git a/spec/javascripts/vue_shared/components/toggle_button_spec.js b/spec/javascripts/vue_shared/components/toggle_button_spec.js index 71952cc39e0..444ca451534 100644 --- a/spec/javascripts/vue_shared/components/toggle_button_spec.js +++ b/spec/javascripts/vue_shared/components/toggle_button_spec.js @@ -51,9 +51,11 @@ describe('Toggle Button', () => { 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'); }); diff --git a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js index 4c5c242cbb3..1b496bbabca 100644 --- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js +++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js @@ -59,6 +59,7 @@ describe('User Avatar Link Component', function () { it('should only render image tag in link', function () { const childElements = this.userAvatarLink.$el.childNodes; + expect(childElements[0].tagName).toBe('IMG'); // Vue will render the hidden component as <!----> |