From b9cade819afb2924f9e6e8550c6982dbf448ba37 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Sat, 14 Dec 2024 15:51:34 +0800
Subject: [PATCH] test

---
 apps/www/src/app/(app)/dev/page.tsx           |  21 +-
 .../__tests__/{mark.spec.ts => marks.spec.ts} |   0
 .../src/lib/static/__tests__/nodes.spec.ts    | 184 ------------------
 .../src/lib/static/__tests__/render.spec.tsx  |  81 ++++++++
 .../static/__tests__/with-attributes.spec.ts  |  22 +++
 5 files changed, 123 insertions(+), 185 deletions(-)
 rename packages/core/src/lib/static/__tests__/{mark.spec.ts => marks.spec.ts} (100%)
 delete mode 100644 packages/core/src/lib/static/__tests__/nodes.spec.ts
 create mode 100644 packages/core/src/lib/static/__tests__/render.spec.tsx
 create mode 100644 packages/core/src/lib/static/__tests__/with-attributes.spec.ts

diff --git a/apps/www/src/app/(app)/dev/page.tsx b/apps/www/src/app/(app)/dev/page.tsx
index 0bd8f2df3e..8381d0e922 100644
--- a/apps/www/src/app/(app)/dev/page.tsx
+++ b/apps/www/src/app/(app)/dev/page.tsx
@@ -215,8 +215,27 @@ export default async function DevPage() {
     ],
   });
 
+  // console.log(
+  //   [
+  //     ...basicNodesValue,
+  //     ...linkValue,
+  //     ...tableValue,
+  //     ...horizontalRuleValue,
+  //     ...fontValue,
+  //     ...highlightValue,
+  //     ...kbdValue,
+  //     ...alignValue,
+  //     ...lineHeightValue,
+  //     ...indentValue,
+  //     ...indentListValue,
+  //     ...mediaValue,
+  //     ...alignValue,
+  //   ],
+  //   'fj'
+  // );
+
   const html = await serializePlateStatic(editorStatic, staticComponents);
