diff options
Diffstat (limited to 'spec/frontend/static_site_editor/components')
5 files changed, 162 insertions, 20 deletions
diff --git a/spec/frontend/static_site_editor/components/invalid_content_message_spec.js b/spec/frontend/static_site_editor/components/invalid_content_message_spec.js new file mode 100644 index 00000000000..7e699e9451c --- /dev/null +++ b/spec/frontend/static_site_editor/components/invalid_content_message_spec.js @@ -0,0 +1,23 @@ +import { shallowMount } from '@vue/test-utils'; + +import InvalidContentMessage from '~/static_site_editor/components/invalid_content_message.vue'; + +describe('~/static_site_editor/components/invalid_content_message.vue', () => { + let wrapper; + const findDocumentationButton = () => wrapper.find({ ref: 'documentationButton' }); + const documentationUrl = + 'https://gitlab.com/gitlab-org/project-templates/static-site-editor-middleman'; + + beforeEach(() => { + wrapper = shallowMount(InvalidContentMessage); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders the configuration button link', () => { + expect(findDocumentationButton().exists()).toBe(true); + expect(findDocumentationButton().attributes('href')).toBe(documentationUrl); + }); +}); diff --git a/spec/frontend/static_site_editor/components/publish_toolbar_spec.js b/spec/frontend/static_site_editor/components/publish_toolbar_spec.js index f00fc38430f..82eb12d4c4d 100644 --- a/spec/frontend/static_site_editor/components/publish_toolbar_spec.js +++ b/spec/frontend/static_site_editor/components/publish_toolbar_spec.js @@ -1,5 +1,5 @@ import { shallowMount } from '@vue/test-utils'; -import { GlNewButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlButton, GlLoadingIcon } from '@gitlab/ui'; import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue'; @@ -18,7 +18,7 @@ describe('Static Site Editor Toolbar', () => { }; const findReturnUrlLink = () => wrapper.find({ ref: 'returnUrlLink' }); - const findSaveChangesButton = () => wrapper.find(GlNewButton); + const findSaveChangesButton = () => wrapper.find(GlButton); const findLoadingIndicator = () => wrapper.find(GlLoadingIcon); beforeEach(() => { diff --git a/spec/frontend/static_site_editor/components/saved_changes_message_spec.js b/spec/frontend/static_site_editor/components/saved_changes_message_spec.js index 76ac7de5c32..659e9be59d2 100644 --- a/spec/frontend/static_site_editor/components/saved_changes_message_spec.js +++ b/spec/frontend/static_site_editor/components/saved_changes_message_spec.js @@ -1,22 +1,17 @@ import { shallowMount } from '@vue/test-utils'; + 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', () => { let wrapper; + const { branch, commit, mergeRequest } = savedContentMeta; const props = { - branch: { - label: '123-the-branch', - url: 'https://gitlab.com/gitlab-org/gitlab/-/tree/123-the-branch', - }, - 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', + branch, + commit, + mergeRequest, + returnUrl, }; const findReturnToSiteButton = () => wrapper.find({ ref: 'returnToSiteButton' }); const findMergeRequestButton = () => wrapper.find({ ref: 'mergeRequestButton' }); @@ -51,11 +46,14 @@ describe('~/static_site_editor/components/saved_changes_message.vue', () => { ${'branch'} | ${findBranchLink} | ${props.branch} ${'commit'} | ${findCommitLink} | ${props.commit} ${'merge request'} | ${findMergeRequestLink} | ${props.mergeRequest} - `('renders $desc link', ({ findEl, prop }) => { + `('renders $desc link', ({ desc, findEl, prop }) => { const el = findEl(); expect(el.exists()).toBe(true); - expect(el.attributes('href')).toBe(prop.url); expect(el.text()).toBe(prop.label); + + if (desc !== 'branch') { + expect(el.attributes('href')).toBe(prop.url); + } }); }); 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 index d427df9bd4b..5d4e3758557 100644 --- a/spec/frontend/static_site_editor/components/static_site_editor_spec.js +++ b/spec/frontend/static_site_editor/components/static_site_editor_spec.js @@ -1,6 +1,5 @@ import Vuex from 'vuex'; import { shallowMount, createLocalVue } from '@vue/test-utils'; - import { GlSkeletonLoader } from '@gitlab/ui'; import createState from '~/static_site_editor/store/state'; @@ -8,9 +7,18 @@ 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 { sourceContent, sourceContentTitle } from '../mock_data'; +import { + returnUrl, + sourceContent, + sourceContentTitle, + savedContentMeta, + submitChangesError, +} from '../mock_data'; const localVue = createLocalVue(); @@ -22,14 +30,19 @@ describe('StaticSiteEditor', () => { 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(initialState), + state: createState({ + isSupportedContent: true, + ...initialState, + }), getters: { contentChanged: () => false, ...getters, @@ -38,6 +51,7 @@ describe('StaticSiteEditor', () => { loadContent: loadContentActionMock, setContent: setContentActionMock, submitChanges: submitChangesActionMock, + dismissSubmitChangesError: dismissSubmitChangesErrorActionMock, }, }); }; @@ -62,8 +76,11 @@ describe('StaticSiteEditor', () => { 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(); @@ -74,6 +91,17 @@ describe('StaticSiteEditor', () => { 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); @@ -86,6 +114,10 @@ describe('StaticSiteEditor', () => { 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', () => { @@ -140,6 +172,13 @@ describe('StaticSiteEditor', () => { 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: { @@ -151,6 +190,40 @@ describe('StaticSiteEditor', () => { 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(); }); diff --git a/spec/frontend/static_site_editor/components/submit_changes_error_spec.js b/spec/frontend/static_site_editor/components/submit_changes_error_spec.js new file mode 100644 index 00000000000..7af3014b338 --- /dev/null +++ b/spec/frontend/static_site_editor/components/submit_changes_error_spec.js @@ -0,0 +1,48 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlButton, GlAlert } from '@gitlab/ui'; + +import SubmitChangesError from '~/static_site_editor/components/submit_changes_error.vue'; + +import { submitChangesError as error } from '../mock_data'; + +describe('Submit Changes Error', () => { + let wrapper; + + const buildWrapper = (propsData = {}) => { + wrapper = shallowMount(SubmitChangesError, { + propsData: { + ...propsData, + }, + stubs: { + GlAlert, + }, + }); + }; + + const findRetryButton = () => wrapper.find(GlButton); + const findAlert = () => wrapper.find(GlAlert); + + beforeEach(() => { + buildWrapper({ error }); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders error message', () => { + expect(findAlert().text()).toContain(error); + }); + + it('emits dismiss event when alert emits dismiss event', () => { + findAlert().vm.$emit('dismiss'); + + expect(wrapper.emitted('dismiss')).toHaveLength(1); + }); + + it('emits retry event when retry button is clicked', () => { + findRetryButton().vm.$emit('click'); + + expect(wrapper.emitted('retry')).toHaveLength(1); + }); +}); |