chore(demo): add hr to demo site to test copy-paste idempotence

thibaudcolas · May 20, 2018 · 2f899bc · 2f899bc
1 parent a5424d1
commit 2f899bc
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
 `;