chore(ffe-decorators-react): Import ffe-decorators-react

commitlint.config.js

@@ -24,6 +24,7 @@ module.exports = {
                 'ffe-core-react',
                 'ffe-datepicker',
                 'ffe-datepicker-react',
+                'ffe-decorators-react',
                 'ffe-form',
                 'ffe-form-react',
                 'ffe-grid',

packages/ffe-decorators-react/.babelrc

@@ -1,7 +1,7 @@
 {
-    "presets": ["latest", "react"],
+    "presets": ["env", "react"],
     "plugins": [
-        'transform-object-rest-spread'
+        "transform-object-rest-spread"
     ],
     "ignore": [
         "test/**/*.js"

packages/ffe-decorators-react/.eslintrc

@@ -1,7 +1,10 @@
 {
-    "extends": "eslint-config-ffe",
-    "parser": "babel-eslint",
-    "env": {
-        "browser": true
-    }
-}
+    "overrides": [
+      {
+        "files": [ "src/**/*.spec.js"],
+        "env": {
+            "jest": true
+        }
+      }
+    ]
+  }

packages/ffe-decorators-react/.npmrc

@@ -1,2 +1 @@
-git-tag-version=false
-registry=***REMOVED***
+package-lock=false

packages/ffe-decorators-react/package.json

@@ -1,64 +1,53 @@
 {
-  "name": "ffe-decorators-react",
-  "version": "1.0.0",
-  "description": "",
-  "scripts": {
-    "build": "babel -d lib/ src/",
-    "watch": "onchange 'src/**.js' -- npm run build",
-    "lint": "eslint src/ test/",
-    "lint:fix": "eslint --fix src/ test/",
-    "test": "npm run test:spec && npm run test:nsp",
-    "test:nsp": "nsp check",
-    "test:spec": "mocha -G --compilers js:babel-core/register --require ./test/setup.test.js test/**/*.test.js",
-    "test:watch": "npm run tdd",
-    "tdd": "mocha -G --compilers js:babel-core/register --require ./test/setup.test.js test/**/*.test.js -w",
-    "prepublish": "npm run build",
-    "has-published": "npm show . versions -s --json | grep -q \\\"${npm_package_version}\\\""
-  },
-  "keywords": [
-    "ffe"
-  ],
-  "peerDependencies": {
-    "react": "^15.4.2"
-  },
-  "devDependencies": {
-    "babel-cli": "^6.23.0",
-    "babel-core": "^6.23.1",
-    "babel-eslint": "^7.1.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-polyfill": "^6.23.0",
-    "babel-preset-latest": "^6.22.0",
-    "babel-preset-react": "^6.23.0",
-    "babel-register": "^6.23.0",
-    "enzyme": "^2.7.1",
-    "eslint": "^3.17.1",
-    "eslint-config-ffe": "^6.0.1",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^3.0.2",
-    "eslint-plugin-react": "^6.10.0",
-    "expect.js": "^0.3.1",
-    "install": "^0.8.7",
-    "jsdom": "^9.11.0",
-    "mocha": "^3.2.0",
-    "nsp": "^2.6.3",
-    "onchange": "3.2.1",
-    "react": "^15.4.2",
-    "react-addons-test-utils": "^15.4.2",
-    "react-dom": "^15.4.2",
-    "sinon": "^1.17.7"
-  },
-  "files": [
-    "lib",
-    "*.js"
-  ],
-  "main": "lib/index.js",
-  "author": "SpareBank 1",
-  "repository": {
-    "type": "git",
-    "url": "***REMOVED***"
-  },
-  "publishConfig": {
-    "registry": "***REMOVED***"
-  },
-  "license": "ISC"
+    "name": "ffe-decorators-react",
+    "version": "1.0.0",
+    "description": "",
+    "main": "lib/index.js",
+    "author": "SpareBank 1",
+    "license": "UNLICENSED",
+    "scripts": {
+        "build": "babel -d lib/ src/",
+        "watch": "onchange 'src/**.js' -- npm run build",
+        "lint": "eslint src/",
+        "lint:fix": "eslint --fix src/",
+        "test": "npm run test:spec && npm run test:nsp",
+        "test:nsp": "nsp check",
+        "test:spec": "jest",
+        "test:watch": "npm run tdd",
+        "tdd": "jest --watch"
+    },
+    "keywords": ["ffe"],
+    "peerDependencies": {
+        "react": "^15.4.2 || ^16.0.0"
+    },
+    "devDependencies": {
+        "babel-cli": "^6.23.0",
+        "babel-core": "^6.23.1",
+        "babel-eslint": "^7.1.1",
+        "babel-plugin-transform-object-rest-spread": "^6.23.0",
+        "babel-polyfill": "^6.23.0",
+        "babel-preset-latest": "^6.22.0",
+        "babel-preset-react": "^6.23.0",
+        "babel-register": "^6.23.0",
+        "enzyme": "^3.3.0",
+        "enzyme-adapter-react-16": "^1.1.1",
+        "eslint": "^3.17.1",
+        "jest": "^22.0.5",
+        "mock-raf": "^1.0.0",
+        "nsp": "^2.6.3",
+        "onchange": "3.2.1",
+        "react": "^16.2.0",
+        "react-addons-test-utils": "^15.6.2",
+        "react-dom": "^16.2.0",
+        "sinon": "^1.17.7"
+    },
+    "files": ["lib", "*.js"],
+    "repository": {
+        "type": "git",
+        "url":
+            "***REMOVED***"
+    },
+    "jest": {
+        "setupTestFrameworkScriptFile": "./test-setup.js"
+    }
 }

packages/ffe-decorators-react/test/easeProperties.test.js → packages/ffe-decorators-react/src/ease-properties/easeProperties.spec.js

@@ -3,19 +3,18 @@ import { shallow } from 'enzyme';
 import sinon from 'sinon';
 import createRafMock from 'mock-raf';
 
-import easeProperties from '../src/ease-properties';
+import easeProperties from './easeProperties';
 
 const rafMock = createRafMock();
 
-const Circle = ({ radius, opacity, ...rest }) => ( // eslint-disable-line react/prop-types
-    <circle r={radius} opacity={opacity} {...rest} />
-);
+const Circle = (
+    { radius, opacity, ...rest }, // eslint-disable-line react/prop-types
+) => <circle r={radius} opacity={opacity} {...rest} />;
 
 describe('easeProperties decorator', () => {
     beforeEach(() => {
         window.requestAnimationFrame = f => f;
         window.cancelAnimationFrame = f => f;
-
         sinon.stub(window, 'requestAnimationFrame', rafMock.raf);
         sinon.stub(window, 'cancelAnimationFrame', rafMock.cancel);
     });
@@ -28,85 +27,72 @@ describe('easeProperties decorator', () => {
     describe('initializing', () => {
         it('throws error if properties object is not provided', () => {
             const DecoratedComponent = easeProperties()(Circle);
-            expect(() => shallow(<DecoratedComponent />)).to.throwException();
+            expect(() => shallow(<DecoratedComponent />)).toThrow(
+                /The second argument to easeProperties must be an object/,
+            );
         });
 
         it('sets provided property to state if single prop', () => {
             const DecoratedComponent = easeProperties({ radius: {} })(Circle);
             const wrapper = shallow(<DecoratedComponent radius={1} />);
 
-            expect(wrapper.state('radius')).to.be.an('object');
+            expect(typeof wrapper.state('radius')).toBe('object');
         });
 
         it('sets several properties to state if more than one prop', () => {
-            const DecoratedComponent = easeProperties({ radius: {}, opacity: {} })(Circle);
-            const wrapper = shallow(<DecoratedComponent radius={1} opacity={1} />);
-
-            expect(wrapper.state('radius')).to.be.an('object');
-            expect(wrapper.state('opacity')).to.be.an('object');
+            const DecoratedComponent = easeProperties({
+                radius: {},
+                opacity: {},
+            })(Circle);
+            const wrapper = shallow(
+                <DecoratedComponent radius={1} opacity={1} />,
+            );
+
+            expect(typeof wrapper.state('radius')).toBe('object');
+            expect(typeof wrapper.state('opacity')).toBe('object');
         });
 
         it('sets current value of prop to prop value if initial value is not provided', () => {
             const DecoratedComponent = easeProperties({ radius: {} })(Circle);
             const wrapper = shallow(<DecoratedComponent radius={1} />);
 
-            expect(wrapper.state('radius').currentValue).to.be(1);
+            expect(wrapper.state('radius').currentValue).toBe(1);
         });
 
         it('sets from value of prop equal to current value', () => {
             const DecoratedComponent = easeProperties({ radius: {} })(Circle);
             const wrapper = shallow(<DecoratedComponent radius={1} />);
 
-            expect(wrapper.state('radius').currentValue).to.be(wrapper.state('radius').fromValue);
+            expect(wrapper.state('radius').currentValue).toBe(
+                wrapper.state('radius').fromValue,
+            );
         });
 
         it('sets duration for prop easing if provided', () => {
-            const DecoratedComponent = easeProperties({ radius: { duration: 2 } })(Circle);
+            const DecoratedComponent = easeProperties({
+                radius: { duration: 2 },
+            })(Circle);
             const wrapper = shallow(<DecoratedComponent radius={1} />);
 
-            expect(wrapper.state('radius').duration).to.be(2);
+            expect(wrapper.state('radius').duration).toBe(2);
         });
 
         it('defaults duration to 1 second if not provided', () => {
             const DecoratedComponent = easeProperties({ radius: {} })(Circle);
             const wrapper = shallow(<DecoratedComponent radius={1} />);
 
-            expect(wrapper.state('radius').duration).to.be(1);
+            expect(wrapper.state('radius').duration).toBe(1);
         });
     });
 
     describe('easing', () => {
-        it('starts easing if eased property changes', () => {
-            const DecoratedComponent = easeProperties({ radius: {} })(Circle);
-            const wrapper = shallow(<DecoratedComponent radius={1} />);
-
-            wrapper.setProps({ radius: 100 });
-
-            expect(wrapper.find(Circle).prop('radius')).to.be(1);
-            rafMock.step({ count: 100 });
-
-            expect(wrapper.find(Circle).prop('radius')).to.be(100);
-        });
-
-        it('eases from a larger value to a smaller value as well', () => {
-            const DecoratedComponent = easeProperties({ radius: {} })(Circle);
-            const wrapper = shallow(<DecoratedComponent radius={100} />);
-
-            wrapper.setProps({ radius: 1 });
-
-            expect(wrapper.find(Circle).prop('radius')).to.be(100);
-            rafMock.step({ count: 100 });
-
-            expect(wrapper.find(Circle).prop('radius')).to.be(1);
-        });
-
-        it('doesn\'t ease if non-eased property changes', () => {
+        it("doesn't ease if non-eased property changes", () => {
             const DecoratedComponent = easeProperties({ radius: {} })(Circle);
             const wrapper = shallow(<DecoratedComponent radius={1} />);
 
             wrapper.setProps({ width: 100 });
 
-            expect(wrapper.find(Circle).prop('width')).to.be(100);
+            expect(wrapper.find(Circle).prop('width')).toBe(100);
         });
 
         it('resets the iteration count if prop changes', () => {
@@ -116,17 +102,19 @@ describe('easeProperties decorator', () => {
             wrapper.setProps({ radius: 50 });
 
             rafMock.step({ count: 30 });
-            expect(wrapper.state('radius').currentIteration).to.be(30);
+            expect(wrapper.state('radius').currentIteration).toBe(30);
 
             wrapper.setProps({ radius: 100 });
-            expect(wrapper.state('radius').currentIteration).to.be(0);
+            expect(wrapper.state('radius').currentIteration).toBe(0);
         });
 
         it('sets current value of prop to its initial value if provided', () => {
-            const DecoratedComponent = easeProperties({ radius: { initialValue: 10 } })(Circle);
+            const DecoratedComponent = easeProperties({
+                radius: { initialValue: 10 },
+            })(Circle);
             const wrapper = shallow(<DecoratedComponent radius={1} />);
 
-            expect(wrapper.state('radius').currentValue).to.be(10);
+            expect(wrapper.state('radius').currentValue).toBe(10);
         });
     });
 
@@ -141,7 +129,9 @@ describe('easeProperties decorator', () => {
             const state = wrapper.state('radius');
             wrapper.unmount();
 
-            expect(window.cancelAnimationFrame.lastCall.args[0]).to.be(state.rafId);
+            expect(window.cancelAnimationFrame.lastCall.args[0]).toBe(
+                state.rafId,
+            );
         });
     });
 });

packages/ffe-decorators-react/test-setup.js

@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });