feat(playground): emit formPlayground.rendered event

Author: Niklas Kiefer

packages/form-js-playground/src/Playground.js

@@ -59,6 +59,7 @@ export default function Playground(options) {
       data={ data }
       onStateChanged={ (_state) => state = _state }
       onInit={ _ref => ref = _ref }
+      emit={ emitter.emit }
       { ...rest }
     />,
     container
@@ -85,6 +86,10 @@ export default function Playground(options) {
     return ref.setSchema(schema);
   };
 
+  this.get = function(name, strict) {
+    return ref.get(name, strict);
+  };
+
   this.destroy = function() {
     this.emit('destroy');
   };

packages/form-js-playground/src/components/PlaygroundRoot.js

@@ -21,7 +21,8 @@ import './PlaygroundRoot.css';
 export function PlaygroundRoot(props) {
 
   const {
-    editor: editorConfig = {}
+    editor: editorConfig = {},
+    emit
   } = props;
 
   const {
@@ -50,8 +51,10 @@ export function PlaygroundRoot(props) {
 
   const [ resultData, setResultData ] = useState(props.data || {});
 
+  // pipe to playground API
   useEffect(() => {
     props.onInit({
+      get: (name, strict) => formEditorRef.current.get(name, strict),
       setSchema: setInitialSchema
     });
   });
@@ -87,6 +90,12 @@ export function PlaygroundRoot(props) {
       setSchema(formEditor.getSchema());
     });
 
+    formEditor.on('formEditor.rendered', () => {
+
+      // notifiy interested parties after render
+      emit('formPlayground.rendered');
+    });
+
     form.on('changed', event => {
       setResultData(event.data);
     });

packages/form-js-playground/test/spec/Playground.spec.js

@@ -181,7 +181,30 @@ describe('playground', function() {
 
     // then
     expect(playground.getState().schema).to.deep.include(otherSchema);
+  });
+
+
+  it('should emit <formPlayground.rendered>', async function() {
+
+    // given
+    const spy = sinon.spy();
 
+    await act(() => {
+      playground = new Playground({
+        container,
+        schema
+      });
+    });
+
+    playground.on('formPlayground.rendered', spy);
+
+    const eventBus = playground.get('eventBus');
+
+    // when
+    eventBus.fire('formEditor.rendered');
+
+    // then
+    expect(spy).to.have.been.called;
   });
 
 });