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);
+    });
+  });
+});