Finish conversion to TypeScript

springload · Jul 5, 2022 · cba6a99 · cba6a99
1 parent 3acf071
commit cba6a99
Show file tree

Hide file tree

Showing 76 changed files with 1,474 additions and 1,758 deletions.
diff --git a/examples/blocks/EmbedBlock.test.tsx b/examples/blocks/EmbedBlock.test.tsx
@@ -3,6 +3,7 @@ import { shallow } from "enzyme";
 
 import { ContentBlock, EditorState } from "draft-js";
 import EmbedBlock from "./EmbedBlock";
+import EmbedSource from "../sources/EmbedSource";
 
 describe("EmbedBlock", () => {
   it("renders", () => {
@@ -14,6 +15,8 @@ describe("EmbedBlock", () => {
             entityType: {
               description: "test",
               icon: "test",
+              type: "test",
+              source: EmbedSource,
             },
             editorState: EditorState.createEmpty(),
             entityKey: "string",
@@ -34,8 +37,8 @@ describe("EmbedBlock", () => {
             },
           }}
         />,
-      ),
-    ).toMatchSnapshot();
+      ).length,
+    ).toBe(1);
   });
 
   it("no data", () => {
@@ -47,6 +50,8 @@ describe("EmbedBlock", () => {
             entityType: {
               description: "test",
               icon: "test",
+              type: "test",
+              source: EmbedSource,
             },
             editorState: EditorState.createEmpty(),
             entityKey: "string",
@@ -63,7 +68,7 @@ describe("EmbedBlock", () => {
             },
           }}
         />,
-      ),
-    ).toMatchSnapshot();
+      ).length,
+    ).toBe(1);
   });
 });
diff --git a/examples/blocks/EmbedBlock.tsx b/examples/blocks/EmbedBlock.tsx
@@ -1,17 +1,12 @@
 import React from "react";
-import type { ContentBlock } from "draft-js";
+import { EntityBlockProps } from "../../src";
 
-import MediaBlock, { MediaBlockProps } from "./MediaBlock";
-
-interface EmbedBlockProps extends MediaBlockProps {
-  block: ContentBlock;
-  blockProps: BlockProps;
-}
+import MediaBlock from "./MediaBlock";
 
 /**
  * Editor block to display media and edit content.
  */
