debian-mirror-gitlab/spec/frontend/snippets/components/snippet_blob_edit_spec.js

184 lines
5.1 KiB
JavaScript
Raw Normal View History

2020-04-22 19:07:51 +05:30
import { GlLoadingIcon } from '@gitlab/ui';
2020-04-08 14:13:33 +05:30
import { shallowMount } from '@vue/test-utils';
2020-07-28 23:09:34 +05:30
import AxiosMockAdapter from 'axios-mock-adapter';
2020-10-24 23:57:45 +05:30
import waitForPromises from 'helpers/wait_for_promises';
import { TEST_HOST } from 'helpers/test_constants';
import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
import BlobContentEdit from '~/blob/components/blob_edit_content.vue';
2020-07-28 23:09:34 +05:30
import axios from '~/lib/utils/axios_utils';
import { joinPaths } from '~/lib/utils/url_utility';
2020-10-24 23:57:45 +05:30
import { deprecatedCreateFlash as createFlash } from '~/flash';
2020-07-28 23:09:34 +05:30
jest.mock('~/flash');
2020-10-24 23:57:45 +05:30
const TEST_ID = 'blob_local_7';
const TEST_PATH = 'foo/bar/test.md';
const TEST_RAW_PATH = '/gitlab/raw/path/to/blob/7';
const TEST_FULL_PATH = joinPaths(TEST_HOST, TEST_RAW_PATH);
const TEST_CONTENT = 'Lorem ipsum dolar sit amet,\nconsectetur adipiscing elit.';
2020-11-24 15:15:51 +05:30
const TEST_JSON_CONTENT = '{"abc":"lorem ipsum"}';
2020-10-24 23:57:45 +05:30
const TEST_BLOB = {
id: TEST_ID,
rawPath: TEST_RAW_PATH,
path: TEST_PATH,
content: '',
isLoaded: false,
};
const TEST_BLOB_LOADED = {
...TEST_BLOB,
content: TEST_CONTENT,
isLoaded: true,
};
2020-07-28 23:09:34 +05:30
2020-04-08 14:13:33 +05:30
describe('Snippet Blob Edit component', () => {
let wrapper;
2020-07-28 23:09:34 +05:30
let axiosMock;
2020-04-08 14:13:33 +05:30
2020-10-24 23:57:45 +05:30
const createComponent = (props = {}) => {
2020-04-08 14:13:33 +05:30
wrapper = shallowMount(SnippetBlobEdit, {
propsData: {
2020-10-24 23:57:45 +05:30
blob: TEST_BLOB,
2020-04-22 19:07:51 +05:30
...props,
2020-04-08 14:13:33 +05:30
},
});
2020-10-24 23:57:45 +05:30
};
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
const findHeader = () => wrapper.find(BlobHeaderEdit);
const findContent = () => wrapper.find(BlobContentEdit);
const getLastUpdatedArgs = () => {
const event = wrapper.emitted()['blob-updated'];
return event?.[event.length - 1][0];
};
2020-04-08 14:13:33 +05:30
beforeEach(() => {
2020-07-28 23:09:34 +05:30
axiosMock = new AxiosMockAdapter(axios);
2020-10-24 23:57:45 +05:30
axiosMock.onGet(TEST_FULL_PATH).reply(200, TEST_CONTENT);
2020-04-08 14:13:33 +05:30
});
afterEach(() => {
wrapper.destroy();
2020-10-24 23:57:45 +05:30
wrapper = null;
axiosMock.restore();
2020-04-08 14:13:33 +05:30
});
2020-10-24 23:57:45 +05:30
describe('with not loaded blob', () => {
2020-11-24 15:15:51 +05:30
beforeEach(() => {
2020-10-24 23:57:45 +05:30
createComponent();
2020-04-08 14:13:33 +05:30
});
2020-10-24 23:57:45 +05:30
it('shows blob header', () => {
expect(findHeader().props()).toMatchObject({
value: TEST_BLOB.path,
});
expect(findHeader().attributes('id')).toBe(`${TEST_ID}_file_path`);
2020-04-22 19:07:51 +05:30
});
2020-10-24 23:57:45 +05:30
it('emits delete when deleted', () => {
expect(wrapper.emitted().delete).toBeUndefined();
findHeader().vm.$emit('delete');
expect(wrapper.emitted().delete).toHaveLength(1);
2020-07-28 23:09:34 +05:30
});
2020-10-24 23:57:45 +05:30
it('emits update when path changes', () => {
const newPath = 'new/path.md';
findHeader().vm.$emit('input', newPath);
expect(getLastUpdatedArgs()).toEqual({ path: newPath });
2020-04-22 19:07:51 +05:30
});
2020-10-24 23:57:45 +05:30
it('emits update when content is loaded', async () => {
await waitForPromises();
2020-04-22 19:07:51 +05:30
2020-10-24 23:57:45 +05:30
expect(getLastUpdatedArgs()).toEqual({ content: TEST_CONTENT });
2020-04-22 19:07:51 +05:30
});
2020-10-24 23:57:45 +05:30
});
2020-04-22 19:07:51 +05:30
2020-11-24 15:15:51 +05:30
describe('with unloaded blob and JSON content', () => {
beforeEach(() => {
axiosMock.onGet(TEST_FULL_PATH).reply(200, TEST_JSON_CONTENT);
createComponent();
});
// This checks against this issue https://gitlab.com/gitlab-org/gitlab/-/issues/241199
it('emits raw content', async () => {
await waitForPromises();
expect(getLastUpdatedArgs()).toEqual({ content: TEST_JSON_CONTENT });
});
});
2020-10-24 23:57:45 +05:30
describe('with error', () => {
beforeEach(() => {
axiosMock.reset();
axiosMock.onGet(TEST_FULL_PATH).replyOnce(500);
createComponent();
2020-04-22 19:07:51 +05:30
});
2020-10-24 23:57:45 +05:30
it('should call flash', async () => {
await waitForPromises();
2020-04-22 19:07:51 +05:30
2020-10-24 23:57:45 +05:30
expect(createFlash).toHaveBeenCalledWith(
"Can't fetch content for the blob: Error: Request failed with status code 500",
);
});
});
2020-07-28 23:09:34 +05:30
2020-10-24 23:57:45 +05:30
describe('with loaded blob', () => {
beforeEach(() => {
createComponent({ blob: TEST_BLOB_LOADED });
});
2020-07-28 23:09:34 +05:30
2020-10-24 23:57:45 +05:30
it('matches snapshot', () => {
expect(wrapper.element).toMatchSnapshot();
});
2020-07-28 23:09:34 +05:30
2020-10-24 23:57:45 +05:30
it('does not make API request', () => {
expect(axiosMock.history.get).toHaveLength(0);
});
});
2020-07-28 23:09:34 +05:30
2020-10-24 23:57:45 +05:30
describe.each`
props | showLoading | showContent
${{ blob: TEST_BLOB, canDelete: true, showDelete: true }} | ${true} | ${false}
${{ blob: TEST_BLOB, canDelete: false, showDelete: false }} | ${true} | ${false}
${{ blob: TEST_BLOB_LOADED }} | ${false} | ${true}
`('with $props', ({ props, showLoading, showContent }) => {
beforeEach(() => {
createComponent(props);
});
2020-07-28 23:09:34 +05:30
2020-10-24 23:57:45 +05:30
it('shows blob header', () => {
const { canDelete = true, showDelete = false } = props;
expect(findHeader().props()).toMatchObject({
canDelete,
showDelete,
2020-07-28 23:09:34 +05:30
});
2020-10-24 23:57:45 +05:30
});
2020-07-28 23:09:34 +05:30
2020-10-24 23:57:45 +05:30
it(`handles loading icon (show=${showLoading})`, () => {
expect(findLoadingIcon().exists()).toBe(showLoading);
});
2020-07-28 23:09:34 +05:30
2020-10-24 23:57:45 +05:30
it(`handles content (show=${showContent})`, () => {
expect(findContent().exists()).toBe(showContent);
if (showContent) {
expect(findContent().props()).toEqual({
value: TEST_BLOB_LOADED.content,
fileGlobalId: TEST_BLOB_LOADED.id,
fileName: TEST_BLOB_LOADED.path,
2020-07-28 23:09:34 +05:30
});
2020-10-24 23:57:45 +05:30
}
2020-04-08 14:13:33 +05:30
});
});
});