1 files changed, 27 insertions, 9 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..d7c798e6620 100644
--- a/spec/frontend/static_site_editor/components/edit_area_spec.js
+++ b/spec/frontend/static_site_editor/components/edit_area_spec.js
@@ -5,13 +5,19 @@ 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';
+import {
+  sourceContentTitle as title,
+  sourceContent as content,
+  sourceContentBody as body,
+  returnUrl,
+} from '../mock_data';
 
 describe('~/static_site_editor/components/edit_area.vue', () => {
   let wrapper;
   const savingChanges = true;
-  const newContent = `new ${content}`;
+  const newBody = `new ${body}`;
 
   const buildWrapper = (propsData = {}) => {
     wrapper = shallowMount(EditArea, {
@@ -28,6 +34,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();
@@ -44,29 +51,40 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
 
   it('renders rich content editor', () => {
     expect(findRichContentEditor().exists()).toBe(true);
-    expect(findRichContentEditor().props('value')).toBe(content);
+    expect(findRichContentEditor().props('value')).toBe(body);
   });
 
   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', () => {
     beforeEach(() => {
-      findRichContentEditor().vm.$emit('input', newContent);
+      findRichContentEditor().vm.$emit('input', newBody);
 
       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);
+      findRichContentEditor().vm.$emit('input', body);
 
       return wrapper.vm.$nextTick().then(() => {
         expect(findPublishToolbar().props('saveable')).toBe(false);