Add latest changes from gitlab-org/gitlab@master

2 files changed, 61 insertions, 4 deletions

diff --git a/spec/frontend/static_site_editor/components/edit_area_spec.js b/spec/frontend/static_site_editor/components/edit_area_spec.js
index bfe41f65d6e..5817bad2ac5 100644
--- a/spec/frontend/static_site_editor/components/edit_area_spec.js
+++ b/spec/frontend/static_site_editor/components/edit_area_spec.js
@@ -5,6 +5,7 @@ import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_
 import EditArea from '~/static_site_editor/components/edit_area.vue';
 import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
 import EditHeader from '~/static_site_editor/components/edit_header.vue';
+import UnsavedChangesConfirmDialog from '~/static_site_editor/components/unsaved_changes_confirm_dialog.vue';
 
 import { sourceContentTitle as title, sourceContent as content, returnUrl } from '../mock_data';
 
@@ -28,6 +29,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
   const findEditHeader = () => wrapper.find(EditHeader);
   const findRichContentEditor = () => wrapper.find(RichContentEditor);
   const findPublishToolbar = () => wrapper.find(PublishToolbar);
+  const findUnsavedChangesConfirmDialog = () => wrapper.find(UnsavedChangesConfirmDialog);
 
   beforeEach(() => {
     buildWrapper();
@@ -49,9 +51,16 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
 
   it('renders publish toolbar', () => {
     expect(findPublishToolbar().exists()).toBe(true);
-    expect(findPublishToolbar().props('returnUrl')).toBe(returnUrl);
-    expect(findPublishToolbar().props('savingChanges')).toBe(savingChanges);
-    expect(findPublishToolbar().props('saveable')).toBe(false);
+    expect(findPublishToolbar().props()).toMatchObject({
+      returnUrl,
+      savingChanges,
+      saveable: false,
+    });
+  });
+
+  it('renders unsaved changes confirm dialog', () => {
+    expect(findUnsavedChangesConfirmDialog().exists()).toBe(true);
+    expect(findUnsavedChangesConfirmDialog().props('modified')).toBe(false);
   });
 
   describe('when content changes', () => {
@@ -61,10 +70,14 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
       return wrapper.vm.$nextTick();
     });
 
-    it('sets publish toolbar as saveable when content changes', () => {
+    it('sets publish toolbar as saveable', () => {
       expect(findPublishToolbar().props('saveable')).toBe(true);
     });
 
+    it('sets unsaved changes confirm dialog as modified', () => {
+      expect(findUnsavedChangesConfirmDialog().props('modified')).toBe(true);
+    });
+
     it('sets publish toolbar as not saveable when content changes are rollback', () => {
       findRichContentEditor().vm.$emit('input', content);
 
diff --git a/spec/frontend/static_site_editor/components/unsaved_changes_confirm_dialog_spec.js b/spec/frontend/static_site_editor/components/unsaved_changes_confirm_dialog_spec.js
new file mode 100644
index 00000000000..9b8b22da693
--- /dev/null
+++ b/spec/frontend/static_site_editor/components/unsaved_changes_confirm_dialog_spec.js
@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils';
+
+import UnsavedChangesConfirmDialog from '~/static_site_editor/components/unsaved_changes_confirm_dialog.vue';
+
+describe('static_site_editor/components/unsaved_changes_confirm_dialog', () => {
+  let wrapper;
+  let event;
+  let returnValueSetter;
+
+  const buildWrapper = (propsData = {}) => {
+    wrapper = shallowMount(UnsavedChangesConfirmDialog, {
+      propsData,
+    });
+  };
+
+  beforeEach(() => {
+    event = new Event('beforeunload');
+
+    jest.spyOn(event, 'preventDefault');
+    returnValueSetter = jest.spyOn(event, 'returnValue', 'set');
+  });
+
+  afterEach(() => {
+    event.preventDefault.mockRestore();
+    returnValueSetter.mockRestore();
+    wrapper.destroy();
+  });
+
+  it('displays confirmation dialog when modified = true', () => {
+    buildWrapper({ modified: true });
+    window.dispatchEvent(event);
+
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(returnValueSetter).toHaveBeenCalledWith('');
+  });
+
+  it('does not display confirmation dialog when modified = false', () => {
+    buildWrapper();
+    window.dispatchEvent(event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(returnValueSetter).not.toHaveBeenCalled();
+  });
+});