debian-mirror-gitlab/spec/frontend/design_management/pages/design/index_spec.js

319 lines
8.6 KiB
JavaScript
Raw Normal View History

2020-06-23 00:09:42 +05:30
import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueRouter from 'vue-router';
2020-05-24 23:13:21 +05:30
import { GlAlert } from '@gitlab/ui';
import { ApolloMutation } from 'vue-apollo';
2020-10-24 23:57:45 +05:30
import { deprecatedCreateFlash as createFlash } from '~/flash';
2020-05-24 23:13:21 +05:30
import DesignIndex from '~/design_management/pages/design/index.vue';
2020-06-23 00:09:42 +05:30
import DesignSidebar from '~/design_management/components/design_sidebar.vue';
2020-07-28 23:09:34 +05:30
import DesignPresentation from '~/design_management/components/design_presentation.vue';
import createImageDiffNoteMutation from '~/design_management/graphql/mutations/create_image_diff_note.mutation.graphql';
2020-11-24 15:15:51 +05:30
import updateActiveDiscussion from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql';
2020-05-24 23:13:21 +05:30
import {
DESIGN_NOT_FOUND_ERROR,
DESIGN_VERSION_NOT_EXIST_ERROR,
} from '~/design_management/utils/error_messages';
2020-11-24 15:15:51 +05:30
import { DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
2020-06-23 00:09:42 +05:30
import createRouter from '~/design_management/router';
import * as utils from '~/design_management/utils/design_management_utils';
import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '~/design_management/constants';
2020-11-24 15:15:51 +05:30
import design from '../../mock_data/design';
import mockResponseWithDesigns from '../../mock_data/designs';
import mockResponseNoDesigns from '../../mock_data/no_designs';
import mockAllVersions from '../../mock_data/all_versions';
2020-05-24 23:13:21 +05:30
jest.mock('~/flash');
2020-07-28 23:09:34 +05:30
const focusInput = jest.fn();
const DesignReplyForm = {
template: '<div><textarea ref="textarea"></textarea></div>',
methods: {
focusInput,
},
};
2020-11-24 15:15:51 +05:30
const mockDesignNoDiscussions = {
...design,
discussions: {
nodes: [],
},
};
2020-07-28 23:09:34 +05:30
2020-06-23 00:09:42 +05:30
const localVue = createLocalVue();
localVue.use(VueRouter);
2020-05-24 23:13:21 +05:30
describe('Design management design index page', () => {
let wrapper;
2020-06-23 00:09:42 +05:30
let router;
2020-05-24 23:13:21 +05:30
const newComment = 'new comment';
const annotationCoordinates = {
x: 10,
y: 10,
width: 100,
height: 100,
};
const createDiscussionMutationVariables = {
mutation: createImageDiffNoteMutation,
update: expect.anything(),
variables: {
input: {
body: newComment,
noteableId: design.id,
position: {
headSha: 'headSha',
baseSha: 'baseSha',
startSha: 'startSha',
paths: {
newPath: 'full-design-path',
},
...annotationCoordinates,
},
},
},
};
const mutate = jest.fn().mockResolvedValue();
const findDiscussionForm = () => wrapper.find(DesignReplyForm);
2020-06-23 00:09:42 +05:30
const findSidebar = () => wrapper.find(DesignSidebar);
2020-07-28 23:09:34 +05:30
const findDesignPresentation = () => wrapper.find(DesignPresentation);
2020-05-24 23:13:21 +05:30
2020-11-24 15:15:51 +05:30
function createComponent({ loading = false } = {}, { data = {}, intialRouteOptions = {} } = {}) {
2020-05-24 23:13:21 +05:30
const $apollo = {
queries: {
design: {
loading,
},
},
mutate,
};
2020-06-23 00:09:42 +05:30
router = createRouter();
2020-05-24 23:13:21 +05:30
2020-11-24 15:15:51 +05:30
router.push({ name: DESIGN_ROUTE_NAME, params: { id: design.id }, ...intialRouteOptions });
2020-05-24 23:13:21 +05:30
wrapper = shallowMount(DesignIndex, {
propsData: { id: '1' },
2020-06-23 00:09:42 +05:30
mocks: { $apollo },
2020-05-24 23:13:21 +05:30
stubs: {
ApolloMutation,
2020-06-23 00:09:42 +05:30
DesignSidebar,
2020-07-28 23:09:34 +05:30
DesignReplyForm,
2020-05-24 23:13:21 +05:30
},
2020-10-24 23:57:45 +05:30
provide: {
issueIid: '1',
projectPath: 'project-path',
},
2020-05-24 23:13:21 +05:30
data() {
return {
activeDiscussion: {
id: null,
source: null,
},
...data,
};
},
2020-06-23 00:09:42 +05:30
localVue,
router,
2020-05-24 23:13:21 +05:30
});
}
afterEach(() => {
wrapper.destroy();
});
2020-06-23 00:09:42 +05:30
describe('when navigating', () => {
it('applies fullscreen layout', () => {
const mockEl = {
classList: {
add: jest.fn(),
remove: jest.fn(),
},
};
jest.spyOn(utils, 'getPageLayoutElement').mockReturnValue(mockEl);
2020-11-24 15:15:51 +05:30
createComponent({ loading: true });
2020-06-23 00:09:42 +05:30
expect(mockEl.classList.add).toHaveBeenCalledTimes(1);
expect(mockEl.classList.add).toHaveBeenCalledWith(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
});
});
2020-05-24 23:13:21 +05:30
it('sets loading state', () => {
2020-11-24 15:15:51 +05:30
createComponent({ loading: true });
2020-05-24 23:13:21 +05:30
expect(wrapper.element).toMatchSnapshot();
});
it('renders design index', () => {
2020-11-24 15:15:51 +05:30
createComponent({ loading: false }, { data: { design } });
2020-05-24 23:13:21 +05:30
expect(wrapper.element).toMatchSnapshot();
expect(wrapper.find(GlAlert).exists()).toBe(false);
});
2020-06-23 00:09:42 +05:30
it('passes correct props to sidebar component', () => {
2020-11-24 15:15:51 +05:30
createComponent({ loading: false }, { data: { design } });
2020-05-24 23:13:21 +05:30
2020-06-23 00:09:42 +05:30
expect(findSidebar().props()).toEqual({
design,
2020-10-24 23:57:45 +05:30
markdownPreviewPath: '/project-path/preview_markdown?target_type=Issue',
2020-06-23 00:09:42 +05:30
resolvedDiscussionsExpanded: false,
2020-05-24 23:13:21 +05:30
});
});
it('opens a new discussion form', () => {
2020-11-24 15:15:51 +05:30
createComponent(
{ loading: false },
{
data: {
design,
2020-05-24 23:13:21 +05:30
},
},
2020-11-24 15:15:51 +05:30
);
2020-05-24 23:13:21 +05:30
2020-07-28 23:09:34 +05:30
findDesignPresentation().vm.$emit('openCommentForm', { x: 0, y: 0 });
2020-05-24 23:13:21 +05:30
return wrapper.vm.$nextTick().then(() => {
expect(findDiscussionForm().exists()).toBe(true);
});
});
2020-07-28 23:09:34 +05:30
it('keeps new discussion form focused', () => {
2020-11-24 15:15:51 +05:30
createComponent(
{ loading: false },
{
data: {
design,
annotationCoordinates,
2020-07-28 23:09:34 +05:30
},
},
2020-11-24 15:15:51 +05:30
);
2020-07-28 23:09:34 +05:30
findDesignPresentation().vm.$emit('openCommentForm', { x: 10, y: 10 });
expect(focusInput).toHaveBeenCalled();
});
2020-05-24 23:13:21 +05:30
it('sends a mutation on submitting form and closes form', () => {
2020-11-24 15:15:51 +05:30
createComponent(
{ loading: false },
{
data: {
design,
annotationCoordinates,
comment: newComment,
2020-05-24 23:13:21 +05:30
},
},
2020-11-24 15:15:51 +05:30
);
2020-05-24 23:13:21 +05:30
2020-11-24 15:15:51 +05:30
findDiscussionForm().vm.$emit('submit-form');
2020-05-24 23:13:21 +05:30
expect(mutate).toHaveBeenCalledWith(createDiscussionMutationVariables);
return wrapper.vm
.$nextTick()
.then(() => {
return mutate({ variables: createDiscussionMutationVariables });
})
.then(() => {
expect(findDiscussionForm().exists()).toBe(false);
});
});
it('closes the form and clears the comment on canceling form', () => {
2020-11-24 15:15:51 +05:30
createComponent(
{ loading: false },
{
data: {
design,
annotationCoordinates,
comment: newComment,
2020-05-24 23:13:21 +05:30
},
},
2020-11-24 15:15:51 +05:30
);
2020-05-24 23:13:21 +05:30
2020-11-24 15:15:51 +05:30
findDiscussionForm().vm.$emit('cancel-form');
2020-05-24 23:13:21 +05:30
expect(wrapper.vm.comment).toBe('');
return wrapper.vm.$nextTick().then(() => {
expect(findDiscussionForm().exists()).toBe(false);
});
});
describe('with error', () => {
beforeEach(() => {
2020-11-24 15:15:51 +05:30
createComponent(
{ loading: false },
{
data: {
design: mockDesignNoDiscussions,
errorMessage: 'woops',
2020-05-24 23:13:21 +05:30
},
},
2020-11-24 15:15:51 +05:30
);
2020-05-24 23:13:21 +05:30
});
it('GlAlert is rendered in correct position with correct content', () => {
expect(wrapper.element).toMatchSnapshot();
});
});
describe('onDesignQueryResult', () => {
describe('with no designs', () => {
it('redirects to /designs', () => {
2020-11-24 15:15:51 +05:30
createComponent({ loading: true });
2020-06-23 00:09:42 +05:30
router.push = jest.fn();
2020-05-24 23:13:21 +05:30
wrapper.vm.onDesignQueryResult({ data: mockResponseNoDesigns, loading: false });
return wrapper.vm.$nextTick().then(() => {
expect(createFlash).toHaveBeenCalledTimes(1);
expect(createFlash).toHaveBeenCalledWith(DESIGN_NOT_FOUND_ERROR);
2020-06-23 00:09:42 +05:30
expect(router.push).toHaveBeenCalledTimes(1);
expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME });
2020-05-24 23:13:21 +05:30
});
});
});
describe('when no design exists for given version', () => {
it('redirects to /designs', () => {
2020-11-24 15:15:51 +05:30
createComponent({ loading: true });
2020-05-24 23:13:21 +05:30
wrapper.setData({
allVersions: mockAllVersions,
});
2020-06-23 00:09:42 +05:30
// attempt to query for a version of the design that doesn't exist
router.push({ query: { version: '999' } });
router.push = jest.fn();
2020-05-24 23:13:21 +05:30
wrapper.vm.onDesignQueryResult({ data: mockResponseWithDesigns, loading: false });
return wrapper.vm.$nextTick().then(() => {
expect(createFlash).toHaveBeenCalledTimes(1);
expect(createFlash).toHaveBeenCalledWith(DESIGN_VERSION_NOT_EXIST_ERROR);
2020-06-23 00:09:42 +05:30
expect(router.push).toHaveBeenCalledTimes(1);
expect(router.push).toHaveBeenCalledWith({ name: DESIGNS_ROUTE_NAME });
2020-05-24 23:13:21 +05:30
});
});
});
});
2020-11-24 15:15:51 +05:30
describe('when hash present in current route', () => {
it('calls updateActiveDiscussion mutation', () => {
createComponent(
{ loading: false },
{
data: {
design,
},
intialRouteOptions: { hash: '#note_123' },
},
);
expect(mutate).toHaveBeenCalledTimes(1);
expect(mutate).toHaveBeenCalledWith({
mutation: updateActiveDiscussion,
variables: { id: 'gid://gitlab/DiffNote/123', source: 'url' },
});
});
});
2020-05-24 23:13:21 +05:30
});