1 files changed, 42 insertions, 0 deletions
diff --git a/spec/frontend/projects/commit/components/commit_comments_button_spec.js b/spec/frontend/projects/commit/components/commit_comments_button_spec.js
new file mode 100644
index 00000000000..873270c5be1
--- /dev/null
+++ b/spec/frontend/projects/commit/components/commit_comments_button_spec.js
@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import CommitCommentsButton from '~/projects/commit/components/commit_comments_button.vue';
+
+describe('CommitCommentsButton', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(CommitCommentsButton, {
+        propsData: {
+          commentsCount: 1,
+          ...props,
+        },
+      }),
+    );
+  };
+
+  const tooltip = () => wrapper.findByTestId('comment-button-wrapper');
+
+  describe('Comment Button', () => {
+    it('has proper tooltip and button attributes for 1 comment', () => {
+      createComponent();
+
+      expect(tooltip().attributes('title')).toBe('1 comment on this commit');
+      expect(tooltip().text()).toBe('1');
+    });
+
+    it('has proper tooltip and button attributes for multiple comments', () => {
+      createComponent({ commentsCount: 2 });
+
+      expect(tooltip().attributes('title')).toBe('2 comments on this commit');
+      expect(tooltip().text()).toBe('2');
+    });
+
+    it('does not show when there are no comments', () => {
+      createComponent({ commentsCount: 0 });
+
+      expect(tooltip().exists()).toBe(false);
+    });
+  });
+});