wip review comments

Author: Skaiir

packages/form-js-editor/src/render/components/editor-form-fields/EditorJSFunctionField.js

@@ -5,14 +5,14 @@ const type = 'script';
 
 export function EditorJSFunctionField(props) {
   const { field } = props;
-  const { jsFunction = '' } = field;
+  const { jsFunction = '', key } = field;
 
   const Icon = iconsByType(type);
 
   let placeholderContent = 'JS function is empty';
 
   if (jsFunction.trim()) {
-    placeholderContent = 'JS function';
+    placeholderContent = `JS function for '${key}'`;
   }
 
   return (

packages/form-js-viewer/src/render/components/form-fields/JSFunctionField.js

@@ -43,7 +43,7 @@ export function JSFunctionField(props) {
       try {
         value = JSON.parse(JSON.stringify(value));
         onChange({ field, value });
-      } catch (e) {
+      } catch {
         sandboxError('Unparsable return value');
         clearValue();
       }
@@ -96,7 +96,7 @@ export function JSFunctionField(props) {
     const iframe = iframeContainerRef.current.querySelector('iframe');
     iframe.removeAttribute('allow');
 
-    // (3) run user code in sandbox
+    // (3) load user code in sandbox
     _sandbox.promise.then((sandboxInstance) => {
       sandboxInstance
 
@@ -108,7 +108,7 @@ export function JSFunctionField(props) {
     return () => {
       _sandbox.destroy();
     };
-  }, [ iframeContainerId, functionDefinition, onChange, field, paramsDefinition, computeOn, interval, safeSetValue, clearValue, sandboxError ]);
+  }, [ clearValue, functionDefinition, iframeContainerId, safeSetValue, sandboxError ]);
 
   const prevParams = usePrevious(params);
   const prevSandbox = usePrevious(sandbox);
@@ -137,7 +137,7 @@ export function JSFunctionField(props) {
       return () => clearInterval(intervalId);
     }
 
-  }, [ params, prevParams, sandbox, prevSandbox, onChange, field, computeOn, hasRunLoad, interval, clearValue, safeSetValue ]);
+  }, [ params, prevParams, sandbox, prevSandbox, field, computeOn, hasRunLoad, interval, clearValue, safeSetValue ]);
 
   return (
     <div ref={ iframeContainerRef } id={ iframeContainerId } className="fjs-sandbox-iframe-container"></div>

packages/form-js-viewer/src/render/components/icons/JSFunction.svg

@@ -1,5 +1,6 @@
 import {
-  render
+  render,
+  waitFor
 } from '@testing-library/preact/pure';
 
 import { JSFunctionField } from '../../../../../src/render/components/form-fields/JSFunctionField';
@@ -43,14 +44,12 @@ describe('JSFunctionField', function() {
     };
 
     // when
-    act(() => {
+    await act(() => {
       createJSFunctionField({ field, onChange: onChangeSpy, services });
     });
 
-    // wait for the iframe to compute the expression and pass it back
-    await new Promise(r => setTimeout(r, 100)).then(() => {
-
-      // then
+    // then
+    await waitFor(() => {
       expect(onChangeSpy).to.be.calledOnce;
       expect(onChangeSpy).to.be.calledWith({ field, value: 42 });
     });