diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-01-14 21:10:59 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-01-14 21:10:59 +0300 |
commit | ea3306a15e945e694afba62dc93b17500ffaec7f (patch) | |
tree | aa444f7fe503e5650bfdb6500ed428b4619ff37b /spec/frontend | |
parent | 8106ac487c3b52471e2ca894c65c13162c2fb1a8 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
25 files changed, 598 insertions, 304 deletions
diff --git a/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap b/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap index 6f28573c808..ee4ec4636ea 100644 --- a/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap +++ b/spec/frontend/clusters/components/__snapshots__/remove_cluster_confirmation_spec.js.snap @@ -41,109 +41,119 @@ exports[`Remove cluster confirmation modal renders splitbutton with modal includ role="menu" tabindex="-1" > - <!----> - - <li - class="gl-new-dropdown-item" - role="presentation" + <div + class="gl-new-dropdown-inner" > - <button - class="dropdown-item" - role="menuitem" - type="button" + <!----> + + <div + class="gl-new-dropdown-contents" > - <svg - aria-hidden="true" - class="gl-icon s16 gl-new-dropdown-item-check-icon" - data-testid="mobile-issue-close-icon" - > - <use - href="#mobile-issue-close" - /> - </svg> - - <!----> - - <!----> - - <div - class="gl-new-dropdown-item-text-wrapper" + <li + class="gl-new-dropdown-item" + role="presentation" > - <p - class="gl-new-dropdown-item-text-primary" + <button + class="dropdown-item" + role="menuitem" + type="button" > - <strong> - Remove integration and resources - </strong> + <svg + aria-hidden="true" + class="gl-icon s16 gl-new-dropdown-item-check-icon" + data-testid="mobile-issue-close-icon" + > + <use + href="#mobile-issue-close" + /> + </svg> + + <!----> + + <!----> - <div> - Deletes all GitLab resources attached to this cluster during removal + <div + class="gl-new-dropdown-item-text-wrapper" + > + <p + class="gl-new-dropdown-item-text-primary" + > + <strong> + Remove integration and resources + </strong> + + <div> + Deletes all GitLab resources attached to this cluster during removal + </div> + </p> + + <!----> </div> - </p> - - <!----> - </div> + + <!----> + </button> + </li> - <!----> - </button> - </li> - - <li - class="gl-new-dropdown-divider" - role="presentation" - > - <hr - aria-orientation="horizontal" - class="dropdown-divider" - role="separator" - /> - </li> - <li - class="gl-new-dropdown-item" - role="presentation" - > - <button - class="dropdown-item" - role="menuitem" - type="button" - > - <svg - aria-hidden="true" - class="gl-icon s16 gl-new-dropdown-item-check-icon gl-visibility-hidden" - data-testid="mobile-issue-close-icon" + <li + class="gl-new-dropdown-divider" + role="presentation" > - <use - href="#mobile-issue-close" + <hr + aria-orientation="horizontal" + class="dropdown-divider" + role="separator" /> - </svg> - - <!----> - - <!----> - - <div - class="gl-new-dropdown-item-text-wrapper" + </li> + <li + class="gl-new-dropdown-item" + role="presentation" > - <p - class="gl-new-dropdown-item-text-primary" + <button + class="dropdown-item" + role="menuitem" + type="button" > - <strong> - Remove integration - </strong> + <svg + aria-hidden="true" + class="gl-icon s16 gl-new-dropdown-item-check-icon gl-visibility-hidden" + data-testid="mobile-issue-close-icon" + > + <use + href="#mobile-issue-close" + /> + </svg> + + <!----> + + <!----> - <div> - Removes cluster from project but keeps associated resources + <div + class="gl-new-dropdown-item-text-wrapper" + > + <p + class="gl-new-dropdown-item-text-primary" + > + <strong> + Remove integration + </strong> + + <div> + Removes cluster from project but keeps associated resources + </div> + </p> + + <!----> </div> - </p> - - <!----> - </div> + + <!----> + </button> + </li> <!----> - </button> - </li> - - <!----> + </div> + + <!----> + </div> </ul> </div> diff --git a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap b/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap index 8c6b446794f..63afc3f000d 100644 --- a/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap +++ b/spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap @@ -4,6 +4,7 @@ exports[`Design management design version dropdown component renders design vers <gl-dropdown-stub category="primary" headertext="" + hideheaderborder="true" issueiid="" projectpath="" size="small" @@ -44,6 +45,7 @@ exports[`Design management design version dropdown component renders design vers <gl-dropdown-stub category="primary" headertext="" + hideheaderborder="true" issueiid="" projectpath="" size="small" diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js index 0d9d1ad1293..7fbeb33dd93 100644 --- a/spec/frontend/diffs/components/app_spec.js +++ b/spec/frontend/diffs/components/app_spec.js @@ -282,14 +282,10 @@ describe('diffs/components/app', () => { let moveSpy; let jumpSpy; - function setup(componentProps, featureFlags) { - createComponent( - componentProps, - ({ state }) => { - state.diffs.commit = { id: 'SHA123' }; - }, - { glFeatures: featureFlags }, - ); + function setup(componentProps) { + createComponent(componentProps, ({ state }) => { + state.diffs.commit = { id: 'SHA123' }; + }); moveSpy = jest.spyOn(wrapper.vm, 'moveToNeighboringCommit').mockImplementation(() => {}); jumpSpy = jest.spyOn(wrapper.vm, 'jumpToFile').mockImplementation(() => {}); @@ -298,17 +294,17 @@ describe('diffs/components/app', () => { describe('visible app', () => { it.each` - key | name | spy | args | featureFlags - ${'['} | ${'jumpToFile'} | ${0} | ${[-1]} | ${{}} - ${'k'} | ${'jumpToFile'} | ${0} | ${[-1]} | ${{}} - ${']'} | ${'jumpToFile'} | ${0} | ${[+1]} | ${{}} - ${'j'} | ${'jumpToFile'} | ${0} | ${[+1]} | ${{}} - ${'x'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'previous' }]} | ${{}} - ${'c'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'next' }]} | ${{}} + key | name | spy | args + ${'['} | ${'jumpToFile'} | ${0} | ${[-1]} + ${'k'} | ${'jumpToFile'} | ${0} | ${[-1]} + ${']'} | ${'jumpToFile'} | ${0} | ${[+1]} + ${'j'} | ${'jumpToFile'} | ${0} | ${[+1]} + ${'x'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'previous' }]} + ${'c'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'next' }]} `( 'calls `$name()` with correct parameters whenever the "$key" key is pressed', - async ({ key, spy, args, featureFlags }) => { - setup({ shouldShow: true }, featureFlags); + async ({ key, spy, args }) => { + setup({ shouldShow: true }); await nextTick(); expect(spies[spy]).not.toHaveBeenCalled(); diff --git a/spec/frontend/diffs/components/commit_item_spec.js b/spec/frontend/diffs/components/commit_item_spec.js index ad515c17e61..f588f65dafd 100644 --- a/spec/frontend/diffs/components/commit_item_spec.js +++ b/spec/frontend/diffs/components/commit_item_spec.js @@ -37,15 +37,12 @@ describe('diffs/components/commit_item', () => { const getPrevCommitNavElement = () => getCommitNavButtonsElement().find('.btn-group > *:first-child'); - const mountComponent = (propsData, featureFlags = {}) => { + const mountComponent = (propsData) => { wrapper = mount(Component, { propsData: { commit, ...propsData, }, - provide: { - glFeatures: featureFlags, - }, stubs: { CommitPipelineStatus: true, }, diff --git a/spec/frontend/diffs/components/diff_line_note_form_spec.js b/spec/frontend/diffs/components/diff_line_note_form_spec.js index 42815e63ef7..faa68159c58 100644 --- a/spec/frontend/diffs/components/diff_line_note_form_spec.js +++ b/spec/frontend/diffs/components/diff_line_note_form_spec.js @@ -11,14 +11,16 @@ describe('DiffLineNoteForm', () => { let diffLines; const getDiffFileMock = () => ({ ...diffFileMockData }); - beforeEach(() => { + const createComponent = (args = {}) => { diffFile = getDiffFileMock(); diffLines = diffFile.highlighted_diff_lines; const store = createStore(); store.state.notes.userData.id = 1; store.state.notes.noteableData = noteableDataMock; - wrapper = shallowMount(DiffLineNoteForm, { + store.replaceState({ ...store.state, ...args.state }); + + return shallowMount(DiffLineNoteForm, { store, propsData: { diffFileHash: diffFile.file_hash, @@ -27,9 +29,13 @@ describe('DiffLineNoteForm', () => { noteTargetLine: diffLines[0], }, }); - }); + }; describe('methods', () => { + beforeEach(() => { + wrapper = createComponent(); + }); + describe('handleCancelCommentForm', () => { it('should ask for confirmation when shouldConfirm and isDirty passed as truthy', () => { jest.spyOn(window, 'confirm').mockReturnValue(false); @@ -114,14 +120,39 @@ describe('DiffLineNoteForm', () => { describe('mounted', () => { it('should init autosave', () => { const key = 'autosave/Note/Issue/98//DiffNote//1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_1'; + wrapper = createComponent(); expect(wrapper.vm.autosave).toBeDefined(); expect(wrapper.vm.autosave.key).toEqual(key); }); + + it('should set selectedCommentPosition', () => { + wrapper = createComponent(); + let startLineCode = wrapper.vm.commentLineStart.line_code; + let lineCode = wrapper.vm.line.line_code; + + expect(startLineCode).toEqual(lineCode); + wrapper.destroy(); + + const state = { + notes: { + selectedCommentPosition: { + start: { + line_code: 'test', + }, + }, + }, + }; + wrapper = createComponent({ state }); + startLineCode = wrapper.vm.commentLineStart.line_code; + lineCode = state.notes.selectedCommentPosition.start.line_code; + expect(startLineCode).toEqual(lineCode); + }); }); describe('template', () => { it('should have note form', () => { + wrapper = createComponent(); expect(wrapper.find(NoteForm).exists()).toBe(true); }); }); diff --git a/spec/frontend/diffs/components/diff_row_spec.js b/spec/frontend/diffs/components/diff_row_spec.js index 0ec075c8ad8..f0d335b88e5 100644 --- a/spec/frontend/diffs/components/diff_row_spec.js +++ b/spec/frontend/diffs/components/diff_row_spec.js @@ -1,4 +1,5 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { getByTestId, fireEvent } from '@testing-library/dom'; import Vuex from 'vuex'; import diffsModule from '~/diffs/store/modules'; import DiffRow from '~/diffs/components/diff_row.vue'; @@ -42,16 +43,16 @@ describe('DiffRow', () => { fileHash: 'abc', filePath: 'abc', line: {}, + index: 0, ...props, }; - return shallowMount(DiffRow, { propsData, localVue, store }); - }; - it('isHighlighted returns true if isCommented is true', () => { - const props = { isCommented: true }; - const wrapper = createWrapper({ props }); - expect(wrapper.vm.isHighlighted).toBe(true); - }); + const provide = { + glFeatures: { dragCommentSelection: true }, + }; + + return shallowMount(DiffRow, { propsData, localVue, store, provide }); + }; it('isHighlighted returns true given line.left', () => { const props = { @@ -124,4 +125,36 @@ describe('DiffRow', () => { const lineNumber = testLines[0].right.new_line; expect(wrapper.find(`[data-linenumber="${lineNumber}"]`).exists()).toBe(true); }); + + describe('drag operations', () => { + let line; + + beforeEach(() => { + line = { ...testLines[0] }; + }); + + it.each` + side + ${'left'} + ${'right'} + `('emits `enterdragging` onDragEnter $side side', ({ side }) => { + const expectation = { ...line[side], index: 0 }; + const wrapper = createWrapper({ props: { line } }); + fireEvent.dragEnter(getByTestId(wrapper.element, `${side}-side`)); + + expect(wrapper.emitted().enterdragging).toBeTruthy(); + expect(wrapper.emitted().enterdragging[0]).toEqual([expectation]); + }); + + it.each` + side + ${'left'} + ${'right'} + `('emits `stopdragging` onDrop $side side', ({ side }) => { + const wrapper = createWrapper({ props: { line } }); + fireEvent.dragEnd(getByTestId(wrapper.element, `${side}-side`)); + + expect(wrapper.emitted().stopdragging).toBeTruthy(); + }); + }); }); diff --git a/spec/frontend/diffs/components/diff_row_utils_spec.js b/spec/frontend/diffs/components/diff_row_utils_spec.js index f397c3dc012..d70d6b609ac 100644 --- a/spec/frontend/diffs/components/diff_row_utils_spec.js +++ b/spec/frontend/diffs/components/diff_row_utils_spec.js @@ -126,14 +126,14 @@ describe('lineCode', () => { describe('classNameMapCell', () => { it.each` - line | hll | loggedIn | hovered | expectation - ${undefined} | ${true} | ${true} | ${true} | ${[]} - ${{ type: 'new' }} | ${false} | ${false} | ${false} | ${['new', { hll: false, 'is-over': false, new_line: true, old_line: false }]} - ${{ type: 'new' }} | ${true} | ${true} | ${false} | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]} - ${{ type: 'new' }} | ${true} | ${false} | ${true} | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]} - ${{ type: 'new' }} | ${true} | ${true} | ${true} | ${['new', { hll: true, 'is-over': true, new_line: true, old_line: false }]} - `('should return $expectation', ({ line, hll, loggedIn, hovered, expectation }) => { - const classes = utils.classNameMapCell(line, hll, loggedIn, hovered); + line | hll | isLoggedIn | isHover | expectation + ${undefined} | ${true} | ${true} | ${true} | ${[]} + ${{ type: 'new' }} | ${false} | ${false} | ${false} | ${['new', { hll: false, 'is-over': false, new_line: true, old_line: false }]} + ${{ type: 'new' }} | ${true} | ${true} | ${false} | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]} + ${{ type: 'new' }} | ${true} | ${false} | ${true} | ${['new', { hll: true, 'is-over': false, new_line: true, old_line: false }]} + ${{ type: 'new' }} | ${true} | ${true} | ${true} | ${['new', { hll: true, 'is-over': true, new_line: true, old_line: false }]} + `('should return $expectation', ({ line, hll, isLoggedIn, isHover, expectation }) => { + const classes = utils.classNameMapCell({ line, hll, isLoggedIn, isHover }); expect(classes).toEqual(expectation); }); }); diff --git a/spec/frontend/diffs/components/diff_view_spec.js b/spec/frontend/diffs/components/diff_view_spec.js index 9d1242e4b77..3d36ebf14a3 100644 --- a/spec/frontend/diffs/components/diff_view_spec.js +++ b/spec/frontend/diffs/components/diff_view_spec.js @@ -1,19 +1,19 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import Vue from 'vue'; +import { shallowMount } from '@vue/test-utils'; import Vuex from 'vuex'; import DiffView from '~/diffs/components/diff_view.vue'; -// import DraftNote from '~/batch_comments/components/draft_note.vue'; -// import DiffRow from '~/diffs/components/diff_row.vue'; -// import DiffCommentCell from '~/diffs/components/diff_comment_cell.vue'; -// import DiffExpansionCell from '~/diffs/components/diff_expansion_cell.vue'; describe('DiffView', () => { const DiffExpansionCell = { template: `<div/>` }; const DiffRow = { template: `<div/>` }; const DiffCommentCell = { template: `<div/>` }; const DraftNote = { template: `<div/>` }; + const showCommentForm = jest.fn(); + const setSelectedCommentPosition = jest.fn(); + const getDiffRow = (wrapper) => wrapper.findComponent(DiffRow).vm; + const createWrapper = (props) => { - const localVue = createLocalVue(); - localVue.use(Vuex); + Vue.use(Vuex); const batchComments = { getters: { @@ -26,8 +26,13 @@ describe('DiffView', () => { }, namespaced: true, }; - const diffs = { getters: { commitId: () => 'abc123' }, namespaced: true }; + const diffs = { + actions: { showCommentForm }, + getters: { commitId: () => 'abc123' }, + namespaced: true, + }; const notes = { + actions: { setSelectedCommentPosition }, state: { selectedCommentPosition: null, selectedCommentPositionHover: null }, }; @@ -41,7 +46,7 @@ describe('DiffView', () => { ...props, }; const stubs = { DiffExpansionCell, DiffRow, DiffCommentCell, DraftNote }; - return shallowMount(DiffView, { propsData, store, localVue, stubs }); + return shallowMount(DiffView, { propsData, store, stubs }); }; it('renders a match line', () => { @@ -74,4 +79,55 @@ describe('DiffView', () => { }); expect(wrapper.find(DraftNote).exists()).toBe(true); }); + + describe('drag operations', () => { + it('sets `dragStart` onStartDragging', () => { + const wrapper = createWrapper({ diffLines: [{}] }); + + wrapper.findComponent(DiffRow).vm.$emit('startdragging', { test: true }); + expect(wrapper.vm.dragStart).toEqual({ test: true }); + }); + + it('does not call `setSelectedCommentPosition` on different chunks onDragOver', () => { + const wrapper = createWrapper({ diffLines: [{}] }); + const diffRow = getDiffRow(wrapper); + + diffRow.$emit('startdragging', { chunk: 0 }); + diffRow.$emit('enterdragging', { chunk: 1 }); + + expect(setSelectedCommentPosition).not.toHaveBeenCalled(); + }); + + it.each` + start | end | expectation + ${1} | ${2} | ${{ start: { index: 1 }, end: { index: 2 } }} + ${2} | ${1} | ${{ start: { index: 1 }, end: { index: 2 } }} + ${1} | ${1} | ${{ start: { index: 1 }, end: { index: 1 } }} + `( + 'calls `setSelectedCommentPosition` with correct `updatedLineRange`', + ({ start, end, expectation }) => { + const wrapper = createWrapper({ diffLines: [{}] }); + const diffRow = getDiffRow(wrapper); + + diffRow.$emit('startdragging', { chunk: 1, index: start }); + diffRow.$emit('enterdragging', { chunk: 1, index: end }); + + const arg = setSelectedCommentPosition.mock.calls[0][1]; + + expect(arg).toMatchObject(expectation); + }, + ); + + it('sets `dragStart` to null onStopDragging', () => { + const wrapper = createWrapper({ diffLines: [{}] }); + const diffRow = getDiffRow(wrapper); + + diffRow.$emit('startdragging', { test: true }); + expect(wrapper.vm.dragStart).toEqual({ test: true }); + + diffRow.$emit('stopdragging'); + expect(wrapper.vm.dragStart).toBeNull(); + expect(showCommentForm).toHaveBeenCalled(); + }); + }); }); diff --git a/spec/frontend/diffs/store/utils_spec.js b/spec/frontend/diffs/store/utils_spec.js index 9fef48ccf42..a19e5e91677 100644 --- a/spec/frontend/diffs/store/utils_spec.js +++ b/spec/frontend/diffs/store/utils_spec.js @@ -1159,7 +1159,7 @@ describe('DiffsStoreUtils', () => { it('converts inline diff lines to parallel diff lines', () => { const file = getDiffFileMock(); - expect(utils.parallelizeDiffLines(file[INLINE_DIFF_LINES_KEY])).toEqual( + expect(utils.parallelizeDiffLines(file[INLINE_DIFF_LINES_KEY])).toMatchObject( file.parallel_diff_lines, ); }); @@ -1178,16 +1178,17 @@ describe('DiffsStoreUtils', () => { { left: null, right: { + chunk: 0, type: 'new', }, }, { - left: { type: 'conflict_marker_our' }, - right: { type: 'conflict_marker_their' }, + left: { chunk: 0, type: 'conflict_marker_our' }, + right: { chunk: 0, type: 'conflict_marker_their' }, }, { - left: { type: 'conflict_our' }, - right: { type: 'conflict_their' }, + left: { chunk: 0, type: 'conflict_our' }, + right: { chunk: 0, type: 'conflict_their' }, }, ]); }); @@ -1196,9 +1197,9 @@ describe('DiffsStoreUtils', () => { const file = getDiffFileMock(); const files = utils.parallelizeDiffLines(file.highlighted_diff_lines, true); - expect(files[5].left).toEqual(file.parallel_diff_lines[5].left); + expect(files[5].left).toMatchObject(file.parallel_diff_lines[5].left); expect(files[5].right).toBeNull(); - expect(files[6].left).toEqual(file.parallel_diff_lines[5].right); + expect(files[6].left).toMatchObject(file.parallel_diff_lines[5].right); expect(files[6].right).toBeNull(); }); }); diff --git a/spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap b/spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap index c3fd4a9bab2..82d7f691efd 100644 --- a/spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap +++ b/spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap @@ -50,6 +50,7 @@ exports[`Alert integration settings form default state should match the default category="primary" data-qa-selector="incident_templates_dropdown" headertext="" + hideheaderborder="true" id="alert-integration-settings-issue-template" size="medium" text="selecte_tmpl" diff --git a/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap b/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap index c40b7c90c72..bea27c8877d 100644 --- a/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap +++ b/spec/frontend/jira_import/components/__snapshots__/jira_import_form_spec.js.snap @@ -114,49 +114,59 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] = role="menu" tabindex="-1" > - <!----> - <div - class="gl-search-box-by-type" + class="gl-new-dropdown-inner" > - <svg - aria-hidden="true" - class="gl-search-box-by-type-search-icon gl-icon s16" - data-testid="search-icon" - > - <use - href="#search" - /> - </svg> - - <input - aria-label="Search" - class="gl-form-input gl-search-box-by-type-input form-control" - placeholder="Search" - type="text" - /> + <!----> <div - class="gl-search-box-by-type-right-icons" - > - <!----> - - <!----> - </div> - </div> - - <li - class="gl-new-dropdown-text text-secondary" - role="presentation" - > - <p - class="b-dropdown-text" + class="gl-new-dropdown-contents" > - + <div + class="gl-search-box-by-type" + > + <svg + aria-hidden="true" + class="gl-search-box-by-type-search-icon gl-icon s16" + data-testid="search-icon" + > + <use + href="#search" + /> + </svg> + + <input + aria-label="Search" + class="gl-form-input gl-search-box-by-type-input form-control" + placeholder="Search" + type="text" + /> + + <div + class="gl-search-box-by-type-right-icons" + > + <!----> + + <!----> + </div> + </div> + + <li + class="gl-new-dropdown-text text-secondary" + role="presentation" + > + <p + class="b-dropdown-text" + > + No matches found - </p> - </li> + </p> + </li> + </div> + + <!----> + </div> </ul> </div> @@ -229,49 +239,59 @@ exports[`JiraImportForm table body shows correct information in each cell 1`] = role="menu" tabindex="-1" > - <!----> - <div - class="gl-search-box-by-type" + class="gl-new-dropdown-inner" > - <svg - aria-hidden="true" - class="gl-search-box-by-type-search-icon gl-icon s16" - data-testid="search-icon" - > - <use - href="#search" - /> - </svg> - - <input - aria-label="Search" - class="gl-form-input gl-search-box-by-type-input form-control" - placeholder="Search" - type="text" - /> + <!----> <div - class="gl-search-box-by-type-right-icons" - > - <!----> - - <!----> - </div> - </div> - - <li - class="gl-new-dropdown-text text-secondary" - role="presentation" - > - <p - class="b-dropdown-text" + class="gl-new-dropdown-contents" > - + <div + class="gl-search-box-by-type" + > + <svg + aria-hidden="true" + class="gl-search-box-by-type-search-icon gl-icon s16" + data-testid="search-icon" + > + <use + href="#search" + /> + </svg> + + <input + aria-label="Search" + class="gl-form-input gl-search-box-by-type-input form-control" + placeholder="Search" + type="text" + /> + + <div + class="gl-search-box-by-type-right-icons" + > + <!----> + + <!----> + </div> + </div> + + <li + class="gl-new-dropdown-text text-secondary" + role="presentation" + > + <p + class="b-dropdown-text" + > + No matches found - </p> - </li> + </p> + </li> + </div> + + <!----> + </div> </ul> </div> diff --git a/spec/frontend/members/components/action_buttons/access_request_action_buttons_spec.js b/spec/frontend/members/components/action_buttons/access_request_action_buttons_spec.js index 9a8434a1222..30166e2d5ae 100644 --- a/spec/frontend/members/components/action_buttons/access_request_action_buttons_spec.js +++ b/spec/frontend/members/components/action_buttons/access_request_action_buttons_spec.js @@ -49,7 +49,7 @@ describe('AccessRequestActionButtons', () => { describe('when member is the current user', () => { it('sets `message` prop correctly', () => { expect(findRemoveMemberButton().props('message')).toBe( - `Are you sure you want to withdraw your access request for "${member.source.name}"`, + `Are you sure you want to withdraw your access request for "${member.source.fullName}"`, ); }); }); @@ -64,7 +64,7 @@ describe('AccessRequestActionButtons', () => { }); expect(findRemoveMemberButton().props('message')).toBe( - `Are you sure you want to deny ${member.user.name}'s request to join "${member.source.name}"`, + `Are you sure you want to deny ${member.user.name}'s request to join "${member.source.fullName}"`, ); }); }); diff --git a/spec/frontend/members/components/action_buttons/invite_action_buttons_spec.js b/spec/frontend/members/components/action_buttons/invite_action_buttons_spec.js index 887b21dc1d0..fe63f9bfaa7 100644 --- a/spec/frontend/members/components/action_buttons/invite_action_buttons_spec.js +++ b/spec/frontend/members/components/action_buttons/invite_action_buttons_spec.js @@ -39,7 +39,7 @@ describe('InviteActionButtons', () => { it('sets props correctly', () => { expect(findRemoveMemberButton().props()).toEqual({ memberId: member.id, - message: `Are you sure you want to revoke the invitation for ${member.invite.email} to join "${member.source.name}"`, + message: `Are you sure you want to revoke the invitation for ${member.invite.email} to join "${member.source.fullName}"`, title: 'Revoke invite', isAccessRequest: false, icon: 'remove', diff --git a/spec/frontend/members/components/action_buttons/user_action_buttons_spec.js b/spec/frontend/members/components/action_buttons/user_action_buttons_spec.js index b03e80a537d..f28e5040006 100644 --- a/spec/frontend/members/components/action_buttons/user_action_buttons_spec.js +++ b/spec/frontend/members/components/action_buttons/user_action_buttons_spec.js @@ -39,7 +39,7 @@ describe('UserActionButtons', () => { it('sets props correctly', () => { expect(findRemoveMemberButton().props()).toEqual({ memberId: member.id, - message: `Are you sure you want to remove ${member.user.name} from "${member.source.name}"`, + message: `Are you sure you want to remove ${member.user.name} from "${member.source.fullName}"`, title: 'Remove member', isAccessRequest: false, icon: 'remove', @@ -56,7 +56,7 @@ describe('UserActionButtons', () => { }); expect(findRemoveMemberButton().props('message')).toBe( - `Are you sure you want to remove this orphaned member from "${orphanedMember.source.name}"`, + `Are you sure you want to remove this orphaned member from "${orphanedMember.source.fullName}"`, ); }); }); diff --git a/spec/frontend/members/components/modals/leave_modal_spec.js b/spec/frontend/members/components/modals/leave_modal_spec.js index d7acf12212c..dca47d1f6af 100644 --- a/spec/frontend/members/components/modals/leave_modal_spec.js +++ b/spec/frontend/members/components/modals/leave_modal_spec.js @@ -60,11 +60,11 @@ describe('LeaveModal', () => { }); it('displays modal title', () => { - expect(getByText(`Leave "${member.source.name}"`).exists()).toBe(true); + expect(getByText(`Leave "${member.source.fullName}"`).exists()).toBe(true); }); it('displays modal body', () => { - expect(getByText(`Are you sure you want to leave "${member.source.name}"?`).exists()).toBe( + expect(getByText(`Are you sure you want to leave "${member.source.fullName}"?`).exists()).toBe( true, ); }); diff --git a/spec/frontend/members/components/table/member_source_spec.js b/spec/frontend/members/components/table/member_source_spec.js index 2580f36cd64..95547090aed 100644 --- a/spec/frontend/members/components/table/member_source_spec.js +++ b/spec/frontend/members/components/table/member_source_spec.js @@ -11,7 +11,7 @@ describe('MemberSource', () => { propsData: { memberSource: { id: 102, - name: 'Foo bar', + fullName: 'Foo bar', webUrl: 'https://gitlab.com/groups/foo-bar', }, ...propsData, diff --git a/spec/frontend/members/mock_data.js b/spec/frontend/members/mock_data.js index 5674929716d..e668f2a1998 100644 --- a/spec/frontend/members/mock_data.js +++ b/spec/frontend/members/mock_data.js @@ -7,7 +7,7 @@ export const member = { accessLevel: { integerValue: 50, stringValue: 'Owner' }, source: { id: 178, - name: 'Foo Bar', + fullName: 'Foo Bar', webUrl: 'https://gitlab.com/groups/foo-bar', }, user: { diff --git a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap index 17720aeb702..e873edaad3b 100644 --- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap +++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap @@ -37,6 +37,7 @@ exports[`Dashboard template matches the default snapshot 1`] = ` class="flex-grow-1" data-qa-selector="environments_dropdown" headertext="" + hideheaderborder="true" id="monitor-environments-dropdown" menu-class="monitor-environment-dropdown-menu" size="medium" diff --git a/spec/frontend/notes/components/multiline_comment_form_spec.js b/spec/frontend/notes/components/multiline_comment_form_spec.js new file mode 100644 index 00000000000..081fd6e10ef --- /dev/null +++ b/spec/frontend/notes/components/multiline_comment_form_spec.js @@ -0,0 +1,89 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import { mount } from '@vue/test-utils'; +import { GlFormSelect } from '@gitlab/ui'; +import MultilineCommentForm from '~/notes/components/multiline_comment_form.vue'; +import notesModule from '~/notes/stores/modules'; + +describe('MultilineCommentForm', () => { + Vue.use(Vuex); + const setSelectedCommentPosition = jest.fn(); + const testLine = { + line_code: 'test', + type: 'test', + old_line: 'test', + new_line: 'test', + }; + + const createWrapper = (props = {}, state) => { + setSelectedCommentPosition.mockReset(); + + const store = new Vuex.Store({ + modules: { notes: notesModule() }, + actions: { setSelectedCommentPosition }, + }); + if (state) store.replaceState({ ...store.state, ...state }); + + const propsData = { + line: { ...testLine }, + commentLineOptions: [{ text: '1' }], + ...props, + }; + return mount(MultilineCommentForm, { propsData, store }); + }; + + describe('created', () => { + it('sets commentLineStart to line', () => { + const line = { ...testLine }; + const wrapper = createWrapper({ line }); + + expect(wrapper.vm.commentLineStart).toEqual(line); + expect(setSelectedCommentPosition).toHaveBeenCalled(); + }); + + it('sets commentLineStart to lineRange', () => { + const lineRange = { + start: { ...testLine }, + }; + const wrapper = createWrapper({ lineRange }); + + expect(wrapper.vm.commentLineStart).toEqual(lineRange.start); + expect(setSelectedCommentPosition).toHaveBeenCalled(); + }); + + it('sets commentLineStart to selectedCommentPosition', () => { + const notes = { + selectedCommentPosition: { + start: { ...testLine }, + }, + }; + const wrapper = createWrapper({}, { notes }); + + expect(wrapper.vm.commentLineStart).toEqual(wrapper.vm.selectedCommentPosition.start); + expect(setSelectedCommentPosition).not.toHaveBeenCalled(); + }); + }); + + describe('destroyed', () => { + it('calls setSelectedCommentPosition', () => { + const wrapper = createWrapper(); + wrapper.destroy(); + + // Once during created, once during destroyed + expect(setSelectedCommentPosition).toHaveBeenCalledTimes(2); + }); + }); + + it('handles changing the start line', () => { + const line = { ...testLine }; + const wrapper = createWrapper({ line }); + const glSelect = wrapper.findComponent(GlFormSelect); + + glSelect.vm.$emit('change', { ...testLine }); + + expect(wrapper.vm.commentLineStart).toEqual(line); + expect(wrapper.emitted('input')).toBeTruthy(); + // Once during created, once during updateCommentLineStart + expect(setSelectedCommentPosition).toHaveBeenCalledTimes(2); + }); +}); diff --git a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap index 324c9788309..c4c48ea7517 100644 --- a/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap +++ b/spec/frontend/pages/projects/graphs/__snapshots__/code_coverage_spec.js.snap @@ -12,6 +12,7 @@ exports[`Code Coverage when fetching data is successful matches the snapshot 1`] <gl-dropdown-stub category="primary" headertext="" + hideheaderborder="true" size="medium" text="rspec" variant="default" diff --git a/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js b/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js index 99d0e910485..23f37073a0f 100644 --- a/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/app_legacy_spec.js @@ -1,8 +1,6 @@ import { shallowMount } from '@vue/test-utils'; -import { GlColumnChart } from '@gitlab/ui/dist/charts'; import Component from '~/projects/pipelines/charts/components/app_legacy.vue'; -import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue'; -import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue'; +import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue'; import { counts, timesChartData, @@ -38,41 +36,17 @@ describe('ProjectsPipelinesChartsApp', () => { wrapper = null; }); - describe('overall statistics', () => { - it('displays the statistics list', () => { - const list = wrapper.find(StatisticsList); - - expect(list.exists()).toBeTruthy(); - expect(list.props('counts')).toBe(counts); - }); - - it('displays the commit duration chart', () => { - const chart = wrapper.find(GlColumnChart); - - expect(chart.exists()).toBeTruthy(); - expect(chart.props('yAxisTitle')).toBe('Minutes'); - expect(chart.props('xAxisTitle')).toBe('Commit'); - expect(chart.props('bars')).toBe(wrapper.vm.timesChartTransformedData); - expect(chart.props('option')).toBe(wrapper.vm.$options.timesChartOptions); - }); - }); - describe('pipelines charts', () => { - it('displays 3 area charts', () => { - expect(wrapper.findAll(CiCdAnalyticsAreaChart).length).toBe(3); - }); - - describe('displays individual correctly', () => { - it('renders with the correct data', () => { - const charts = wrapper.findAll(CiCdAnalyticsAreaChart); + it('displays the pipeline charts', () => { + const chart = wrapper.find(PipelineCharts); - for (let i = 0; i < charts.length; i += 1) { - const chart = charts.at(i); - - expect(chart.exists()).toBeTruthy(); - expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data); - expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title); - } + expect(chart.exists()).toBe(true); + expect(chart.props()).toMatchObject({ + counts, + lastWeek: lastWeekChartData, + lastMonth: lastMonthChartData, + lastYear: lastYearChartData, + timesChart: timesChartData, }); }); }); diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js index 1313a549f02..e1f84d7bf01 100644 --- a/spec/frontend/projects/pipelines/charts/components/app_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js @@ -1,11 +1,10 @@ import { merge } from 'lodash'; import { createLocalVue, shallowMount } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; +import { GlTabs, GlTab } from '@gitlab/ui'; import createMockApollo from 'jest/helpers/mock_apollo_helper'; -import { GlColumnChart } from '@gitlab/ui/dist/charts'; import Component from '~/projects/pipelines/charts/components/app.vue'; -import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue'; -import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue'; +import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue'; import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql'; import getProjectPipelineStatistics from '~/projects/pipelines/charts/graphql/queries/get_project_pipeline_statistics.query.graphql'; import { mockPipelineCount, mockPipelineStatistics } from '../mock_data'; @@ -58,60 +57,62 @@ describe('ProjectsPipelinesChartsApp', () => { wrapper = null; }); - describe('overall statistics', () => { - it('displays the statistics list', () => { - const list = wrapper.find(StatisticsList); - - expect(list.exists()).toBe(true); - expect(list.props('counts')).toMatchObject({ - failed: 1, - success: 23, - total: 34, - successRatio: 95.83333333333334, - }); - }); - - it('displays the commit duration chart', () => { - const chart = wrapper.find(GlColumnChart); - - expect(chart.exists()).toBe(true); - expect(chart.props('yAxisTitle')).toBe('Minutes'); - expect(chart.props('xAxisTitle')).toBe('Commit'); - expect(chart.props('bars')).toBe(wrapper.vm.timesChartTransformedData); - expect(chart.props('option')).toBe(wrapper.vm.$options.timesChartOptions); - }); - }); - describe('pipelines charts', () => { - it('displays 3 area charts', () => { - expect(wrapper.findAll(CiCdAnalyticsAreaChart)).toHaveLength(3); - }); - - describe('displays individual correctly', () => { - it('renders with the correct data', () => { - const charts = wrapper.findAll(CiCdAnalyticsAreaChart); + it('displays the pipeline charts', () => { + const chart = wrapper.find(PipelineCharts); + const analytics = mockPipelineStatistics.data.project.pipelineAnalytics; - for (let i = 0; i < charts.length; i += 1) { - const chart = charts.at(i); + const { + totalPipelines: total, + successfulPipelines: success, + failedPipelines: failed, + } = mockPipelineCount.data.project; - expect(chart.exists()).toBe(true); - // TODO: Refactor this to use the mocked data instead of the vm data - // https://gitlab.com/gitlab-org/gitlab/-/issues/292085 - expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data); - expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title); - } + expect(chart.exists()).toBe(true); + expect(chart.props()).toMatchObject({ + counts: { + failed: failed.count, + success: success.count, + total: total.count, + successRatio: (success.count / (success.count + failed.count)) * 100, + }, + lastWeek: { + labels: analytics.weekPipelinesLabels, + totals: analytics.weekPipelinesTotals, + success: analytics.weekPipelinesSuccessful, + }, + lastMonth: { + labels: analytics.monthPipelinesLabels, + totals: analytics.monthPipelinesTotals, + success: analytics.monthPipelinesSuccessful, + }, + lastYear: { + labels: analytics.yearPipelinesLabels, + totals: analytics.yearPipelinesTotals, + success: analytics.yearPipelinesSuccessful, + }, + timesChart: { + labels: analytics.pipelineTimesLabels, + values: analytics.pipelineTimesValues, + }, }); }); }); const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub); + const findGlTabs = () => wrapper.find(GlTabs); + const findAllGlTab = () => wrapper.findAll(GlTab); + const findGlTabAt = (i) => findAllGlTab().at(i); describe('when shouldRenderDeploymentFrequencyCharts is true', () => { beforeEach(() => { createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } }); }); - it('renders the deployment frequency charts', () => { + it('renders the deployment frequency charts in a tab', () => { + expect(findGlTabs().exists()).toBe(true); + expect(findGlTabAt(0).attributes('title')).toBe('Pipelines'); + expect(findGlTabAt(1).attributes('title')).toBe('Deployments'); expect(findDeploymentFrequencyCharts().exists()).toBe(true); }); }); @@ -121,7 +122,8 @@ describe('ProjectsPipelinesChartsApp', () => { createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: false } }); }); - it('does not render the deployment frequency charts', () => { + it('does not render the deployment frequency charts in a tab', () => { + expect(findGlTabs().exists()).toBe(false); expect(findDeploymentFrequencyCharts().exists()).toBe(false); }); }); diff --git a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js new file mode 100644 index 00000000000..598055d5828 --- /dev/null +++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js @@ -0,0 +1,78 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlColumnChart } from '@gitlab/ui/dist/charts'; +import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue'; +import CiCdAnalyticsAreaChart from '~/projects/pipelines/charts/components/ci_cd_analytics_area_chart.vue'; +import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue'; +import { + counts, + timesChartData as timesChart, + areaChartData as lastWeek, + areaChartData as lastMonth, + lastYearChartData as lastYear, +} from '../mock_data'; + +describe('ProjectsPipelinesChartsApp', () => { + let wrapper; + + beforeEach(() => { + wrapper = shallowMount(PipelineCharts, { + propsData: { + counts, + timesChart, + lastWeek, + lastMonth, + lastYear, + }, + provide: { + projectPath: 'test/project', + shouldRenderDeploymentFrequencyCharts: true, + }, + stubs: { + DeploymentFrequencyCharts: true, + }, + }); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('overall statistics', () => { + it('displays the statistics list', () => { + const list = wrapper.find(StatisticsList); + + expect(list.exists()).toBe(true); + expect(list.props('counts')).toBe(counts); + }); + + it('displays the commit duration chart', () => { + const chart = wrapper.find(GlColumnChart); + + expect(chart.exists()).toBeTruthy(); + expect(chart.props('yAxisTitle')).toBe('Minutes'); + expect(chart.props('xAxisTitle')).toBe('Commit'); + expect(chart.props('bars')).toBe(wrapper.vm.timesChartTransformedData); + expect(chart.props('option')).toBe(wrapper.vm.$options.timesChartOptions); + }); + }); + + describe('pipelines charts', () => { + it('displays 3 area charts', () => { + expect(wrapper.findAll(CiCdAnalyticsAreaChart)).toHaveLength(3); + }); + + describe('displays individual correctly', () => { + it('renders with the correct data', () => { + const charts = wrapper.findAll(CiCdAnalyticsAreaChart); + for (let i = 0; i < charts.length; i += 1) { + const chart = charts.at(i); + + expect(chart.exists()).toBeTruthy(); + expect(chart.props('chartData')).toBe(wrapper.vm.areaCharts[i].data); + expect(chart.text()).toBe(wrapper.vm.areaCharts[i].title); + } + }); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap index 63d38e7587a..1bf757ea312 100644 --- a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap +++ b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap @@ -4,6 +4,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = ` <gl-dropdown-stub category="primary" headertext="" + hideheaderborder="true" right="true" size="medium" text="Clone" diff --git a/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap index dd88ba9a6fb..c4f351eb58d 100644 --- a/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap +++ b/spec/frontend/vue_shared/components/__snapshots__/split_button_spec.js.snap @@ -4,6 +4,7 @@ exports[`SplitButton renders actionItems 1`] = ` <gl-dropdown-stub category="primary" headertext="" + hideheaderborder="true" menu-class="" size="medium" split="true" |