Refact with-focusable to make focusPath optional and use DOMElement as default

Author: celiolatorraca

__tests__/spatial-navigation-test.js

@@ -1,14 +1,18 @@
 import SpatialNavigation from '../src/spatial-navigation';
 
 describe('SpatialNavigation', () => {
-  describe('initialize', () => {
-    let setStateSpy;
+  let setStateSpy;
 
-    beforeEach(() => {
-      setStateSpy = jest.fn();
-      SpatialNavigation.init(setStateSpy);
-    });
+  beforeEach(() => {
+    setStateSpy = jest.fn();
+    SpatialNavigation.init(setStateSpy);
+  });
 
+  afterEach(() => {
+    SpatialNavigation.destroy();
+  });
+
+  describe('on initialize', () => {
     it('listens to sn:focused event', () => {
       const event = new CustomEvent('sn:focused', {
         detail: { sectionId: 'focusPath' },
@@ -20,7 +24,7 @@ describe('SpatialNavigation', () => {
 
     describe('when focusing the same focused element', () => {
       beforeEach(() => {
-        SpatialNavigation.focused = 'focusPath';
+        SpatialNavigation.focusedPath = 'focusPath';
       });
 
       it('does nothing', () => {
@@ -34,7 +38,16 @@ describe('SpatialNavigation', () => {
     });
   });
 
-  describe('destroy', () => {
+  describe('on destroy', () => {
+    it('stops listening to sn:focused', () => {
+      SpatialNavigation.destroy();
+
+      const event = new CustomEvent('sn:focused', {
+        detail: { sectionId: 'focusPath' },
+      });
+      document.dispatchEvent(event);
 
+      expect(setStateSpy).not.toHaveBeenCalled();
+    });
   });
 });

__tests__/with-focusable-test.js

@@ -23,6 +23,12 @@ describe('withFocusable', () => {
 
   let component;
 
+  afterEach(() => {
+    if (component) {
+      component.unmount();
+    }
+  });
+
   it('injects focusPath as prop', () => {
     component = renderComponent({ focusPath: 'focusPath' });
     expect(component.find(Component).prop('focusPath')).toEqual('focusPath');
@@ -97,8 +103,8 @@ describe('withFocusable', () => {
       component = renderComponent({ focusPath: 'focusPath' });
 
       component.unmount();
-      expect(SpatialNavigation.removeFocusable)
-        .toHaveBeenCalledWith('focusPath');
+      // TODO: back toHaveBeenCalledWith, testing DOM Element
+      expect(SpatialNavigation.removeFocusable).toHaveBeenCalled();
     });
   });
 });

src/navigation.js

@@ -1183,7 +1183,9 @@ var GlobalConfig = {
       } else {
         _defaultSectionId = sectionId;
       }
-    }
+    },
+
+    getSectionId: getSectionId
   };
 
 export default SpatialNavigation

src/spatial-navigation.js

@@ -2,11 +2,10 @@ import Navigation from './navigation';
 
 class SpatialNavigation {
   constructor() {
-    this.focusedPath = null;
-    this.setState = null;
-
     this.handleFocused = this.handleFocused.bind(this);
-    document.addEventListener('sn:focused', this.handleFocused);
+
+    this.destroy();
+    this.bindFocusEvent();
   }
 
   init(updateState) {
@@ -16,12 +15,27 @@ class SpatialNavigation {
 
     Navigation.init();
     Navigation.focus();
+    this.bindFocusEvent();
   }
 
   destroy() {
+    this.focusedPath = null;
     this.setState = null;
+
     Navigation.uninit();
+    this.unbindFocusEvent();
+  }
+
+  bindFocusEvent() {
+    if (!this.listening) {
+      this.listening = true;
+      document.addEventListener('sn:focused', this.handleFocused);
+    }
+  }
+
+  unbindFocusEvent() {
     document.removeEventListener('sn:focused', this.handleFocused);
+    this.listening = false;
   }
 
   handleFocused(ev) {
@@ -40,15 +54,23 @@ class SpatialNavigation {
     Navigation.focus(focusPath);
   }
 
-  addFocusable(focusPath, focusDOMElement) {
-    this.removeFocusable(focusPath);
+  addFocusable(focusDOMElement, focusPath) {
+    this.removeFocusable(focusDOMElement);
 
-    Navigation.add(focusPath, {selector: focusDOMElement});
-    Navigation.makeFocusable(focusPath);
+    const params = [{ selector: focusDOMElement }];
+    if (focusPath) {
+      params.unshift(focusPath);
+    }
+
+    Navigation.add(...params);
+    Navigation.makeFocusable(Navigation.getSectionId(focusDOMElement));
   }
 
-  removeFocusable(focusPath) {
-    Navigation.remove(focusPath);
+  removeFocusable(focusDOMElement) {
+    const sectionId = Navigation.getSectionId(focusDOMElement);
+    if (sectionId) {
+      Navigation.remove(sectionId);
+    }
   }
 }
 

src/with-focusable.js

@@ -23,10 +23,10 @@ const withFocusable = ({
   })),
   lifecycle({
     componentDidMount() {
-      SpatialNavigation.addFocusable(focusPath, ReactTV.findDOMNode(this));
+      SpatialNavigation.addFocusable(ReactTV.findDOMNode(this), focusPath);
     },
     componentWillUnmount() {
-      SpatialNavigation.removeFocusable(focusPath);
+      SpatialNavigation.removeFocusable(ReactTV.findDOMNode(this));
     },
   }),
 );