diff options
Diffstat (limited to 'spec/frontend/diffs')
-rw-r--r-- | spec/frontend/diffs/components/compare_versions_spec.js | 9 | ||||
-rw-r--r-- | spec/frontend/diffs/components/diff_file_spec.js | 47 | ||||
-rw-r--r-- | spec/frontend/diffs/components/diff_row_spec.js | 67 | ||||
-rw-r--r-- | spec/frontend/diffs/components/inline_diff_table_row_spec.js | 13 | ||||
-rw-r--r-- | spec/frontend/diffs/mock_data/diff_metadata.js | 2 | ||||
-rw-r--r-- | spec/frontend/diffs/utils/uuids_spec.js | 92 |
6 files changed, 116 insertions, 114 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, }); }); diff --git a/spec/frontend/diffs/mock_data/diff_metadata.js b/spec/frontend/diffs/mock_data/diff_metadata.js index cfa0038c06f..ce79843b8b1 100644 --- a/spec/frontend/diffs/mock_data/diff_metadata.js +++ b/spec/frontend/diffs/mock_data/diff_metadata.js @@ -3,7 +3,7 @@ export const diffMetadata = { size: 1, branch_name: 'update-changelog', source_branch_exists: true, - target_branch_name: 'master', + target_branch_name: 'main', commit: null, context_commits: null, merge_request_diff: { diff --git a/spec/frontend/diffs/utils/uuids_spec.js b/spec/frontend/diffs/utils/uuids_spec.js deleted file mode 100644 index 8d0a01e8cbd..00000000000 --- a/spec/frontend/diffs/utils/uuids_spec.js +++ /dev/null @@ -1,92 +0,0 @@ -import { uuids } from '~/diffs/utils/uuids'; - -const HEX = /[a-f0-9]/i; -const HEX_RE = HEX.source; -const UUIDV4 = new RegExp( - `${HEX_RE}{8}-${HEX_RE}{4}-4${HEX_RE}{3}-[89ab]${HEX_RE}{3}-${HEX_RE}{12}`, - 'i', -); - -describe('UUIDs Util', () => { - describe('uuids', () => { - const SEQUENCE_FOR_GITLAB_SEED = [ - 'a1826a44-316c-480e-a93d-8cdfeb36617c', - 'e049db1f-a4cf-4cba-aa60-6d95e3b547dc', - '6e3c737c-13a7-4380-b17d-601f187d7e69', - 'bee5cc7f-c486-45c0-8ad3-d1ac5402632d', - 'af248c9f-a3a6-4d4f-a311-fe151ffab25a', - ]; - const SEQUENCE_FOR_12345_SEED = [ - 'edfb51e2-e3e1-4de5-90fd-fd1d21760881', - '2f154da4-0a2d-4da9-b45e-0ffed391517e', - '91566d65-8836-4222-9875-9e1df4d0bb01', - 'f6ea6c76-7640-4d71-a736-9d3bec7a1a8e', - 'bfb85869-5fb9-4c5b-a750-5af727ac5576', - ]; - - it('returns version 4 UUIDs', () => { - expect(uuids()[0]).toMatch(UUIDV4); - }); - - it('outputs an array of UUIDs', () => { - const ids = uuids({ count: 11 }); - - expect(ids.length).toEqual(11); - expect(ids.every((id) => UUIDV4.test(id))).toEqual(true); - }); - - it.each` - seeds | uuid - ${['some', 'special', 'seed']} | ${'6fa53e51-0f70-4072-9c84-1c1eee1b9934'} - ${['magic']} | ${'fafae8cd-7083-44f3-b82d-43b30bd27486'} - ${['seeded']} | ${'e06ed291-46c5-4e42-836b-e7c772d48b49'} - ${['GitLab']} | ${'a1826a44-316c-480e-a93d-8cdfeb36617c'} - ${['JavaScript']} | ${'12dfb297-1560-4c38-9775-7178ef8472fb'} - ${[99, 169834, 2619]} | ${'3ecc8ad6-5b7c-4c9b-94a8-c7271c2fa083'} - ${[12]} | ${'2777374b-723b-469b-bd73-e586df964cfd'} - ${[9876, 'mixed!', 7654]} | ${'865212e0-4a16-4934-96f9-103cf36a6931'} - ${[123, 1234, 12345, 6]} | ${'40aa2ee6-0a11-4e67-8f09-72f5eba04244'} - ${[0]} | ${'8c7f0aac-97c4-4a2f-b716-a675d821ccc0'} - `( - 'should always output the UUID $uuid when the options.seeds argument is $seeds', - ({ uuid, seeds }) => { - expect(uuids({ seeds })[0]).toEqual(uuid); - }, - ); - - describe('unseeded UUID randomness', () => { - const nonRandom = Array(6) - .fill(0) - .map((_, i) => uuids({ seeds: [i] })[0]); - const random = uuids({ count: 6 }); - const moreRandom = uuids({ count: 6 }); - - it('is different from a seeded result', () => { - random.forEach((id, i) => { - expect(id).not.toEqual(nonRandom[i]); - }); - }); - - it('is different from other random results', () => { - random.forEach((id, i) => { - expect(id).not.toEqual(moreRandom[i]); - }); - }); - - it('never produces any duplicates', () => { - expect(new Set(random).size).toEqual(random.length); - }); - }); - - it.each` - seed | sequence - ${'GitLab'} | ${SEQUENCE_FOR_GITLAB_SEED} - ${12345} | ${SEQUENCE_FOR_12345_SEED} - `( - 'should output the same sequence of UUIDs for the given seed "$seed"', - ({ seed, sequence }) => { - expect(uuids({ seeds: [seed], count: 5 })).toEqual(sequence); - }, - ); - }); -}); |