diff options
Diffstat (limited to 'spec/frontend/projects/compare/components')
7 files changed, 138 insertions, 66 deletions
diff --git a/spec/frontend/projects/compare/components/app_legacy_spec.js b/spec/frontend/projects/compare/components/app_legacy_spec.js index 93e96c8b9f7..6fdf4014575 100644 --- a/spec/frontend/projects/compare/components/app_legacy_spec.js +++ b/spec/frontend/projects/compare/components/app_legacy_spec.js @@ -7,7 +7,7 @@ jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' })); const projectCompareIndexPath = 'some/path'; const refsProjectPath = 'some/refs/path'; -const paramsFrom = 'master'; +const paramsFrom = 'main'; const paramsTo = 'some-other-branch'; describe('CompareApp component', () => { diff --git a/spec/frontend/projects/compare/components/app_spec.js b/spec/frontend/projects/compare/components/app_spec.js index 6de06e4373c..7989a6f3d74 100644 --- a/spec/frontend/projects/compare/components/app_spec.js +++ b/spec/frontend/projects/compare/components/app_spec.js @@ -2,26 +2,19 @@ import { GlButton } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import CompareApp from '~/projects/compare/components/app.vue'; import RevisionCard from '~/projects/compare/components/revision_card.vue'; +import { appDefaultProps as defaultProps } from './mock_data'; jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' })); -const projectCompareIndexPath = 'some/path'; -const refsProjectPath = 'some/refs/path'; -const paramsFrom = 'master'; -const paramsTo = 'master'; - describe('CompareApp component', () => { let wrapper; + const findSourceRevisionCard = () => wrapper.find('[data-testid="sourceRevisionCard"]'); + const findTargetRevisionCard = () => wrapper.find('[data-testid="targetRevisionCard"]'); const createComponent = (props = {}) => { wrapper = shallowMount(CompareApp, { propsData: { - projectCompareIndexPath, - refsProjectPath, - paramsFrom, - paramsTo, - projectMergeRequestPath: '', - createMrPath: '', + ...defaultProps, ...props, }, }); @@ -39,16 +32,16 @@ describe('CompareApp component', () => { it('renders component with prop', () => { expect(wrapper.props()).toEqual( expect.objectContaining({ - projectCompareIndexPath, - refsProjectPath, - paramsFrom, - paramsTo, + projectCompareIndexPath: defaultProps.projectCompareIndexPath, + refsProjectPath: defaultProps.refsProjectPath, + paramsFrom: defaultProps.paramsFrom, + paramsTo: defaultProps.paramsTo, }), ); }); it('contains the correct form attributes', () => { - expect(wrapper.attributes('action')).toBe(projectCompareIndexPath); + expect(wrapper.attributes('action')).toBe(defaultProps.projectCompareIndexPath); expect(wrapper.attributes('method')).toBe('POST'); }); @@ -87,6 +80,58 @@ describe('CompareApp component', () => { }); }); + it('sets the selected project when the "selectProject" event is emitted', async () => { + const project = { + name: 'some-to-name', + id: '1', + }; + + findTargetRevisionCard().vm.$emit('selectProject', { + direction: 'to', + project, + }); + + await wrapper.vm.$nextTick(); + + expect(findTargetRevisionCard().props('selectedProject')).toEqual( + expect.objectContaining(project), + ); + }); + + it('sets the selected revision when the "selectRevision" event is emitted', async () => { + const revision = 'some-revision'; + + findTargetRevisionCard().vm.$emit('selectRevision', { + direction: 'to', + revision, + }); + + await wrapper.vm.$nextTick(); + + expect(findSourceRevisionCard().props('paramsBranch')).toBe(revision); + }); + + describe('swap revisions button', () => { + const findSwapRevisionsButton = () => wrapper.find('[data-testid="swapRevisionsButton"]'); + + it('renders the swap revisions button', () => { + expect(findSwapRevisionsButton().exists()).toBe(true); + }); + + it('has the correct text', () => { + expect(findSwapRevisionsButton().text()).toBe('Swap revisions'); + }); + + it('swaps revisions when clicked', async () => { + findSwapRevisionsButton().vm.$emit('click'); + + await wrapper.vm.$nextTick(); + + expect(findTargetRevisionCard().props('paramsBranch')).toBe(defaultProps.paramsTo); + expect(findSourceRevisionCard().props('paramsBranch')).toBe(defaultProps.paramsFrom); + }); + }); + describe('merge request buttons', () => { const findProjectMrButton = () => wrapper.find('[data-testid="projectMrButton"]'); const findCreateMrButton = () => wrapper.find('[data-testid="createMrButton"]'); diff --git a/spec/frontend/projects/compare/components/mock_data.js b/spec/frontend/projects/compare/components/mock_data.js new file mode 100644 index 00000000000..61309928c26 --- /dev/null +++ b/spec/frontend/projects/compare/components/mock_data.js @@ -0,0 +1,37 @@ +const refsProjectPath = 'some/refs/path'; +const paramsName = 'to'; +const paramsBranch = 'main'; +const defaultProject = { + name: 'some-to-name', + id: '1', +}; + +export const appDefaultProps = { + projectCompareIndexPath: 'some/path', + projectMergeRequestPath: '', + projects: [defaultProject], + paramsFrom: 'main', + paramsTo: 'target/branch', + createMrPath: '', + refsProjectPath, + defaultProject, +}; + +export const revisionCardDefaultProps = { + selectedProject: defaultProject, + paramsBranch, + revisionText: 'Source', + refsProjectPath, + paramsName, +}; + +export const repoDropdownDefaultProps = { + selectedProject: defaultProject, + paramsName, +}; + +export const revisionDropdownDefaultProps = { + refsProjectPath, + paramsBranch, + paramsName, +}; diff --git a/spec/frontend/projects/compare/components/repo_dropdown_spec.js b/spec/frontend/projects/compare/components/repo_dropdown_spec.js index df8fea8fd32..27a7a32ebca 100644 --- a/spec/frontend/projects/compare/components/repo_dropdown_spec.js +++ b/spec/frontend/projects/compare/components/repo_dropdown_spec.js @@ -1,37 +1,17 @@ import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import RepoDropdown from '~/projects/compare/components/repo_dropdown.vue'; - -const defaultProps = { - paramsName: 'to', -}; - -const projectToId = '1'; -const projectToName = 'some-to-name'; -const projectFromId = '2'; -const projectFromName = 'some-from-name'; - -const defaultProvide = { - projectTo: { id: projectToId, name: projectToName }, - projectsFrom: [ - { id: projectFromId, name: projectFromName }, - { id: 3, name: 'some-from-another-name' }, - ], -}; +import { revisionCardDefaultProps as defaultProps } from './mock_data'; describe('RepoDropdown component', () => { let wrapper; - const createComponent = (props = {}, provide = {}) => { + const createComponent = (props = {}) => { wrapper = shallowMount(RepoDropdown, { propsData: { ...defaultProps, ...props, }, - provide: { - ...defaultProvide, - ...provide, - }, }); }; @@ -49,11 +29,11 @@ describe('RepoDropdown component', () => { }); it('set hidden input', () => { - expect(findHiddenInput().attributes('value')).toBe(projectToId); + expect(findHiddenInput().attributes('value')).toBe(defaultProps.selectedProject.id); }); it('displays the project name in the disabled dropdown', () => { - expect(findGlDropdown().props('text')).toBe(projectToName); + expect(findGlDropdown().props('text')).toBe(defaultProps.selectedProject.name); expect(findGlDropdown().props('disabled')).toBe(true); }); @@ -66,31 +46,39 @@ describe('RepoDropdown component', () => { describe('Target Revision', () => { beforeEach(() => { - createComponent({ paramsName: 'from' }); + const projects = [ + { + name: 'some-to-name', + id: '1', + }, + ]; + + createComponent({ paramsName: 'from', projects }); }); it('set hidden input of the selected project', () => { - expect(findHiddenInput().attributes('value')).toBe(projectToId); + expect(findHiddenInput().attributes('value')).toBe(defaultProps.selectedProject.id); }); it('displays matching project name of the source revision initially in the dropdown', () => { - expect(findGlDropdown().props('text')).toBe(projectToName); + expect(findGlDropdown().props('text')).toBe(defaultProps.selectedProject.name); }); - it('updates the hiddin input value when onClick method is triggered', async () => { - const repoId = '100'; + it('updates the hidden input value when onClick method is triggered', async () => { + const repoId = '1'; wrapper.vm.onClick({ id: repoId }); await wrapper.vm.$nextTick(); expect(findHiddenInput().attributes('value')).toBe(repoId); }); - it('emits `changeTargetProject` event when another target project is selected', async () => { - const index = 1; - const { projectsFrom } = defaultProvide; - findGlDropdown().findAll(GlDropdownItem).at(index).vm.$emit('click'); + it('emits `selectProject` event when another target project is selected', async () => { + findGlDropdown().findAll(GlDropdownItem).at(0).vm.$emit('click'); await wrapper.vm.$nextTick(); - expect(wrapper.emitted('changeTargetProject')[0][0]).toEqual(projectsFrom[index].name); + expect(wrapper.emitted('selectProject')[0][0]).toEqual({ + direction: 'from', + project: { id: '1', name: 'some-to-name' }, + }); }); }); }); diff --git a/spec/frontend/projects/compare/components/revision_card_spec.js b/spec/frontend/projects/compare/components/revision_card_spec.js index 83f858f4454..57906045337 100644 --- a/spec/frontend/projects/compare/components/revision_card_spec.js +++ b/spec/frontend/projects/compare/components/revision_card_spec.js @@ -3,13 +3,7 @@ import { shallowMount } from '@vue/test-utils'; import RepoDropdown from '~/projects/compare/components/repo_dropdown.vue'; import RevisionCard from '~/projects/compare/components/revision_card.vue'; import RevisionDropdown from '~/projects/compare/components/revision_dropdown.vue'; - -const defaultProps = { - refsProjectPath: 'some/refs/path', - revisionText: 'Source', - paramsName: 'to', - paramsBranch: 'master', -}; +import { revisionCardDefaultProps as defaultProps } from './mock_data'; describe('RepoDropdown component', () => { let wrapper; diff --git a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js index ca208395e82..38e13dc5462 100644 --- a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js +++ b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js @@ -9,7 +9,7 @@ const defaultProps = { refsProjectPath: 'some/refs/path', revisionText: 'Target', paramsName: 'from', - paramsBranch: 'master', + paramsBranch: 'main', }; jest.mock('~/flash'); diff --git a/spec/frontend/projects/compare/components/revision_dropdown_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_spec.js index aab9607ceae..118bb68585e 100644 --- a/spec/frontend/projects/compare/components/revision_dropdown_spec.js +++ b/spec/frontend/projects/compare/components/revision_dropdown_spec.js @@ -1,15 +1,10 @@ -import { GlDropdown, GlSearchBoxByType } from '@gitlab/ui'; +import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import AxiosMockAdapter from 'axios-mock-adapter'; import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import RevisionDropdown from '~/projects/compare/components/revision_dropdown.vue'; - -const defaultProps = { - refsProjectPath: 'some/refs/path', - paramsName: 'from', - paramsBranch: 'master', -}; +import { revisionDropdownDefaultProps as defaultProps } from './mock_data'; jest.mock('~/flash'); @@ -142,4 +137,17 @@ describe('RevisionDropdown component', () => { expect(findGlDropdown().props('text')).toBe(defaultProps.paramsBranch); }); }); + + it('emits `selectRevision` event when another revision is selected', async () => { + createComponent(); + wrapper.vm.branches = ['some-branch']; + await wrapper.vm.$nextTick(); + + findGlDropdown().findAll(GlDropdownItem).at(0).vm.$emit('click'); + + expect(wrapper.emitted('selectRevision')[0][0]).toEqual({ + direction: 'to', + revision: 'some-branch', + }); + }); }); |