diff options
Diffstat (limited to 'spec/frontend/diffs/components/diff_expansion_cell_spec.js')
-rw-r--r-- | spec/frontend/diffs/components/diff_expansion_cell_spec.js | 53 |
1 files changed, 25 insertions, 28 deletions
diff --git a/spec/frontend/diffs/components/diff_expansion_cell_spec.js b/spec/frontend/diffs/components/diff_expansion_cell_spec.js index a3b4b5c3abb..62e85b31f76 100644 --- a/spec/frontend/diffs/components/diff_expansion_cell_spec.js +++ b/spec/frontend/diffs/components/diff_expansion_cell_spec.js @@ -1,6 +1,5 @@ -import Vue from 'vue'; import { cloneDeep } from 'lodash'; -import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; +import { mount } from '@vue/test-utils'; import { getByText } from '@testing-library/dom'; import { createStore } from '~/mr_notes/stores'; import DiffExpansionCell from '~/diffs/components/diff_expansion_cell.vue'; @@ -14,7 +13,7 @@ const lineSources = { [INLINE_DIFF_VIEW_TYPE]: 'highlighted_diff_lines', }; const lineHandlers = { - [INLINE_DIFF_VIEW_TYPE]: line => line, + [INLINE_DIFF_VIEW_TYPE]: (line) => line, }; function makeLoadMoreLinesPayload({ @@ -59,7 +58,6 @@ describe('DiffExpansionCell', () => { let mockFile; let mockLine; let store; - let vm; beforeEach(() => { mockFile = cloneDeep(diffFileMockData); @@ -70,7 +68,6 @@ describe('DiffExpansionCell', () => { }); const createComponent = (options = {}) => { - const cmp = Vue.extend(DiffExpansionCell); const defaults = { fileHash: mockFile.file_hash, contextLinesPath: 'contextLinesPath', @@ -78,46 +75,46 @@ describe('DiffExpansionCell', () => { isTop: false, isBottom: false, }; - const props = { ...defaults, ...options }; + const propsData = { ...defaults, ...options }; - vm = createComponentWithStore(cmp, store, props).$mount(); + return mount(DiffExpansionCell, { store, propsData }); }; - const findExpandUp = () => vm.$el.querySelector(EXPAND_UP_CLASS); - const findExpandDown = () => vm.$el.querySelector(EXPAND_DOWN_CLASS); - const findExpandAll = () => getByText(vm.$el, 'Show all unchanged lines'); + const findExpandUp = (wrapper) => wrapper.find(EXPAND_UP_CLASS); + const findExpandDown = (wrapper) => wrapper.find(EXPAND_DOWN_CLASS); + const findExpandAll = ({ element }) => getByText(element, 'Show all unchanged lines'); describe('top row', () => { it('should have "expand up" and "show all" option', () => { - createComponent({ + const wrapper = createComponent({ isTop: true, }); - expect(findExpandUp()).not.toBe(null); - expect(findExpandDown()).toBe(null); - expect(findExpandAll()).not.toBe(null); + expect(findExpandUp(wrapper).exists()).toBe(true); + expect(findExpandDown(wrapper).exists()).toBe(false); + expect(findExpandAll(wrapper)).not.toBe(null); }); }); describe('middle row', () => { it('should have "expand down", "show all", "expand up" option', () => { - createComponent(); + const wrapper = createComponent(); - expect(findExpandUp()).not.toBe(null); - expect(findExpandDown()).not.toBe(null); - expect(findExpandAll()).not.toBe(null); + expect(findExpandUp(wrapper).exists()).toBe(true); + expect(findExpandDown(wrapper).exists()).toBe(true); + expect(findExpandAll(wrapper)).not.toBe(null); }); }); describe('bottom row', () => { it('should have "expand down" and "show all" option', () => { - createComponent({ + const wrapper = createComponent({ isBottom: true, }); - expect(findExpandUp()).toBe(null); - expect(findExpandDown()).not.toBe(null); - expect(findExpandAll()).not.toBe(null); + expect(findExpandUp(wrapper).exists()).toBe(false); + expect(findExpandDown(wrapper).exists()).toBe(true); + expect(findExpandAll(wrapper)).not.toBe(null); }); }); @@ -144,9 +141,9 @@ describe('DiffExpansionCell', () => { newLineNumber, }); - createComponent(); + const wrapper = createComponent(); - findExpandAll().click(); + findExpandAll(wrapper).click(); expect(store.dispatch).toHaveBeenCalledWith( 'diffs/loadMoreLines', @@ -167,9 +164,9 @@ describe('DiffExpansionCell', () => { const oldLineNumber = mockLine.meta_data.old_pos; const newLineNumber = mockLine.meta_data.new_pos; - createComponent(); + const wrapper = createComponent(); - findExpandUp().click(); + findExpandUp(wrapper).trigger('click'); expect(store.dispatch).toHaveBeenCalledWith( 'diffs/loadMoreLines', @@ -195,9 +192,9 @@ describe('DiffExpansionCell', () => { mockLine.meta_data.old_pos = 200; mockLine.meta_data.new_pos = 200; - createComponent(); + const wrapper = createComponent(); - findExpandDown().click(); + findExpandDown(wrapper).trigger('click'); expect(store.dispatch).toHaveBeenCalledWith('diffs/loadMoreLines', { endpoint: 'contextLinesPath', |