-const EmbedBlock = (props: EmbedBlockProps) => {
+const EmbedBlock = (props: EntityBlockProps) => {
   const { blockProps } = props;
   const { entity, onEditEntity, onRemoveEntity } = blockProps;
   const { url, title, thumbnail } = entity.getData();

diff --git a/examples/blocks/ImageBlock.test.tsx b/examples/blocks/ImageBlock.test.tsx
@@ -1,64 +1,106 @@
 import React from "react";
+import { ContentBlock, EditorState } from "draft-js";
 import { shallow } from "enzyme";
 
 import { DraftUtils } from "../../src/index";
 
 import ImageBlock from "./ImageBlock";
+import EmbedSource from "../sources/EmbedSource";
 
 describe("ImageBlock", () => {
   it("renders", () => {
     expect(
       shallow(
         <ImageBlock
-          block={{}}
+          block={new ContentBlock()}
           blockProps={{
-            editorState: {},
-            entityType: {},
+            entityType: {
+              description: "test",
+              icon: "test",
+              type: "test",
+              source: EmbedSource,
+            },
+            editorState: EditorState.createEmpty(),
+            entityKey: "string",
+            textDirectionality: "RTL",
+            lockEditor: () => {},
+            unlockEditor: () => {},
+            onChange: () => {},
+            onEditEntity: () => {},
+            onRemoveEntity: () => {},
             entity: {
+              getType: () => "type",
+              getMutability: () => "MUTABLE",
               getData: () => ({
                 src: "example.png",
               }),
             },
-            onChange: () => {},
           }}
         />,
-      ),
-    ).toMatchSnapshot();
+      ).length,
+    ).toBe(1);
   });
 
   it("alt", () => {
     expect(
       shallow(
         <ImageBlock
-          block={{}}
+          block={new ContentBlock()}
           blockProps={{
-            editorState: {},
-            entityType: {},
+            entityType: {
+              description: "test",
+              icon: "test",
+              type: "test",
+              source: EmbedSource,
+            },
+            editorState: EditorState.createEmpty(),
+            entityKey: "string",
+            textDirectionality: "RTL",
+            lockEditor: () => {},
+            unlockEditor: () => {},
+            onChange: () => {},
+            onEditEntity: () => {},
+            onRemoveEntity: () => {},
             entity: {
+              getType: () => "type",
+              getMutability: () => "MUTABLE",
               getData: () => ({
                 src: "example.png",
                 alt: "Test",
               }),
             },
-            onChange: () => {},
           }}
         />,
-      ),
-    ).toMatchSnapshot();
+      ).length,
+    ).toBe(1);
   });
 
   it("changeAlt", () => {
-    jest.spyOn(DraftUtils, "updateBlockEntity");
-    DraftUtils.updateBlockEntity.mockImplementation((e) => e);
+    const updateBlockEntity = jest
+      .spyOn(DraftUtils, "updateBlockEntity")
+      .mockImplementation((e) => e);
 
     const onChange = jest.fn();
     const wrapper = shallow(
       <ImageBlock
-        block={{}}
+        block={new ContentBlock()}
         blockProps={{
-          editorState: {},
-          entityType: {},
+          entityType: {
+            description: "test",
+            icon: "test",
+            type: "test",
+            source: EmbedSource,
+          },
+          editorState: EditorState.createEmpty(),
+          entityKey: "string",
+          textDirectionality: "RTL",
+          lockEditor: () => {},
+          unlockEditor: () => {},
+          onEditEntity: () => {},
+          onRemoveEntity: () => {},
           entity: {
+            getType: () => "type",
+            getMutability: () => "MUTABLE",
             getData: () => ({
               src: "example.png",
               alt: "Test",
@@ -75,9 +117,9 @@ describe("ImageBlock", () => {
     wrapper.find('[type="text"]').simulate("change", { currentTarget });
 
     expect(onChange).toHaveBeenCalled();
-    expect(DraftUtils.updateBlockEntity).toHaveBeenCalledWith(
+    expect(updateBlockEntity).toHaveBeenCalledWith(
+      expect.any(Object),
       expect.any(Object),
-      {},
       expect.objectContaining({ alt: "new alt" }),
     );
 

diff --git a/examples/blocks/MediaBlock.scss b/examples/blocks/MediaBlock.scss
@@ -1,9 +1,9 @@
 .MediaBlock {
   display: inline-block;
   position: relative;
-  border: 0;
   padding: 0;
   cursor: pointer;
+  outline: $draftail-contrast-border;
 
   // stylelint-disable
   &:focus {

diff --git a/examples/blocks/MediaBlock.test.tsx b/examples/blocks/MediaBlock.test.tsx
@@ -1,21 +1,42 @@
 import React from "react";
+import { ContentBlock, EditorState } from "draft-js";
 import { shallow } from "enzyme";
 
-import MediaBlock from "./MediaBlock";
+import EmbedSource from "../sources/EmbedSource";
+
+import MediaBlock, { MediaBlockProps, MediaBlockState } from "./MediaBlock";
+import Portal from "../components/Portal";
+
+const typedShallow = (elt: React.ReactElement) =>
+  shallow<MediaBlock, MediaBlockProps, MediaBlockState>(elt);
 
 describe("MediaBlock", () => {
   it("renders", () => {
     expect(
-      shallow(
+      typedShallow(
         <MediaBlock
           src="example.png"
           label="test"
+          isLoading={false}
+          block={new ContentBlock()}
           blockProps={{
             entityType: {
+              description: "desc",
               icon: "#icon-test",
-              description: "Test",
+              type: "test",
+              source: EmbedSource,
             },
+            editorState: EditorState.createEmpty(),
+            entityKey: "string",
+            textDirectionality: "RTL",
+            lockEditor: () => {},
+            unlockEditor: () => {},
+            onChange: () => {},
+            onEditEntity: () => {},
+            onRemoveEntity: () => {},
             entity: {
+              getType: () => "type",
+              getMutability: () => "MUTABLE",
               getData: () => ({
                 src: "example.png",
               }),
@@ -30,17 +51,30 @@ describe("MediaBlock", () => {
 
   it("isLoading", () => {
     expect(
-      shallow(
+      typedShallow(
         <MediaBlock
           src="example.png"
           label="test"
           isLoading
+          block={new ContentBlock()}
           blockProps={{
             entityType: {
+              description: "desc",
               icon: "#icon-test",
-              description: "Test",
+              type: "test",
+              source: EmbedSource,
             },
+            editorState: EditorState.createEmpty(),
+            entityKey: "string",
+            textDirectionality: "RTL",
+            lockEditor: () => {},
+            unlockEditor: () => {},
+            onChange: () => {},
+            onEditEntity: () => {},
+            onRemoveEntity: () => {},
             entity: {
+              getType: () => "type",
+              getMutability: () => "MUTABLE",
               getData: () => ({
                 src: "example.png",
               }),
@@ -54,19 +88,33 @@ describe("MediaBlock", () => {
   });
 
   describe("tooltip", () => {
-    let wrapper;
+    let wrapper: ReturnType<typeof typedShallow>;
 
     beforeEach(() => {
-      wrapper = shallow(
+      wrapper = typedShallow(
         <MediaBlock
           src="example.png"
           label=""
+          isLoading={false}
+          block={new ContentBlock()}
           blockProps={{
             entityType: {
+              description: "desc",
               icon: "#icon-test",
-              description: "Test",
+              type: "test",
+              source: EmbedSource,
             },
+            editorState: EditorState.createEmpty(),
+            entityKey: "string",
+            textDirectionality: "RTL",
+            lockEditor: () => {},
+            unlockEditor: () => {},
+            onChange: () => {},
+            onEditEntity: () => {},
+            onRemoveEntity: () => {},
             entity: {
+              getType: () => "type",
+              getMutability: () => "MUTABLE",
               getData: () => ({
                 src: "example.png",
               }),
@@ -84,28 +132,29 @@ describe("MediaBlock", () => {
 
       wrapper.simulate("mouseup", { target });
 
-      expect(wrapper.find("Portal").dive().instance().portal).toMatchSnapshot();
+      expect(
+        wrapper.find("Portal").dive<Portal>().instance().portal,
+      ).toMatchSnapshot();
     });
 
     it("large viewport", () => {
       const target = document.createElement("div");
       document.body.appendChild(target);
-      target.getBoundingClientRect = () => ({
-        top: 0,
-        left: 0,
-        width: -600,
-        height: 0,
-      });
+      target.getBoundingClientRect = () =>
+        ({
+          top: 0,
+          left: 0,
+          width: -600,
+          height: 0,
+        } as DOMRect);
 
       wrapper.simulate("mouseup", { target });
 
-      expect(
-        wrapper
-          .find("Portal")
-          .dive()
-          .instance()
-          .portal.querySelector(".Tooltip").className,
-      ).toBe("Tooltip Tooltip--start");
+      const portalElt = wrapper.find("Portal").dive<Portal>().instance().portal;
+
+      expect(portalElt!.querySelector(".Tooltip")!.className).toBe(
+        "Tooltip Tooltip--start",
+      );
     });
 
     it("closes", () => {

diff --git a/examples/blocks/MediaBlock.tsx b/examples/blocks/MediaBlock.tsx
@@ -17,7 +17,7 @@ export interface MediaBlockProps extends EntityBlockProps {
   children: React.ReactNode;
 }
 
-interface MediaBlockState {
+export interface MediaBlockState {
   tooltip: {
     target: Rect;
     containerWidth: number;