Merge pull request #30 in FFE/ffe-monorepo from fix-build to master

* commit '5e7329fa2c309bc3844093c7c120416e8360440e':
  chore(ffe-icons-react): Hoist dependencies
  chore(ffe-core-react): Hoist dependencies
  chore(ffe-chart-donut-react): Hoist dependencies
  chore(ffe-buttons-react): Hoist dependencies
  chore: Don't run lerna publish when not on master
  fix(ffe-accordion-react): Create ID only once
  chore(ffe-chart-donut-react): Add correct dependencies
  chore(ffe-chart-donut-react): Use Jest for testing

buildCI.sh

@@ -1,8 +1,15 @@
 #!/bin/bash -e
 
+function is_master_branch() {
+    [[ $GIT_BRANCH =~ ^(origin/)?master$ ]]
+}
+
 git clean -f -x -d
 npm install
 npm run build
 npm test
-./node_modules/.bin/lerna publish --yes \
-	--registry ***REMOVED***
+
+if is_master_branch; then
+    ./node_modules/.bin/lerna publish --yes \
+        --registry ***REMOVED***
+fi

packages/ffe-accordion-react/.eslintrc

@@ -0,0 +1,10 @@
+{
+    "overrides": [
+      {
+        "files": [ "src/**/*.spec.js"],
+        "env": {
+            "jest": true
+        }
+      }
+    ]
+  }

packages/ffe-accordion-react/package.json

@@ -2,15 +2,17 @@
   "name": "ffe-accordion-react",
   "version": "3.1.2",
   "main": "lib/index.js",
+  "author": "SpareBank 1",
+  "license": "UNLICENSED",
   "scripts": {
     "build": "babel -d lib/. --ignore=*.test.js src/. && npm run example",
     "watch": "onchange 'src/**.js' -- npm run build",
     "lint": "eslint src/.",
     "start": "budo examples/accordion.js --open --live --title \"FFE Accordion React\" -- -t [ babelify --presets [ es2015 react ] ] -t node-lessify",
     "test:nsp": "nsp check",
-    "test:spec": "mocha --require babel-register src/**/*.test.js",
+    "test:spec": "jest",
     "test": "npm run test:spec && npm run test:nsp",
-    "tdd": "mocha --require babel-register src/**/*.test.js -w",
+    "tdd": "jest --watch",
     "example": "babel-node docs/create.js > example.html"
   },
   "peerDependencies": {
@@ -29,15 +31,18 @@
   "devDependencies": {
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.3.13",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "ffe-accordion": "^3.0.0",
-    "ffe-core": "^10.1.2"
+    "ffe-core": "^10.1.2",
+    "jest": "^22.0.4"
   },
   "files": [
     "lib",
     "example.html",
     "*.js"
   ],
-  "repository": "***REMOVED***",
-  "author": "SpareBank 1",
-  "license": "UNLICENSED"
+  "jest": {
+    "setupTestFrameworkScriptFile": "./test-setup.js"
+  }
 }

packages/ffe-accordion-react/src/Accordion.js

@@ -1,21 +1,34 @@
-import React, { cloneElement } from 'react';
+import React, { Component } from 'react';
 import { node, oneOf } from 'prop-types';
 import uuid from 'uuid';
 
