1 files changed, 33 insertions, 8 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 11c5abf1b08..f4be911171e 100644
--- a/spec/frontend/static_site_editor/components/edit_area_spec.js
+++ b/spec/frontend/static_site_editor/components/edit_area_spec.js
@@ -15,8 +15,11 @@ import {
   returnUrl,
 } from '../mock_data';
 
+jest.mock('~/static_site_editor/services/formatter', () => jest.fn(str => `${str} format-pass`));
+
 describe('~/static_site_editor/components/edit_area.vue', () => {
   let wrapper;
+  const formattedBody = `${body} format-pass`;
   const savingChanges = true;
   const newBody = `new ${body}`;
 
@@ -50,9 +53,9 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
     expect(findEditHeader().props('title')).toBe(title);
   });
 
-  it('renders rich content editor', () => {
+  it('renders rich content editor with a format pass', () => {
     expect(findRichContentEditor().exists()).toBe(true);
-    expect(findRichContentEditor().props('content')).toBe(body);
+    expect(findRichContentEditor().props('content')).toBe(formattedBody);
   });
 
   it('renders publish toolbar', () => {
@@ -94,7 +97,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
     });
 
     it('sets publish toolbar as not saveable when content changes are rollback', () => {
-      findRichContentEditor().vm.$emit('input', body);
+      findRichContentEditor().vm.$emit('input', formattedBody);
 
       return wrapper.vm.$nextTick().then(() => {
         expect(findPublishToolbar().props('saveable')).toBe(false);
@@ -103,31 +106,53 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
   });
 
   describe('when the mode changes', () => {
+    let resetInitialValue;
+
     const setInitialMode = mode => {
       wrapper.setData({ editorMode: mode });
     };
 
+    const buildResetInitialValue = () => {
+      resetInitialValue = jest.fn();
+      findRichContentEditor().setMethods({ resetInitialValue });
+    };
+
     afterEach(() => {
       setInitialMode(EDITOR_TYPES.wysiwyg);
+      resetInitialValue = null;
     });
 
     it.each`
       initialMode              | targetMode               | resetValue
-      ${EDITOR_TYPES.wysiwyg}  | ${EDITOR_TYPES.markdown} | ${content}
-      ${EDITOR_TYPES.markdown} | ${EDITOR_TYPES.wysiwyg}  | ${body}
+      ${EDITOR_TYPES.wysiwyg}  | ${EDITOR_TYPES.markdown} | ${`${content} format-pass format-pass`}
+      ${EDITOR_TYPES.markdown} | ${EDITOR_TYPES.wysiwyg}  | ${`${body} format-pass format-pass`}
     `(
       'sets editorMode from $initialMode to $targetMode',
       ({ initialMode, targetMode, resetValue }) => {
         setInitialMode(initialMode);
+        buildResetInitialValue();
 
-        const resetInitialValue = jest.fn();
-
-        findRichContentEditor().setMethods({ resetInitialValue });
         findRichContentEditor().vm.$emit('modeChange', targetMode);
 
         expect(resetInitialValue).toHaveBeenCalledWith(resetValue);
         expect(wrapper.vm.editorMode).toBe(targetMode);
       },
     );
+
+    it('should format the content', () => {
+      buildResetInitialValue();
+
+      findRichContentEditor().vm.$emit('modeChange', EDITOR_TYPES.markdown);
+
+      expect(resetInitialValue).toHaveBeenCalledWith(`${content} format-pass format-pass`);
+    });
+  });
+
+  describe('when content is submitted', () => {
+    it('should format the content', () => {
+      findPublishToolbar().vm.$emit('submit', content);
+
+      expect(wrapper.emitted('submit')[0][0].content).toBe(`${content} format-pass format-pass`);
+    });
   });
 });