Add latest changes from gitlab-org/gitlab@master

5 files changed, 169 insertions, 53 deletions

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 55e30825621..0edc3f4c920 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 } from '@gitlab/ui';
+import { GlNewButton, GlLoadingIcon } from '@gitlab/ui';
 
 import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
 
@@ -16,6 +16,7 @@ describe('Static Site Editor Toolbar', () => {
   };
 
   const findSaveChangesButton = () => wrapper.find(GlNewButton);
+  const findLoadingIndicator = () => wrapper.find(GlLoadingIcon);
 
   beforeEach(() => {
     buildWrapper();
@@ -33,6 +34,10 @@ describe('Static Site Editor Toolbar', () => {
     expect(findSaveChangesButton().attributes('disabled')).toBe('true');
   });
 
+  it('does not display saving changes indicator', () => {
+    expect(findLoadingIndicator().classes()).toContain('invisible');
+  });
+
   describe('when saveable', () => {
     it('enables Submit Changes button', () => {
       buildWrapper({ saveable: true });
@@ -40,4 +45,26 @@ describe('Static Site Editor Toolbar', () => {
       expect(findSaveChangesButton().attributes('disabled')).toBeFalsy();
     });
   });
+
+  describe('when saving changes', () => {
+    beforeEach(() => {
+      buildWrapper({ saveable: true, savingChanges: true });
+    });
+
+    it('disables Submit Changes button', () => {
+      expect(findSaveChangesButton().attributes('disabled')).toBe('true');
+    });
+
+    it('displays saving changes indicator', () => {
+      expect(findLoadingIndicator().classes()).not.toContain('invisible');
+    });
+  });
+
+  it('emits submit event when submit button is clicked', () => {
+    buildWrapper({ saveable: true });
+
+    findSaveChangesButton().vm.$emit('click');
+
+    expect(wrapper.emitted('submit')).toHaveLength(1);
+  });
 });
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 ec984102250..a40f8edbeb2 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
@@ -9,6 +9,8 @@ import StaticSiteEditor from '~/static_site_editor/components/static_site_editor
 import EditArea from '~/static_site_editor/components/edit_area.vue';
 import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
 
+import { sourceContent } from '../mock_data';
+
 const localVue = createLocalVue();
 
 localVue.use(Vuex);
@@ -18,10 +20,12 @@ describe('StaticSiteEditor', () => {
   let store;
   let loadContentActionMock;
   let setContentActionMock;
+  let submitChangesActionMock;
 
   const buildStore = ({ initialState, getters } = {}) => {
     loadContentActionMock = jest.fn();
     setContentActionMock = jest.fn();
+    submitChangesActionMock = jest.fn();
 
     store = new Vuex.Store({
       state: createState(initialState),
@@ -33,6 +37,7 @@ describe('StaticSiteEditor', () => {
       actions: {
         loadContent: loadContentActionMock,
         setContent: setContentActionMock,
+        submitChanges: submitChangesActionMock,
       },
     });
   };
@@ -119,18 +124,35 @@ describe('StaticSiteEditor', () => {
     expect(findSkeletonLoader().exists()).toBe(true);
   });
 
+  it('sets toolbar as saving when saving changes', () => {
+    buildContentLoadedStore({
+      initialState: {
+        isSavingChanges: true,
+      },
+    });
+    buildWrapper();
+
+    expect(findPublishToolbar().props('savingChanges')).toBe(true);
+  });
+
   it('dispatches load content action', () => {
     expect(loadContentActionMock).toHaveBeenCalled();
   });
 
   it('dispatches setContent action when edit area emits input event', () => {
-    const content = 'new content';
-
     buildContentLoadedStore();
     buildWrapper();
 
-    findEditArea().vm.$emit('input', content);
+    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(setContentActionMock).toHaveBeenCalledWith(expect.anything(), content, undefined);
+    expect(submitChangesActionMock).toHaveBeenCalled();
   });
 });
diff --git a/spec/frontend/static_site_editor/mock_data.js b/spec/frontend/static_site_editor/mock_data.js
index 0b2a69420d8..9e1c14515e6 100644
--- a/spec/frontend/static_site_editor/mock_data.js
+++ b/spec/frontend/static_site_editor/mock_data.js
@@ -14,5 +14,23 @@ twitter_image: '/images/tweets/handbook-gitlab.png'
 
 export const sourceContentTitle = 'Handbook';
 
+export const username = 'gitlabuser';
 export const projectId = '123456';
 export const sourcePath = 'foobar.md.html';
+
+export const savedContentMeta = {
+  branch: {
+    label: 'foobar',
+    url: 'foobar/-/tree/foorbar',
+  },
+  commit: {
+    label: 'c1461b08 ',
+    url: 'foobar/-/c1461b08',
+  },
+  mergeRequest: {
+    label: '123',
+    url: 'foobar/-/merge_requests/123',
+  },
+};
+
+export const submitChangesError = 'Could not save changes';
diff --git a/spec/frontend/static_site_editor/store/actions_spec.js b/spec/frontend/static_site_editor/store/actions_spec.js
index 4ad1e798ccd..a9c039517b7 100644
--- a/spec/frontend/static_site_editor/store/actions_spec.js
+++ b/spec/frontend/static_site_editor/store/actions_spec.js
@@ -3,18 +3,23 @@ import createState from '~/static_site_editor/store/state';
 import * as actions from '~/static_site_editor/store/actions';
 import * as mutationTypes from '~/static_site_editor/store/mutation_types';
 import loadSourceContent from '~/static_site_editor/services/load_source_content';
+import submitContentChanges from '~/static_site_editor/services/submit_content_changes';
 
 import createFlash from '~/flash';
 
 import {
+  username,
   projectId,
   sourcePath,
   sourceContentTitle as title,
   sourceContent as content,
+  savedContentMeta,
+  submitChangesError,
 } from '../mock_data';
 
 jest.mock('~/flash');
 jest.mock('~/static_site_editor/services/load_source_content', () => jest.fn());
+jest.mock('~/static_site_editor/services/submit_content_changes', () => jest.fn());
 
 describe('Static Site Editor Store actions', () => {
   let state;
@@ -84,4 +89,59 @@ describe('Static Site Editor Store actions', () => {
       ]);
     });
   });
+
+  describe('submitChanges', () => {
+    describe('on success', () => {
+      beforeEach(() => {
+        state = createState({
+          projectId,
+          content,
+          username,
+          sourcePath,
+        });
+        submitContentChanges.mockResolvedValueOnce(savedContentMeta);
+      });
+
+      it('commits submitChangesSuccess mutation', () => {
+        testAction(
+          actions.submitChanges,
+          null,
+          state,
+          [
+            { type: mutationTypes.SUBMIT_CHANGES },
+            { type: mutationTypes.SUBMIT_CHANGES_SUCCESS, payload: savedContentMeta },
+          ],
+          [],
+        );
+
+        expect(submitContentChanges).toHaveBeenCalledWith({
+          username,
+          projectId,
+          content,
+          sourcePath,
+        });
+      });
+    });
+
+    describe('on error', () => {
+      const expectedMutations = [
+        { type: mutationTypes.SUBMIT_CHANGES },
+        { type: mutationTypes.SUBMIT_CHANGES_ERROR },
+      ];
+
+      beforeEach(() => {
+        submitContentChanges.mockRejectedValueOnce(new Error(submitChangesError));
+      });
+
+      it('dispatches receiveContentError', () => {
+        testAction(actions.submitChanges, null, state, expectedMutations);
+      });
+
+      it('displays flash communicating error', () => {
+        return testAction(actions.submitChanges, null, state, expectedMutations).then(() => {
+          expect(createFlash).toHaveBeenCalledWith(submitChangesError);
+        });
+      });
+    });
+  });
 });
diff --git a/spec/frontend/static_site_editor/store/mutations_spec.js b/spec/frontend/static_site_editor/store/mutations_spec.js
index db3a1081af5..1fd687eed4a 100644
--- a/spec/frontend/static_site_editor/store/mutations_spec.js
+++ b/spec/frontend/static_site_editor/store/mutations_spec.js
@@ -1,61 +1,50 @@
 import createState from '~/static_site_editor/store/state';
 import mutations from '~/static_site_editor/store/mutations';
 import * as types from '~/static_site_editor/store/mutation_types';
-import { sourceContentTitle as title, sourceContent as content } from '../mock_data';
+import {
+  sourceContentTitle as title,
+  sourceContent as content,
+  savedContentMeta,
+} from '../mock_data';
 
 describe('Static Site Editor Store mutations', () => {
   let state;
+  const contentLoadedPayload = { title, content };
 
   beforeEach(() => {
     state = createState();
   });
 
-  describe('loadContent', () => {
-    beforeEach(() => {
-      mutations[types.LOAD_CONTENT](state);
-    });
-
-    it('sets isLoadingContent to true', () => {
-      expect(state.isLoadingContent).toBe(true);
-    });
-  });
-
-  describe('receiveContentSuccess', () => {
-    const payload = { title, content };
-
-    beforeEach(() => {
-      mutations[types.RECEIVE_CONTENT_SUCCESS](state, payload);
-    });
-
-    it('sets current state to LOADING', () => {
-      expect(state.isLoadingContent).toBe(false);
-    });
-
-    it('sets title', () => {
-      expect(state.title).toBe(payload.title);
-    });
-
-    it('sets originalContent and content', () => {
-      expect(state.content).toBe(payload.content);
-      expect(state.originalContent).toBe(payload.content);
-    });
-  });
-
-  describe('receiveContentError', () => {
-    beforeEach(() => {
-      mutations[types.RECEIVE_CONTENT_ERROR](state);
-    });
-
-    it('sets current state to LOADING_ERROR', () => {
-      expect(state.isLoadingContent).toBe(false);
-    });
-  });
-
-  describe('setContent', () => {
-    it('sets content', () => {
-      mutations[types.SET_CONTENT](state, content);
-
-      expect(state.content).toBe(content);
-    });
+  it.each`
+    mutation                         | stateProperty         | payload                 | expectedValue
+    ${types.LOAD_CONTENT}            | ${'isLoadingContent'} | ${undefined}            | ${true}
+    ${types.RECEIVE_CONTENT_SUCCESS} | ${'isLoadingContent'} | ${contentLoadedPayload} | ${false}
+    ${types.RECEIVE_CONTENT_SUCCESS} | ${'title'}            | ${contentLoadedPayload} | ${title}
+    ${types.RECEIVE_CONTENT_SUCCESS} | ${'content'}          | ${contentLoadedPayload} | ${content}
+    ${types.RECEIVE_CONTENT_SUCCESS} | ${'originalContent'}  | ${contentLoadedPayload} | ${content}
+    ${types.RECEIVE_CONTENT_ERROR}   | ${'isLoadingContent'} | ${undefined}            | ${false}
+    ${types.SET_CONTENT}             | ${'content'}          | ${content}              | ${content}
+    ${types.SUBMIT_CHANGES}          | ${'isSavingChanges'}  | ${undefined}            | ${true}
+    ${types.SUBMIT_CHANGES_SUCCESS}  | ${'savedContentMeta'} | ${savedContentMeta}     | ${savedContentMeta}
+    ${types.SUBMIT_CHANGES_SUCCESS}  | ${'isSavingChanges'}  | ${savedContentMeta}     | ${false}
+    ${types.SUBMIT_CHANGES_ERROR}    | ${'isSavingChanges'}  | ${undefined}            | ${false}
+  `(
+    '$mutation sets $stateProperty to $expectedValue',
+    ({ mutation, stateProperty, payload, expectedValue }) => {
+      mutations[mutation](state, payload);
+      expect(state[stateProperty]).toBe(expectedValue);
+    },
+  );
+
+  it(`${types.SUBMIT_CHANGES_SUCCESS} sets originalContent to content current value`, () => {
+    const editedContent = `${content} plus something else`;
+
+    state = createState({
+      originalContent: content,
+      content: editedContent,
+    });
+    mutations[types.SUBMIT_CHANGES_SUCCESS](state);
+
+    expect(state.originalContent).toBe(state.content);
   });
 });