Merge pull request #16 from moveyourdigital/improve-testing-suite

Improve testing suite

Author: lightningspirit

README.md

@@ -67,33 +67,41 @@ However, each renderer supports a set of props, including `className` which can
     className: "language-js"
   },
   delimiter: {
-    className: "article-hr"
+    className: "border border-2 w-16 mx-auto"
   },
   embed: {
-    className: "styled-iframe"
+    className: "border-0"
   },
   header: {
-    className: "lead"
+    className: "font-bold"
   },
   image: {
-    className: "img-fluid"
+    className: "w-full max-w-screen-md",
+    actionsClassNames: {
+      stretched: "w-full h-80 object-cover",
+      withBorder: "border border-2",
+      withBackground: "p-2",
+    }
   },
   list: {
-    className: "unstyled-list"
+    className: "list-inside"
   },
   paragraph: {
-    className: "lead"
+    className: "text-base text-opacity-75",
+    actionsClassNames: {
+      alignment: "text-{alignment}", // This is a substitution placeholder: left or center.
+    }
   },
   quote: {
-    className: "block-quote"
+    className: "py-3 px-5 italic font-serif"
   },
   table: {
-    className: "table"
+    className: "table-auto"
   }
 }} />
 ```
 
-Below are the defaults for each renderer:
+The example above uses [TailwindCSS](https://tailwindcss.com/) classes, replacing the default ones, which you can find below:
 
 ```js
 const defaultConfigs = {
@@ -104,7 +112,7 @@ const defaultConfigs = {
     className: ""
   },
   embed: {
-    className: "styled-iframe",
+    className: "",
     rel: "noreferer nofollower external", // Generates an <a> if not able to receive an "embed" property
     sandbox: undefined
   },
@@ -132,12 +140,12 @@ const defaultConfigs = {
     }
   },
   table: {
-    className: "table"
+    className: ""
   }
 }
 ```
 
-So, in theory, any CSS framework (such as Bootstrap) can work seamlessly with this library as long as you pass the correct properties.
+So, in theory, any CSS framework can work seamlessly with this library as long as you pass the correct properties.
 
 ## Custom Renderers
 

src/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,59 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Block /> when receives a Config object with className only applies className to specified block 1`] = `
+Array [
+  <p
+    className="lead"
+  >
+    Mollit deserunt culpa fugiat ea do laboris minim ex do. Elit cillum qui aute sint irure aliqua excepteur minim. Eiusmod velit cupidatat ea culpa magna magna id consectetur enim irure ex excepteur tempor quis. Veniam incididunt ullamco adipisicing dolor ex proident ex amet dolor. Nisi in adipisicing non quis id Lorem consectetur.
+  </p>,
+  <h3>
+    Quis consectetur nostrud eu officia aute laborum labore nulla?
+  </h3>,
+]
+`;
+
+exports[`<Block /> when receives a Renderers object must maintan backward compatibility with 0.1.x format 1`] = `
+Array [
+  <p>
+    Mollit deserunt culpa fugiat ea do laboris minim ex do. Elit cillum qui aute sint irure aliqua excepteur minim. Eiusmod velit cupidatat ea culpa magna magna id consectetur enim irure ex excepteur tempor quis. Veniam incididunt ullamco adipisicing dolor ex proident ex amet dolor. Nisi in adipisicing non quis id Lorem consectetur.
+  </p>,
+  <h2>
+    Do laboris magna quis nisi consequat!
+  </h2>,
+  <pre>
+    <code
+      lang="text/javascript"
+    >
+      const foo = new Bar();
+    </code>
+  </pre>,
+]
+`;
+
+exports[`<Block /> when receives a Renderers object uses the provided renderer for the specified block 1`] = `
+Array [
+  <p>
+    Mollit deserunt culpa fugiat ea do laboris minim ex do. Elit cillum qui aute sint irure aliqua excepteur minim. Eiusmod velit cupidatat ea culpa magna magna id consectetur enim irure ex excepteur tempor quis. Veniam incididunt ullamco adipisicing dolor ex proident ex amet dolor. Nisi in adipisicing non quis id Lorem consectetur.
+  </p>,
+  <h2>
+    Do laboris magna quis nisi consequat!
+  </h2>,
+  <div>
+    <pre>
+      <code
+        lang="text/javascript"
+      >
+        const foo = new Bar();
+      </code>
+    </pre>
+    <p>
+      Warning: do not run this code in production
+    </p>
+  </div>,
+]
+`;
+
 exports[`<Block /> when receives an EditorJS blocks data renders all known block tags 1`] = `
 Array [
   <p>

src/index.test.tsx

@@ -119,6 +119,38 @@ describe('<Block />', () => {
     });
   });
 
+  describe('when receives a Config object with className', () => {
+    const data: DataProp = {
+      time: 1610632160642,
+      blocks: [
+        {
+          type: 'paragraph',
+          data: {
+            text: 'Mollit deserunt culpa fugiat ea do laboris minim ex do. Elit cillum qui aute sint irure aliqua excepteur minim. Eiusmod velit cupidatat ea culpa magna magna id consectetur enim irure ex excepteur tempor quis. Veniam incididunt ullamco adipisicing dolor ex proident ex amet dolor. Nisi in adipisicing non quis id Lorem consectetur.',
+          },
+        },
+        {
+          type: 'header',
+          data: {
+            text: 'Quis consectetur nostrud eu officia aute laborum labore nulla?',
+            level: 3,
+          },
+        },
+      ],
+      version: '2.19.0',
+    };
+
+    const config: ConfigProp = {
+      paragraph: {
+        className: "lead"
+      },
+    }
+
+    it('only applies className to specified block', () => {
+      expect(create(<Blocks data={data} config={config} />).toJSON()).toMatchSnapshot();
+    });
+  });
+
   describe('when receives a Renderers object', () => {
     const data: DataProp = {
       time: 1610632160642,
@@ -129,6 +161,13 @@ describe('<Block />', () => {
             text: 'Mollit deserunt culpa fugiat ea do laboris minim ex do. Elit cillum qui aute sint irure aliqua excepteur minim. Eiusmod velit cupidatat ea culpa magna magna id consectetur enim irure ex excepteur tempor quis. Veniam incididunt ullamco adipisicing dolor ex proident ex amet dolor. Nisi in adipisicing non quis id Lorem consectetur.',
           },
         },
+        {
+          type: 'header',
+          data: {
+            text: 'Do laboris magna quis nisi consequat!',
+            level: 2,
+          },
+        },
         {
           type: 'code',
           data: {
@@ -140,40 +179,47 @@ describe('<Block />', () => {
       version: '2.19.0',
     };
 
-    const CustomRenderCode: RenderFn<{
-      code: string | number
-      lang: "text/javascript" | "text/typescript"
-    }> = ({ data: d, className }) => (
-      <div>
-        <pre>
-          {d?.code && (
-            <code lang={d.lang} className={className}>{`${d.code}`}</code>
-          )}
-        </pre>
-        <p>Warning: do not run this code in production</p>
-      </div>
-    )
-
-    const CustomRenderHeader = ({
-      data: d,
-      className,
-    }: {
-      data: {[s:string]: any},
-      className?: string
-    }) => (
-      <h1></h1>
-    )
+    it('uses the provided renderer for the specified block', () => {
+      const CustomRenderCode: RenderFn<{
+        code: string | number
+        lang: "text/javascript" | "text/typescript"
+      }> = ({ data: d, className }) => (
+        <div>
+          <pre>
+            {d?.code && (
+              <code lang={d.lang} className={className}>{`${d.code}`}</code>
+            )}
+          </pre>
+          <p>Warning: do not run this code in production</p>
+        </div>
+      )
 
-    const renderers: RenderersProp = {
-      code: CustomRenderCode,
-      header: CustomRenderHeader,
-    }
+      const renderers: RenderersProp = {
+        code: CustomRenderCode,
+      }
 
-    it('uses the provided renderer for the specified block', () => {
       expect(create(<Blocks data={data} renderers={renderers} />).toJSON()).toMatchSnapshot();
     });
 
     it('must maintan backward compatibility with 0.1.x format', () => {
+      const CustomRenderHeader = ({
+        data: d,
+        className,
+      }: {
+        data: { [s: string]: any },
+        className?: string
+      }) => {
+        const Tag = `h${d?.level || 1}` as keyof JSX.IntrinsicElements;
+
+        return (
+          <Tag className={className}>{d.text}</Tag>
+        )
+      }
+
+      const renderers: RenderersProp = {
+        header: CustomRenderHeader,
+      }
+
       expect(create(<Blocks data={data} renderers={renderers} />).toJSON()).toMatchSnapshot();
     });
   });

src/renderers/code/__snapshots__/index.test.tsx.snap

@@ -12,3 +12,28 @@ exports[`<Code /> when receives a code block renders a <pre> tag with <code> 1`]
   </code>
 </pre>
 `;
