Bugfix: Jest Testing

package.json

@@ -25,8 +25,8 @@
     "axios": "^0.19.2",
     "isomorphic-dompurify": "^0.6.0",
     "lodash.kebabcase": "^4.1.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.3"
+    "mutation-observer": "^1.0.3",
+    "react-html-parser": "^2.0.2"
   },
   "devDependencies": {
     "@auto-it/all-contributors": "^9.35.1",

src/Chunk.jsx

@@ -6,10 +6,48 @@ import { useChunk } from "./useChunk";
 export function Chunk({ children, identifier, src, contentKey, ...props }) {
   const type = src ? "image" : undefined;
   const defaultContent = src || children;
-  const { Component } = useChunk(defaultContent, { identifier, type, contentKey });
+  const tag = props.tag || "em-span"
+  delete props.tag;
 
-  return <Component {...props} />;
+  const chunkProps = getChunkProps(props)
+  const { Component } = useChunk(defaultContent, { identifier, type, contentKey, tag });
+
+  if (chunkProps.length) {
+    chunkProps.forEach(prop => {
+      const key = prop[0];
+      const attributeId = prop[1];
+      const prefix =  prop[2]
+      const raw = prefix === "chunk-"
+
+      const value = useChunk(props[key] || "", {
+        identifier: attributeId, 
+        type: undefined,
+        contentKey: "",
+        tag: "em-span"
+      })
+
+      props[key] = raw ? value.content : <value.Component />
+      delete props[prefix + key]
+    });
+  }
+
+  return <Component {...props} />
 }
 
 // Here for backwards-compatibility, but named exports are preferred
 export default Chunk;
+
+function getChunkProps(obj){
+  let str, key, results = [];
+
+  for(key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      if (key.indexOf("chunk-") === 0 || key.indexOf("Chunk-") === 0) {
+        str = key.substring(0,6)
+        results.push([key.replace(str, ""), obj[key], str ])
+      }
+    }
+  }
+
+  return results;
+}

src/Editmode.jsx

@@ -21,10 +21,14 @@ export function Editmode({ children, projectId, defaultChunks }) {
     setbranch(params.get("em_branch"));
   }, []);
 
-  return (
-    <EditmodeContext.Provider value={{ branch, projectId, defaultChunks }}>
-      {children}
-    </EditmodeContext.Provider>
-  );
+  if (typeof window !== 'undefined') {
+    return (
+      <EditmodeContext.Provider value={{ branch, projectId, defaultChunks }}>
+        {children}
+      </EditmodeContext.Provider>
+    );
+  } else {
+    return ""
+  }
 }
 export default Editmode;

src/index.js

@@ -1,7 +1,12 @@
 // @ts-check
 
+// Fix Jest mutationObserver error
+import MutationObserver from 'mutation-observer';
+global.MutationObserver = MutationObserver;
+
+// Exports
 export { Editmode } from "./Editmode.jsx";
 export { Chunk } from "./Chunk.jsx";
 export { ChunkCollection } from "./ChunkCollection.jsx";
 export { ChunkFieldValue } from "./ChunkFieldValue.jsx";
-export { useChunk } from "./useChunk";
+export { useChunk } from "./useChunk";

src/useChunk.js

@@ -4,13 +4,17 @@ import { useContext, useEffect, useState, useMemo } from "react";
 import { EditmodeContext } from "./EditmodeContext";
 import { api, renderChunk, computeContentKey, getCachedData, storeCache } from './utils'
 
-export function useChunk(defaultContent, { identifier, type, contentKey }) {
+export function useChunk(defaultContent, { identifier, type, contentKey, tag }) {
   const { projectId, defaultChunks } = useContext(EditmodeContext);
-  const [chunk, setChunk] = useState(undefined);
+  const [chunk, setChunk] = useState({
+    chunk_type: type || "single_line_text",
+    content: defaultContent || "",
+    content_key: contentKey
+  });
 
-   if (!contentKey)  {
-     contentKey = defaultContent ? computeContentKey(defaultContent) : null;
-   }
+  if (!contentKey)  {
+    contentKey = defaultContent ? computeContentKey(defaultContent) : null;
+  }
 
   const cacheId = identifier || contentKey + projectId;
 
@@ -31,47 +35,36 @@ export function useChunk(defaultContent, { identifier, type, contentKey }) {
   const url = `chunks/${identifier || contentKey}?project_id=${projectId}`;
 
   useEffect(() => {
-    // Render content
     let cachedChunk = getCachedData(cacheId)
-    let newChunk = cachedChunk ? JSON.parse(cachedChunk) : fallbackChunk || {
-      chunk_type: type || "single_line_text",
-      content: defaultContent,
-      content_key: contentKey
-    }
-
+    let newChunk = cachedChunk ? JSON.parse(cachedChunk) : fallbackChunk
     if (newChunk) setChunk(newChunk)
 
     // Fetch new data
-    let error;
-    api
+    if (contentKey || identifier) {
+      api
       .get(url)
       .then((res) => {
         storeCache(cacheId, res.data)
         if (!cachedChunk) setChunk(res.data)
       }) // Store chunk to localstorage
-      .catch((error) => console.log(error)); // Set error state
-
-    if (error && identifier) {
-      console.warn(
-        `Something went wrong trying to retrieve chunk data: ${error}. Have you provided the correct Editmode identifier (${identifier}) as a prop to your Chunk component instance?`
-      );
+      .catch((error) => {
+        if (identifier) {
+          console.warn(
+            `Something went wrong trying to retrieve chunk data: ${error}. Have you provided the correct Editmode identifier (${identifier}) as a prop to your Chunk component instance?`
+          );
+        }
+      });
     }
   }, [cacheId]);
 
-  
+
 
   if (chunk) {
     return {
-      Component(props) {
-        return renderChunk(chunk, props)
+      Component: props => {
+        return renderChunk(chunk, tag, props)
       },
       content: chunk.content
     };
-  } else {
-    return {
-      Component() {
-        return null
-      }
-    }
   }
 }