From 2f899bc06313426ae0d2b1a7331f1d5862c6202a Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Sun, 20 May 2018 22:05:16 +0300
Subject: [PATCH] chore(demo): add hr to demo site to test copy-paste
 idempotence

---
 src/demo/components/App.js                    |   1 +
 src/demo/components/DemoEditor.js             |  28 ++++-
 src/demo/components/DemoEditor.test.js        | 111 +++++++++++++++---
 .../components/__snapshots__/App.test.js.snap |   3 +
 .../__snapshots__/DemoEditor.test.js.snap     |  14 +++
 5 files changed, 140 insertions(+), 17 deletions(-)

diff --git a/src/demo/components/App.js b/src/demo/components/App.js
index 0ba627e6..9b789cdb 100644
--- a/src/demo/components/App.js
+++ b/src/demo/components/App.js
@@ -9,6 +9,7 @@ class App extends Component<{}> {
     return (
       <div className="App">
         <DemoEditor extended={false} />
+        <DemoEditor extended={true} />
       </div>
     );
   }
diff --git a/src/demo/components/DemoEditor.js b/src/demo/components/DemoEditor.js
index 37938326..a8e7eec3 100644
--- a/src/demo/components/DemoEditor.js
+++ b/src/demo/components/DemoEditor.js
@@ -76,6 +76,12 @@ const ENTITIES = [
       src: "^http",
     },
   },
+  {
+    type: "HORIZONTAL_RULE",
+    label: "HR",
+    attributes: [],
+    whitelist: {},
+  },
 ];
 
 const MAX_LIST_NESTING = 15;
@@ -149,7 +155,7 @@ class DemoEditor extends Component<Props, State> {
     e.preventDefault();
   }
 
-  toggleEntity(type: DraftEntityType) {
+  toggleEntity(type: DraftEntityType | "HORIZONTAL_RULE") {
     const { editorState } = this.state;
     let content = editorState.getCurrentContent();
 
@@ -162,6 +168,13 @@ class DemoEditor extends Component<Props, State> {
       this.onChange(
         AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, " "),
       );
+    } else if (type === "HORIZONTAL_RULE") {
+      // $FlowFixMe
+      content = content.createEntity(type, "IMMUTABLE", {});
+      const entityKey = content.getLastCreatedEntityKey();
+      this.onChange(
+        AtomicBlockUtils.insertAtomicBlock(editorState, entityKey, " "),
+      );
     } else {
       content = content.createEntity(type, "MUTABLE", {
         url: "http://www.example.com/",
@@ -173,10 +186,23 @@ class DemoEditor extends Component<Props, State> {
   }
 
   blockRenderer(block: ContentBlock) {
+    const { editorState } = this.state;
+    const content = editorState.getCurrentContent();
+
     if (block.getType() !== "atomic") {
       return null;
     }
 
+    const entityKey = block.getEntityAt(0);
+    const entity = content.getEntity(entityKey);
+
+    if (entity.getType() === "HORIZONTAL_RULE") {
+      return {
+        component: () => <hr />,
+        editable: false,
+      };
+    }
+
     return {
       component: Image,
       editable: false,
diff --git a/src/demo/components/DemoEditor.test.js b/src/demo/components/DemoEditor.test.js
index d5f38ed4..fb0d5066 100644
--- a/src/demo/components/DemoEditor.test.js
+++ b/src/demo/components/DemoEditor.test.js
@@ -90,31 +90,110 @@ describe("DemoEditor", () => {
     expect(RichUtils.toggleBlockType).toHaveBeenCalled();
   });
 
-  it("toggleEntity - LINK", () => {
-    shallow(<DemoEditor extended={false} />)
-      .instance()
-      .toggleEntity("LINK");
+  describe("toggleEntity", () => {
+    it("LINK", () => {
+      shallow(<DemoEditor extended={false} />)
+        .instance()
+        .toggleEntity("LINK");
 
-    expect(RichUtils.toggleLink).toHaveBeenCalled();
-  });
+      expect(RichUtils.toggleLink).toHaveBeenCalled();
+    });
 
-  it("toggleEntity - IMAGE", () => {
-    shallow(<DemoEditor extended={false} />)
-      .instance()
-      .toggleEntity("IMAGE");
+    it("IMAGE", () => {
+      shallow(<DemoEditor extended={false} />)
+        .instance()
+        .toggleEntity("IMAGE");
 
-    expect(AtomicBlockUtils.insertAtomicBlock).toHaveBeenCalled();
-  });
+      expect(AtomicBlockUtils.insertAtomicBlock).toHaveBeenCalled();
+    });
 
-  it("blockRenderer", () => {
-    expect(
+    it("HORIZONTAL_RULE", () => {
       shallow(<DemoEditor extended={false} />)
+        .instance()
+        .toggleEntity("HORIZONTAL_RULE");
+
+      expect(AtomicBlockUtils.insertAtomicBlock).toHaveBeenCalled();
+    });
+  });
+
+  describe("blockRenderer", () => {
+    it("unstyled", () => {
+      expect(
+        shallow(<DemoEditor extended={false} />)
+          .instance()
+          .blockRenderer({
+            getType: () => "unstyled",
+          }),
+      ).toBe(null);
+    });
+
+    it("HORIZONTAL_RULE", () => {
+      window.sessionStorage.getItem = jest.fn(() =>
+        JSON.stringify({
+          entityMap: {
+            "3": {
+              type: "HORIZONTAL_RULE",
+              data: {},
+            },
+          },
+          blocks: [
+            {
+              type: "atomic",
+              text: " ",
+              entityRanges: [
+                {
+                  key: 3,
+                  offset: 0,
+                  length: 1,
+                },
+              ],
+            },
+          ],
+        }),
+      );
+      const Component = shallow(<DemoEditor extended={true} />)
         .instance()
         .blockRenderer({
           getType: () => "atomic",
+          getEntityAt: () => "3",
+        }).component;
+      expect(Component()).toEqual(<hr />);
+    });
+
+    it("IMAGE", () => {
+      window.sessionStorage.getItem = jest.fn(() =>
+        JSON.stringify({
+          entityMap: {
+            "1": {
+              type: "IMAGE",
+              data: {
+                src: "example.png",
+              },
+            },
+          },
+          blocks: [
+            {
+              type: "atomic",
+              text: " ",
+              entityRanges: [
+                {
+                  key: 1,
+                  offset: 0,
+                  length: 1,
+                },
+              ],
+            },
+          ],
         }),
-    ).toMatchObject({
-      editable: false,
+      );
+
+      const Component = shallow(<DemoEditor extended={true} />)
+        .instance()
+        .blockRenderer({
+          getType: () => "atomic",
+          getEntityAt: () => "1",
+        }).component;
+      expect(<Component />).toMatchSnapshot();
     });
   });
 
diff --git a/src/demo/components/__snapshots__/App.test.js.snap b/src/demo/components/__snapshots__/App.test.js.snap
index 065d2d24..db2853a7 100644
--- a/src/demo/components/__snapshots__/App.test.js.snap
+++ b/src/demo/components/__snapshots__/App.test.js.snap
@@ -7,5 +7,8 @@ exports[`App renders 1`] = `
   <DemoEditor
     extended={false}
   />
+  <DemoEditor
+    extended={true}
+  />
 </div>
 `;
diff --git a/src/demo/components/__snapshots__/DemoEditor.test.js.snap b/src/demo/components/__snapshots__/DemoEditor.test.js.snap
index ca92bc64..6b63d928 100644
--- a/src/demo/components/__snapshots__/DemoEditor.test.js.snap
+++ b/src/demo/components/__snapshots__/DemoEditor.test.js.snap
@@ -112,9 +112,17 @@ exports[`DemoEditor #extended works 1`] = `
   >
     📷
   </button>
+  <button
+    key="HORIZONTAL_RULE"
+    onMouseDown={[Function]}
+  >
+    HR
+  </button>
 </div>
 `;
 
+exports[`DemoEditor blockRenderer IMAGE 1`] = `<Image />`;
+
 exports[`DemoEditor renders 1`] = `
 <div
   className="EditorToolbar"
@@ -185,5 +193,11 @@ exports[`DemoEditor renders 1`] = `
   >
     📷
   </button>
+  <button
+    key="HORIZONTAL_RULE"
+    onMouseDown={[Function]}
+  >
+    HR
+  </button>
 </div>
 `;