1 files changed, 77 insertions, 0 deletions
diff --git a/spec/frontend/diffs/components/merge_conflict_warning_spec.js b/spec/frontend/diffs/components/merge_conflict_warning_spec.js
new file mode 100644
index 00000000000..2f303f25f66
--- /dev/null
+++ b/spec/frontend/diffs/components/merge_conflict_warning_spec.js
@@ -0,0 +1,77 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import MergeConflictWarning from '~/diffs/components/merge_conflict_warning.vue';
+import { CENTERED_LIMITED_CONTAINER_CLASSES } from '~/diffs/constants';
+
+const propsData = {
+  limited: true,
+  mergeable: true,
+  resolutionPath: 'a-path',
+};
+const limitedClasses = CENTERED_LIMITED_CONTAINER_CLASSES.split(' ');
+
+function findResolveButton(wrapper) {
+  return wrapper.find('.gl-alert-actions a.gl-button:first-child');
+}
+function findLocalMergeButton(wrapper) {
+  return wrapper.find('.gl-alert-actions button.gl-button:last-child');
+}
+
+describe('MergeConflictWarning', () => {
+  let wrapper;
+
+  const createComponent = (props = {}, { full } = { full: false }) => {
+    const mounter = full ? mount : shallowMount;
+
+    wrapper = mounter(MergeConflictWarning, {
+      propsData: { ...propsData, ...props },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it.each`
+    limited  | containerClasses
+    ${true}  | ${limitedClasses}
+    ${false} | ${[]}
+  `(
+    'has the correct container classes when limited is $limited',
+    ({ limited, containerClasses }) => {
+      createComponent({ limited });
+
+      expect(wrapper.classes()).toEqual(containerClasses);
+    },
+  );
+
+  it.each`
+    present  | resolutionPath
+    ${false} | ${''}
+    ${true}  | ${'some-path'}
+  `(
+    'toggles the resolve conflicts button based on the provided resolutionPath "$resolutionPath"',
+    ({ present, resolutionPath }) => {
+      createComponent({ resolutionPath }, { full: true });
+      const resolveButton = findResolveButton(wrapper);
+
+      expect(resolveButton.exists()).toBe(present);
+      if (present) {
+        expect(resolveButton.attributes('href')).toBe(resolutionPath);
+      }
+    },
+  );
+
+  it.each`
+    present  | mergeable
+    ${false} | ${false}
+    ${true}  | ${true}
+  `(
+    'toggles the local merge button based on the provided mergeable property "$mergable"',
+    ({ present, mergeable }) => {
+      createComponent({ mergeable }, { full: true });
+      const localMerge = findLocalMergeButton(wrapper);
+
+      expect(localMerge.exists()).toBe(present);
+    },
+  );
+});