debian-mirror-gitlab/spec/frontend/projects/compare/components/app_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

198 lines
6.1 KiB
JavaScript
Raw Normal View History

2021-03-11 19:13:27 +05:30
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
2022-04-04 11:22:00 +05:30
import { nextTick } from 'vue';
2021-03-11 19:13:27 +05:30
import CompareApp from '~/projects/compare/components/app.vue';
2021-04-17 20:07:23 +05:30
import RevisionCard from '~/projects/compare/components/revision_card.vue';
2021-06-08 01:23:25 +05:30
import { appDefaultProps as defaultProps } from './mock_data';
2021-03-11 19:13:27 +05:30
jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
describe('CompareApp component', () => {
let wrapper;
2021-06-08 01:23:25 +05:30
const findSourceRevisionCard = () => wrapper.find('[data-testid="sourceRevisionCard"]');
const findTargetRevisionCard = () => wrapper.find('[data-testid="targetRevisionCard"]');
2021-03-11 19:13:27 +05:30
const createComponent = (props = {}) => {
wrapper = shallowMount(CompareApp, {
propsData: {
2021-06-08 01:23:25 +05:30
...defaultProps,
2021-03-11 19:13:27 +05:30
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
beforeEach(() => {
createComponent();
});
it('renders component with prop', () => {
expect(wrapper.props()).toEqual(
expect.objectContaining({
2021-06-08 01:23:25 +05:30
projectCompareIndexPath: defaultProps.projectCompareIndexPath,
2022-08-27 11:52:29 +05:30
sourceProjectRefsPath: defaultProps.sourceProjectRefsPath,
targetProjectRefsPath: defaultProps.targetProjectRefsPath,
2021-06-08 01:23:25 +05:30
paramsFrom: defaultProps.paramsFrom,
paramsTo: defaultProps.paramsTo,
2021-03-11 19:13:27 +05:30
}),
);
});
it('contains the correct form attributes', () => {
2021-06-08 01:23:25 +05:30
expect(wrapper.attributes('action')).toBe(defaultProps.projectCompareIndexPath);
2021-03-11 19:13:27 +05:30
expect(wrapper.attributes('method')).toBe('POST');
});
it('has input with csrf token', () => {
expect(wrapper.find('input[name="authenticity_token"]').attributes('value')).toBe(
'mock-csrf-token',
);
});
it('has ellipsis', () => {
expect(wrapper.find('[data-testid="ellipsis"]').exists()).toBe(true);
});
it('render Source and Target BranchDropdown components', () => {
2022-10-11 01:57:18 +05:30
const revisionCards = wrapper.findAllComponents(RevisionCard);
2021-03-11 19:13:27 +05:30
2021-04-17 20:07:23 +05:30
expect(revisionCards.length).toBe(2);
expect(revisionCards.at(0).props('revisionText')).toBe('Source');
expect(revisionCards.at(1).props('revisionText')).toBe('Target');
2021-03-11 19:13:27 +05:30
});
describe('compare button', () => {
2022-10-11 01:57:18 +05:30
const findCompareButton = () => wrapper.findComponent(GlButton);
2021-03-11 19:13:27 +05:30
it('renders button', () => {
expect(findCompareButton().exists()).toBe(true);
});
it('submits form', () => {
findCompareButton().vm.$emit('click');
expect(wrapper.find('form').element.submit).toHaveBeenCalled();
});
it('has compare text', () => {
expect(findCompareButton().text()).toBe('Compare');
});
});
2021-06-08 01:23:25 +05:30
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,
});
2022-04-04 11:22:00 +05:30
await nextTick();
2021-06-08 01:23:25 +05:30
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,
});
2022-04-04 11:22:00 +05:30
await nextTick();
2021-06-08 01:23:25 +05:30
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');
2022-04-04 11:22:00 +05:30
await nextTick();
2021-06-08 01:23:25 +05:30
expect(findTargetRevisionCard().props('paramsBranch')).toBe(defaultProps.paramsTo);
expect(findSourceRevisionCard().props('paramsBranch')).toBe(defaultProps.paramsFrom);
});
});
2022-11-25 23:54:43 +05:30
describe('mode dropdown', () => {
const findModeDropdownButton = () => wrapper.find('[data-testid="modeDropdown"]');
const findEnableStraightModeButton = () =>
wrapper.find('[data-testid="enableStraightModeButton"]');
const findDisableStraightModeButton = () =>
wrapper.find('[data-testid="disableStraightModeButton"]');
it('renders the mode dropdown button', () => {
expect(findModeDropdownButton().exists()).toBe(true);
});
it('has the correct text', () => {
expect(findEnableStraightModeButton().text()).toBe('...');
expect(findDisableStraightModeButton().text()).toBe('..');
});
it('straight mode button when clicked', async () => {
expect(wrapper.props('straight')).toBe(false);
expect(wrapper.find('input[name="straight"]').attributes('value')).toBe('false');
findEnableStraightModeButton().vm.$emit('click');
await nextTick();
expect(wrapper.find('input[name="straight"]').attributes('value')).toBe('true');
findDisableStraightModeButton().vm.$emit('click');
await nextTick();
expect(wrapper.find('input[name="straight"]').attributes('value')).toBe('false');
});
});
2021-03-11 19:13:27 +05:30
describe('merge request buttons', () => {
const findProjectMrButton = () => wrapper.find('[data-testid="projectMrButton"]');
const findCreateMrButton = () => wrapper.find('[data-testid="createMrButton"]');
it('does not have merge request buttons', () => {
createComponent();
expect(findProjectMrButton().exists()).toBe(false);
expect(findCreateMrButton().exists()).toBe(false);
});
it('has "View open merge request" button', () => {
createComponent({
projectMergeRequestPath: 'some/project/merge/request/path',
});
expect(findProjectMrButton().exists()).toBe(true);
expect(findCreateMrButton().exists()).toBe(false);
});
it('has "Create merge request" button', () => {
createComponent({
createMrPath: 'some/create/create/mr/path',
});
expect(findProjectMrButton().exists()).toBe(false);
expect(findCreateMrButton().exists()).toBe(true);
});
});
});