Update render description to accept function callback with element in…

… extensible component
ManageIQ · Sep 6, 2017 · 1aaa1e3 · 1aaa1e3
1 parent 0bc1675
commit 1aaa1e3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/app/javascript/extensible-components/index.ts b/app/javascript/extensible-components/index.ts
@@ -1,4 +1,4 @@
-import { IExtensionComponent, IMiQApiCallback } from './lib';
+import { IExtensionComponent, IMiQApiCallback, IMiQRenderCallback } from './lib';
 
 const source = new Rx.Subject();
 const items = new Set();
@@ -8,7 +8,7 @@ const items = new Set();
  */
 export class ExtensibleComponent {
   public delete: () => void;
-  constructor(public name: string, public api: IMiQApiCallback, public render: IMiQApiCallback){}
+  constructor(public name: string, public api: IMiQApiCallback, public render: IMiQRenderCallback){}
 }
 
 /**
@@ -17,7 +17,7 @@ export class ExtensibleComponent {
  * @param api callback functions to change inner logic of component.
  * @param render callback function to apply render functions.
  */
-function addComponent(name: string, api?: IMiQApiCallback, render?: IMiQApiCallback) {
+function addComponent(name: string, api?: IMiQApiCallback, render?: IMiQRenderCallback) {
   let newCmp = new ExtensibleComponent(name, api, render);
   source.onNext({action: 'add', payload: newCmp});
   return newCmp;

diff --git a/app/javascript/extensible-components/lib.ts b/app/javascript/extensible-components/lib.ts
@@ -1,3 +1,5 @@
+export type RenderCallback = (element: HTMLElement) => void;
+
 export interface IExtensionComponent {
   action: string;
   payload: any;
@@ -7,10 +9,14 @@ export interface IMiQApiCallback {
   [propName: string]: Function;
 }
 
+export interface IMiQRenderCallback {
+  [propName: string]: (renderCallback: RenderCallback) => void;
+}
+
 export interface IExtensibleComponent {
   extensibleComponent: any;
   apiCallbacks: () => IMiQApiCallback;
-  renderCallbacks: () => IMiQApiCallback;
+  renderCallbacks: () => IMiQRenderCallback;
 }
 
 export function getItems() {

diff --git a/spec/javascripts/packs/extensible-componenets.spec.js b/spec/javascripts/packs/extensible-componenets.spec.js
@@ -1,12 +1,14 @@
 describe('Extensible components', function() {
+  var htmlPartial = '<div>something</div>';
   var cmp;
   var mockApi = {
     onSomeAction: jasmine.createSpy('onSomeAction', function() {}),
-    onSomeActionWithParams: jasmine.createSpy('onSomeActionWithParams', function(param) {}),
+    onSomeActionWithParams: jasmine.createSpy('onSomeActionWithParams', function(someParam){}),
   };
 
   var mockRender = {
-    addButtonHtml: jasmine.createSpy('addButtonHtml', function(htmlElem) {})
+    addButton: jasmine.createSpy('addButton', function(callback) {}),
+    addButton2: function(callback) { callback(htmlPartial); }
   };
 
   it('should be defined with empty items', function() {
@@ -49,11 +51,13 @@ describe('Extensible components', function() {
       });
 
       it('should react to render', function() {
-        var someHTML = '<div>something</div>';
+        var someCallback = jasmine.createSpy('someCallback', function(element) {});
         subscription.with(function(component) {
-          component.render.addButtonHtml(someHTML);
+          component.render.addButton(someCallback);
+          component.render.addButton2(someCallback);
         });
-        expect(mockRender.addButtonHtml).toHaveBeenCalledWith(someHTML);
+        expect(mockRender.addButton).toHaveBeenCalledWith(someCallback);
+        expect(someCallback).toHaveBeenCalledWith(htmlPartial);
       });
     });