From f61bb2a16a514b71bf33aabbbb999d6732016a24 Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Tue, 20 Apr 2021 14:36:54 +0000 Subject: Add latest changes from gitlab-org/gitlab@13-11-stable-ee --- .../diffs/diffs_interopability_spec.js | 161 +++++++++++++++++++++ 1 file changed, 161 insertions(+) create mode 100644 spec/frontend_integration/diffs/diffs_interopability_spec.js (limited to 'spec/frontend_integration/diffs/diffs_interopability_spec.js') diff --git a/spec/frontend_integration/diffs/diffs_interopability_spec.js b/spec/frontend_integration/diffs/diffs_interopability_spec.js new file mode 100644 index 00000000000..cb7659e16d3 --- /dev/null +++ b/spec/frontend_integration/diffs/diffs_interopability_spec.js @@ -0,0 +1,161 @@ +import { waitFor } from '@testing-library/dom'; +import { TEST_HOST } from 'helpers/test_constants'; +import initDiffsApp from '~/diffs'; +import { createStore } from '~/mr_notes/stores'; +import { + getDiffCodePart, + getLineNumberFromCodeElement, + getCodeElementFromLineNumber, +} from './diffs_interopability_api'; + +jest.mock('~/vue_shared/mixins/gl_feature_flags_mixin', () => () => ({ + inject: { + glFeatures: { + from: 'window.gon.features', + default: () => global.window.gon?.features, + }, + }, +})); + +const TEST_PROJECT_PATH = 'gitlab-org/gitlab-test'; +const TEST_BASE_URL = `/${TEST_PROJECT_PATH}/-/merge_requests/1/`; +const TEST_DIFF_FILE = 'files/js/commit.coffee'; +const EXPECT_INLINE = [ + ['head', 1], + ['head', 2], + ['head', 3], + ['base', 4], + ['head', 4], + null, + ['base', 6], + ['head', 6], + null, +]; +const EXPECT_PARALLEL_LEFT_SIDE = [ + ['base', 1], + ['base', 2], + ['base', 3], + ['base', 4], + null, + ['base', 6], + null, +]; +const EXPECT_PARALLEL_RIGHT_SIDE = [ + ['head', 1], + ['head', 2], + ['head', 3], + ['head', 4], + null, + ['head', 6], + null, +]; + +const startDiffsApp = () => { + const el = document.createElement('div'); + el.id = 'js-diffs-app'; + document.body.appendChild(el); + Object.assign(el.dataset, { + endpoint: TEST_BASE_URL, + endpointMetadata: `${TEST_BASE_URL}diffs_metadata.json`, + endpointBatch: `${TEST_BASE_URL}diffs_batch.json`, + projectPath: TEST_PROJECT_PATH, + helpPagePath: '/help', + currentUserData: 'null', + changesEmptyStateIllustration: '', + isFluidLayout: 'false', + dismissEndpoint: '', + showSuggestPopover: 'false', + showWhitespaceDefault: 'true', + viewDiffsFileByFile: 'false', + defaultSuggestionCommitMessage: 'Lorem ipsum', + }); + + const store = createStore(); + + const vm = initDiffsApp(store); + + store.dispatch('setActiveTab', 'diffs'); + + return vm; +}; + +describe('diffs third party interoperability', () => { + let vm; + + afterEach(() => { + vm.$destroy(); + document.body.innerHTML = ''; + }); + + const tryOrErrorMessage = (fn) => (...args) => { + try { + return fn(...args); + } catch (e) { + return e.message; + } + }; + + const findDiffFile = () => document.querySelector(`.diff-file[data-path="${TEST_DIFF_FILE}"]`); + const hasLines = (sel = 'tr.line_holder') => findDiffFile().querySelectorAll(sel).length > 0; + const findLineElements = (sel = 'tr.line_holder') => + Array.from(findDiffFile().querySelectorAll(sel)); + + const findCodeElements = (lines, sel = 'td.line_content') => { + return lines.map((x) => x.querySelector(`${sel} span.line`)); + }; + + const getCodeElementsInteropModel = (codeElements) => + codeElements.map( + (x) => + x && [ + tryOrErrorMessage(getDiffCodePart)(x), + tryOrErrorMessage(getLineNumberFromCodeElement)(x), + ], + ); + + describe.each` + desc | unifiedDiffComponents | view | rowSelector | codeSelector | expectation + ${'inline view'} | ${false} | ${'inline'} | ${'tr.line_holder'} | ${'td.line_content'} | ${EXPECT_INLINE} + ${'parallel view left side'} | ${false} | ${'parallel'} | ${'tr.line_holder'} | ${'td.line_content.left-side'} | ${EXPECT_PARALLEL_LEFT_SIDE} + ${'parallel view right side'} | ${false} | ${'parallel'} | ${'tr.line_holder'} | ${'td.line_content.right-side'} | ${EXPECT_PARALLEL_RIGHT_SIDE} + ${'inline view'} | ${true} | ${'inline'} | ${'.diff-tr.line_holder'} | ${'.diff-td.line_content'} | ${EXPECT_INLINE} + ${'parallel view left side'} | ${true} | ${'parallel'} | ${'.diff-tr.line_holder'} | ${'.diff-td.line_content.left-side'} | ${EXPECT_PARALLEL_LEFT_SIDE} + ${'parallel view right side'} | ${true} | ${'parallel'} | ${'.diff-tr.line_holder'} | ${'.diff-td.line_content.right-side'} | ${EXPECT_PARALLEL_RIGHT_SIDE} + `( + '$desc (unifiedDiffComponents=$unifiedDiffComponents)', + ({ unifiedDiffComponents, view, rowSelector, codeSelector, expectation }) => { + beforeEach(async () => { + global.jsdom.reconfigure({ + url: `${TEST_HOST}/${TEST_BASE_URL}/diffs?view=${view}`, + }); + window.gon.features = { unifiedDiffComponents }; + + vm = startDiffsApp(); + + await waitFor(() => expect(hasLines(rowSelector)).toBe(true)); + }); + + it('should match diff model', () => { + const lines = findLineElements(rowSelector); + const codes = findCodeElements(lines, codeSelector); + + expect(getCodeElementsInteropModel(codes)).toEqual(expectation); + }); + + it.each` + lineNumber | part | expectedText + ${4} | ${'base'} | ${'new CommitFile(this)'} + ${4} | ${'head'} | ${'new CommitFile(@)'} + ${2} | ${'base'} | ${'constructor: ->'} + ${2} | ${'head'} | ${'constructor: ->'} + `( + 'should find code element lineNumber=$lineNumber part=$part', + ({ lineNumber, part, expectedText }) => { + const codeElement = getCodeElementFromLineNumber(findDiffFile(), lineNumber, part); + + expect(codeElement.textContent.trim()).toBe(expectedText); + }, + ); + }, + ); +}); -- cgit v1.2.3