-function Accordion(props) {
-    const accordionId = uuid.v4();
-    return (
-        <ul
-            {...props}
-            aria-multiselectable="true"
-            className="ffe-accordion"
-            role="tablist"
-        >
-            { React.Children.map(props.children, (ele) =>
-                cloneElement(ele, { type: props.type, uuid: accordionId }))
-            }
-        </ul>
-    );
+class Accordion extends Component {
+    constructor() {
+        super();
+
+        this.id = uuid.v4();
+    }
+
+    render() {
+        const {
+            children,
+            type,
+            ...rest
+        } = this.props;
+
+        return (
+            <ul
+                {...rest}
+                aria-multiselectable="true"
+                className="ffe-accordion"
+                role="tablist"
+            >
+                {React.Children.map(children, (ele) =>
+                    React.cloneElement(ele, { type, uuid: this.id })
+                )}
+            </ul>
+        );
+    }
 }
 
 Accordion.propTypes = {

packages/ffe-accordion-react/src/Accordion.spec.js

@@ -0,0 +1,36 @@
+
+import { AccordionItem, WhiteAccordion, } from '.';
+import { shallow } from 'enzyme';
+import React from 'react';
+
+const getWrapper = props => shallow(
+    <WhiteAccordion {...props}>
+        <AccordionItem>Foo</AccordionItem>
+        <AccordionItem>Bar</AccordionItem>
+    </WhiteAccordion>
+);
+
+describe('<Accordion />', () => {
+    it('renders an unorderered list', () => {
+        const wrapper = getWrapper();
+        expect(wrapper.is('ul')).toBe(true);
+    });
+    it('provides type property to each child', () => {
+        const wrapper = getWrapper({ type: 'blue' });
+        expect(wrapper.find('AccordionItem').everyWhere(item => item.prop('type') === 'blue')).toBe(true);
+    });
+    it('provides the same uuid property to each child', () => {
+        const wrapper = getWrapper();
+        const children = wrapper.find('AccordionItem');
+        expect(children.first().prop('uuid')).toBe(children.last().prop('uuid'));
+    });
+    it('provides different uuids for each instance of the accordion', () => {
+        const oneWrapper = getWrapper();
+        const anotherWrapper = getWrapper();
+        expect(
+            oneWrapper.find('AccordionItem').first().prop('uuid')
+        ).not.toBe(
+            anotherWrapper.find('AccordionItem').last().prop('uuid')
+        );
+    });
+});

packages/ffe-accordion-react/src/AccordionItem.spec.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+
+import { AccordionItem } from '.';
+
+const getWrapper = props => shallow(<AccordionItem {...props} />);
+
+describe('<AccordionItem />', () => {
+    it('renders without exploding', () => {
+        const wrapper = getWrapper();
+        expect(wrapper.exists()).toBe(true);
+    });
+
+    describe('expanded content', () => {
+        const getWrapperWithExpandedContent = props =>
+            getWrapper({ expandedContent: 'Expanded content', ...props });
+        it('is hidden by default', () => {
+            const wrapper = getWrapperWithExpandedContent();
+            expect(wrapper.state('isOpen')).toBe(false);
+        });
+        it('can be shown to begin with', () => {
+            const wrapper = getWrapperWithExpandedContent({ isOpen: true });
+            expect(wrapper.state('isOpen')).toBe(true);
+        });
+        it('it toggled by clicking', () => {
+            const wrapper = getWrapperWithExpandedContent();
+            wrapper.find('.ffe-accordion-item__toggler').simulate('click', { target: { nodeName: 'div' } });
+            expect(wrapper.state('isOpen')).toBe(true);
+        });
+        it('is not toggled when clicked item is included in ignoredNodeNames prop', () => {
+            const wrapper = getWrapperWithExpandedContent({ ignoredNodeNames: ['button'] });
+            wrapper.find('.ffe-accordion-item__toggler').simulate('click', { target: { nodeName: 'button' } });
+            expect(wrapper.state('isOpen')).toBe(false);
+        });
+        it('is toggled by enter or space', () => {
+            const wrapper = getWrapperWithExpandedContent();
+
+            wrapper.find('.ffe-accordion-item__toggler')
+                .simulate('keyup', { target: { nodeName: 'div' }, keyCode: 13 }); // enter
+            expect(wrapper.state('isOpen')).toBe(true);
+
+            wrapper.find('.ffe-accordion-item__toggler')
+                .simulate('keyup', { target: { nodeName: 'div' }, keyCode: 32 }); // esc
+            expect(wrapper.state('isOpen')).toBe(false);
+        });
+        it('toggling triggers onOpen and onClose props', () => {
+            const onOpenSpy = sinon.spy();
+            const onCloseSpy = sinon.spy();
+
+            const wrapper = getWrapperWithExpandedContent({ onOpen: onOpenSpy, onClose: onCloseSpy });
+            wrapper.find('.ffe-accordion-item__toggler').simulate('click', { target: { nodeName: 'div' } });
+
+            expect(onOpenSpy.callCount).toBe(1);
+            expect(onCloseSpy.callCount).toBe(0);
+
+            wrapper.find('.ffe-accordion-item__toggler').simulate('click', { target: { nodeName: 'div' } });
+
+            expect(onOpenSpy.callCount).toBe(1);
+            expect(onCloseSpy.callCount).toBe(1);
+        });
+    });
+});

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

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