1 files changed, 63 insertions, 0 deletions
diff --git a/spec/frontend_integration/content_editor/content_editor_integration_spec.js b/spec/frontend_integration/content_editor/content_editor_integration_spec.js
new file mode 100644
index 00000000000..1b45c0d43a3
--- /dev/null
+++ b/spec/frontend_integration/content_editor/content_editor_integration_spec.js
@@ -0,0 +1,63 @@
+import { nextTick } from 'vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { ContentEditor } from '~/content_editor';
+
+/**
+ * This spec exercises some workflows in the Content Editor without mocking
+ * any component.
+ *
+ */
+describe('content_editor', () => {
+  let wrapper;
+  let renderMarkdown;
+  let contentEditorService;
+
+  const buildWrapper = () => {
+    renderMarkdown = jest.fn();
+    wrapper = mountExtended(ContentEditor, {
+      propsData: {
+        renderMarkdown,
+        uploadsPath: '/',
+      },
+      listeners: {
+        initialized(contentEditor) {
+          contentEditorService = contentEditor;
+        },
+      },
+    });
+  };
+
+  describe('when loading initial content', () => {
+    describe('when the initial content is empty', () => {
+      it('still hides the loading indicator', async () => {
+        buildWrapper();
+
+        renderMarkdown.mockResolvedValue('');
+
+        await contentEditorService.setSerializedContent('');
+        await nextTick();
+
+        expect(wrapper.findByTestId('content-editor-loading-indicator').exists()).toBe(false);
+      });
+    });
+
+    describe('when the initial content is not empty', () => {
+      const initialContent = '<p><strong>bold text</strong></p>';
+      beforeEach(async () => {
+        buildWrapper();
+
+        renderMarkdown.mockResolvedValue(initialContent);
+
+        await contentEditorService.setSerializedContent('**bold text**');
+        await nextTick();
+      });
+      it('hides the loading indicator', async () => {
+        expect(wrapper.findByTestId('content-editor-loading-indicator').exists()).toBe(false);
+      });
+
+      it('displays the initial content', async () => {
+        expect(wrapper.html()).toContain(initialContent);
+      });
+    });
+  });
+});