1 files changed, 76 insertions, 3 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
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();
   });