1 files changed, 56 insertions, 11 deletions

diff --git a/spec/frontend/diffs/components/diff_row_spec.js b/spec/frontend/diffs/components/diff_row_spec.js
index 0bc1bd40f06..137cc7e3f86 100644
--- a/spec/frontend/diffs/components/diff_row_spec.js
+++ b/spec/frontend/diffs/components/diff_row_spec.js
@@ -1,5 +1,6 @@
 import { getByTestId, fireEvent } from '@testing-library/dom';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import DiffRow from '~/diffs/components/diff_row.vue';
 import { mapParallel } from '~/diffs/components/diff_row_utils';
@@ -28,12 +29,12 @@ describe('DiffRow', () => {
     },
   ];
 
-  const createWrapper = ({ props, state, isLoggedIn = true }) => {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
+  const createWrapper = ({ props, state, actions, isLoggedIn = true }) => {
+    Vue.use(Vuex);
 
     const diffs = diffsModule();
     diffs.state = { ...diffs.state, ...state };
+    diffs.actions = { ...diffs.actions, ...actions };
 
     const getters = { isLoggedIn: () => isLoggedIn };
 
@@ -54,7 +55,7 @@ describe('DiffRow', () => {
       glFeatures: { dragCommentSelection: true },
     };
 
-    return shallowMount(DiffRow, { propsData, localVue, store, provide });
+    return shallowMount(DiffRow, { propsData, store, provide });
   };
 
   it('isHighlighted returns true given line.left', () => {
@@ -95,6 +96,9 @@ describe('DiffRow', () => {
     expect(wrapper.vm.isHighlighted).toBe(false);
   });
 
+  const getCommentButton = (wrapper, side) =>
+    wrapper.find(`[data-testid="${side}-comment-button"]`);
+
   describe.each`
     side
     ${'left'}
@@ -102,18 +106,59 @@ describe('DiffRow', () => {
   `('$side side', ({ side }) => {
     it(`renders empty cells if ${side} is unavailable`, () => {
       const wrapper = createWrapper({ props: { line: testLines[2], inline: false } });
-      expect(wrapper.find(`[data-testid="${side}LineNumber"]`).exists()).toBe(false);
-      expect(wrapper.find(`[data-testid="${side}EmptyCell"]`).exists()).toBe(true);
+      expect(wrapper.find(`[data-testid="${side}-line-number"]`).exists()).toBe(false);
+      expect(wrapper.find(`[data-testid="${side}-empty-cell"]`).exists()).toBe(true);
     });
 
-    it('renders comment button', () => {
-      const wrapper = createWrapper({ props: { line: testLines[3], inline: false } });
-      expect(wrapper.find(`[data-testid="${side}CommentButton"]`).exists()).toBe(true);
+    describe('comment button', () => {
+      const showCommentForm = jest.fn();
+      let line;
+
+      beforeEach(() => {
+        showCommentForm.mockReset();
+        // https://eslint.org/docs/rules/prefer-destructuring#when-not-to-use-it
+        // eslint-disable-next-line prefer-destructuring
+        line = testLines[3];
+      });
+
+      it('renders', () => {
+        const wrapper = createWrapper({ props: { line, inline: false } });
+        expect(getCommentButton(wrapper, side).exists()).toBe(true);
+      });
+
+      it('responds to click and keyboard events', async () => {
+        const wrapper = createWrapper({
+          props: { line, inline: false },
+          actions: { showCommentForm },
+        });
+        const commentButton = getCommentButton(wrapper, side);
+
+        await commentButton.trigger('click');
+        await commentButton.trigger('keydown.enter');
+        await commentButton.trigger('keydown.space');
+
+        expect(showCommentForm).toHaveBeenCalledTimes(3);
+      });
+
+      it('ignores click and keyboard events when comments are disabled', async () => {
+        line[side].commentsDisabled = true;
+        const wrapper = createWrapper({
+          props: { line, inline: false },
+          actions: { showCommentForm },
+        });
+        const commentButton = getCommentButton(wrapper, side);
+
+        await commentButton.trigger('click');
+        await commentButton.trigger('keydown.enter');
+        await commentButton.trigger('keydown.space');
+
+        expect(showCommentForm).not.toHaveBeenCalled();
+      });
     });
 
     it('renders avatars', () => {
       const wrapper = createWrapper({ props: { line: testLines[0], inline: false } });
-      expect(wrapper.find(`[data-testid="${side}Discussions"]`).exists()).toBe(true);
+      expect(wrapper.find(`[data-testid="${side}-discussions"]`).exists()).toBe(true);
     });
   });