1 files changed, 61 insertions, 0 deletions
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commit_message_dropdown_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commit_message_dropdown_spec.js
new file mode 100644
index 00000000000..663fabb761c
--- /dev/null
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_commit_message_dropdown_spec.js
@@ -0,0 +1,61 @@
+import { GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import CommitMessageDropdown from '~/vue_merge_request_widget/components/states/commit_message_dropdown.vue';
+
+const commits = [
+  {
+    title: 'Commit 1',
+    short_id: '78d5b7',
+    message: 'Update test.txt',
+  },
+  {
+    title: 'Commit 2',
+    short_id: '34cbe28b',
+    message: 'Fixed test',
+  },
+  {
+    title: 'Commit 3',
+    short_id: 'fa42932a',
+    message: 'Added changelog',
+  },
+];
+
+describe('Commits message dropdown component', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(CommitMessageDropdown, {
+      propsData: {
+        commits,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findDropdownElements = () => wrapper.findAll(GlDropdownItem);
+  const findFirstDropdownElement = () => findDropdownElements().at(0);
+
+  it('should have 3 elements in dropdown list', () => {
+    expect(findDropdownElements().length).toBe(3);
+  });
+
+  it('should have correct message for the first dropdown list element', () => {
+    expect(findFirstDropdownElement().text()).toContain('78d5b7');
+    expect(findFirstDropdownElement().text()).toContain('Commit 1');
+  });
+
+  it('should emit a commit title on selecting commit', async () => {
+    findFirstDropdownElement().vm.$emit('click');
+
+    await nextTick();
+    expect(wrapper.emitted().input[0]).toEqual(['Update test.txt']);
+  });
+});