+
+exports[`<Code /> when receives a code block with className renders a <pre> tag with <code className> 1`] = `
+<pre>
+  <code
+    className="code-block"
+    lang="text/html"
+  >
+    body {
+ font-size: 14px;
+ line-height: 16px;
+}
+  </code>
+</pre>
+`;
+
+exports[`<Code /> when receives a code block without lang renders a <pre> tag with <code> without lang property 1`] = `
+<pre>
+  <code>
+    body {
+ font-size: 14px;
+ line-height: 16px;
+}
+  </code>
+</pre>
+`;

src/renderers/code/index.test.tsx

@@ -13,4 +13,25 @@ describe('<Code />', () => {
       expect(create(<Code data={data} />).toJSON()).toMatchSnapshot();
     });
   });
+
+  describe('when receives a code block with className', () => {
+    const data: CodeBlockData = {
+      code: 'body {\n font-size: 14px;\n line-height: 16px;\n}',
+      lang: 'text/html',
+    };
+
+    it('renders a <pre> tag with <code className>', () => {
+      expect(create(<Code data={data} className={"code-block"} />).toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe('when receives a code block without lang', () => {
+    const data: CodeBlockData = {
+      code: 'body {\n font-size: 14px;\n line-height: 16px;\n}',
+    };
+
+    it('renders a <pre> tag with <code> without lang property', () => {
+      expect(create(<Code data={data} />).toJSON()).toMatchSnapshot();
+    });
+  });
 });

src/renderers/header/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Header /> when receives a header block with className renders a <h2 className> 1`] = `
+<h2
+  className="header-block"
+>
+  Editor.js
+</h2>
+`;
+
 exports[`<Header /> when receives an header level 2 block renders a <h2> tag 1`] = `
 <h2>
   Editor.js

src/renderers/header/index.test.tsx

@@ -13,4 +13,15 @@ describe('<Header />', () => {
       expect(create(<Header data={data} />).toJSON()).toMatchSnapshot();
     });
   });
+
+  describe('when receives a header block with className', () => {
+    const data: HeaderBlockData = {
+      text: 'Editor.js',
+      level: 2,
+    };
+
+    it('renders a <h2 className>', () => {
+      expect(create(<Header data={data} className={"header-block"} />).toJSON()).toMatchSnapshot();
+    });
+  });
 });