diff options
Diffstat (limited to 'spec/frontend/add_context_commits_modal/components')
3 files changed, 275 insertions, 0 deletions
diff --git a/spec/frontend/add_context_commits_modal/components/__snapshots__/add_context_commits_modal_spec.js.snap b/spec/frontend/add_context_commits_modal/components/__snapshots__/add_context_commits_modal_spec.js.snap new file mode 100644 index 00000000000..5fad0d07f97 --- /dev/null +++ b/spec/frontend/add_context_commits_modal/components/__snapshots__/add_context_commits_modal_spec.js.snap @@ -0,0 +1,50 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AddContextCommitsModal renders modal with 2 tabs 1`] = ` +<gl-modal-stub + body-class="add-review-item pt-0" + cancel-variant="light" + modalclass="" + modalid="add-review-item" + ok-disabled="true" + ok-title="Save changes" + scrollable="true" + size="md" + title="Add or remove previously merged commits" + titletag="h4" +> + <gl-tabs-stub + contentclass="pt-0" + theme="indigo" + value="0" + > + <gl-tab-stub> + + <div + class="mt-2" + > + <gl-search-box-by-type-stub + clearbuttontitle="Clear" + placeholder="Search by commit title or SHA" + value="" + /> + + <review-tab-container-stub + commits="" + emptylisttext="Your search didn't match any commits. Try a different query." + loadingfailedtext="Unable to load commits. Try again later." + /> + </div> + </gl-tab-stub> + + <gl-tab-stub> + + <review-tab-container-stub + commits="" + emptylisttext="Commits you select appear here. Go to the first tab and select commits to add to this merge request." + loadingfailedtext="Unable to load commits. Try again later." + /> + </gl-tab-stub> + </gl-tabs-stub> +</gl-modal-stub> +`; diff --git a/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js b/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js new file mode 100644 index 00000000000..6904e34db5d --- /dev/null +++ b/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js @@ -0,0 +1,174 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import { GlModal, GlSearchBoxByType } from '@gitlab/ui'; +import AddReviewItemsModal from '~/add_context_commits_modal/components/add_context_commits_modal_wrapper.vue'; +import getDiffWithCommit from '../../diffs/mock_data/diff_with_commit'; + +import defaultState from '~/add_context_commits_modal/store/state'; +import mutations from '~/add_context_commits_modal/store/mutations'; +import * as actions from '~/add_context_commits_modal/store/actions'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('AddContextCommitsModal', () => { + let wrapper; + let store; + const createContextCommits = jest.fn(); + const removeContextCommits = jest.fn(); + const resetModalState = jest.fn(); + const searchCommits = jest.fn(); + const { commit } = getDiffWithCommit(); + + const createWrapper = (props = {}) => { + store = new Vuex.Store({ + mutations, + state: { + ...defaultState(), + }, + actions: { + ...actions, + searchCommits, + createContextCommits, + removeContextCommits, + resetModalState, + }, + }); + + wrapper = shallowMount(AddReviewItemsModal, { + localVue, + store, + propsData: { + contextCommitsPath: '', + targetBranch: 'master', + mergeRequestIid: 1, + projectId: 1, + ...props, + }, + }); + return wrapper; + }; + + const findModal = () => wrapper.find(GlModal); + const findSearch = () => wrapper.find(GlSearchBoxByType); + + beforeEach(() => { + wrapper = createWrapper(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders modal with 2 tabs', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + it('an ok button labeled "Save changes"', () => { + expect(findModal().attributes('ok-title')).toEqual('Save changes'); + }); + + describe('when in first tab, renders a modal with', () => { + it('renders the search box component', () => { + expect(findSearch().exists()).toBe(true); + }); + + it('when user starts entering text in search box, it calls action "searchCommits" after waiting for 500s', () => { + const searchText = 'abcd'; + findSearch().vm.$emit('input', searchText); + expect(searchCommits).not.toBeCalled(); + jest.advanceTimersByTime(500); + expect(searchCommits).toHaveBeenCalledWith(expect.anything(), searchText, undefined); + }); + + it('disabled ok button when no row is selected', () => { + expect(findModal().attributes('ok-disabled')).toBe('true'); + }); + + it('enabled ok button when atleast one row is selected', () => { + wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }]; + return wrapper.vm.$nextTick().then(() => { + expect(findModal().attributes('ok-disabled')).toBeFalsy(); + }); + }); + }); + + describe('when in second tab, renders a modal with', () => { + beforeEach(() => { + wrapper.vm.$store.state.tabIndex = 1; + }); + it('a disabled ok button when no row is selected', () => { + expect(findModal().attributes('ok-disabled')).toBe('true'); + }); + + it('an enabled ok button when atleast one row is selected', () => { + wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }]; + return wrapper.vm.$nextTick().then(() => { + expect(findModal().attributes('ok-disabled')).toBeFalsy(); + }); + }); + + it('a disabled ok button in first tab, when row is selected in second tab', () => { + createWrapper({ selectedContextCommits: [commit] }); + expect(wrapper.find(GlModal).attributes('ok-disabled')).toBe('true'); + }); + }); + + describe('has an ok button when clicked calls action', () => { + it('"createContextCommits" when only new commits to be added ', () => { + wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }]; + findModal().vm.$emit('ok'); + return wrapper.vm.$nextTick().then(() => { + expect(createContextCommits).toHaveBeenCalledWith( + expect.anything(), + { commits: [{ ...commit, isSelected: true }], forceReload: true }, + undefined, + ); + }); + }); + it('"removeContextCommits" when only added commits are to be removed ', () => { + wrapper.vm.$store.state.toRemoveCommits = [commit.short_id]; + findModal().vm.$emit('ok'); + return wrapper.vm.$nextTick().then(() => { + expect(removeContextCommits).toHaveBeenCalledWith(expect.anything(), true, undefined); + }); + }); + it('"createContextCommits" and "removeContextCommits" when new commits are to be added and old commits are to be removed', () => { + wrapper.vm.$store.state.selectedCommits = [{ ...commit, isSelected: true }]; + wrapper.vm.$store.state.toRemoveCommits = [commit.short_id]; + findModal().vm.$emit('ok'); + return wrapper.vm.$nextTick().then(() => { + expect(createContextCommits).toHaveBeenCalledWith( + expect.anything(), + { commits: [{ ...commit, isSelected: true }] }, + undefined, + ); + expect(removeContextCommits).toHaveBeenCalledWith(expect.anything(), undefined, undefined); + }); + }); + }); + + describe('has a cancel button when clicked', () => { + it('does not call "createContextCommits" or "removeContextCommits"', () => { + findModal().vm.$emit('cancel'); + expect(createContextCommits).not.toHaveBeenCalled(); + expect(removeContextCommits).not.toHaveBeenCalled(); + }); + it('"resetModalState" to reset all the modal state', () => { + findModal().vm.$emit('cancel'); + expect(resetModalState).toHaveBeenCalledWith(expect.anything(), undefined, undefined); + }); + }); + + describe('when model is closed by clicking the "X" button or by pressing "ESC" key', () => { + it('does not call "createContextCommits" or "removeContextCommits"', () => { + findModal().vm.$emit('close'); + expect(createContextCommits).not.toHaveBeenCalled(); + expect(removeContextCommits).not.toHaveBeenCalled(); + }); + it('"resetModalState" to reset all the modal state', () => { + findModal().vm.$emit('close'); + expect(resetModalState).toHaveBeenCalledWith(expect.anything(), undefined, undefined); + }); + }); +}); diff --git a/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js b/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js new file mode 100644 index 00000000000..4e65713a680 --- /dev/null +++ b/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js @@ -0,0 +1,51 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlLoadingIcon } from '@gitlab/ui'; +import ReviewTabContainer from '~/add_context_commits_modal/components/review_tab_container.vue'; +import CommitItem from '~/diffs/components/commit_item.vue'; +import getDiffWithCommit from '../../diffs/mock_data/diff_with_commit'; + +describe('ReviewTabContainer', () => { + let wrapper; + const { commit } = getDiffWithCommit(); + + const createWrapper = (props = {}) => { + wrapper = shallowMount(ReviewTabContainer, { + propsData: { + tab: 'commits', + isLoading: false, + loadingError: false, + loadingFailedText: 'Failed to load commits', + commits: [], + selectedRow: [], + ...props, + }, + }); + }; + + beforeEach(() => { + createWrapper(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('shows loading icon when commits are being loaded', () => { + createWrapper({ isLoading: true }); + expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + }); + + it('shows loading error text when API call fails', () => { + createWrapper({ loadingError: true }); + expect(wrapper.text()).toContain('Failed to load commits'); + }); + + it('shows "No commits present here" when commits are not present', () => { + expect(wrapper.text()).toContain('No commits present here'); + }); + + it('renders all passed commits as list', () => { + createWrapper({ commits: [commit] }); + expect(wrapper.findAll(CommitItem).length).toBe(1); + }); +}); |