diff options
Diffstat (limited to 'spec/frontend/merge_conflicts/components/merge_conflict_resolver_app_spec.js')
-rw-r--r-- | spec/frontend/merge_conflicts/components/merge_conflict_resolver_app_spec.js | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/spec/frontend/merge_conflicts/components/merge_conflict_resolver_app_spec.js b/spec/frontend/merge_conflicts/components/merge_conflict_resolver_app_spec.js new file mode 100644 index 00000000000..eaa3b1c5d53 --- /dev/null +++ b/spec/frontend/merge_conflicts/components/merge_conflict_resolver_app_spec.js @@ -0,0 +1,131 @@ +import { GlSprintf } from '@gitlab/ui'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import InlineConflictLines from '~/merge_conflicts/components/inline_conflict_lines.vue'; +import ParallelConflictLines from '~/merge_conflicts/components/parallel_conflict_lines.vue'; +import component from '~/merge_conflicts/merge_conflict_resolver_app.vue'; +import { createStore } from '~/merge_conflicts/store'; +import { decorateFiles } from '~/merge_conflicts/utils'; +import { conflictsMock } from '../mock_data'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('Merge Conflict Resolver App', () => { + let wrapper; + let store; + + const decoratedMockFiles = decorateFiles(conflictsMock.files); + + const mountComponent = () => { + wrapper = shallowMount(component, { + store, + stubs: { GlSprintf }, + provide() { + return { + mergeRequestPath: 'foo', + sourceBranchPath: 'foo', + resolveConflictsPath: 'bar', + }; + }, + }); + }; + + beforeEach(() => { + store = createStore(); + store.commit('SET_LOADING_STATE', false); + store.dispatch('setConflictsData', conflictsMock); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + const findConflictsCount = () => wrapper.find('[data-testid="conflicts-count"]'); + const findFiles = () => wrapper.findAll('[data-testid="files"]'); + const findFileHeader = (w = wrapper) => w.find('[data-testid="file-name"]'); + const findFileInteractiveButton = (w = wrapper) => w.find('[data-testid="interactive-button"]'); + const findFileInlineButton = (w = wrapper) => w.find('[data-testid="inline-button"]'); + const findSideBySideButton = () => wrapper.find('[data-testid="side-by-side"]'); + const findInlineConflictLines = (w = wrapper) => w.find(InlineConflictLines); + const findParallelConflictLines = (w = wrapper) => w.find(ParallelConflictLines); + const findCommitMessageTextarea = () => wrapper.find('[data-testid="commit-message"]'); + + it('shows the amount of conflicts', () => { + mountComponent(); + + const title = findConflictsCount(); + + expect(title.exists()).toBe(true); + expect(title.text().trim()).toBe('Showing 3 conflicts between test-conflicts and master'); + }); + + describe('files', () => { + it('shows one file area for each file', () => { + mountComponent(); + + expect(findFiles()).toHaveLength(conflictsMock.files.length); + }); + + it('has the appropriate file header', () => { + mountComponent(); + + const fileHeader = findFileHeader(findFiles().at(0)); + + expect(fileHeader.text()).toBe(decoratedMockFiles[0].filePath); + }); + + describe('editing', () => { + it('interactive mode is the default', () => { + mountComponent(); + + const interactiveButton = findFileInteractiveButton(findFiles().at(0)); + const inlineButton = findFileInlineButton(findFiles().at(0)); + + expect(interactiveButton.classes('active')).toBe(true); + expect(inlineButton.classes('active')).toBe(false); + }); + + it('clicking inline set inline as default', async () => { + mountComponent(); + + const inlineButton = findFileInlineButton(findFiles().at(0)); + expect(inlineButton.classes('active')).toBe(false); + + inlineButton.trigger('click'); + await wrapper.vm.$nextTick(); + + expect(inlineButton.classes('active')).toBe(true); + }); + + it('inline mode shows a inline-conflict-lines', () => { + mountComponent(); + + const inlineConflictLinesComponent = findInlineConflictLines(findFiles().at(0)); + + expect(inlineConflictLinesComponent.exists()).toBe(true); + expect(inlineConflictLinesComponent.props('file')).toEqual(decoratedMockFiles[0]); + }); + + it('parallel mode shows a parallel-conflict-lines', async () => { + mountComponent(); + + findSideBySideButton().trigger('click'); + await wrapper.vm.$nextTick(); + + const parallelConflictLinesComponent = findParallelConflictLines(findFiles().at(0)); + + expect(parallelConflictLinesComponent.exists()).toBe(true); + expect(parallelConflictLinesComponent.props('file')).toEqual(decoratedMockFiles[0]); + }); + }); + }); + + describe('submit form', () => { + it('contains a commit message textarea', () => { + mountComponent(); + + expect(findCommitMessageTextarea().exists()).toBe(true); + }); + }); +}); |