adding tests

.circleci/config.yml

@@ -0,0 +1,13 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: node:10
+    steps:
+      - checkout
+      - run:
+          name: dep install
+          command: npm install
+      - run:
+          name: test
+          command: npm test

README.md

@@ -30,9 +30,9 @@ The create-react-app of embeddable widgets.
 ## Roadmap
 
 - [x] Widget as react app - index.html works (webpack, babel, react)
-- [ ] React widget (widget builder)
-- [ ] Webpack changed to output a library
-- [ ] Add tests
+- [x] React widget (widget builder)
+- [x] Webpack changed to output a library
+- [x] Add tests
 - [ ] Add greenkeeper
 - [ ] Integrate eslint with webpack
 - [ ] Theming support

jest/cssTransform.js

@@ -0,0 +1,8 @@
+module.exports = {
+  process() {
+    return 'module.exports = {};'
+  },
+  getCacheKey() {
+    return 'cssTransform'
+  },
+}

jest/fileTransform.js

@@ -0,0 +1,7 @@
+const path = require('path')
+
+module.exports = {
+  process(src, filename) {
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`
+  },
+}

jest/setup.js

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

package.json

@@ -5,34 +5,46 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack-serve --config ./webpack.config.js --mode development --open",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "babel": {
     "presets": [
-      "env",
-      "react",
+      "airbnb",
       "stage-2"
     ]
   },
+  "jest": {
+    "transform": {
+      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.(css|scss)$": "<rootDir>/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/jest/fileTransform.js"
+    },
+    "setupFiles": [
+      "<rootDir>/jest/setup.js"
+    ]
+  },
   "author": "seriousben https://github.com/seriousben",
   "license": "MIT",
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
+    "babel-jest": "^23.0.1",
     "babel-loader": "^7.1.4",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
+    "babel-preset-airbnb": "^2.4.0",
     "babel-preset-stage-2": "^6.24.1",
     "css-loader": "^0.28.11",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-import-resolver-webpack": "^0.10.0",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.8.2",
+    "jest": "^23.0.1",
+    "jest-cli": "^23.0.1",
     "mini-css-extract-plugin": "^0.4.0",
     "node-sass": "^4.9.0",
-    "react-transition-group": "^2.3.1",
     "sass-loader": "^7.0.1",
     "style-loader": "^0.21.0",
     "webpack": "^4.8.3",
@@ -42,6 +54,7 @@
   "dependencies": {
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
-    "react-dom": "^16.3.2"
+    "react-dom": "^16.3.2",
+    "react-transition-group": "^2.3.1"
   }
 }

src/widget.js

@@ -43,7 +43,6 @@ class Widget extends Component {
     const body = this.renderBody();
 
     return (
-
       <div className="docked-widget">
         <Transition in={this.state.opened} timeout={250} onExited={this.handleWidgetExit}>
           {status => (

src/widget.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Widget from './widget';
+
+test('simple test', () => {
+  const widgetDom = shallow(<Widget />);
+  console.log(widgetDom.html());
+  expect(widgetDom.find('.docked-widget').exists()).toBe(true);
+});