Add missing tests for Markdown style shortcuts on return

Author: thibaudcolas

lib/components/DraftailEditor.test.js

@@ -15,7 +15,7 @@ import DraftUtils from "../api/DraftUtils";
 import DividerBlock from "../blocks/DividerBlock";
 import DraftailEditor from "./DraftailEditor";
 import Toolbar from "./Toolbar";
-import { ENTITY_TYPE } from "../api/constants";
+import { ENTITY_TYPE, INLINE_STYLE } from "../api/constants";
 
 jest.mock("draft-js/lib/generateRandomKey", () => () => "a");
 
@@ -401,7 +401,7 @@ describe("DraftailEditor", () => {
     it("default", () => {
       jest
         .spyOn(DraftUtils, "handleNewLine")
-        .mockImplementation((editorState) => editorState);
+        .mockImplementation(() => EditorState.createEmpty());
       const wrapper = shallowNoLifecycle(<DraftailEditor />);
 
       expect(
@@ -412,6 +412,7 @@ describe("DraftailEditor", () => {
 
       DraftUtils.handleNewLine.mockRestore();
     });
+
     it("enabled br", () => {
       const wrapper = shallowNoLifecycle(<DraftailEditor enableLineBreak />);
 
@@ -421,6 +422,7 @@ describe("DraftailEditor", () => {
         }),
       ).toBe("not-handled");
     });
+
     it("alt + enter on text", () => {
       const wrapper = shallowNoLifecycle(<DraftailEditor />);
 
@@ -430,39 +432,32 @@ describe("DraftailEditor", () => {
         }),
       ).toBe("handled");
     });
+
     it("alt + enter on entity without url", () => {
       const wrapper = shallowNoLifecycle(
         <DraftailEditor
           rawContentState={{
             entityMap: {
               "1": {
                 type: "LINK",
-                mutability: "IMMUTABLE",
                 data: {
                   url: "test",
                 },
               },
               "2": {
                 type: "LINK",
-                mutability: "IMMUTABLE",
-                data: {},
               },
             },
             blocks: [
               {
-                key: "b3kdk",
                 text: "test",
-                type: "unstyled",
-                depth: 0,
-                inlineStyleRanges: [],
                 entityRanges: [
                   {
                     offset: 0,
                     length: 4,
                     key: 2,
                   },
                 ],
-                data: {},
               },
             ],
           }}
@@ -484,27 +479,21 @@ describe("DraftailEditor", () => {
             entityMap: {
               "1": {
                 type: "LINK",
-                mutability: "IMMUTABLE",
                 data: {
                   url: "test",
                 },
               },
             },
             blocks: [
               {
-                key: "b3kdk",
                 text: "test",
-                type: "unstyled",
-                depth: 0,
-                inlineStyleRanges: [],
                 entityRanges: [
                   {
                     offset: 0,
                     length: 4,
                     key: 1,
                   },
                 ],
-                data: {},
               },
             ],
           }}
@@ -520,6 +509,54 @@ describe("DraftailEditor", () => {
 
       window.open.mockRestore();
     });
+
+    it("style shortcut", () => {
+      jest.spyOn(DraftUtils, "applyMarkdownStyle");
+
+      const wrapper = shallowNoLifecycle(
+        <DraftailEditor
+          rawContentState={{
+            entityMap: {},
+            blocks: [{ text: "A *test*" }],
+          }}
+          inlineStyles={[{ type: INLINE_STYLE.ITALIC }]}
+        />,
+      );
+
+      expect(wrapper.instance().handleReturn({})).toBe("handled");
+      expect(DraftUtils.applyMarkdownStyle).toHaveBeenCalled();
+
+      DraftUtils.applyMarkdownStyle.mockRestore();
+    });
+
+    it("style shortcut but selection is not collapsed", () => {
+      jest.spyOn(DraftUtils, "applyMarkdownStyle");
+
+      const wrapper = shallowNoLifecycle(
+        <DraftailEditor
+          rawContentState={{
+            entityMap: {},
+            blocks: [{ key: "aaaa2", text: "A *test*" }],
+          }}
+          inlineStyles={[{ type: INLINE_STYLE.ITALIC }]}
+        />,
+      );
+
+      // Monkey-patching the one method. A bit dirty.
+      const selection = new SelectionState().set("anchorKey", "aaaa2");
+      selection.isCollapsed = () => false;
+      wrapper.setState({
+        editorState: Object.assign(wrapper.state("editorState"), {
+          getSelection: () => selection,
+          getCurrentInlineStyle: () => new OrderedSet(),
+        }),
+      });
+
+      expect(wrapper.instance().handleReturn({})).toBe("not-handled");
+      expect(DraftUtils.applyMarkdownStyle).not.toHaveBeenCalled();
+
+      DraftUtils.applyMarkdownStyle.mockRestore();
+    });
   });
 
   it("onFocus, onBlur", () => {
@@ -680,8 +717,10 @@ describe("DraftailEditor", () => {
         .spyOn(DraftUtils, "getSelectedBlock")
         .mockImplementation(() => new ContentBlock());
       jest.spyOn(DraftUtils, "addHorizontalRuleRemovingSelection");
+      jest.spyOn(DraftUtils, "applyMarkdownStyle");
       jest.spyOn(behavior, "handleBeforeInputBlockType");
       jest.spyOn(behavior, "handleBeforeInputHR");
+      jest.spyOn(behavior, "handleBeforeInputInlineStyle");
 
       jest.spyOn(wrapper.instance(), "onChange");
     });
@@ -730,6 +769,19 @@ describe("DraftailEditor", () => {
       expect(DraftUtils.addHorizontalRuleRemovingSelection).toHaveBeenCalled();
       DraftUtils.shouldHidePlaceholder.mockRestore();
     });
+
+    it("change style", () => {
+      wrapper.instance().render = () => {};
+      behavior.handleBeforeInputInlineStyle = jest.fn(() => ({
+        pattern: "**",
+        type: "BOLD",
+        start: 0,
+        end: 0,
+      }));
+      expect(wrapper.instance().handleBeforeInput("!")).toBe("handled");
+      expect(wrapper.instance().onChange).toHaveBeenCalled();
+      expect(DraftUtils.applyMarkdownStyle).toHaveBeenCalled();
+    });
   });
 
   describe("handlePastedText", () => {