Add optional componentId param to bindComponent (#4299)

Author: luigiinred

lib/src/events/ComponentEventsObserver.test.tsx

@@ -5,7 +5,6 @@ import { NativeEventsReceiver } from '../adapters/NativeEventsReceiver.mock';
 
 describe('ComponentEventsObserver', () => {
   const mockEventsReceiver = new NativeEventsReceiver();
-  const uut = new ComponentEventsObserver(mockEventsReceiver);
   const didAppearFn = jest.fn();
   const didDisappearFn = jest.fn();
   const didMountFn = jest.fn();
@@ -16,13 +15,60 @@ describe('ComponentEventsObserver', () => {
   const previewCompletedFn = jest.fn();
   const modalDismissedFn = jest.fn();
   let subscription;
+  let uut;
 
   class SimpleScreen extends React.Component<any, any> {
     render() {
       return 'Hello';
     }
   }
 
+  class UnboundScreen extends React.Component<any, any> {
+    constructor(props) {
+      super(props);
+    }
+
+    componentDidMount() {
+      didMountFn();
+    }
+
+    componentWillUnmount() {
+      willUnmountFn();
+    }
+
+    componentDidAppear() {
+      didAppearFn();
+    }
+
+    componentDidDisappear() {
+      didDisappearFn();
+    }
+
+    navigationButtonPressed(event) {
+      navigationButtonPressedFn(event);
+    }
+
+    modalDismissed(event) {
+      modalDismissedFn(event);
+    }
+
+    searchBarUpdated(event) {
+      searchBarUpdatedFn(event);
+    }
+
+    searchBarCancelPressed(event) {
+      searchBarCancelPressedFn(event);
+    }
+
+    previewCompleted(event) {
+      previewCompletedFn(event);
+    }
+
+    render() {
+      return 'Hello';
+    }
+  }
+
   class BoundScreen extends React.Component<any, any> {
     constructor(props) {
       super(props);
@@ -70,13 +116,43 @@ describe('ComponentEventsObserver', () => {
     }
   }
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+    uut = new ComponentEventsObserver(mockEventsReceiver);
+  });
+
   it(`bindComponent expects a component with componentId`, () => {
     const tree = renderer.create(<SimpleScreen />);
     expect(() => uut.bindComponent(tree.getInstance() as any)).toThrow('');
     const tree2 = renderer.create(<SimpleScreen componentId={123} />);
     expect(() => uut.bindComponent(tree2.getInstance() as any)).toThrow('');
   });
 
+  it(`bindComponent accepts an optional componentId`, () => {
+    const tree = renderer.create(<UnboundScreen />);
+    uut.bindComponent(tree.getInstance() as any, 'myCompId')
+
+    expect(tree.toJSON()).toBeDefined();
+    expect(didAppearFn).not.toHaveBeenCalled();
+
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    expect(didAppearFn).toHaveBeenCalledTimes(1);
+  });
+
+  it(`bindComponent should use optional componentId if component has a componentId in props`, () => {
+    const tree = renderer.create(<UnboundScreen  componentId={'doNotUseThisId'} />);
+    uut.bindComponent(tree.getInstance() as any, 'myCompId')
+
+    expect(tree.toJSON()).toBeDefined();
+    
+    uut.notifyComponentDidAppear({ componentId: 'dontUseThisId', componentName: 'doesnt matter' });
+    expect(didAppearFn).not.toHaveBeenCalled();
+    
+
+    uut.notifyComponentDidAppear({ componentId: 'myCompId', componentName: 'doesnt matter' });
+    expect(didAppearFn).toHaveBeenCalledTimes(1);
+  });
+
   it(`bindComponent notifies listeners by componentId on events`, () => {
     const tree = renderer.create(<BoundScreen componentId={'myCompId'} />);
     expect(tree.toJSON()).toBeDefined();

lib/src/events/ComponentEventsObserver.ts

@@ -38,18 +38,19 @@ export class ComponentEventsObserver {
     this.nativeEventsReceiver.registerPreviewCompletedListener(this.notifyPreviewCompleted);
   }
 
-  public bindComponent(component: React.Component<any>): EventSubscription {
-    const componentId = component.props.componentId;
-    if (!_.isString(componentId)) {
-      throw new Error(`bindComponent expects a component with a componentId in props`);
+  public bindComponent(component: React.Component<any>, componentId?: string): EventSubscription {
+    const computedComponentId = componentId || component.props.componentId;
+
+    if (!_.isString(computedComponentId)) {
+      throw new Error(`bindComponent expects a component with a componentId in props or a componentId as the second argument`);
     }
-    if (_.isNil(this.listeners[componentId])) {
-      this.listeners[componentId] = {};
+    if (_.isNil(this.listeners[computedComponentId])) {
+      this.listeners[computedComponentId] = {};
     }
     const key = _.uniqueId();
-    this.listeners[componentId][key] = component;
+    this.listeners[computedComponentId][key] = component;
 
-    return { remove: () => _.unset(this.listeners[componentId], key) };
+    return { remove: () => _.unset(this.listeners[computedComponentId], key) };
   }
 
   public unmounted(componentId: string) {

lib/src/events/EventsRegistry.ts

@@ -60,7 +60,7 @@ export class EventsRegistry {
     return this.commandsObserver.register(callback);
   }
 
-  public bindComponent(component: React.Component<any>): EventSubscription {
-    return this.componentEventsObserver.bindComponent(component);
+  public bindComponent(component: React.Component<any>, componentId?: string): EventSubscription {
+    return this.componentEventsObserver.bindComponent(component, componentId);
   }
 }