Add latest changes from gitlab-org/gitlab@master

5 files changed, 135 insertions, 8 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
new file mode 100644
index 00000000000..55e30825621
--- /dev/null
+++ b/spec/frontend/static_site_editor/components/publish_toolbar_spec.js
@@ -0,0 +1,43 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlNewButton } from '@gitlab/ui';
+
+import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
+
+describe('Static Site Editor Toolbar', () => {
+  let wrapper;
+
+  const buildWrapper = (propsData = {}) => {
+    wrapper = shallowMount(PublishToolbar, {
+      propsData: {
+        saveable: false,
+        ...propsData,
+      },
+    });
+  };
+
+  const findSaveChangesButton = () => wrapper.find(GlNewButton);
+
+  beforeEach(() => {
+    buildWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders Submit Changes button', () => {
+    expect(findSaveChangesButton().exists()).toBe(true);
+  });
+
+  it('disables Submit Changes button', () => {
+    expect(findSaveChangesButton().attributes('disabled')).toBe('true');
+  });
+
+  describe('when saveable', () => {
+    it('enables Submit Changes button', () => {
+      buildWrapper({ saveable: true });
+
+      expect(findSaveChangesButton().attributes('disabled')).toBeFalsy();
+    });
+  });
+});
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 cde95d0a21e..ec984102250 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
@@ -7,6 +7,7 @@ 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 PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
 
 const localVue = createLocalVue();
 
@@ -16,18 +17,31 @@ describe('StaticSiteEditor', () => {
   let wrapper;
   let store;
   let loadContentActionMock;
+  let setContentActionMock;
 
   const buildStore = ({ initialState, getters } = {}) => {
     loadContentActionMock = jest.fn();
+    setContentActionMock = jest.fn();
 
     store = new Vuex.Store({
       state: createState(initialState),
       getters: {
         isContentLoaded: () => false,
+        contentChanged: () => false,
         ...getters,
       },
       actions: {
         loadContent: loadContentActionMock,
+        setContent: setContentActionMock,
+      },
+    });
+  };
+  const buildContentLoadedStore = ({ initialState, getters } = {}) => {
+    buildStore({
+      initialState,
+      getters: {
+        isContentLoaded: () => true,
+        ...getters,
       },
     });
   };
@@ -40,6 +54,8 @@ describe('StaticSiteEditor', () => {
   };
 
   const findEditArea = () => wrapper.find(EditArea);
+  const findPublishToolbar = () => wrapper.find(PublishToolbar);
+  const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
 
   beforeEach(() => {
     buildStore();
@@ -54,6 +70,10 @@ describe('StaticSiteEditor', () => {
     it('does not render edit area', () => {
       expect(findEditArea().exists()).toBe(false);
     });
+
+    it('does not render toolbar', () => {
+      expect(findPublishToolbar().exists()).toBe(false);
+    });
   });
 
   describe('when content is loaded', () => {
@@ -68,19 +88,49 @@ describe('StaticSiteEditor', () => {
       expect(findEditArea().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('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 while loading content', () => {
+  it('displays skeleton loader when loading content', () => {
     buildStore({ initialState: { isLoadingContent: true } });
     buildWrapper();
 
-    expect(wrapper.find(GlSkeletonLoader).exists()).toBe(true);
+    expect(findSkeletonLoader().exists()).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);
+
+    expect(setContentActionMock).toHaveBeenCalledWith(expect.anything(), content, undefined);
+  });
 });
diff --git a/spec/frontend/static_site_editor/store/actions_spec.js b/spec/frontend/static_site_editor/store/actions_spec.js
index 98d7d0d2c2d..4ad1e798ccd 100644
--- a/spec/frontend/static_site_editor/store/actions_spec.js
+++ b/spec/frontend/static_site_editor/store/actions_spec.js
@@ -73,4 +73,15 @@ describe('Static Site Editor Store actions', () => {
       });
     });
   });
+
+  describe('setContent', () => {
+    it('commits setContent mutation', () => {
+      testAction(actions.setContent, content, state, [
+        {
+          type: mutationTypes.SET_CONTENT,
+          payload: content,
+        },
+      ]);
+    });
+  });
 });
diff --git a/spec/frontend/static_site_editor/store/getters_spec.js b/spec/frontend/static_site_editor/store/getters_spec.js
index 8800216f3b0..1b482db9366 100644
--- a/spec/frontend/static_site_editor/store/getters_spec.js
+++ b/spec/frontend/static_site_editor/store/getters_spec.js
@@ -1,15 +1,29 @@
 import createState from '~/static_site_editor/store/state';
-import { isContentLoaded } from '~/static_site_editor/store/getters';
+import { isContentLoaded, contentChanged } from '~/static_site_editor/store/getters';
 import { sourceContent as content } from '../mock_data';
 
 describe('Static Site Editor Store getters', () => {
   describe('isContentLoaded', () => {
-    it('returns true when content is not empty', () => {
-      expect(isContentLoaded(createState({ content }))).toBe(true);
+    it('returns true when originalContent is not empty', () => {
+      expect(isContentLoaded(createState({ originalContent: content }))).toBe(true);
     });
 
-    it('returns false when content is empty', () => {
-      expect(isContentLoaded(createState({ content: '' }))).toBe(false);
+    it('returns false when originalContent is empty', () => {
+      expect(isContentLoaded(createState({ originalContent: '' }))).toBe(false);
+    });
+  });
+
+  describe('contentChanged', () => {
+    it('returns true when content and originalContent are different', () => {
+      const state = createState({ content, originalContent: 'something else' });
+
+      expect(contentChanged(state)).toBe(true);
+    });
+
+    it('returns false when content and originalContent are the same', () => {
+      const state = createState({ content, originalContent: content });
+
+      expect(contentChanged(state)).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/static_site_editor/store/mutations_spec.js b/spec/frontend/static_site_editor/store/mutations_spec.js
index c7055fbb2f0..db3a1081af5 100644
--- a/spec/frontend/static_site_editor/store/mutations_spec.js
+++ b/spec/frontend/static_site_editor/store/mutations_spec.js
@@ -35,8 +35,9 @@ describe('Static Site Editor Store mutations', () => {
       expect(state.title).toBe(payload.title);
     });
 
-    it('sets content', () => {
+    it('sets originalContent and content', () => {
       expect(state.content).toBe(payload.content);
+      expect(state.originalContent).toBe(payload.content);
     });
   });
 
@@ -49,4 +50,12 @@ describe('Static Site Editor Store mutations', () => {
       expect(state.isLoadingContent).toBe(false);
     });
   });
+
+  describe('setContent', () => {
+    it('sets content', () => {
+      mutations[types.SET_CONTENT](state, content);
+
+      expect(state.content).toBe(content);
+    });
+  });
 });