2 files changed, 81 insertions, 35 deletions

diff --git a/spec/frontend/content_editor/services/content_editor_spec.js b/spec/frontend/content_editor/services/content_editor_spec.js
index a3553e612ca..6175cbdd3d4 100644
--- a/spec/frontend/content_editor/services/content_editor_spec.js
+++ b/spec/frontend/content_editor/services/content_editor_spec.js
@@ -1,8 +1,3 @@
-import {
-  LOADING_CONTENT_EVENT,
-  LOADING_SUCCESS_EVENT,
-  LOADING_ERROR_EVENT,
-} from '~/content_editor/constants';
 import { ContentEditor } from '~/content_editor/services/content_editor';
 import eventHubFactory from '~/helpers/event_hub_factory';
 import { createTestEditor, createDocBuilder } from '../test_utils';
@@ -14,6 +9,7 @@ describe('content_editor/services/content_editor', () => {
   let eventHub;
   let doc;
   let p;
+  const testMarkdown = '**bold text**';
 
   beforeEach(() => {
     const tiptapEditor = createTestEditor();
@@ -36,6 +32,9 @@ describe('content_editor/services/content_editor', () => {
     });
   });
 
+  const testDoc = () => doc(p('document'));
+  const testEmptyDoc = () => doc();
+
   describe('.dispose', () => {
     it('destroys the tiptapEditor', () => {
       expect(contentEditor.tiptapEditor.destroy).not.toHaveBeenCalled();
@@ -46,51 +45,77 @@ describe('content_editor/services/content_editor', () => {
     });
   });
 
-  describe('when setSerializedContent succeeds', () => {
-    let document;
-    const languages = ['javascript'];
-    const testMarkdown = '**bold text**';
+  describe('empty', () => {
+    it('returns true when tiptapEditor is empty', async () => {
+      deserializer.deserialize.mockResolvedValueOnce({ document: testEmptyDoc() });
+
+      await contentEditor.setSerializedContent(testMarkdown);
 
-    beforeEach(() => {
-      document = doc(p('document'));
-      deserializer.deserialize.mockResolvedValueOnce({ document, languages });
+      expect(contentEditor.empty).toBe(true);
     });
 
-    it('emits loadingContent and loadingSuccess event in the eventHub', () => {
-      let loadingContentEmitted = false;
+    it('returns false when tiptapEditor is not empty', async () => {
+      deserializer.deserialize.mockResolvedValueOnce({ document: testDoc() });
 
-      eventHub.$on(LOADING_CONTENT_EVENT, () => {
-        loadingContentEmitted = true;
-      });
-      eventHub.$on(LOADING_SUCCESS_EVENT, () => {
-        expect(loadingContentEmitted).toBe(true);
-      });
+      await contentEditor.setSerializedContent(testMarkdown);
 
-      contentEditor.setSerializedContent(testMarkdown);
+      expect(contentEditor.empty).toBe(false);
     });
+  });
 
-    it('sets the deserialized document in the tiptap editor object', async () => {
-      await contentEditor.setSerializedContent(testMarkdown);
+  describe('editable', () => {
+    it('returns true when tiptapEditor is editable', async () => {
+      contentEditor.setEditable(true);
 
-      expect(contentEditor.tiptapEditor.state.doc.toJSON()).toEqual(document.toJSON());
+      expect(contentEditor.editable).toBe(true);
+    });
+
+    it('returns false when tiptapEditor is readonly', async () => {
+      contentEditor.setEditable(false);
+
+      expect(contentEditor.editable).toBe(false);
     });
   });
 
-  describe('when setSerializedContent fails', () => {
-    const error = 'error';
+  describe('changed', () => {
+    it('returns true when the initial document changes', async () => {
+      deserializer.deserialize.mockResolvedValueOnce({ document: testDoc() });
+
+      await contentEditor.setSerializedContent(testMarkdown);
+
+      contentEditor.tiptapEditor.commands.insertContent(' new content');
+
+      expect(contentEditor.changed).toBe(true);
+    });
+
+    it('returns false when the initial document hasn’t changed', async () => {
+      deserializer.deserialize.mockResolvedValueOnce({ document: testDoc() });
+
+      await contentEditor.setSerializedContent(testMarkdown);
+
+      expect(contentEditor.changed).toBe(false);
+    });
+
+    it('returns false when an initial document is not set and the document is empty', () => {
+      expect(contentEditor.changed).toBe(false);
+    });
 
-    beforeEach(() => {
-      deserializer.deserialize.mockRejectedValueOnce(error);
+    it('returns true when an initial document is not set and the document is not empty', () => {
+      contentEditor.tiptapEditor.commands.insertContent('new content');
+
+      expect(contentEditor.changed).toBe(true);
     });
+  });
+
+  describe('when setSerializedContent succeeds', () => {
+    it('sets the deserialized document in the tiptap editor object', async () => {
+      const document = testDoc();
+
+      deserializer.deserialize.mockResolvedValueOnce({ document });
 
-    it('emits loadingError event', async () => {
-      eventHub.$on(LOADING_ERROR_EVENT, (e) => {
-        expect(e).toBe('error');
-      });
+      await contentEditor.setSerializedContent(testMarkdown);
 
-      await expect(() => contentEditor.setSerializedContent('**bold text**')).rejects.toEqual(
-        error,
-      );
+      expect(contentEditor.tiptapEditor.state.doc.toJSON()).toEqual(document.toJSON());
     });
   });
 });
diff --git a/spec/frontend/content_editor/services/markdown_serializer_spec.js b/spec/frontend/content_editor/services/markdown_serializer_spec.js
index 0e5281be9bf..56394c85e8b 100644
--- a/spec/frontend/content_editor/services/markdown_serializer_spec.js
+++ b/spec/frontend/content_editor/services/markdown_serializer_spec.js
@@ -1,3 +1,4 @@
+import Audio from '~/content_editor/extensions/audio';
 import Blockquote from '~/content_editor/extensions/blockquote';
 import Bold from '~/content_editor/extensions/bold';
 import BulletList from '~/content_editor/extensions/bullet_list';
@@ -33,6 +34,7 @@ import TableHeader from '~/content_editor/extensions/table_header';
 import TableRow from '~/content_editor/extensions/table_row';
 import TaskItem from '~/content_editor/extensions/task_item';
 import TaskList from '~/content_editor/extensions/task_list';
+import Video from '~/content_editor/extensions/video';
 import markdownSerializer from '~/content_editor/services/markdown_serializer';
 import remarkMarkdownDeserializer from '~/content_editor/services/remark_markdown_deserializer';
 import { createTestEditor, createDocBuilder } from '../test_utils';
@@ -41,6 +43,7 @@ jest.mock('~/emoji');
 
 const tiptapEditor = createTestEditor({
   extensions: [
+    Audio,
     Blockquote,
     Bold,
     BulletList,
@@ -73,6 +76,7 @@ const tiptapEditor = createTestEditor({
     TableRow,
     TaskItem,
     TaskList,
+    Video,
     ...HTMLMarks,
     ...HTMLNodes,
   ],
@@ -80,6 +84,7 @@ const tiptapEditor = createTestEditor({
 
 const {
   builders: {
+    audio,
     doc,
     blockquote,
     bold,
@@ -114,6 +119,7 @@ const {
     tableRow,
     taskItem,
     taskList,
+    video,
   },
 } = createDocBuilder({
   tiptapEditor,
@@ -1230,6 +1236,21 @@ paragraph
     );
   });
 
+  it('serializes audio and video elements', () => {
+    expect(
+      serialize(
+        paragraph(
+          audio({ alt: 'audio', canonicalSrc: 'audio.mp3' }),
+          ' and ',
+          video({ alt: 'video', canonicalSrc: 'video.mov' }),
+        ),
+      ),
+    ).toBe(
+      `
+![audio](audio.mp3) and ![video](video.mov)`.trimLeft(),
+    );
+  });
+
   const defaultEditAction = (initialContent) => {
     tiptapEditor.chain().setContent(initialContent.toJSON()).insertContent(' modified').run();
   };