react-datocms 3.0.11 → 3.0.12

package/src/StructuredText/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,331 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StructuredText simple dast /2 with custom mark rules renders the document 1`] = `
+<StructuredText
+  customMarkRules={
+    Array [
+      Object {
+        "appliable": [Function],
+        "apply": [Function],
+      },
+    ]
+  }
+  data={
+    Object {
+      "document": Object {
+        "children": Array [
+          Object {
+            "children": Array [
+              Object {
+                "type": "span",
+                "value": "This
+is a ",
+              },
+              Object {
+                "marks": Array [
+                  "strong",
+                ],
+                "type": "span",
+                "value": "title",
+              },
+            ],
+            "level": 1,
+            "type": "heading",
+          },
+        ],
+        "type": "root",
+      },
+      "schema": "dast",
+    }
+  }
+>
+  <h1
+    key="t-0"
+  >
+    This
+    <br
+      key="t-0-br-0"
+    />
+    is a 
+    <b
+      key="t-1"
+    >
+      title
+    </b>
+  </h1>
+</StructuredText>
+`;
+
+exports[`StructuredText simple dast /2 with default rules renders the document 1`] = `
+<StructuredText
+  data={
+    Object {
+      "document": Object {
+        "children": Array [
+          Object {
+            "children": Array [
+              Object {
+                "type": "span",
+                "value": "This
+is a ",
+              },
+              Object {
+                "marks": Array [
+                  "strong",
+                ],
+                "type": "span",
+                "value": "title",
+              },
+            ],
+            "level": 1,
+            "type": "heading",
+          },
+        ],
+        "type": "root",
+      },
+      "schema": "dast",
+    }
+  }
+>
+  <h1
+    key="t-0"
+  >
+    This
+    <br
+      key="t-0-br-0"
+    />
+    is a 
+    <strong
+      key="t-1"
+    >
+      title
+    </strong>
+  </h1>
+</StructuredText>
+`;
+
+exports[`StructuredText simple dast with no links/blocks with custom rules renders the document 1`] = `
+<StructuredText
+  customNodeRules={
+    Array [
+      Object {
+        "appliable": [Function],
+        "apply": [Function],
+      },
+    ]
+  }
+  data={
+    Object {
+      "value": Object {
+        "document": Object {
+          "children": Array [
+            Object {
+              "children": Array [
+                Object {
+                  "type": "span",
+                  "value": "This
+is a ",
+                },
+                Object {
+                  "marks": Array [
+                    "strong",
+                  ],
+                  "type": "span",
+                  "value": "title",
+                },
+              ],
+              "level": 1,
+              "type": "heading",
+            },
+          ],
+          "type": "root",
+        },
+        "schema": "dast",
+      },
+    }
+  }
+  renderText={[Function]}
+>
+  <h2
+    key="t-0"
+  >
+    That
+    <br
+      key="t-0-br-0"
+    />
+    is a 
+    <strong
+      key="t-1"
+    >
+      title
+    </strong>
+  </h2>
+</StructuredText>
+`;
+
+exports[`StructuredText simple dast with no links/blocks with default rules renders the document 1`] = `
+<StructuredText
+  data={
+    Object {
+      "value": Object {
+        "document": Object {
+          "children": Array [
+            Object {
+              "children": Array [
+                Object {
+                  "type": "span",
+                  "value": "This
+is a ",
+                },
+                Object {
+                  "marks": Array [
+                    "strong",
+                  ],
+                  "type": "span",
+                  "value": "title",
+                },
+              ],
+              "level": 1,
+              "type": "heading",
+            },
+          ],
+          "type": "root",
+        },
+        "schema": "dast",
+      },
+    }
+  }
+>
+  <h1
+    key="t-0"
+  >
+    This
+    <br
+      key="t-0-br-0"
+    />
+    is a 
+    <strong
+      key="t-1"
+    >
+      title
+    </strong>
+  </h1>
+</StructuredText>
+`;
+
+exports[`StructuredText with links/blocks with default rules renders the document 1`] = `
+<StructuredText
+  data={
+    Object {
+      "blocks": Array [
+        Object {
+          "__typename": "QuoteRecord",
+          "author": "Mark Smith",
+          "id": "456",
+          "quote": "Foo bar.",
+        },
+      ],
+      "links": Array [
+        Object {
+          "__typename": "DocPageRecord",
+          "id": "123",
+          "slug": "how-to-code",
+          "title": "How to code",
+        },
+      ],
+      "value": Object {
+        "document": Object {
+          "children": Array [
+            Object {
+              "children": Array [
+                Object {
+                  "type": "span",
+                  "value": "This is a",
+                },
+                Object {
+                  "marks": Array [
+                    "highlight",
+                  ],
+                  "type": "span",
+                  "value": "title",
+                },
+                Object {
+                  "item": "123",
+                  "type": "inlineItem",
+                },
+                Object {
+                  "children": Array [
+                    Object {
+                      "type": "span",
+                      "value": "here!",
+                    },
+                  ],
+                  "item": "123",
+                  "meta": Array [
+                    Object {
+                      "id": "target",
+                      "value": "_blank",
+                    },
+                  ],
+                  "type": "itemLink",
+                },
+              ],
+              "level": 1,
+              "type": "heading",
+            },
+            Object {
+              "item": "456",
+              "type": "block",
+            },
+          ],
+          "type": "root",
+        },
+        "schema": "dast",
+      },
+    }
+  }
+  renderBlock={[Function]}
+  renderInlineRecord={[Function]}
+  renderLinkToRecord={[Function]}
+>
+  <h1
+    key="t-0"
+  >
+    This is a
+    <mark
+      key="t-1"
+    >
+      title
+    </mark>
+    <a
+      href="/docs/how-to-code"
+      key="t-2"
+    >
+      How to code
+    </a>
+    <a
+      href="/docs/how-to-code"
+      key="t-3"
+      target="_blank"
+    >
+      here!
+    </a>
+  </h1>
+  <figure
+    key="t-1"
+  >
+    <blockquote>
+      Foo bar.
+    </blockquote>
+    <figcaption>
+      Mark Smith
+    </figcaption>
+  </figure>
+</StructuredText>
+`;
+
+exports[`StructuredText with no value renders null 1`] = `
+<StructuredText
+  data={null}
+/>
+`;

package/src/StructuredText/__tests__/index.test.tsx

@@ -0,0 +1,271 @@
+import { mount, shallow, render } from 'enzyme';
+import * as React from 'react';
+import {
+  StructuredText,
+  StructuredTextGraphQlResponse,
+  StructuredTextDocument,
+  RenderError,
+  renderNodeRule,
+} from '../index';
+import { isHeading } from 'datocms-structured-text-utils';
+import { renderMarkRule } from 'datocms-structured-text-generic-html-renderer';
+
+describe('StructuredText', () => {
+  describe('with no value', () => {
+    it('renders null', () => {
+      const wrapper = mount(<StructuredText data={null} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('simple dast /2', () => {
+    const structuredText: StructuredTextDocument = {
+      schema: 'dast',
+      document: {
+        type: 'root',
+        children: [
+          {
+            type: 'heading',
+            level: 1,
+            children: [
+              {
+                type: 'span',
+                value: 'This\nis a ',
+              },
+              {
+                type: 'span',
+                marks: ['strong'],
+                value: 'title',
+              },
+            ],
+          },
+        ],
+      },
+    };
+
+    describe('with default rules', () => {
+      it('renders the document', () => {
+        const wrapper = mount(<StructuredText data={structuredText} />);
+        expect(wrapper).toMatchSnapshot();
+      });
+    });
+
+    describe('with custom mark rules', () => {
+      it('renders the document', () => {
+        const wrapper = mount(
+          <StructuredText
+            data={structuredText}
+            customMarkRules={[
+              renderMarkRule('strong', ({ children, key }) => (
+                <b key={key}>{children}</b>
+              )),
+            ]}
+          />,
+        );
+        expect(wrapper).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('simple dast with no links/blocks', () => {
+    const structuredText: StructuredTextGraphQlResponse = {
+      value: {
+        schema: 'dast',
+        document: {
+          type: 'root',
+          children: [
+            {
+              type: 'heading',
+              level: 1,
+              children: [
+                {
+                  type: 'span',
+                  value: 'This\nis a ',
+                },
+                {
+                  type: 'span',
+                  marks: ['strong'],
+                  value: 'title',
+                },
+              ],
+            },
+          ],
+        },
+      },
+    };
+
+    describe('with default rules', () => {
+      it('renders the document', () => {
+        const wrapper = mount(<StructuredText data={structuredText} />);
+        expect(wrapper).toMatchSnapshot();
+      });
+    });
+
+    describe('with custom rules', () => {
+      it('renders the document', () => {
+        const wrapper = mount(
+          <StructuredText
+            data={structuredText}
+            renderText={(text, key) => {
+              return (
+                <React.Fragment key={key}>
+                  {text.replace(/This/, 'That')}
+                </React.Fragment>
+              );
+            }}
+            customNodeRules={[
+              renderNodeRule(
+                isHeading,
+                ({ adapter: { renderNode }, node, children, key }) => {
+                  return renderNode(`h${node.level + 1}`, { key }, children);
+                },
+              ),
+            ]}
+          />,
+        );
+        expect(wrapper).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('with links/blocks', () => {
+    type QuoteRecord = {
+      id: string;
+      __typename: 'QuoteRecord';
+      quote: string;
+      author: string;
+    };
+
+    type DocPageRecord = {
+      id: string;
+      __typename: 'DocPageRecord';
+      slug: string;
+      title: string;
+    };
+
+    const structuredText: StructuredTextGraphQlResponse<
+      QuoteRecord, DocPageRecord
+    > = {
+      value: {
+        schema: 'dast',
+        document: {
+          type: 'root',
+          children: [
+            {
+              type: 'heading',
+              level: 1,
+              children: [
+                {
+                  type: 'span',
+                  value: 'This is a',
+                },
+                {
+                  type: 'span',
+                  marks: ['highlight'],
+                  value: 'title',
+                },
+                {
+                  type: 'inlineItem',
+                  item: '123',
+                },
+                {
+                  type: 'itemLink',
+                  item: '123',
+                  meta: [{ id: 'target', value: '_blank' }],
+                  children: [{ type: 'span', value: 'here!' }],
+                },
+              ],
+            },
+            {
+              type: 'block',
+              item: '456',
+            },
+          ],
+        },
+      },
+      blocks: [
+        {
+          id: '456',
+          __typename: 'QuoteRecord',
+          quote: 'Foo bar.',
+          author: 'Mark Smith',
+        },
+      ],
+      links: [
+        {
+          id: '123',
+          __typename: 'DocPageRecord',
+          title: 'How to code',
+          slug: 'how-to-code',
+        },
+      ],
+    };
+
+    describe('with default rules', () => {
+      it('renders the document', () => {
+        const wrapper = mount(
+          <StructuredText
+            data={structuredText}
+            renderInlineRecord={({ record }) => {
+              switch (record.__typename) {
+                case 'DocPageRecord':
+                  return <a href={`/docs/${record.slug}`}>{record.title}</a>;
+                default:
+                  return null;
+              }
+            }}
+            renderLinkToRecord={({ record, children, transformedMeta }) => {
+              switch (record.__typename) {
+                case 'DocPageRecord':
+                  return (
+                    <a {...transformedMeta} href={`/docs/${record.slug}`}>
+                      {children}
+                    </a>
+                  );
+                default:
+                  return null;
+              }
+            }}
+            renderBlock={({ record }) => {
+              switch (record.__typename) {
+                case 'QuoteRecord':
+                  return (
+                    <figure>
+                      <blockquote>{record.quote}</blockquote>
+                      <figcaption>{record.author}</figcaption>
+                    </figure>
+                  );
+                default:
+                  return null;
+              }
+            }}
+          />,
+        );
+        expect(wrapper).toMatchSnapshot();
+      });
+    });
+
+    describe('with missing renderInlineRecord prop', () => {
+      it('raises an error', () => {
+        expect(() => {
+          shallow(<StructuredText data={structuredText} />);
+        }).toThrow(RenderError);
+      });
+    });
+
+    describe('with missing record', () => {
+      it('raises an error', () => {
+        expect(() => {
+          shallow(
+            <StructuredText
+              data={{ ...structuredText, links: [] }}
+              renderInlineRecord={() => {
+                return null;
+              }}
+            />,
+          );
+        }).toThrow(RenderError);
+      });
+    });
+  });
+});