diff options
Diffstat (limited to 'spec/frontend/diffs/components')
4 files changed, 115 insertions, 21 deletions
diff --git a/spec/frontend/diffs/components/compare_versions_spec.js b/spec/frontend/diffs/components/compare_versions_spec.js index a01ec1db35c..80a51ee137a 100644 --- a/spec/frontend/diffs/components/compare_versions_spec.js +++ b/spec/frontend/diffs/components/compare_versions_spec.js @@ -19,8 +19,11 @@ describe('CompareVersions', () => { const targetBranchName = 'tmp-wine-dev'; const { commit } = getDiffWithCommit(); - const createWrapper = (props = {}, commitArgs = {}) => { - store.state.diffs.commit = { ...store.state.diffs.commit, ...commitArgs }; + const createWrapper = (props = {}, commitArgs = {}, createCommit = true) => { + if (createCommit) { + store.state.diffs.commit = { ...store.state.diffs.commit, ...commitArgs }; + } + wrapper = mount(CompareVersionsComponent, { localVue, store, @@ -59,7 +62,7 @@ describe('CompareVersions', () => { describe('template', () => { beforeEach(() => { - createWrapper(); + createWrapper({}, {}, false); }); it('should render Tree List toggle button with correct attribute values', () => { diff --git a/spec/frontend/diffs/components/diff_file_spec.js b/spec/frontend/diffs/components/diff_file_spec.js index 9c3c3e82ad5..1e8ad9344f2 100644 --- a/spec/frontend/diffs/components/diff_file_spec.js +++ b/spec/frontend/diffs/components/diff_file_spec.js @@ -1,5 +1,6 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import MockAdapter from 'axios-mock-adapter'; +import { nextTick } from 'vue'; import Vuex from 'vuex'; import DiffContentComponent from '~/diffs/components/diff_content.vue'; @@ -16,11 +17,14 @@ import createDiffsStore from '~/diffs/store/modules'; import { diffViewerModes, diffViewerErrors } from '~/ide/constants'; import axios from '~/lib/utils/axios_utils'; +import { scrollToElement } from '~/lib/utils/common_utils'; import httpStatus from '~/lib/utils/http_status'; import createNotesStore from '~/notes/stores/modules'; import diffFileMockDataReadable from '../mock_data/diff_file'; import diffFileMockDataUnreadable from '../mock_data/diff_file_unreadable'; +jest.mock('~/lib/utils/common_utils'); + function changeViewer(store, index, { automaticallyCollapsed, manuallyCollapsed, name }) { const file = store.state.diffs.diffFiles[index]; const newViewer = { @@ -355,6 +359,49 @@ describe('DiffFile', () => { }); }); + describe('scoll-to-top of file after collapse', () => { + beforeEach(() => { + jest.spyOn(wrapper.vm.$store, 'dispatch').mockImplementation(() => {}); + }); + + it("scrolls to the top when the file is open, the users initiates the collapse, and there's a content block to scroll to", async () => { + makeFileOpenByDefault(store); + await nextTick(); + + toggleFile(wrapper); + + expect(scrollToElement).toHaveBeenCalled(); + }); + + it('does not scroll when the content block is missing', async () => { + makeFileOpenByDefault(store); + await nextTick(); + findDiffContentArea(wrapper).element.remove(); + + toggleFile(wrapper); + + expect(scrollToElement).not.toHaveBeenCalled(); + }); + + it("does not scroll if the user doesn't initiate the file collapse", async () => { + makeFileOpenByDefault(store); + await nextTick(); + + wrapper.vm.handleToggle(); + + expect(scrollToElement).not.toHaveBeenCalled(); + }); + + it('does not scroll if the file is already collapsed', async () => { + makeFileManuallyCollapsed(store); + await nextTick(); + + toggleFile(wrapper); + + expect(scrollToElement).not.toHaveBeenCalled(); + }); + }); + describe('fetch collapsed diff', () => { const prepFile = async (inlineLines, parallelLines, readableText) => { forceHasDiff({ 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); }); }); diff --git a/spec/frontend/diffs/components/inline_diff_table_row_spec.js b/spec/frontend/diffs/components/inline_diff_table_row_spec.js index 66b63a7a1d0..9c3e00cd6cf 100644 --- a/spec/frontend/diffs/components/inline_diff_table_row_spec.js +++ b/spec/frontend/diffs/components/inline_diff_table_row_spec.js @@ -216,14 +216,14 @@ describe('InlineDiffTableRow', () => { const TEST_LINE_NUMBER = 1; describe.each` - lineProps | findLineNumber | expectedHref | expectedClickArg | expectedQaSelector - ${{ line_code: TEST_LINE_CODE, old_line: TEST_LINE_NUMBER }} | ${findLineNumberOld} | ${`#${TEST_LINE_CODE}`} | ${TEST_LINE_CODE} | ${undefined} - ${{ line_code: undefined, old_line: TEST_LINE_NUMBER }} | ${findLineNumberOld} | ${'#'} | ${undefined} | ${undefined} - ${{ line_code: undefined, left: { line_code: TEST_LINE_CODE }, old_line: TEST_LINE_NUMBER }} | ${findLineNumberOld} | ${'#'} | ${TEST_LINE_CODE} | ${undefined} - ${{ line_code: undefined, right: { line_code: TEST_LINE_CODE }, new_line: TEST_LINE_NUMBER }} | ${findLineNumberNew} | ${'#'} | ${TEST_LINE_CODE} | ${'new_diff_line_link'} + lineProps | findLineNumber | expectedHref | expectedClickArg + ${{ line_code: TEST_LINE_CODE, old_line: TEST_LINE_NUMBER }} | ${findLineNumberOld} | ${`#${TEST_LINE_CODE}`} | ${TEST_LINE_CODE} + ${{ line_code: undefined, old_line: TEST_LINE_NUMBER }} | ${findLineNumberOld} | ${'#'} | ${undefined} + ${{ line_code: undefined, left: { line_code: TEST_LINE_CODE }, old_line: TEST_LINE_NUMBER }} | ${findLineNumberOld} | ${'#'} | ${TEST_LINE_CODE} + ${{ line_code: undefined, right: { line_code: TEST_LINE_CODE }, new_line: TEST_LINE_NUMBER }} | ${findLineNumberNew} | ${'#'} | ${TEST_LINE_CODE} `( 'with line ($lineProps)', - ({ lineProps, findLineNumber, expectedHref, expectedClickArg, expectedQaSelector }) => { + ({ lineProps, findLineNumber, expectedHref, expectedClickArg }) => { beforeEach(() => { jest.spyOn(store, 'dispatch').mockImplementation(); createComponent({ @@ -236,7 +236,6 @@ describe('InlineDiffTableRow', () => { expect(findLineNumber().attributes()).toEqual({ href: expectedHref, 'data-linenumber': TEST_LINE_NUMBER.toString(), - 'data-qa-selector': expectedQaSelector, }); }); |