-  // console.log('🚀 ~ DevPage ~ html:', html);
+  console.log('🚀 ~ DevPage ~ html:', html);
 
   return (
     <div className="mx-auto w-1/2">
diff --git a/packages/core/src/lib/static/__tests__/mark.spec.ts b/packages/core/src/lib/static/__tests__/marks.spec.ts
similarity index 100%
rename from packages/core/src/lib/static/__tests__/mark.spec.ts
rename to packages/core/src/lib/static/__tests__/marks.spec.ts
diff --git a/packages/core/src/lib/static/__tests__/nodes.spec.ts b/packages/core/src/lib/static/__tests__/nodes.spec.ts
deleted file mode 100644
index b0eb03c412..0000000000
--- a/packages/core/src/lib/static/__tests__/nodes.spec.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-import { serializePlateStatic } from '../serializedHtml';
-import { createStaticEditor, staticComponents } from './create-static-editor';
-
-describe('serializePlateStatic nodes', () => {
-  // it('should serialize complex example list with paragraphs to html', async () => {
-  //   const editor = createStaticEditor([
-  //     {
-  //       children: [
-  //         {
-  //           text: 'Some paragraph that contains, ',
-  //         },
-  //         {
-  //           italic: true,
-  //           text: 'italicized text',
-  //         },
-  //         {
-  //           text: ' and ',
-  //         },
-  //         {
-  //           bold: true,
-  //           text: 'bolded text',
-  //         },
-  //         {
-  //           text: ' is first.',
-  //         },
-  //       ],
-  //       type: 'p',
-  //     },
-  //     {
-  //       children: [
-  //         {
-  //           children: [
-  //             {
-  //               children: [
-  //                 {
-  //                   text: 'Item one in list',
-  //                 },
-  //               ],
-  //               type: 'p',
-  //             },
-  //           ],
-  //           type: 'li',
-  //         },
-  //         {
-  //           children: [
-  //             {
-  //               children: [
-  //                 {
-  //                   text: 'Item two in list',
-  //                 },
-  //               ],
-  //               type: 'p',
-  //             },
-  //           ],
-  //           type: 'li',
-  //         },
-  //       ],
-  //       type: 'ul',
-  //     },
-  //   ]);
-
-  //   const html = await serializePlateStatic(editor, staticComponents, {
-  //     preserveClassNames: [],
-  //     stripClassNames: true,
-  //     stripDataAttributes: true,
-  //   });
-
-  //   expect(html).toContain(
-  //     '<p>Some paragraph that contains, <em><span>italicized text</span></em> and <strong><span>bolded text</span></strong> is first.</p>'
-  //   );
-  //   expect(html).toContain(
-  //     '<ul><li><p>Item one in list</p></li><li><p>Item two in list</p></li></ul>'
-  //   );
-  // });
-
-  // it('should serialize complex example with no type on top level node to html', async () => {
-  //   const editor = createStaticEditor([
-  //     {
-  //       children: [
-  //         {
-  //           text: 'Some paragraph that contains, ',
-  //         },
-  //         {
-  //           italic: true,
-  //           text: 'italicized text',
-  //         },
-  //         {
-  //           text: ' and ',
-  //         },
-  //         {
-  //           bold: true,
-  //           text: 'bolded text',
-  //         },
-  //         {
-  //           text: ' is first.',
-  //         },
-  //       ],
-  //       type: 'p',
-  //     },
-  //   ]);
-
-  //   const html = await serializePlateStatic(editor, staticComponents, {
-  //     preserveClassNames: [],
-  //     stripClassNames: true,
-  //     stripDataAttributes: true,
-  //   });
-
-  //   expect(html).toContain(
-  //     '<p>Some paragraph that contains, <em><span>italicized text</span></em> and <strong><span>bolded text</span></strong> is first.</p>'
-  //   );
-  // });
-
-  // it('should serialize complex example with multiple no types on top level node to html', async () => {
-  //   const editor = createStaticEditor([
-  //     {
-  //       children: [
-  //         {
-  //           text: 'Some paragraph that contains, ',
-  //         },
-  //         {
-  //           italic: true,
-  //           text: 'italicized text',
-  //         },
-  //         {
-  //           text: ' and ',
-  //         },
-  //         {
-  //           bold: true,
-  //           text: 'bolded text',
-  //         },
-  //         {
-  //           text: ' is first.',
-  //         },
-  //       ],
-  //       type: 'p',
-  //     },
-  //     {
-  //       children: [{ bold: true, text: 'FOO' }],
-  //       type: 'p',
-  //     },
-  //   ]);
-
-  //   const html = await serializePlateStatic(editor, staticComponents, {
-  //     preserveClassNames: [],
-  //     stripClassNames: true,
-  //     stripDataAttributes: true,
-  //   });
-
-  //   expect(html).toContain(
-  //     '<p>Some paragraph that contains, <em><span>italicized text</span></em> and <strong><span>bolded text</span></strong> is first.</p>'
-  //   );
-  //   expect(html).toContain('<strong><span>FOO</span></strong>');
-  // });
-
-  it('should serialize string with %', async () => {
-    const editor = createStaticEditor([
-      {
-        children: [
-          {
-            text: 'None encoded string 100%',
-          },
-        ],
-        type: 'p',
-      },
-      {
-        children: [{ text: 'Encoded string 100%25' }],
-        type: 'p',
-      },
-    ]);
-
-    const html = await serializePlateStatic(editor, staticComponents, {
-      preserveClassNames: [],
-      stripClassNames: true,
-      // stripDataAttributes: true,
-    });
-
-    expect(html).toContain(
-      '<div data-slate-node="element"><span data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true">None encoded string 100%</span></span></span></div>'
-    );
-    // expect(html).toContain(
-    //   '<div><span data-slate-leaf="true"><span data-slate-string="true">Encoded string 100%25</span></span></div>'
-    // );
-  });
-});
diff --git a/packages/core/src/lib/static/__tests__/render.spec.tsx b/packages/core/src/lib/static/__tests__/render.spec.tsx
new file mode 100644
index 0000000000..ceabb0045d
--- /dev/null
+++ b/packages/core/src/lib/static/__tests__/render.spec.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { createSlateEditor } from '../../editor';
+import { createTSlatePlugin } from '../../plugin';
+import { serializePlateStatic } from '../serializedHtml';
+import { createStaticEditor, staticComponents } from './create-static-editor';
+
+describe('serializePlateStatic nodes', () => {
+  it('should serialize render below nodes', async () => {
+    const renderBelowPlugin = createTSlatePlugin({
+      key: 'test-list',
+      render: {
+        belowNodes: (injectProps: any) => {
+          const { element } = injectProps;
+
+          return function Component({
+            children,
+          }: {
+            children: React.ReactNode;
+          }) {
+            return (
+              <ul>
+                <li>{children}</li>
+              </ul>
+            );
+          };
+        },
+      },
+    });
+
+    const editor = createSlateEditor({
+      plugins: [renderBelowPlugin],
+      value: [
+        {
+          children: [{ text: 'test render below' }],
+          type: 'p',
+        },
+      ],
+    });
+
+    const html = await serializePlateStatic(editor, staticComponents, {
+      preserveClassNames: [],
+      stripClassNames: true,
+      stripDataAttributes: true,
+    });
+
+    expect(html).toEqual(
+      '<div><ul><li><span><span><span>test render below</span></span></span></li></ul></div>'
+    );
+  });
+
+  it('should serialize string with %', async () => {
+    const editor = createStaticEditor([
+      {
+        children: [
+          {
+            text: 'None encoded string 100%',
+          },
+        ],
+        type: 'p',
+      },
+      {
+        children: [{ text: 'Encoded string 100%25' }],
+        type: 'p',
+      },
+    ]);
+
+    const html = await serializePlateStatic(editor, staticComponents, {
+      preserveClassNames: [],
+      stripClassNames: true,
+      // stripDataAttributes: true,
+    });
+
+    expect(html).toContain(
+      '<span data-slate-string="true">None encoded string 100%</span>'
+    );
+    expect(html).toContain(
+      '<span data-slate-string="true">Encoded string 100%25</span>'
+    );
+  });
+});
diff --git a/packages/core/src/lib/static/__tests__/with-attributes.spec.ts b/packages/core/src/lib/static/__tests__/with-attributes.spec.ts
new file mode 100644
index 0000000000..bb7e639253
--- /dev/null
+++ b/packages/core/src/lib/static/__tests__/with-attributes.spec.ts
@@ -0,0 +1,22 @@
+import { serializePlateStatic } from '../serializedHtml';
+import { createStaticEditor, staticComponents } from './create-static-editor';
+
+describe('serializePlateStatic with attributes', () => {
+  it('should serialize elements with right slate attributes', async () => {
+    const editor = createStaticEditor([
+      {
+        children: [{ bold: true, text: 'Right Aligned Heading' }],
+        type: 'p',
+      },
+    ]);
+
+    const html = await serializePlateStatic(editor, staticComponents, {
+      preserveClassNames: [],
+      stripClassNames: true,
+    });
+
+    expect(html).toEqual(
+      '<div data-slate-node="element"><span data-slate-node="text"><span data-slate-leaf="true"><strong data-slate-leaf="true"><span data-slate-string="true">Right Aligned Heading</span></strong></span></span></div>'
+    );
+  });
+});