Commit 77f91333 authored by Paul Slaughter's avatar Paul Slaughter

Merge branch '212562-saved-content-meta' into 'master'

Added SavedChangesMessage instance and updated spec to use mock data

See merge request gitlab-org/gitlab!29430
parents 2f952919 c05e23bc
...@@ -4,6 +4,7 @@ import { GlSkeletonLoader } from '@gitlab/ui'; ...@@ -4,6 +4,7 @@ import { GlSkeletonLoader } from '@gitlab/ui';
import EditArea from './edit_area.vue'; import EditArea from './edit_area.vue';
import EditHeader from './edit_header.vue'; import EditHeader from './edit_header.vue';
import SavedChangesMessage from './saved_changes_message.vue';
import Toolbar from './publish_toolbar.vue'; import Toolbar from './publish_toolbar.vue';
import InvalidContentMessage from './invalid_content_message.vue'; import InvalidContentMessage from './invalid_content_message.vue';
import SubmitChangesError from './submit_changes_error.vue'; import SubmitChangesError from './submit_changes_error.vue';
...@@ -14,6 +15,7 @@ export default { ...@@ -14,6 +15,7 @@ export default {
EditHeader, EditHeader,
InvalidContentMessage, InvalidContentMessage,
GlSkeletonLoader, GlSkeletonLoader,
SavedChangesMessage,
Toolbar, Toolbar,
SubmitChangesError, SubmitChangesError,
}, },
...@@ -27,6 +29,7 @@ export default { ...@@ -27,6 +29,7 @@ export default {
'returnUrl', 'returnUrl',
'title', 'title',
'submitChangesError', 'submitChangesError',
'savedContentMeta',
]), ]),
...mapGetters(['contentChanged']), ...mapGetters(['contentChanged']),
}, },
...@@ -41,8 +44,18 @@ export default { ...@@ -41,8 +44,18 @@ export default {
}; };
</script> </script>
<template> <template>
<div class="d-flex justify-content-center h-100 pt-2"> <div class="d-flex justify-content-center h-100 pt-2">
<template v-if="isSupportedContent"> <!-- Success view -->
<saved-changes-message
v-if="savedContentMeta"
:branch="savedContentMeta.branch"
:commit="savedContentMeta.commit"
:merge-request="savedContentMeta.mergeRequest"
:return-url="returnUrl"
/>
<!-- Main view -->
<template v-else-if="isSupportedContent">
<div v-if="isLoadingContent" class="w-50 h-50"> <div v-if="isLoadingContent" class="w-50 h-50">
<gl-skeleton-loader :width="500" :height="102"> <gl-skeleton-loader :width="500" :height="102">
<rect width="500" height="16" rx="4" /> <rect width="500" height="16" rx="4" />
...@@ -75,6 +88,8 @@ export default { ...@@ -75,6 +88,8 @@ export default {
/> />
</div> </div>
</template> </template>
<!-- Error view -->
<invalid-content-message v-else class="w-75" /> <invalid-content-message v-else class="w-75" />
</div> </div>
</template> </template>
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import SavedChangesMessage from '~/static_site_editor/components/saved_changes_message.vue'; import SavedChangesMessage from '~/static_site_editor/components/saved_changes_message.vue';
import { returnUrl, savedContentMeta } from '../mock_data';
describe('~/static_site_editor/components/saved_changes_message.vue', () => { describe('~/static_site_editor/components/saved_changes_message.vue', () => {
let wrapper; let wrapper;
const { branch, commit, mergeRequest } = savedContentMeta;
const props = { const props = {
branch: { branch,
label: '123-the-branch', commit,
url: 'https://gitlab.com/gitlab-org/gitlab/-/tree/123-the-branch', mergeRequest,
}, returnUrl,
commit: {
label: 'a123',
url: 'https://gitlab.com/gitlab-org/gitlab/-/commit/a123',
},
mergeRequest: {
label: '123',
url: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/123',
},
returnUrl: 'https://www.the-static-site.com/post',
}; };
const findReturnToSiteButton = () => wrapper.find({ ref: 'returnToSiteButton' }); const findReturnToSiteButton = () => wrapper.find({ ref: 'returnToSiteButton' });
const findMergeRequestButton = () => wrapper.find({ ref: 'mergeRequestButton' }); const findMergeRequestButton = () => wrapper.find({ ref: 'mergeRequestButton' });
......
import Vuex from 'vuex'; import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils'; import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlSkeletonLoader } from '@gitlab/ui'; import { GlSkeletonLoader } from '@gitlab/ui';
import createState from '~/static_site_editor/store/state'; import createState from '~/static_site_editor/store/state';
...@@ -11,8 +10,15 @@ import EditHeader from '~/static_site_editor/components/edit_header.vue'; ...@@ -11,8 +10,15 @@ import EditHeader from '~/static_site_editor/components/edit_header.vue';
import InvalidContentMessage from '~/static_site_editor/components/invalid_content_message.vue'; import InvalidContentMessage from '~/static_site_editor/components/invalid_content_message.vue';
import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue'; import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
import SubmitChangesError from '~/static_site_editor/components/submit_changes_error.vue'; import SubmitChangesError from '~/static_site_editor/components/submit_changes_error.vue';
import SavedChangesMessage from '~/static_site_editor/components/saved_changes_message.vue';
import { sourceContent, sourceContentTitle, submitChangesError } from '../mock_data'; import {
returnUrl,
sourceContent,
sourceContentTitle,
savedContentMeta,
submitChangesError,
} from '../mock_data';
const localVue = createLocalVue(); const localVue = createLocalVue();
...@@ -74,6 +80,7 @@ describe('StaticSiteEditor', () => { ...@@ -74,6 +80,7 @@ describe('StaticSiteEditor', () => {
const findPublishToolbar = () => wrapper.find(PublishToolbar); const findPublishToolbar = () => wrapper.find(PublishToolbar);
const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader); const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
const findSubmitChangesError = () => wrapper.find(SubmitChangesError); const findSubmitChangesError = () => wrapper.find(SubmitChangesError);
const findSavedChangesMessage = () => wrapper.find(SavedChangesMessage);
beforeEach(() => { beforeEach(() => {
buildStore(); buildStore();
...@@ -84,6 +91,17 @@ describe('StaticSiteEditor', () => { ...@@ -84,6 +91,17 @@ describe('StaticSiteEditor', () => {
wrapper.destroy(); wrapper.destroy();
}); });
it('renders the saved changes message when changes are submitted successfully', () => {
buildStore({ initialState: { returnUrl, savedContentMeta } });
buildWrapper();
expect(findSavedChangesMessage().exists()).toBe(true);
expect(findSavedChangesMessage().props()).toEqual({
returnUrl,
...savedContentMeta,
});
});
describe('when content is not loaded', () => { describe('when content is not loaded', () => {
it('does not render edit area', () => { it('does not render edit area', () => {
expect(findEditArea().exists()).toBe(false); expect(findEditArea().exists()).toBe(false);
...@@ -96,6 +114,10 @@ describe('StaticSiteEditor', () => { ...@@ -96,6 +114,10 @@ describe('StaticSiteEditor', () => {
it('does not render toolbar', () => { it('does not render toolbar', () => {
expect(findPublishToolbar().exists()).toBe(false); expect(findPublishToolbar().exists()).toBe(false);
}); });
it('does not render saved changes message', () => {
expect(findSavedChangesMessage().exists()).toBe(false);
});
}); });
describe('when content is loaded', () => { describe('when content is loaded', () => {
......
...@@ -21,10 +21,10 @@ export const sourcePath = 'foobar.md.html'; ...@@ -21,10 +21,10 @@ export const sourcePath = 'foobar.md.html';
export const savedContentMeta = { export const savedContentMeta = {
branch: { branch: {
label: 'foobar', label: 'foobar',
url: 'foobar/-/tree/foorbar', url: 'foobar/-/tree/foobar',
}, },
commit: { commit: {
label: 'c1461b08 ', label: 'c1461b08',
url: 'foobar/-/c1461b08', url: 'foobar/-/c1461b08',
}, },
mergeRequest: { mergeRequest: {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment