Refactor and React 16 compatibility (#34)

* Refactor tests, update react

* Refactor

* Refactor

* Change script

* Update npmignore

* Remove unecessary code

.babelrc

@@ -1,3 +1,3 @@
 {
-    "presets": ["es2015", "stage-2", "react", "flow"]
+  "presets": ["es2015", "stage-2", "react", "flow"]
 }

.eslintrc

@@ -5,9 +5,6 @@
     "node": true,
     "es6": true
   },
-  "ecmaFeatures": {
-    "modules": true
-  },
   "extends": [
     "prettier"
   ],

.npmignore

@@ -6,5 +6,13 @@
 .idea
 .babelrc
 .eslintrc
+.prettierrc
+.storybook
+.flowconfig
+_config.yml
+CODE_OF_CONDUCT.md
 npm-debug.log
-lib
+stories
+tests
+scripts
+yarn.lock

package.json

@@ -21,46 +21,46 @@
   "scripts": {
     "watch":
       "babel --plugins transform-es2015-modules-umd src --watch --ignore tests --out-dir ./dist",
-    "prepublish":
-      "babel --plugins transform-es2015-modules-umd src --ignore tests --out-dir ./dist",
+    "build": "babel --plugins transform-es2015-modules-umd src --ignore tests --out-dir ./dist",
     "lint": "eslint 'src/**/*.js'",
     "prettier": "prettier --write 'src/**/*.{js,jsx,json,css}'",
     "testonly": "mocha $npm_package_options_mocha",
-    "test": "npm run lint && npm run testonly",
+    "test": "npm run lint && npm run testonly && npm run flow",
     "test-watch": "npm run testonly -- --watch --watch-extensions js",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "flow": "flow"
+    "flow": "flow",
+    "precommit": "npm run test",
+    "prepush": "npm run test"
   },
   "devDependencies": {
     "@storybook/react": "^3.1.9",
     "babel-cli": "^6.6.4",
     "babel-core": "^6.7.4",
-    "babel-eslint": "^6.0.2",
+    "babel-eslint": "^8.0.2",
     "babel-plugin-transform-es2015-modules-umd": "^6.6.5",
     "babel-polyfill": "^6.7.4",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-2": "^6.5.0",
-    "chai": "^3.5.0",
-    "chai-enzyme": "^0.6.1",
-    "enzyme": "^2.2.0",
-    "eslint": "^2.7.0",
+    "chai": "^4.1.2",
+    "chai-enzyme": "^1.0.0-beta.0",
+    "enzyme": "^3.2.0",
+    "eslint": "^4.12.0",
     "eslint-config-prettier": "^2.4.0",
-    "eslint-plugin-babel": "^3.1.0",
+    "eslint-plugin-babel": "^4.1.2",
     "eslint-plugin-prettier": "^2.2.0",
-    "eslint-plugin-react": "^4.2.3",
-    "flow-bin": "^0.57.3",
-    "jsdom": "^8.1.0",
-    "mocha": "^2.4.5",
+    "eslint-plugin-react": "^7.5.1",
+    "flow-bin": "^0.59.0",
+    "husky": "^0.14.3",
+    "jsdom": "^11.1.0",
+    "mocha": "^4.0.1",
     "nodemon": "^1.9.1",
     "prettier": "^1.6.1",
-    "prop-types": "^15.5.10",
-    "react": "^15.0.0",
+    "react": "^16.1.1",
     "react-addons-test-utils": "^15.0.0",
-    "react-dom": "^15.0.0",
-    "sinon": "^1.17.3",
+    "react-dom": "^16.1.1",
+    "sinon": "^4.1.2",
     "uuid": "^3.0.1"
   },
   "peerDependencies": {
@@ -68,6 +68,7 @@
     "react-dom": "~0.14.8 || ^15.0.0"
   },
   "dependencies": {
-    "babel-runtime": "^6.6.1"
+    "babel-runtime": "^6.6.1",
+    "enzyme-adapter-react-16": "^1.1.0"
   }
 }

scripts/mocha_runner.js

@@ -1,21 +1,27 @@
-var jsdom = require('jsdom').jsdom;
+var jsdom = require('jsdom')
+var exposedProperties = ['window', 'navigator', 'document']
 
-var exposedProperties = ['window', 'navigator', 'document'];
+var { JSDOM } = jsdom
+var { document } = new JSDOM('').window
 
-global.document = jsdom('');
-global.window = document.defaultView;
-Object.keys(document.defaultView).forEach((property) => {
-    if (typeof global[property] === 'undefined') {
-        exposedProperties.push(property);
-        global[property] = document.defaultView[property];
-    }
-});
+global.document = document
+global.window = document.defaultView
+Object.keys(document.defaultView).forEach(property => {
+  if (typeof global[property] === 'undefined') {
+    exposedProperties.push(property)
+    global[property] = document.defaultView[property]
+  }
+})
+
+global.requestAnimationFrame = callback => {
+  setTimeout(callback, 0)
+}
 
 global.navigator = {
-    userAgent: 'node.js'
-};
+  userAgent: 'node.js',
+}
 
-documentRef = document;
+documentRef = document
 
-require('babel-core/register');
-require('babel-polyfill');
+require('babel-core/register')
+require('babel-polyfill')

src/Wrap.js

@@ -2,10 +2,10 @@
 import * as React from 'react'
 import uuid from 'uuid'
 
-import type { Props as ContentLoaderProps } from './index';
+import type { Props as ContentLoaderProps } from './index'
 
 export type WrapProps = {
-  children?: React.ChildrenArray<*>
+  children?: React.ChildrenArray<*>,
 } & ContentLoaderProps
 
 const Wrap = (props: WrapProps): React.Element<*> => {
@@ -31,9 +31,9 @@ const Wrap = (props: WrapProps): React.Element<*> => {
       />
 
       <defs>
-        <clipPath id={`${idClip}`}>{props.children}</clipPath>
+        <clipPath id={idClip}>{props.children}</clipPath>
 
-        <linearGradient id={`${idGradient}`}>
+        <linearGradient id={idGradient}>
           <stop offset="0%" stopColor={props.primaryColor}>
             <animate
               attributeName="offset"

src/index.js

@@ -13,7 +13,7 @@ import Rect from './custom/Rect'
 import Circle from './custom/Circle'
 
 export type Props = {
-  style: {[key: string]: any},
+  style: { [key: string]: any },
   type: string,
   speed: number,
   width: number,
@@ -23,7 +23,7 @@ export type Props = {
 }
 
 type State = {
-  style: {[key: string]: any},
+  style: { [key: string]: any },
   type: string,
   speed: number,
   width: number,

src/stylized/BulletListStyle.js

@@ -3,19 +3,17 @@ import * as React from 'react'
 import Wrap from '../Wrap'
 import type { WrapProps } from '../Wrap'
 
-const BulletListStyle = (props: WrapProps): React.Element<*> => {
-  return (
-    <Wrap {...props}>
-      <circle cx="10" cy="20" r="8" />
-      <rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
-      <circle cx="10" cy="50" r="8" />
-      <rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
-      <circle cx="10" cy="80" r="8" />
-      <rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
-      <circle cx="10" cy="110" r="8" />
-      <rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
-    </Wrap>
-  )
-}
+const BulletListStyle = (props: WrapProps): React.Element<*> => (
+  <Wrap {...props}>
+    <circle cx="10" cy="20" r="8" />
+    <rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
+    <circle cx="10" cy="50" r="8" />
+    <rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
+    <circle cx="10" cy="80" r="8" />
+    <rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
+    <circle cx="10" cy="110" r="8" />
+    <rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
+  </Wrap>
+)
 
 export default BulletListStyle

src/stylized/CodeStyle.js

@@ -1,25 +1,23 @@
 //@flow
 import * as React from 'react'
 import Wrap from '../Wrap'
-import type { WrapProps } from '../Wrap';
+import type { WrapProps } from '../Wrap'
 
-const CodeStyle = (props: WrapProps): React.Element<*> => {
-    return (
-    <Wrap {...props}>
-      <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
-      <rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
-      <rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
+const CodeStyle = (props: WrapProps): React.Element<*> => (
+  <Wrap {...props}>
+    <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
+    <rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
+    <rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
 
-      <rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
-      <rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
+    <rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
+    <rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
 
-      <rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
-      <rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
-      <rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
+    <rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
+    <rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
+    <rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
 
-      <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
-    </Wrap>
-  )
-}
+    <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
+  </Wrap>
+)
 
 export default CodeStyle

src/stylized/FacebookStyle.js

@@ -1,21 +1,19 @@
 //@flow
 import * as React from 'react'
 import Wrap from '../Wrap'
-import type { WrapProps } from '../Wrap';
+import type { WrapProps } from '../Wrap'
 
-const FacebookStyle = (props: WrapProps): React.Element<*> => {
-  return (
-    <Wrap {...props}>
-      <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
+const FacebookStyle = (props: WrapProps): React.Element<*> => (
+  <Wrap {...props}>
+    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
 
-      <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
-      <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
+    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
+    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
 
-      <rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
-      <rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
-      <rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
-    </Wrap>
-  )
-}
+    <rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
+    <rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
+    <rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
+  </Wrap>
+)
 
 export default FacebookStyle

src/stylized/InstagramStyle.js

@@ -1,18 +1,16 @@
 //@flow
 import * as React from 'react'
 import Wrap from '../Wrap'
-import type { WrapProps } from '../Wrap';
+import type { WrapProps } from '../Wrap'
 
-const InstagramStyle = (props: WrapProps): React.Element<*> => {
-  return (
-    <Wrap {...props} height={480}>
-      <circle cx="30" cy="30" r="30" />
+const InstagramStyle = (props: WrapProps): React.Element<*> => (
+  <Wrap {...props} height={480}>
+    <circle cx="30" cy="30" r="30" />
 
-      <rect x="75" y="13" rx="4" ry="4" width="100" height="13" />
-      <rect x="75" y="37" rx="4" ry="4" width="50" height="8" />
-      <rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
-    </Wrap>
-  )
-}
+    <rect x="75" y="13" rx="4" ry="4" width="100" height="13" />
+    <rect x="75" y="37" rx="4" ry="4" width="50" height="8" />
+    <rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
+  </Wrap>
+)
 
 export default InstagramStyle

src/stylized/ListStyle.js

@@ -1,19 +1,17 @@
 //@flow
 import * as React from 'react'
 import Wrap from '../Wrap'
-import type { WrapProps } from '../Wrap';
+import type { WrapProps } from '../Wrap'
 
-const ListStyle = (props: WrapProps): React.Element<*> => {
-  return (
-    <Wrap {...props}>
-      <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
-      <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
-      <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
-      <rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
-      <rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
-      <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
-    </Wrap>
-  )
-}
+const ListStyle = (props: WrapProps): React.Element<*> => (
+  <Wrap {...props}>
+    <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
+    <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
+    <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
+    <rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
+    <rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
+    <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
+  </Wrap>
+)
 
 export default ListStyle

tests/Wrap.js

@@ -1,24 +1,30 @@
 import React from 'react'
 
-import {mount, render} from 'enzyme'
-import {expect} from 'chai'
+import Enzyme, { mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+import chai, { expect } from 'chai'
+import chaiEnzyme from 'chai-enzyme'
 import sinon from 'sinon'
 
+Enzyme.configure({ adapter: new Adapter() })
+chai.use(chaiEnzyme())
+
 import ContentLoader from '../src/index'
 import Wrap, { generateId } from '../src/Wrap'
 
 describe('<Wrap /> Check id`s to render the SVG', () => {
+  it('is mask with the same `idClip`', () => {
+    const wrapper = mount(<Wrap />)
+    let idClip = wrapper.find('clipPath').prop('id')
 
-    it('is mask with the same `idClip`', () => {
-        const wrapper = mount(<Wrap />)
-        let idClip = wrapper.render().find('clipPath')[0].attribs.id
-        expect(wrapper.render().find('rect[clip-path]')[0].attribs['clip-path']).to.have.equal(`url(#${idClip})`)
-    })
+    expect(wrapper.find('rect[clipPath]').prop('clipPath')).to.have.equal(`url(#${idClip})`)
+  })
 
-    it('is linearGradient with the same `idClip`', () => {
-        const wrapper = mount(<Wrap />)
-        let idGradient = wrapper.render().find('linearGradient')[0].attribs.id
-        expect(wrapper.render().find('rect[clip-path]')[0].attribs['style']).to.have.equal(`fill: url(#${idGradient});`)
-    })
+  it('is linearGradient with the same `idClip`', () => {
+    const wrapper = mount(<Wrap />)
+    let idGradient = wrapper.find('linearGradient').prop('id')
 
+    expect(wrapper.find('rect[clipPath]').prop('style').fill).to.have.equal(`url(#${idGradient})`)
+  })
 })

tests/custom/Circle.js

@@ -1,21 +1,27 @@
 import React from 'react'
 
-import {mount, render} from 'enzyme'
-import chai, {expect} from 'chai'
+import Enzyme, { mount, render } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+import chai, { expect } from 'chai'
+import chaiEnzyme from 'chai-enzyme'
+import sinon from 'sinon'
+
+Enzyme.configure({ adapter: new Adapter() })
+chai.use(chaiEnzyme())
 
 import Circle from '../../src/custom/Circle'
 
 describe('<Circle />', () => {
-    let wrapper 
+  let wrapper
 
-    beforeEach(() => {
-        wrapper = mount(<Circle />)
-    })
+  beforeEach(() => {
+    wrapper = mount(<Circle />)
+  })
 
-    it('has defaults props', () => {
-        const props = wrapper.props()
+  it('has defaults props', () => {
+    const props = wrapper.props()
 
-        for ( let key in props )
-            expect(props[key]).to.not.equal(undefined)
-    })
+    for (let key in props) expect(props[key]).to.not.equal(undefined)
+  })
 })

tests/custom/Rect.js

@@ -1,21 +1,26 @@
 import React from 'react'
 
-import {mount, render} from 'enzyme'
-import chai, {expect} from 'chai'
+import Enzyme, { mount, render } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
 
+import chai, { expect } from 'chai'
+import chaiEnzyme from 'chai-enzyme'
+import sinon from 'sinon'
+
+Enzyme.configure({ adapter: new Adapter() })
+chai.use(chaiEnzyme())
 import Rect from '../../src/custom/Rect'
 
 describe('<Rect />', () => {
-    let wrapper 
+  let wrapper
 
-    beforeEach(() => {
-        wrapper = mount(<Rect />)
-    })
+  beforeEach(() => {
+    wrapper = mount(<Rect />)
+  })
 
-    it('has defaults props', () => {
-        const props = wrapper.props()
+  it('has defaults props', () => {
+    const props = wrapper.props()
 
-        for ( let key in props )
-            expect(props[key]).to.not.equal(undefined)
-    })
+    for (let key in props) expect(props[key]).to.not.equal(undefined)
+  })
 })

tests/index.js

@@ -1,10 +1,13 @@
 import React from 'react'
 
-import {mount, render} from 'enzyme'
-import chai, {expect} from 'chai'
+import Enzyme, { mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+import chai, { expect } from 'chai'
 import chaiEnzyme from 'chai-enzyme'
 import sinon from 'sinon'
 
+Enzyme.configure({ adapter: new Adapter() })
 chai.use(chaiEnzyme())
 
 import ContentLoader from '../src/index'
@@ -16,110 +19,83 @@ import Rect from '../src/custom/Rect'
 import Circle from '../src/custom/Circle'
 
 describe('<ContentLoader />:', () => {
+  describe('Type props are used', () => {
+    describe('when type is facebook', () => {
+      const wrapper = mount(<ContentLoader type={'facebook'} />)
 
-    describe('Type props are used', () => {
-        describe('when type is facebook', () => {
-            let wrapper
-
-            beforeEach(() => {
-                wrapper = mount(<ContentLoader type={'facebook'} />)
-            })
-
-            it('should render <FacebookStyle />', () => {
-                expect(wrapper).to.have.descendants(FacebookStyle)
-            })
-        })
-
-        describe('when type is instagram', () => {
-            let wrapper
-
-            beforeEach(() => {
-                wrapper = mount(<ContentLoader type={'instagram'} />)
-            })
-
-            it('should render <InstagramStyle />', () => {
-                expect(wrapper).to.have.descendants(InstagramStyle)
-            })
-        })
-
-        describe('when type is code', () => {
-            let wrapper
-
-            beforeEach(() => {
-                wrapper = mount(<ContentLoader type={'code'} />)
-            })
-
-            it('should render <CodeStyle />', () => {
-                expect(wrapper).to.have.descendants(CodeStyle)
-            })
-        })
-
-        describe('when type is undefined', () => {
-            let wrapper
-
-            beforeEach(() => {
-                wrapper = mount(<ContentLoader />)
-            })
-
-            it('should render <FacebookStyle />', () => {
-                expect(wrapper).to.have.descendants(FacebookStyle)
-            })
-        })
-
-        describe('when type is custom', () => {
-            let wrapper
-
-            beforeEach(() => {
-                wrapper = mount(
-                    <ContentLoader>
-                        <Rect />
-                        <Circle />
-                    </ContentLoader>
-                )
-            })
-
-            it('should render custom element', () => {
-                expect(wrapper.children()).to.have.length(2)
-                expect(wrapper).to.have.descendants(Rect)
-                expect(wrapper).to.have.descendants(Circle)
-            })
-
-        })
+      it('should render <FacebookStyle />', () => {
+        expect(wrapper).to.have.descendants(FacebookStyle)
+      })
     })
 
+    describe('when type is instagram', () => {
+      const wrapper = mount(<ContentLoader type={'instagram'} />)
 
-    describe('Props are propagated', () => {
-        let wrapper
-
-        beforeEach(() => {
-            wrapper = mount(<ContentLoader 
-                speed={10} 
-                height={200}
-                width={200}
-                primaryColor='#000'
-                secondaryColor='#fff'
-            />)
-        })
-
-        it('`speed` is a number and used', ()=> {
-            expect(wrapper.props().speed).to.equal(10)
-        })
-
-        it('`height` is a number and used', ()=> {
-            expect(wrapper.props().height).to.equal(200)
-        })
-
-        it('`width` is a number and used', ()=> {
-            expect(wrapper.props().width).to.equal(200)
-        })
-
-        it('`primaryColor` is a string and used', ()=> {
-            expect(wrapper.props().primaryColor).to.string('#000')
-        })
-
-        it('`secondaryColor` is a string and used', ()=> {
-            expect(wrapper.props().secondaryColor).to.string('#fff')
-        })
+      it('should render <InstagramStyle />', () => {
+        expect(wrapper).to.have.descendants(InstagramStyle)
+      })
     })
 
+    describe('when type is code', () => {
+      const wrapper = mount(<ContentLoader type={'code'} />)
+
+      it('should render <CodeStyle />', () => {
+        expect(wrapper).to.have.descendants(CodeStyle)
+      })
+    })
+
+    describe('when type is undefined', () => {
+      const wrapper = mount(<ContentLoader />)
+
+      it('should render <FacebookStyle />', () => {
+        expect(wrapper).to.have.descendants(FacebookStyle)
+      })
+    })
+
+    describe('when type is custom', () => {
+      const wrapper = mount(
+        <ContentLoader>
+          <Rect />
+          <Circle />
+        </ContentLoader>
+      )
+
+      it('should render custom element', () => {
+        expect(wrapper).to.have.descendants(Rect)
+        expect(wrapper).to.have.descendants(Circle)
+      })
+    })
+  })
+
+  describe('Props are propagated', () => {
+    const wrapper = mount(
+      <ContentLoader
+        speed={10}
+        height={200}
+        width={200}
+        primaryColor="#000"
+        secondaryColor="#fff"
+      />
+    )
+
+    it('`speed` is a number and used', () => {
+      expect(wrapper.props().speed).to.equal(10)
+    })
+
+    it('`height` is a number and used', () => {
+      expect(wrapper.props().height).to.equal(200)
+    })
+
+    it('`width` is a number and used', () => {
+      expect(wrapper.props().width).to.equal(200)
+    })
+
+    it('`primaryColor` is a string and used', () => {
+      expect(wrapper.props().primaryColor).to.string('#000')
+    })
+
+    it('`secondaryColor` is a string and used', () => {
+      expect(wrapper.props().secondaryColor).to.string('#fff')
+    })
+  })
 })

tests/stylized/BulletListStyle.js

@@ -1,42 +1,45 @@
 import React from 'react'
 
-import { mount, render } from 'enzyme'
+import Enzyme, { mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
 import chai, { expect } from 'chai'
 import chaiEnzyme from 'chai-enzyme'
 import sinon from 'sinon'
 
+Enzyme.configure({ adapter: new Adapter() })
 chai.use(chaiEnzyme())
 
 import BulletListStyle from '../../src/stylized/BulletListStyle'
 
 describe('<BulletListStyle />:', () => {
   it('has a `svg`', () => {
-      const wrapper = render(<BulletListStyle />)
-      expect(wrapper.find('svg')).to.have.length(1)
+    const wrapper = mount(<BulletListStyle />)
+    expect(wrapper.find('svg')).to.have.length(1)
   })
 
   it('has a `rect` with `clip-path`', () => {
-      const wrapper = render(<BulletListStyle />)
-      expect(wrapper.find('rect[clip-path]')).to.have.length(1)
+    const wrapper = mount(<BulletListStyle />)
+    expect(wrapper.find('rect[clipPath]')).to.have.length(1)
   })
 
   it('has a `linearGradient`', () => {
-      const wrapper = render(<BulletListStyle />)
-      expect(wrapper.find('linearGradient')).to.have.length(1)
+    const wrapper = mount(<BulletListStyle />)
+    expect(wrapper.find('linearGradient')).to.have.length(1)
   })
 
   it('has three `stop`', () => {
-      const wrapper = render(<BulletListStyle />)
-      expect(wrapper.find('stop')).to.have.length(3)
+    const wrapper = mount(<BulletListStyle />)
+    expect(wrapper.find('stop')).to.have.length(3)
   })
 
   it('has `stop` inside the `linearGradient`', () => {
-      const wrapper = render(<BulletListStyle />)
-      expect(wrapper.find('stop').parent().is('lineargradient')).to.equal(true)
+    const wrapper = mount(<BulletListStyle />)
+    expect(wrapper.find('linearGradient').find('stop')).to.have.length(3)
   })
 
   it('has four `circle`s followed by a `rect`', () => {
-    const wrapper = render(<BulletListStyle />)
+    const wrapper = mount(<BulletListStyle />)
     expect(wrapper.find('circle + rect')).to.have.length(4)
   })
 })

tests/stylized/CodeStyle.js

@@ -1,37 +1,40 @@
 import React from 'react'
 
-import {mount, render} from 'enzyme'
-import chai, {expect} from 'chai'
+import Enzyme, { mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+import chai, { expect } from 'chai'
 import chaiEnzyme from 'chai-enzyme'
 import sinon from 'sinon'
 
+Enzyme.configure({ adapter: new Adapter() })
 chai.use(chaiEnzyme())
 
 import CodeStyle from '../../src/stylized/CodeStyle'
 
 describe('<CodeStyle />:', () => {
-    it('has a `svg`', () => {
-        const wrapper = render(<CodeStyle />)
-        expect(wrapper.find('svg')).to.have.length(1)
-    })
+  it('has a `svg`', () => {
+    const wrapper = mount(<CodeStyle />)
+    expect(wrapper.find('svg')).to.have.length(1)
+  })
 
-    it('has a `rect` with `clip-path`', () => {
-        const wrapper = render(<CodeStyle />)
-        expect(wrapper.find('rect[clip-path]')).to.have.length(1)
-    })
+  it('has a `rect` with `clipPath`', () => {
+    const wrapper = mount(<CodeStyle />)
+    expect(wrapper.find('rect[clipPath]')).to.have.length(1)
+  })
 
-    it('has a `linearGradient`', () => {
-        const wrapper = render(<CodeStyle />)
-        expect(wrapper.find('linearGradient')).to.have.length(1)
-    })
+  it('has a `linearGradient`', () => {
+    const wrapper = mount(<CodeStyle />)
+    expect(wrapper.find('linearGradient')).to.have.length(1)
+  })
 
-    it('has three `stop`', () => {
-        const wrapper = render(<CodeStyle />)
-        expect(wrapper.find('stop')).to.have.length(3)
-    })
+  it('has three `stop`', () => {
+    const wrapper = mount(<CodeStyle />)
+    expect(wrapper.find('stop')).to.have.length(3)
+  })
 
-    it('has `stop` inside the `linearGradient`', () => {
-        const wrapper = render(<CodeStyle />)
-        expect(wrapper.find('stop').parent().is('lineargradient')).to.equal(true)
-    })
+  it('has `stop` inside the `linearGradient`', () => {
+    const wrapper = mount(<CodeStyle />)
+    expect(wrapper.find('linearGradient').find('stop')).to.have.length(3)
+  })
 })

tests/stylized/FacebookStyle.js

@@ -1,37 +1,40 @@
 import React from 'react'
 
-import {mount, render} from 'enzyme'
-import chai, {expect} from 'chai'
+import Enzyme, { mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+import chai, { expect } from 'chai'
 import chaiEnzyme from 'chai-enzyme'
 import sinon from 'sinon'
 
+Enzyme.configure({ adapter: new Adapter() })
 chai.use(chaiEnzyme())
 
 import FacebookStyle from '../../src/stylized/FacebookStyle'
 
 describe('<FacebookStyle />', () => {
-    it('has a `svg`', () => {
-        const wrapper = render(<FacebookStyle />)
-        expect(wrapper.find('svg')).to.have.length(1)
-    })
+  it('has a `svg`', () => {
+    const wrapper = mount(<FacebookStyle />)
+    expect(wrapper.find('svg')).to.have.length(1)
+  })
 
-    it('has a `rect` with `clip-path`', () => {
-        const wrapper = render(<FacebookStyle />)
-        expect(wrapper.find('rect[clip-path]')).to.have.length(1)
-    })
+  it('has a `rect` with `clipPath`', () => {
+    const wrapper = mount(<FacebookStyle />)
+    expect(wrapper.find('rect[clipPath]')).to.have.length(1)
+  })
 
-    it('has a `linearGradient`', () => {
-        const wrapper = render(<FacebookStyle />)
-        expect(wrapper.find('linearGradient')).to.have.length(1)
-    })
+  it('has a `linearGradient`', () => {
+    const wrapper = mount(<FacebookStyle />)
+    expect(wrapper.find('linearGradient')).to.have.length(1)
+  })
 
-    it('has three `stop`', () => {
-        const wrapper = render(<FacebookStyle />)
-        expect(wrapper.find('stop')).to.have.length(3)
-    })
+  it('has three `stop`', () => {
+    const wrapper = mount(<FacebookStyle />)
+    expect(wrapper.find('stop')).to.have.length(3)
+  })
 
-    it('has `stop` inside the `linearGradient`', () => {
-        const wrapper = render(<FacebookStyle />)
-        expect(wrapper.find('stop').parent().is('lineargradient')).to.equal(true)
-    })
+  it('has `stop` inside the `linearGradient`', () => {
+    const wrapper = mount(<FacebookStyle />)
+    expect(wrapper.find('linearGradient').find('stop')).to.have.length(3)
+  })
 })

tests/stylized/InstagramStyle.js

@@ -1,37 +1,42 @@
 import React from 'react'
 
-import {mount, render} from 'enzyme'
-import chai, {expect} from 'chai'
+import Enzyme, { mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+import chai, { expect } from 'chai'
 import chaiEnzyme from 'chai-enzyme'
 import sinon from 'sinon'
 
+Enzyme.configure({ adapter: new Adapter() })
+chai.use(chaiEnzyme())
+
 chai.use(chaiEnzyme())
 
 import InstagramStyle from '../../src/stylized/InstagramStyle'
 
 describe('<InstagramStyle />', () => {
-    it('has a `svg`', () => {
-        const wrapper = render(<InstagramStyle />)
-        expect(wrapper.find('svg')).to.have.length(1)
-    })
+  it('has a `svg`', () => {
+    const wrapper = mount(<InstagramStyle />)
+    expect(wrapper.find('svg')).to.have.length(1)
+  })
 
-    it('has a `rect` with `clip-path`', () => {
-        const wrapper = render(<InstagramStyle />)
-        expect(wrapper.find('rect[clip-path]')).to.have.length(1)
-    })
+  it('has a `rect` with `clip-path`', () => {
+    const wrapper = mount(<InstagramStyle />)
+    expect(wrapper.find('rect[clipPath]')).to.have.length(1)
+  })
 
-    it('has a `linearGradient`', () => {
-        const wrapper = render(<InstagramStyle />)
-        expect(wrapper.find('linearGradient')).to.have.length(1)
-    })
+  it('has a `linearGradient`', () => {
+    const wrapper = mount(<InstagramStyle />)
+    expect(wrapper.find('linearGradient')).to.have.length(1)
+  })
 
-    it('has three `stop`', () => {
-        const wrapper = render(<InstagramStyle />)
-        expect(wrapper.find('stop')).to.have.length(3)
-    })
+  it('has three `stop`', () => {
+    const wrapper = mount(<InstagramStyle />)
+    expect(wrapper.find('stop')).to.have.length(3)
+  })
 
-    it('has `stop` inside the `linearGradient`', () => {
-        const wrapper = render(<InstagramStyle />)
-        expect(wrapper.find('stop').parent().is('lineargradient')).to.equal(true)
-    })
+  it('has `stop` inside the `linearGradient`', () => {
+    const wrapper = mount(<InstagramStyle />)
+    expect(wrapper.find('linearGradient').find('stop')).to.have.length(3)
+  })
 })

tests/stylized/ListStyle.js

@@ -1,37 +1,42 @@
 import React from 'react'
 
-import {mount, render} from 'enzyme'
-import chai, {expect} from 'chai'
+import Enzyme, { mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+import chai, { expect } from 'chai'
 import chaiEnzyme from 'chai-enzyme'
 import sinon from 'sinon'
 
+Enzyme.configure({ adapter: new Adapter() })
+chai.use(chaiEnzyme())
+
 chai.use(chaiEnzyme())
 
 import ListStyle from '../../src/stylized/ListStyle'
 
 describe('<ListStyle />', () => {
-    it('has a `svg`', () => {
-        const wrapper = render(<ListStyle />)
-        expect(wrapper.find('svg')).to.have.length(1)
-    })
+  it('has a `svg`', () => {
+    const wrapper = mount(<ListStyle />)
+    expect(wrapper.find('svg')).to.have.length(1)
+  })
 
-    it('has a `rect` with `clip-path`', () => {
-        const wrapper = render(<ListStyle />)
-        expect(wrapper.find('rect[clip-path]')).to.have.length(1)
-    })
+  it('has a `rect` with `clipPath`', () => {
+    const wrapper = mount(<ListStyle />)
+    expect(wrapper.find('rect[clipPath]')).to.have.length(1)
+  })
 
-    it('has a `linearGradient`', () => {
-        const wrapper = render(<ListStyle />)
-        expect(wrapper.find('linearGradient')).to.have.length(1)
-    })
+  it('has a `linearGradient`', () => {
+    const wrapper = mount(<ListStyle />)
+    expect(wrapper.find('linearGradient')).to.have.length(1)
+  })
 
-    it('has three `stop`', () => {
-        const wrapper = render(<ListStyle />)
-        expect(wrapper.find('stop')).to.have.length(3)
-    })
+  it('has three `stop`', () => {
+    const wrapper = mount(<ListStyle />)
+    expect(wrapper.find('stop')).to.have.length(3)
+  })
 
-    it('has `stop` inside the `linearGradient`', () => {
-        const wrapper = render(<ListStyle />)
-        expect(wrapper.find('stop').parent().is('lineargradient')).to.equal(true)
-    })
+  it('has `stop` inside the `linearGradient`', () => {
+    const wrapper = mount(<ListStyle />)
+    expect(wrapper.find('linearGradient').find('stop')).to.have.length(3)
+  })
 })