diff options
Diffstat (limited to 'spec/frontend/static_site_editor/components/static_site_editor_spec.js')
-rw-r--r-- | spec/frontend/static_site_editor/components/static_site_editor_spec.js | 247 |
1 files changed, 0 insertions, 247 deletions
diff --git a/spec/frontend/static_site_editor/components/static_site_editor_spec.js b/spec/frontend/static_site_editor/components/static_site_editor_spec.js deleted file mode 100644 index 5d4e3758557..00000000000 --- a/spec/frontend/static_site_editor/components/static_site_editor_spec.js +++ /dev/null @@ -1,247 +0,0 @@ -import Vuex from 'vuex'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; -import { GlSkeletonLoader } from '@gitlab/ui'; - -import createState from '~/static_site_editor/store/state'; - -import StaticSiteEditor from '~/static_site_editor/components/static_site_editor.vue'; -import EditArea from '~/static_site_editor/components/edit_area.vue'; -import EditHeader from '~/static_site_editor/components/edit_header.vue'; -import InvalidContentMessage from '~/static_site_editor/components/invalid_content_message.vue'; -import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue'; -import SubmitChangesError from '~/static_site_editor/components/submit_changes_error.vue'; -import SavedChangesMessage from '~/static_site_editor/components/saved_changes_message.vue'; - -import { - returnUrl, - sourceContent, - sourceContentTitle, - savedContentMeta, - submitChangesError, -} from '../mock_data'; - -const localVue = createLocalVue(); - -localVue.use(Vuex); - -describe('StaticSiteEditor', () => { - let wrapper; - let store; - let loadContentActionMock; - let setContentActionMock; - let submitChangesActionMock; - let dismissSubmitChangesErrorActionMock; - - const buildStore = ({ initialState, getters } = {}) => { - loadContentActionMock = jest.fn(); - setContentActionMock = jest.fn(); - submitChangesActionMock = jest.fn(); - dismissSubmitChangesErrorActionMock = jest.fn(); - - store = new Vuex.Store({ - state: createState({ - isSupportedContent: true, - ...initialState, - }), - getters: { - contentChanged: () => false, - ...getters, - }, - actions: { - loadContent: loadContentActionMock, - setContent: setContentActionMock, - submitChanges: submitChangesActionMock, - dismissSubmitChangesError: dismissSubmitChangesErrorActionMock, - }, - }); - }; - const buildContentLoadedStore = ({ initialState, getters } = {}) => { - buildStore({ - initialState: { - isContentLoaded: true, - ...initialState, - }, - getters: { - ...getters, - }, - }); - }; - - const buildWrapper = () => { - wrapper = shallowMount(StaticSiteEditor, { - localVue, - store, - }); - }; - - const findEditArea = () => wrapper.find(EditArea); - const findEditHeader = () => wrapper.find(EditHeader); - const findInvalidContentMessage = () => wrapper.find(InvalidContentMessage); - const findPublishToolbar = () => wrapper.find(PublishToolbar); - const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader); - const findSubmitChangesError = () => wrapper.find(SubmitChangesError); - const findSavedChangesMessage = () => wrapper.find(SavedChangesMessage); - - beforeEach(() => { - buildStore(); - buildWrapper(); - }); - - afterEach(() => { - 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', () => { - it('does not render edit area', () => { - expect(findEditArea().exists()).toBe(false); - }); - - it('does not render edit header', () => { - expect(findEditHeader().exists()).toBe(false); - }); - - it('does not render toolbar', () => { - expect(findPublishToolbar().exists()).toBe(false); - }); - - it('does not render saved changes message', () => { - expect(findSavedChangesMessage().exists()).toBe(false); - }); - }); - - describe('when content is loaded', () => { - const content = sourceContent; - const title = sourceContentTitle; - - beforeEach(() => { - buildContentLoadedStore({ initialState: { content, title } }); - buildWrapper(); - }); - - it('renders the edit area', () => { - expect(findEditArea().exists()).toBe(true); - }); - - it('renders the edit header', () => { - expect(findEditHeader().exists()).toBe(true); - }); - - it('does not render skeleton loader', () => { - expect(findSkeletonLoader().exists()).toBe(false); - }); - - it('passes page content to edit area', () => { - expect(findEditArea().props('value')).toBe(content); - }); - - it('passes page title to edit header', () => { - expect(findEditHeader().props('title')).toBe(title); - }); - - it('renders toolbar', () => { - expect(findPublishToolbar().exists()).toBe(true); - }); - }); - - it('sets toolbar as saveable when content changes', () => { - buildContentLoadedStore({ - getters: { - contentChanged: () => true, - }, - }); - buildWrapper(); - - expect(findPublishToolbar().props('saveable')).toBe(true); - }); - - it('displays skeleton loader when loading content', () => { - buildStore({ initialState: { isLoadingContent: true } }); - buildWrapper(); - - expect(findSkeletonLoader().exists()).toBe(true); - }); - - it('does not display submit changes error when an error does not exist', () => { - buildContentLoadedStore(); - buildWrapper(); - - expect(findSubmitChangesError().exists()).toBe(false); - }); - - it('sets toolbar as saving when saving changes', () => { - buildContentLoadedStore({ - initialState: { - isSavingChanges: true, - }, - }); - buildWrapper(); - - expect(findPublishToolbar().props('savingChanges')).toBe(true); - }); - - it('displays invalid content message when content is not supported', () => { - buildStore({ initialState: { isSupportedContent: false } }); - buildWrapper(); - - expect(findInvalidContentMessage().exists()).toBe(true); - }); - - describe('when submitting changes fail', () => { - beforeEach(() => { - buildContentLoadedStore({ - initialState: { - submitChangesError, - }, - }); - buildWrapper(); - }); - - it('displays submit changes error message', () => { - expect(findSubmitChangesError().exists()).toBe(true); - }); - - it('dispatches submitChanges action when error message emits retry event', () => { - findSubmitChangesError().vm.$emit('retry'); - - expect(submitChangesActionMock).toHaveBeenCalled(); - }); - - it('dispatches dismissSubmitChangesError action when error message emits dismiss event', () => { - findSubmitChangesError().vm.$emit('dismiss'); - - expect(dismissSubmitChangesErrorActionMock).toHaveBeenCalled(); - }); - }); - - it('dispatches load content action', () => { - expect(loadContentActionMock).toHaveBeenCalled(); - }); - - it('dispatches setContent action when edit area emits input event', () => { - buildContentLoadedStore(); - buildWrapper(); - - findEditArea().vm.$emit('input', sourceContent); - - expect(setContentActionMock).toHaveBeenCalledWith(expect.anything(), sourceContent, undefined); - }); - - it('dispatches submitChanges action when toolbar emits submit event', () => { - buildContentLoadedStore(); - buildWrapper(); - findPublishToolbar().vm.$emit('submit'); - - expect(submitChangesActionMock).toHaveBeenCalled(); - }); -}); |