@podlite/to-jsx 0.0.4 → 0.0.8

package/t/index.component.spec.tsx

@@ -1,6 +1,8 @@
 import Podlite from "../src/index";
 import React from "react";
 import ReactDOM from "react-dom";
+import { podlite as podlite_core, PodliteExport } from "podlite";
+import { cleanIds, frozenIds } from "podlite";
 
 const root = document.body.appendChild(document.createElement("div"));
 
@@ -9,9 +11,20 @@ function render(jsx) {
 }
 
 afterEach(() => ReactDOM.unmountComponentAtNode(root));
+const CPodlite = ({ children, ...options }) => {
+  let podlite = podlite_core({ importPlugins: true });
 
+  let treeAfterParsed = frozenIds()(podlite.parse(children));
+
+  const tree = podlite.toAst(treeAfterParsed);
+  return (
+    <Podlite
+      {...{ children, ...options, tree: { interator: tree } as PodliteExport }}
+    />
+  );
+};
 it("para content", () => {
-  render(<Podlite>Hello!</Podlite>);
+  render(<CPodlite>Hello!</CPodlite>);
 
   expect(root.innerHTML).toMatchInlineSnapshot(`
        <p>
@@ -22,7 +35,7 @@ it("para content", () => {
 
 it("table", () => {
   render(
-    <Podlite>
+    <CPodlite>
       {`
 =begin pod
 =para test
@@ -45,7 +58,7 @@ sdsdsd
 =end table
 =end pod
 `}
-    </Podlite>
+    </CPodlite>
   );
   expect(root.innerHTML).toMatchInlineSnapshot(`
     <div>
@@ -55,11 +68,11 @@ sdsdsd
     sdsdsd
         </p>
       </div>
-      <h1>
+      <h1 id="id">
         Test
       </h1>
       <table>
-        <caption>
+        <caption class="caption">
           Super table!
         </caption>
         <tbody>
@@ -420,25 +433,102 @@ it("accepts U<>, X<>, S<>", () => {
   `);
 });
 
-it("accepts =Image", () => {
+it("accepts =Image base", () => {
   render(
     <Podlite>
       {`
   =begin pod
-  =Image [alternative] https://www.ru
+  =for Image :id<1> :caption<A picture of a cat> :link<https://example.com/cat.jpg>
+  alternative https://www.example.org
   =end pod
 `}
     </Podlite>
   );
   expect(root.innerHTML).toMatchInlineSnapshot(`
     <div>
-      <img src="https://www.ru"
-           alt="alternative"
+      <div class="image_block"
+           id="1"
+      >
+        <a href="https://example.com/cat.jpg">
+          <img src="https://www.example.org"
+               alt="alternative"
+          >
+        </a>
+        <div class="caption">
+          <p>
+            A picture of a cat
+          </p>
+        </div>
+      </div>
+    </div>
+  `);
+});
+
+it("accepts =Image empty caption", () => {
+  render(
+    <Podlite>
+      {`
+    =begin pod
+    =for Image :id<1> :link<https://example.com/cat.jpg>
+    alternative https://www.example.org
+    =end pod
+  `}
+    </Podlite>
+  );
+  // console.log(root.innerHTML);return;
+  expect(root.innerHTML).toMatchInlineSnapshot(`
+    <div>
+      <div class="image_block"
+           id="1"
       >
+        <a href="https://example.com/cat.jpg">
+          <img src="https://www.example.org"
+               alt="alternative"
+          >
+        </a>
+      </div>
     </div>
+    <p>
+    </p>
   `);
 });
 
+it("accepts =Image with fullset of attributes", () => {
+  render(
+    <Podlite>
+      {`
+=begin pod
+=for Image :alt<alternative> 
+= :link<'https://www.example.org'>
+= :src<'https://www.example.org'>
+= :caption<'caption'>
+= :id<'id'>
+content ignored
+=end pod
+  `}
+    </Podlite>
+  );
+  expect(root.innerHTML).toMatchInlineSnapshot(`
+    <div>
+      <div class="image_block"
+           id="id"
+      >
+        <a href="https://www.example.org">
+          <img src="https://www.example.org"
+               alt="alternative"
+          >
+        </a>
+        <div class="caption">
+          <p>
+            caption
+          </p>
+        </div>
+      </div>
+    </div>
+    <p>
+    </p>
+  `);
+});
 it("accepts =TITLE", () => {
   render(
     <Podlite>
@@ -540,6 +630,54 @@ but some of us are looking at the stars!
   `);
 });
 
+it("accepts =Toc", () => {
+  render(
+    <Podlite>
+      {`
+    =begin pod
+    =Toc head1 item
+    =for head1 :id<Test>
+    head1
+    =for item1 :id<item>
+    item1
+    =end pod
+        `}
+    </Podlite>
+  );
+  expect(root.innerHTML).toMatchInlineSnapshot(`
+    <div>
+      <div class="toc">
+        <ul class="toc-list listlevel1">
+          <li class="toc-item">
+            <a href="#Test">
+              head1
+            </a>
+          </li>
+          <ul class="toc-list listlevel2">
+            <li class="toc-item">
+              <a href="#item">
+                item1
+              </a>
+            </li>
+          </ul>
+        </ul>
+      </div>
+      <h1 id="Test">
+        head1
+      </h1>
+      <ul>
+        <li id="item">
+          <p>
+            item1
+          </p>
+        </li>
+      </ul>
+    </div>
+    <p>
+    </p>
+  `);
+});
+
 it.skip("accepts =Diagram", () => {
   render(
     <Podlite>