@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.spec.ts

@@ -0,0 +1,878 @@
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+import { RemirrorJSON } from '@remirror/core';
+import { squizNodeToRemirrorNode } from './squizNodeToRemirrorNode';
+import {
+  mockSquizNodeJson,
+  mockSquizNodeTextJson,
+  sharedNodeExamples,
+  squizOnlyNodeExamples,
+} from '../mocks/squizNodeJson.mock';
+
+type FormattedText = FormattedTextModels.v1.FormattedText;
+
+describe('squizNodeToRemirrorNode', () => {
+  it('should convert complex Squiz component JSON to Remirror JSON', () => {
+    expect(squizNodeToRemirrorNode(mockSquizNodeJson)).toEqual({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          attrs: {
+            nodeIndent: null,
+            nodeTextAlignment: null,
+            nodeLineHeight: null,
+            style: '',
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Hello ',
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'link',
+                  attrs: {
+                    href: 'https://www.google.com',
+                    target: null,
+                    auto: false,
+                    title: null,
+                  },
+                },
+                {
+                  type: 'bold',
+                },
+              ],
+              text: 'Mr Bean',
+            },
+            {
+              type: 'text',
+              text: ', nice to ',
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'link',
+                  attrs: {
+                    href: 'https://www.google.com',
+                    target: null,
+                    auto: false,
+                    title: null,
+                  },
+                },
+              ],
+              text: 'meet you',
+            },
+            {
+              type: 'text',
+              text: '.',
+            },
+            {
+              type: 'image',
+              attrs: {
+                alt: 'Test',
+                height: '150',
+                width: '200',
+                src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+                title: '',
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('should convert top level text component JSON to Remirror JSON', () => {
+    expect(squizNodeToRemirrorNode(mockSquizNodeTextJson)).toEqual({
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Hello world!',
+            },
+            {
+              type: 'text',
+              text: 'Another one...',
+            },
+          ],
+        },
+      ],
+      type: 'doc',
+    });
+  });
+
+  it('should handle empty Squiz component JSON', () => {
+    expect(squizNodeToRemirrorNode([])).toEqual({ content: [], type: 'doc' });
+    expect(
+      squizNodeToRemirrorNode([
+        {
+          children: [],
+          type: 'tag',
+          tag: 'p',
+        },
+      ]),
+    ).toEqual({
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          type: 'paragraph',
+        },
+      ],
+      type: 'doc',
+    });
+  });
+
+  it.each([
+    [
+      'Unsupported DOM tag',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Should throw an error.',
+            },
+          ],
+          type: 'tag',
+          tag: 'video',
+        },
+      ],
+      {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'unsupportedNode',
+                attrs: {
+                  originalNode: {
+                    children: [
+                      {
+                        type: 'text',
+                        value: 'Should throw an error.',
+                      },
+                    ],
+                    type: 'tag',
+                    tag: 'video',
+                  },
+                  errorMessage: 'Unsupported node type provided: tag (tag: video)',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    [
+      'Unsupported node type',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Should throw an error.',
+            },
+          ],
+          type: 'unsupported-type',
+        },
+      ],
+      {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'unsupportedNode',
+                attrs: {
+                  originalNode: {
+                    children: [
+                      {
+                        type: 'text',
+                        value: 'Should throw an error.',
+                      },
+                    ],
+                    type: 'unsupported-type',
+                  },
+                  errorMessage: 'Unsupported node type provided: unsupported-type',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  ])('should throw an error for non supported node types', (description: string, node: any, expected: any) => {
+    const result = squizNodeToRemirrorNode(node);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle line breaks', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [],
+        type: 'tag',
+        tag: 'br',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: expect.any(Object),
+          type: 'hardBreak',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle pre formatted text', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'Hello world!',
+          },
+        ],
+        type: 'tag',
+        tag: 'pre',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          content: [{ text: 'Hello world!', type: 'text' }],
+          type: 'preformatted',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle code block text', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'Hello world!',
+          },
+        ],
+        type: 'tag',
+        tag: 'code',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          type: 'codeBlock',
+          attrs: {
+            language: 'markup',
+            wrap: true,
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Hello world!',
+            },
+          ],
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle images', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            children: [],
+            attributes: {
+              alt: 'This is a test alt',
+              height: '360',
+              width: '480',
+              src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+              title: '',
+            },
+            type: 'tag',
+            tag: 'img',
+          },
+        ],
+        type: 'tag',
+        tag: 'p',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          content: [
+            {
+              type: 'image',
+              attrs: {
+                alt: 'This is a test alt',
+                height: '360',
+                width: '480',
+                src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+                title: '',
+              },
+            },
+          ],
+          type: 'paragraph',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it.each([
+    ['italics', 'italic'],
+    ['bold', 'bold'],
+    ['underline', 'underline'],
+  ])('should handle %s formatting', (a, b) => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            children: [
+              {
+                type: 'text',
+                value: 'Hello world!',
+              },
+            ],
+            font: {
+              [a]: true,
+            },
+            tag: 'span',
+            type: 'tag',
+          },
+        ],
+        type: 'tag',
+        tag: 'p',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          content: [{ text: 'Hello world!', marks: [{ type: b }], type: 'text' }],
+          type: 'paragraph',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it.each([1, 2, 3, 4, 5, 6])('should handle heading %s and set it to level %s', (level) => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'Hello world!',
+          },
+        ],
+        type: 'tag',
+        tag: `h${level}`,
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '', level },
+          content: [{ text: 'Hello world!', type: 'text' }],
+          type: 'heading',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it.each([...sharedNodeExamples, ...squizOnlyNodeExamples])(
+    'should convert a Squiz node to the expected Remirror representation - $description',
+    async ({ remirrorNode, squizNode }: any) => {
+      const result = squizNodeToRemirrorNode([
+        {
+          type: 'tag',
+          tag: 'p',
+          children: squizNode,
+        },
+      ]);
+      expect(result).toEqual({
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            attrs: {
+              nodeIndent: null,
+              nodeLineHeight: null,
+              nodeTextAlignment: null,
+              style: '',
+            },
+            content: [remirrorNode],
+          },
+        ],
+      });
+    },
+  );
+
+  it('should handle ordered lists', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'ol',
+        children: [
+          {
+            type: 'tag',
+            tag: 'li',
+            children: [
+              {
+                type: 'tag',
+                tag: 'p',
+                children: [
+                  {
+                    type: 'text',
+                    value: 'ddd',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { level: undefined, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          type: 'orderedList',
+          marks: undefined,
+          text: undefined,
+          content: [
+            {
+              attrs: { level: undefined, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+              type: 'listItem',
+              marks: undefined,
+              text: undefined,
+              content: [
+                {
+                  attrs: {
+                    level: undefined,
+                    nodeIndent: null,
+                    nodeLineHeight: null,
+                    nodeTextAlignment: null,
+                    style: '',
+                  },
+                  marks: undefined,
+                  text: undefined,
+                  type: 'paragraph',
+                  content: [
+                    {
+                      attrs: undefined,
+                      content: undefined,
+                      marks: undefined,
+                      text: 'ddd',
+                      type: 'text',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle unordered lists', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'ul',
+        children: [
+          {
+            type: 'tag',
+            tag: 'li',
+            children: [
+              {
+                type: 'tag',
+                tag: 'p',
+                children: [
+                  {
+                    type: 'text',
+                    value: 'chicken',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            type: 'tag',
+            tag: 'li',
+            children: [
+              {
+                type: 'tag',
+                tag: 'p',
+                children: [
+                  {
+                    type: 'text',
+                    value: 'egg',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { level: undefined, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          type: 'bulletList',
+          marks: undefined,
+          text: undefined,
+          content: [
+            {
+              attrs: { level: undefined, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+              type: 'listItem',
+              marks: undefined,
+              text: undefined,
+              content: [
+                {
+                  attrs: {
+                    level: undefined,
+                    nodeIndent: null,
+                    nodeLineHeight: null,
+                    nodeTextAlignment: null,
+                    style: '',
+                  },
+                  marks: undefined,
+                  text: undefined,
+                  type: 'paragraph',
+                  content: [
+                    {
+                      attrs: undefined,
+                      content: undefined,
+                      marks: undefined,
+                      text: 'chicken',
+                      type: 'text',
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              attrs: { level: undefined, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+              type: 'listItem',
+              marks: undefined,
+              text: undefined,
+              content: [
+                {
+                  attrs: {
+                    level: undefined,
+                    nodeIndent: null,
+                    nodeLineHeight: null,
+                    nodeTextAlignment: null,
+                    style: '',
+                  },
+                  marks: undefined,
+                  text: undefined,
+                  type: 'paragraph',
+                  content: [
+                    {
+                      attrs: undefined,
+                      content: undefined,
+                      marks: undefined,
+                      text: 'egg',
+                      type: 'text',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle horizontal lines', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'hr',
+        children: [],
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { level: NaN, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          type: 'horizontalRule',
+          marks: undefined,
+          text: undefined,
+          content: undefined,
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle tables', () => {
+    const squizJSON: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'table',
+        children: [
+          {
+            type: 'tag',
+            tag: 'tr',
+            children: [
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                  colwidth: '366',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                },
+              },
+            ],
+          },
+          {
+            type: 'tag',
+            tag: 'tr',
+            children: [
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'td',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'p',
+                    children: [],
+                  },
+                ],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  colwidth: '366',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'td',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'p',
+                    children: [],
+                  },
+                ],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'table',
+          attrs: {
+            isControllersInjected: true,
+          },
+          content: [
+            {
+              type: 'tableRow',
+              attrs: {
+                nodeIndent: null,
+                nodeLineHeight: null,
+                nodeTextAlignment: null,
+                style: '',
+              },
+              content: [
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                },
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: [366],
+                    background: null,
+                  },
+                },
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                },
+              ],
+            },
+            {
+              type: 'tableRow',
+              attrs: {
+                nodeIndent: null,
+                nodeLineHeight: null,
+                nodeTextAlignment: null,
+                style: '',
+              },
+              content: [
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                },
+                {
+                  type: 'tableCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: [366],
+                    background: null,
+                  },
+                  content: [
+                    {
+                      type: 'paragraph',
+                      attrs: {
+                        nodeIndent: null,
+                        nodeTextAlignment: null,
+                        nodeLineHeight: null,
+                        style: '',
+                      },
+                    },
+                  ],
+                },
+                {
+                  type: 'tableCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                  content: [
+                    {
+                      type: 'paragraph',
+                      attrs: {
+                        nodeIndent: null,
+                        nodeTextAlignment: null,
+                        nodeLineHeight: null,
+                        style: '',
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const result = squizNodeToRemirrorNode(squizJSON);
+    expect(result).toEqual(expected);
+  });
+});