debian-mirror-gitlab/spec/frontend/snippets/components/snippet_header_spec.js
2020-11-24 15:15:51 +05:30

237 lines
6.3 KiB
JavaScript

import { ApolloMutation } from 'vue-apollo';
import { GlButton, GlModal } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { Blob, BinaryBlob } from 'jest/blob/components/mock_data';
import waitForPromises from 'helpers/wait_for_promises';
import DeleteSnippetMutation from '~/snippets/mutations/deleteSnippet.mutation.graphql';
import SnippetHeader from '~/snippets/components/snippet_header.vue';
import { differenceInMilliseconds } from '~/lib/utils/datetime_utility';
describe('Snippet header component', () => {
let wrapper;
let snippet;
let mutationTypes;
let mutationVariables;
let errorMsg;
let err;
const originalRelativeUrlRoot = gon.relative_url_root;
function createComponent({
loading = false,
permissions = {},
mutationRes = mutationTypes.RESOLVE,
snippetProps = {},
} = {}) {
const defaultProps = Object.assign(snippet, snippetProps);
if (permissions) {
Object.assign(defaultProps.userPermissions, {
...permissions,
});
}
const $apollo = {
queries: {
canCreateSnippet: {
loading,
},
},
mutate: mutationRes,
};
wrapper = mount(SnippetHeader, {
mocks: { $apollo },
propsData: {
snippet: {
...defaultProps,
},
},
stubs: {
ApolloMutation,
},
});
}
beforeEach(() => {
gon.relative_url_root = '/foo/';
snippet = {
id: 'gid://gitlab/PersonalSnippet/50',
title: 'The property of Thor',
visibilityLevel: 'private',
webUrl: 'http://personal.dev.null/42',
userPermissions: {
adminSnippet: true,
updateSnippet: true,
reportSnippet: false,
},
project: null,
author: {
name: 'Thor Odinson',
},
blobs: [Blob],
createdAt: new Date(differenceInMilliseconds(32 * 24 * 3600 * 1000)).toISOString(),
};
mutationVariables = {
mutation: DeleteSnippetMutation,
variables: {
id: snippet.id,
},
};
errorMsg = 'Foo bar';
err = { message: errorMsg };
mutationTypes = {
RESOLVE: jest.fn(() => Promise.resolve({ data: { destroySnippet: { errors: [] } } })),
REJECT: jest.fn(() => Promise.reject(err)),
};
});
afterEach(() => {
wrapper.destroy();
gon.relative_url_root = originalRelativeUrlRoot;
});
it('renders itself', () => {
createComponent();
expect(wrapper.find('.detail-page-header').exists()).toBe(true);
});
it('renders a message showing snippet creation date and author', () => {
createComponent();
const text = wrapper.find('[data-testid="authored-message"]').text();
expect(text).toContain('Authored 1 month ago by');
expect(text).toContain('Thor Odinson');
});
it('renders a message showing only snippet creation date if author is null', () => {
snippet.author = null;
createComponent();
const text = wrapper.find('[data-testid="authored-message"]').text();
expect(text).toBe('Authored 1 month ago');
});
it('renders action buttons based on permissions', () => {
createComponent({
permissions: {
adminSnippet: false,
updateSnippet: false,
},
});
expect(wrapper.findAll(GlButton).length).toEqual(0);
createComponent({
permissions: {
adminSnippet: true,
updateSnippet: false,
},
});
expect(wrapper.findAll(GlButton).length).toEqual(1);
createComponent({
permissions: {
adminSnippet: true,
updateSnippet: true,
},
});
expect(wrapper.findAll(GlButton).length).toEqual(2);
createComponent({
permissions: {
adminSnippet: true,
updateSnippet: true,
},
});
wrapper.setData({
canCreateSnippet: true,
});
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.findAll(GlButton).length).toEqual(3);
});
});
it('renders modal for deletion of a snippet', () => {
createComponent();
expect(wrapper.find(GlModal).exists()).toBe(true);
});
it.each`
blobs | isDisabled | condition
${[Blob]} | ${false} | ${'no binary'}
${[Blob, BinaryBlob]} | ${true} | ${'several blobs. incl. a binary'}
${[BinaryBlob]} | ${true} | ${'binary'}
`('renders Edit button when snippet contains $condition file', ({ blobs, isDisabled }) => {
createComponent({
snippetProps: {
blobs,
},
});
expect(wrapper.find('[href*="edit"]').props('disabled')).toBe(isDisabled);
});
describe('Delete mutation', () => {
const { location } = window;
beforeEach(() => {
delete window.location;
window.location = {
pathname: '',
};
});
afterEach(() => {
window.location = location;
});
it('dispatches a mutation to delete the snippet with correct variables', () => {
createComponent();
wrapper.vm.deleteSnippet();
expect(mutationTypes.RESOLVE).toHaveBeenCalledWith(mutationVariables);
});
it('sets error message if mutation fails', async () => {
createComponent({ mutationRes: mutationTypes.REJECT });
expect(Boolean(wrapper.vm.errorMessage)).toBe(false);
wrapper.vm.deleteSnippet();
await waitForPromises();
expect(wrapper.vm.errorMessage).toEqual(errorMsg);
});
describe('in case of successful mutation, closes modal and redirects to correct listing', () => {
const createDeleteSnippet = (snippetProps = {}) => {
createComponent({
snippetProps,
});
wrapper.vm.closeDeleteModal = jest.fn();
wrapper.vm.deleteSnippet();
return wrapper.vm.$nextTick();
};
it('redirects to dashboard/snippets for personal snippet', () => {
return createDeleteSnippet().then(() => {
expect(wrapper.vm.closeDeleteModal).toHaveBeenCalled();
expect(window.location.pathname).toBe(`${gon.relative_url_root}dashboard/snippets`);
});
});
it('redirects to project snippets for project snippet', () => {
const fullPath = 'foo/bar';
return createDeleteSnippet({
project: {
fullPath,
},
}).then(() => {
expect(wrapper.vm.closeDeleteModal).toHaveBeenCalled();
expect(window.location.pathname).toBe(`${fullPath}/-/snippets`);
});
});
});
});
});