diff options
Diffstat (limited to 'spec/frontend/diffs/components/diff_row_spec.js')
-rw-r--r-- | spec/frontend/diffs/components/diff_row_spec.js | 67 |
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); }); }); |