Feature/initial (#1)

* Initial implementation

* Add circleci configuration

* Configure eslint and fix issues

Author: celiolatorraca

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [["es2015", {"modules": false}], "react", "stage-2"],
+  "env": {
+    "test": {
+      "presets": [["es2015"], "react", "stage-2"]
+    }
+  }
+}

.circleci/config.yml

@@ -0,0 +1,40 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: circleci/node:8
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Versions Check
+      - run:
+          name: Node version
+          command: node -v
+      - run:
+          name: Yarn version
+          command: yarn --version
+
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "package.json" }}
+          - v1-dependencies-
+
+      - run:
+          name: Install dependencies
+          command: yarn install
+
+      - run:
+          name: Run lint
+          command: yarn lint
+
+      - run:
+          name: Run tests
+          command: yarn test
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+vendor

.eslintrc.js

@@ -0,0 +1,60 @@
+'use strict';
+
+const OFF = 0;
+const ERROR = 2;
+
+module.exports = {
+  extends: 'fbjs',
+
+  // Stop ESLint from looking for a configuration file in parent folders
+  root: true,
+
+  plugins: [
+    'flowtype',
+    'react',
+  ],
+
+  // We're stricter than the default config, mostly. We'll override a few rules
+  // and then enable some React specific ones.
+  rules: {
+    'accessor-pairs': OFF,
+    'brace-style': [ERROR, '1tbs'],
+    'comma-dangle': [ERROR, 'always-multiline'],
+    'consistent-return': OFF,
+    'dot-location': [ERROR, 'property'],
+    'dot-notation': ERROR,
+    'eol-last': ERROR,
+    'eqeqeq': [ERROR, 'allow-null'],
+    'indent': OFF,
+    'jsx-quotes': [ERROR, 'prefer-double'],
+    'keyword-spacing': [ERROR, {after: true, before: true}],
+    'no-bitwise': OFF,
+    'no-inner-declarations': [ERROR, 'functions'],
+    'no-multi-spaces': ERROR,
+    'no-restricted-syntax': [ERROR, 'WithStatement'],
+    'no-shadow': ERROR,
+    'no-unused-expressions': ERROR,
+    'no-unused-vars': [ERROR, {args: 'none'}],
+    'no-useless-concat': OFF,
+    'quotes': [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true }],
+    'space-before-blocks': ERROR,
+    'space-before-function-paren': OFF,
+
+    // React & JSX
+    // Our transforms set this automatically
+    'react/jsx-boolean-value': [ERROR, 'always'],
+    'react/jsx-no-undef': ERROR,
+    // We don't care to do this
+    'react/jsx-sort-prop-types': OFF,
+    'react/jsx-tag-spacing': ERROR,
+    'react/jsx-uses-react': ERROR,
+    'react/no-is-mounted': OFF,
+    // This isn't useful in our test code
+    'react/react-in-jsx-scope': ERROR,
+    'react/self-closing-comp': ERROR,
+    // We don't care to do this
+    'react/jsx-wrap-multilines': [ERROR, {declaration: false, assignment: false}]
+  },
+
+  globals: {},
+};

.gitignore

@@ -2,6 +2,7 @@
 *.log
 *.map
 
+dist
 node_modules
 package-lock.json
 yarn.lock

README.md

