diff options
Diffstat (limited to 'spec/frontend/static_site_editor/pages/home_spec.js')
-rw-r--r-- | spec/frontend/static_site_editor/pages/home_spec.js | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/spec/frontend/static_site_editor/pages/home_spec.js b/spec/frontend/static_site_editor/pages/home_spec.js new file mode 100644 index 00000000000..8c9c54f593e --- /dev/null +++ b/spec/frontend/static_site_editor/pages/home_spec.js @@ -0,0 +1,211 @@ +import Vuex from 'vuex'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import Home from '~/static_site_editor/pages/home.vue'; +import SkeletonLoader from '~/static_site_editor/components/skeleton_loader.vue'; +import EditArea from '~/static_site_editor/components/edit_area.vue'; +import InvalidContentMessage from '~/static_site_editor/components/invalid_content_message.vue'; +import SubmitChangesError from '~/static_site_editor/components/submit_changes_error.vue'; +import submitContentChangesMutation from '~/static_site_editor/graphql/mutations/submit_content_changes.mutation.graphql'; +import { SUCCESS_ROUTE } from '~/static_site_editor/router/constants'; + +import { + projectId as project, + returnUrl, + sourceContent as content, + sourceContentTitle as title, + sourcePath, + username, + savedContentMeta, + submitChangesError, +} from '../mock_data'; + +const localVue = createLocalVue(); + +localVue.use(Vuex); + +describe('static_site_editor/pages/home', () => { + let wrapper; + let store; + let $apollo; + let $router; + let mutateMock; + + const buildApollo = (queries = {}) => { + mutateMock = jest.fn(); + + $apollo = { + queries: { + sourceContent: { + loading: false, + }, + ...queries, + }, + mutate: mutateMock, + }; + }; + + const buildRouter = () => { + $router = { + push: jest.fn(), + }; + }; + + const buildWrapper = (data = {}) => { + wrapper = shallowMount(Home, { + localVue, + store, + mocks: { + $apollo, + $router, + }, + data() { + return { + appData: { isSupportedContent: true, returnUrl, project, username, sourcePath }, + sourceContent: { title, content }, + ...data, + }; + }, + }); + }; + + const findEditArea = () => wrapper.find(EditArea); + const findInvalidContentMessage = () => wrapper.find(InvalidContentMessage); + const findSkeletonLoader = () => wrapper.find(SkeletonLoader); + const findSubmitChangesError = () => wrapper.find(SubmitChangesError); + + beforeEach(() => { + buildApollo(); + buildRouter(); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + $apollo = null; + }); + + describe('when content is loaded', () => { + beforeEach(() => { + buildWrapper(); + }); + + it('renders edit area', () => { + expect(findEditArea().exists()).toBe(true); + }); + + it('provides source content, returnUrl, and isSavingChanges to the edit area', () => { + expect(findEditArea().props()).toMatchObject({ + title, + content, + returnUrl, + savingChanges: false, + }); + }); + }); + + it('does not render edit area when content is not loaded', () => { + buildWrapper({ sourceContent: null }); + + expect(findEditArea().exists()).toBe(false); + }); + + it('renders skeleton loader when content is not loading', () => { + buildApollo({ + sourceContent: { + loading: true, + }, + }); + buildWrapper(); + + expect(findSkeletonLoader().exists()).toBe(true); + }); + + it('does not render skeleton loader when content is not loading', () => { + buildApollo({ + sourceContent: { + loading: false, + }, + }); + buildWrapper(); + + expect(findSkeletonLoader().exists()).toBe(false); + }); + + it('displays invalid content message when content is not supported', () => { + buildWrapper({ appData: { isSupportedContent: false } }); + + expect(findInvalidContentMessage().exists()).toBe(true); + }); + + it('does not display invalid content message when content is supported', () => { + buildWrapper({ appData: { isSupportedContent: true } }); + + expect(findInvalidContentMessage().exists()).toBe(false); + }); + + describe('when submitting changes fails', () => { + beforeEach(() => { + mutateMock.mockRejectedValue(new Error(submitChangesError)); + + buildWrapper(); + findEditArea().vm.$emit('submit', { content }); + + return wrapper.vm.$nextTick(); + }); + + it('displays submit changes error message', () => { + expect(findSubmitChangesError().exists()).toBe(true); + }); + + it('retries submitting changes when retry button is clicked', () => { + findSubmitChangesError().vm.$emit('retry'); + + expect(mutateMock).toHaveBeenCalled(); + }); + + it('hides submit changes error message when dismiss button is clicked', () => { + findSubmitChangesError().vm.$emit('dismiss'); + + return wrapper.vm.$nextTick().then(() => { + expect(findSubmitChangesError().exists()).toBe(false); + }); + }); + }); + + it('does not display submit changes error when an error does not exist', () => { + buildWrapper(); + + expect(findSubmitChangesError().exists()).toBe(false); + }); + + describe('when submitting changes succeeds', () => { + const newContent = `new ${content}`; + + beforeEach(() => { + mutateMock.mockResolvedValueOnce({ data: { submitContentChanges: savedContentMeta } }); + + buildWrapper(); + findEditArea().vm.$emit('submit', { content: newContent }); + + return wrapper.vm.$nextTick(); + }); + + it('dispatches submitContentChanges mutation', () => { + expect(mutateMock).toHaveBeenCalledWith({ + mutation: submitContentChangesMutation, + variables: { + input: { + content: newContent, + project, + sourcePath, + username, + }, + }, + }); + }); + + it('transitions to the SUCCESS route', () => { + expect($router.push).toHaveBeenCalledWith(SUCCESS_ROUTE); + }); + }); +}); |