132 lines
3.9 KiB
JavaScript
132 lines
3.9 KiB
JavaScript
import { GlButton, GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
|
|
import { shallowMount } from '@vue/test-utils';
|
|
import Success from '~/static_site_editor/pages/success.vue';
|
|
import { HOME_ROUTE } from '~/static_site_editor/router/constants';
|
|
import { savedContentMeta, returnUrl, sourcePath } from '../mock_data';
|
|
|
|
describe('~/static_site_editor/pages/success.vue', () => {
|
|
const mergeRequestsIllustrationPath = 'illustrations/merge_requests.svg';
|
|
let wrapper;
|
|
let router;
|
|
|
|
const buildRouter = () => {
|
|
router = {
|
|
push: jest.fn(),
|
|
};
|
|
};
|
|
|
|
const buildWrapper = (data = {}, appData = {}) => {
|
|
wrapper = shallowMount(Success, {
|
|
mocks: {
|
|
$router: router,
|
|
},
|
|
stubs: {
|
|
GlButton,
|
|
GlEmptyState,
|
|
GlLoadingIcon,
|
|
},
|
|
propsData: {
|
|
mergeRequestsIllustrationPath,
|
|
},
|
|
data() {
|
|
return {
|
|
savedContentMeta,
|
|
appData: {
|
|
returnUrl,
|
|
sourcePath,
|
|
hasSubmittedChanges: true,
|
|
...appData,
|
|
},
|
|
...data,
|
|
};
|
|
},
|
|
});
|
|
};
|
|
|
|
const findReturnUrlButton = () => wrapper.find(GlButton);
|
|
const findEmptyState = () => wrapper.find(GlEmptyState);
|
|
const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
|
|
|
|
beforeEach(() => {
|
|
buildRouter();
|
|
});
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
wrapper = null;
|
|
});
|
|
|
|
describe('when savedContentMeta is valid', () => {
|
|
it('renders empty state with a link to the created merge request', () => {
|
|
buildWrapper();
|
|
|
|
expect(findEmptyState().exists()).toBe(true);
|
|
expect(findEmptyState().props()).toMatchObject({
|
|
primaryButtonText: 'View merge request',
|
|
primaryButtonLink: savedContentMeta.mergeRequest.url,
|
|
title: 'Your merge request has been created',
|
|
svgPath: mergeRequestsIllustrationPath,
|
|
svgHeight: 146,
|
|
});
|
|
});
|
|
|
|
it('displays merge request instructions in the empty state', () => {
|
|
buildWrapper();
|
|
|
|
expect(findEmptyState().text()).toContain(
|
|
'To see your changes live you will need to do the following things:',
|
|
);
|
|
expect(findEmptyState().text()).toContain('1. Add a clear title to describe the change.');
|
|
expect(findEmptyState().text()).toContain(
|
|
'2. Add a description to explain why the change is being made.',
|
|
);
|
|
expect(findEmptyState().text()).toContain(
|
|
'3. Assign a person to review and accept the merge request.',
|
|
);
|
|
});
|
|
|
|
it('displays return to site button', () => {
|
|
buildWrapper();
|
|
|
|
expect(findReturnUrlButton().text()).toBe('Return to site');
|
|
expect(findReturnUrlButton().attributes().href).toBe(returnUrl);
|
|
});
|
|
|
|
it('displays source path', () => {
|
|
buildWrapper();
|
|
|
|
expect(wrapper.text()).toContain(`Update ${sourcePath} file`);
|
|
});
|
|
});
|
|
|
|
describe('when savedContentMeta is invalid', () => {
|
|
it('renders empty state with a loader', () => {
|
|
buildWrapper({ savedContentMeta: null });
|
|
|
|
expect(findEmptyState().exists()).toBe(true);
|
|
expect(findEmptyState().props()).toMatchObject({
|
|
title: 'Creating your merge request',
|
|
svgPath: mergeRequestsIllustrationPath,
|
|
});
|
|
expect(findLoadingIcon().exists()).toBe(true);
|
|
});
|
|
|
|
it('displays helper info in the empty state', () => {
|
|
buildWrapper({ savedContentMeta: null });
|
|
|
|
expect(findEmptyState().text()).toContain(
|
|
'You can set an assignee to get your changes reviewed and deployed once your merge request is created',
|
|
);
|
|
expect(findEmptyState().text()).toContain(
|
|
'A link to view the merge request will appear once ready',
|
|
);
|
|
});
|
|
|
|
it('redirects to the HOME route when content has not been submitted', () => {
|
|
buildWrapper({ savedContentMeta: null }, { hasSubmittedChanges: false });
|
|
|
|
expect(router.push).toHaveBeenCalledWith(HOME_ROUTE);
|
|
});
|
|
});
|
|
});
|