Merge branch '229635-rich-content-editor-integration-tests' into 'master'

Implement HTML to Markdown integration tests in Static Site Editor

Closes #229635

See merge request gitlab-org/gitlab!37394

spec/frontend/environment.js

@@ -50,16 +50,6 @@ class CustomEnvironment extends JSDOMEnvironment {
      */
     this.global.fetch = () => {};
 
-    // Not yet supported by JSDOM: https://github.com/jsdom/jsdom/issues/317
-    this.global.document.createRange = () => ({
-      setStart: () => {},
-      setEnd: () => {},
-      commonAncestorContainer: {
-        nodeName: 'BODY',
-        ownerDocument: this.global.document,
-      },
-    });
-
     // Expose the jsdom (created in super class) to the global so that we can call reconfigure({ url: '' }) to properly set `window.location`
     this.global.dom = this.dom;
   }

spec/frontend/helpers/dom_shims/index.js

@@ -4,7 +4,7 @@ import './element_scroll_to';
 import './form_element';
 import './get_client_rects';
 import './inner_text';
-import './mutation_observer';
+import './range';
 import './window_scroll_to';
 import './scroll_by';
 import './size_properties';

spec/frontend/helpers/dom_shims/mutation_observer.js

-/* eslint-disable class-methods-use-this */
-class MutationObserverStub {
-  disconnect() {}
-  observe() {}
-}
-
-global.MutationObserver = MutationObserverStub;

spec/frontend/helpers/dom_shims/range.js

+if (window.Range.prototype.getBoundingClientRect) {
+  throw new Error('window.Range.prototype.getBoundingClientRect already exists. Remove this stub!');
+}
+window.Range.prototype.getBoundingClientRect = function getBoundingClientRect() {
+  return { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 };
+};
+
+if (window.Range.prototype.getClientRects) {
+  throw new Error('window.Range.prototype.getClientRects already exists. Remove this stub!');
+}
+window.Range.prototype.getClientRects = function getClientRects() {
+  return [this.getBoundingClientRect()];
+};

spec/frontend/lazy_loader_spec.js

@@ -45,10 +45,24 @@ describe('LazyLoader', () => {
     return newImg;
   };
 
+  const mockLoadEvent = () => {
+    const addEventListener = window.addEventListener.bind(window);
+
+    jest.spyOn(window, 'addEventListener').mockImplementation((event, callback) => {
+      if (event === 'load') {
+        callback();
+      } else {
+        addEventListener(event, callback);
+      }
+    });
+  };
+
   beforeEach(() => {
     jest.spyOn(window, 'requestAnimationFrame').mockImplementation(execImmediately);
     jest.spyOn(window, 'requestIdleCallback').mockImplementation(execImmediately);
     jest.spyOn(LazyLoader, 'loadImage');
+
+    mockLoadEvent();
   });
 
   afterEach(() => {

spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_integration_spec.js

+import Editor from '@toast-ui/editor';
+import { registerHTMLToMarkdownRenderer } from '~/vue_shared/components/rich_content_editor/services/editor_service';
+
+describe('vue_shared/components/rich_content_editor', () => {
+  let editor;
+
+  const buildEditor = () => {
+    editor = new Editor({
+      el: document.body,
+    });
+
+    registerHTMLToMarkdownRenderer(editor);
+  };
+
+  beforeEach(() => {
+    buildEditor();
+  });
+
+  describe('HTML to Markdown', () => {
+    it('uses "-" character list marker in unordered lists', () => {
+      editor.setHtml('<ul><li>List item 1</li><li>List item 2</li></ul>');
+
+      const markdown = editor.getMarkdown();
+
+      expect(markdown).toBe('- List item 1\n- List item 2');
+    });
+
+    it('does not increment the list marker in ordered lists', () => {
+      editor.setHtml('<ol><li>List item 1</li><li>List item 2</li></ol>');
+
+      const markdown = editor.getMarkdown();
+
+      expect(markdown).toBe('1. List item 1\n1. List item 2');
+    });
+
+    it('indents lists using four spaces', () => {
+      editor.setHtml('<ul><li>List item 1</li><ul><li>List item 2</li></ul></ul>');
+
+      const markdown = editor.getMarkdown();
+
+      expect(markdown).toBe('- List item 1\n    - List item 2');
+    });
+
+    it('uses * for strong and _ for emphasis text', () => {
+      editor.setHtml('<strong>strong text</strong><i>emphasis text</i>');
+
+      const markdown = editor.getMarkdown();
+
+      expect(markdown).toBe('**strong text**_emphasis text_');
+    });
+  });
+});