@@ -0,0 +1,40 @@
+import SpatialNavigation from '../src/spatial-navigation';
+
+describe('SpatialNavigation', () => {
+  describe('initialize', () => {
+    let setStateSpy;
+
+    beforeEach(() => {
+      setStateSpy = jest.fn();
+      SpatialNavigation.init(setStateSpy);
+    });
+
+    it('listens to sn:focused event', () => {
+      const event = new CustomEvent('sn:focused', {
+        detail: { sectionId: 'focusPath' },
+      });
+      document.dispatchEvent(event);
+
+      expect(setStateSpy).toHaveBeenCalled();
+    });
+
+    describe('when focusing the same focused element', () => {
+      beforeEach(() => {
+        SpatialNavigation.focused = 'focusPath';
+      });
+
+      it('does nothing', () => {
+        const event = new CustomEvent('sn:focused', {
+          detail: { sectionId: 'focusPath' },
+        });
+        document.dispatchEvent(event);
+
+        expect(setStateSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('destroy', () => {
+
+  });
+});

__tests__/spatial-navigation-test.js

@@ -0,0 +1,103 @@
+import React from 'react';
+
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+Enzyme.configure({ adapter: new Adapter() });
+
+import SpatialNavigation from '../src/spatial-navigation';
+import withFocusable from '../src/with-focusable';
+
+describe('withFocusable', () => {
+  const Component = () => <div />;
+  const renderComponent = ({
+    focusPath,
+    currentFocusPath,
+    setFocus = jest.fn(),
+  }) => {
+    const EnhancedComponent = withFocusable({ focusPath })(Component);
+    return mount(
+      <EnhancedComponent />,
+      { context: { currentFocusPath, setFocus } }
+    );
+  };
+
+  let component;
+
+  it('injects focusPath as prop', () => {
+    component = renderComponent({ focusPath: 'focusPath' });
+    expect(component.find(Component).prop('focusPath')).toEqual('focusPath');
+  });
+
+  describe('when element focusPath is the same as currentFocusPath', () => {
+    it('injects focused prop as true', () => {
+      const focusPath = 'focusPath1';
+      component = renderComponent({ currentFocusPath: focusPath, focusPath });
+
+      expect(component.find(Component).prop('focused')).toBe(true);
+    });
+  });
+
+  describe('when element focusPath is different than currentFocusPath', () => {
+    it('injects focused prop as true', () => {
+      component = renderComponent({
+        currentFocusPath: 'focusPath1',
+        focusPath: 'focusPath2',
+      });
+
+      expect(component.find(Component).prop('focused')).toBe(false);
+    });
+  });
+
+  describe('about setFocus injected prop', () => {
+    it('injects function to children', () => {
+      component = renderComponent({ focusPath: 'focusPath' });
+      expect(component.find(Component).prop('setFocus')).not.toBeFalsy();
+    });
+
+    it('binds configured focusPath as first parameter', () => {
+      const setFocusSpy = jest.fn();
+      component = renderComponent({
+        focusPath: 'focusPath',
+        setFocus: setFocusSpy,
+      });
+
+      const setFocus = component.find(Component).prop('setFocus');
+      setFocus();
+
+      expect(setFocusSpy).toHaveBeenCalledWith('focusPath');
+    });
+
+    it('sends setFocus parameter as second parameter', () => {
+      const setFocusSpy = jest.fn();
+      component = renderComponent({
+        focusPath: 'focusPath',
+        setFocus: setFocusSpy,
+      });
+
+      const setFocus = component.find(Component).prop('setFocus');
+      setFocus('otherFocusPath');
+
+      expect(setFocusSpy).toHaveBeenCalledWith('focusPath', 'otherFocusPath');
+    });
+  });
+
+  describe('lifecycle', () => {
+    beforeEach(() => {
+      spyOn(SpatialNavigation, 'addFocusable');
+      spyOn(SpatialNavigation, 'removeFocusable');
+    });
+
+    it('adds focusable after component mounts', () => {
+      component = renderComponent({ focusPath: 'focusPath' });
+      expect(SpatialNavigation.addFocusable).toHaveBeenCalledWith('focusPath');
+    });
+
+    it('removes focusable after component unmounts', () => {
+      component = renderComponent({ focusPath: 'focusPath' });
+
+      component.unmount();
+      expect(SpatialNavigation.removeFocusable)
+        .toHaveBeenCalledWith('focusPath');
+    });
+  });
+});

__tests__/with-focusable-test.js

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+Enzyme.configure({ adapter: new Adapter() });
+
+import SpatialNavigation from '../src/spatial-navigation';
+import withNavigation from '../src/with-navigation';
+
+describe('withNavigation', () => {
+  const Component = () => <div />;
+  const EnhancedComponent = withNavigation(Component);
+  const renderComponent = () => mount(<EnhancedComponent />);
+
+  let component;
+
+  describe('#setFocus', () => {
+    beforeEach(() => {
+      spyOn(SpatialNavigation, 'setCurrentFocusedPath').and.callThrough();
+      component = renderComponent();
+    });
+
+    describe('for the same focusPath', () => {
+      it('does nothing', () => {
+        component.setState({ currentFocusPath: 'focusPath' });
+        component.children().props().setFocus('focusPath');
+        expect(SpatialNavigation.setCurrentFocusedPath).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('for a different focusPath', () => {
+      it('updates navigation currentFocusPath', () => {
+        component.setState({ currentFocusPath: 'focusPath' });
+        component.children().props().setFocus('anotherFocusPath');
+        expect(SpatialNavigation.getCurrentFocusedPath())
+          .toEqual('anotherFocusPath');
+      });
+
+      it('updates currentFocusPath state', () => {
+        component.setState({ currentFocusPath: 'focusPath' });
+        component.children().props().setFocus('anotherFocusPath');
+        expect(component.state().currentFocusPath).toEqual('anotherFocusPath');
+      });
+    });
+  });
+
+  describe('lifecycle', () => {
+    beforeEach(() => {
+      spyOn(SpatialNavigation, 'init');
+      spyOn(SpatialNavigation, 'destroy');
+    });
+
+    it('initializes after component mounts', () => {
+      component = renderComponent();
+      expect(SpatialNavigation.init).toHaveBeenCalled();
+    });
+
+    it('initializes after component updates', () => {
+      component = renderComponent();
+
+      SpatialNavigation.init.calls.reset();
+      expect(SpatialNavigation.init).not.toHaveBeenCalled();
+      component.setProps({ prop: 'test' });
+      expect(SpatialNavigation.init).toHaveBeenCalled();
+    });
+
+    it('destroys after component unmounts', () => {
+      component = renderComponent();
+
+      component.unmount();
+      expect(SpatialNavigation.destroy).toHaveBeenCalled();
+    });
+  });
+});