Merge pull request #38 from AdamBrodzinski/karma-test

Karma + Jasmine test runner

Author: jedwards1211

app/components/tests/app_spec.js

@@ -0,0 +1,74 @@
+// See this for some tips with Meteor: https://medium.com/all-about-meteorjs/unit-test-react-components-in-meteor-a19d96684d7d
+
+// If you import ../App you'll have to stub out Meteor, this is
+// why it's important to use controller-views that just setup
+// data and then the children can be very easily tested with
+// just props and state. We'll use a local component for an example
+
+import React from 'react/addons';
+//import App from '../App';
+//import $ from 'jquery'; // you could use jq to make life easier
+const TestUtils = React.addons.TestUtils;
+const Simulate = TestUtils.Simulate;
+
+// these should go into a spec helper module
+
+function renderComponent(comp, props) {
+  return TestUtils.renderIntoDocument(
+    React.createElement(comp, props)
+  );
+}
+
+function simulateClickOn(selector) {
+  var button = this.$el.find(selector)[0];
+  React.addons.TestUtils.Simulate.click(button);
+}
+
+
+const Post = React.createClass({
+  getDefaultProps() {
+    return {title: "Default Post Name"};
+  },
+  getInitialState() {
+    return { isVisible: true };
+  },
+  handleHide() {
+    this.setState({isVisible: false});
+  },
+  render() {
+    let visibleClass = (this.state.isVisible) ? 'block' : 'hidden';
+    return (
+      <div className='Post' style={{display: visibleClass }}>
+        <h1>{this.props.title}</h1>
+        <article>
+          How now brown cow
+        </article>
+        <button onClick={this.handleHide}>Hide</button>
+      </div>
+    );
+  }
+});
+
+
+describe('Sample post component', () => {
+  it('renders default post name without props', () => {
+    let comp = renderComponent(Post, {});
+    expect(comp.props.title).toEqual('Default Post Name');
+  });
+
+  it('renders correct post name with a name prop', () => {
+    let comp = renderComponent(Post, {title: "Webpack is awesome!"});
+    expect(comp.props.title).toEqual("Webpack is awesome!");
+  });
+
+  it("should have a default state of visible", () => {
+    let comp = renderComponent(Post, {});
+    expect(comp.state.isVisible).toEqual(true);
+  });
+
+  it("should hide when hide button is clicked", () => {
+    let comp = renderComponent(Post, {});
+    comp.handleHide();
+    expect(comp.state.isVisible).toEqual(false);
+  });
+});

karma.conf.js

@@ -0,0 +1,37 @@
+var path = require('path');
+var webpackConfig = require('./webpack/webpack.config.client.js');
+
+module.exports = function (config) {
+  config.set({
+    //singleRun: true,
+    reporters: [ 'dots' ],
+    browsers: [ 'Chrome' ],
+    files: [ './test/karma.bundle.js' ],
+    frameworks: [ 'jasmine' ],
+    plugins: [
+      'karma-chrome-launcher',
+      //'karma-firefox-launcher',
+      'karma-jasmine',
+      //'karma-mocha',
+      'karma-sourcemap-loader',
+      'karma-webpack',
+    ],
+    // run the bundle through the webpack and sourcemap plugins
+    preprocessors: {
+      './test/karma.bundle.js': [ 'webpack', 'sourcemap' ]
+    },
+    // use our own webpack config to mirror test setup
+    webpack: {
+      entry: [
+        './lib/core-js-no-number',
+        'regenerator/runtime',
+      ],
+      devtool: 'eval-source-map',
+      resolve: webpackConfig.resolve,
+      module: { loaders: webpackConfig.module.loaders },
+    },
+    webpackMiddleware: {
+      noInfo: true,
+    }
+  });
+};

package.json

@@ -15,6 +15,11 @@
     "eslint-plugin-react": "^3.2.2",
     "grunt": "^0.4.5",
     "grunt-cli": "^0.1.13",
+    "karma": "^0.13.9",
+    "karma-chrome-launcher": "^0.2.0",
+    "karma-jasmine": "^0.2.2",
+    "karma-sourcemap-loader": "^0.3.5",
+    "karma-webpack": "^1.7.0",
     "node-libs-browser": "^0.5.2",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.0",

test/karma.bundle.js

@@ -0,0 +1,4 @@
+// require all foo_spec.js, bar_spec.jsx files in the app directory
+var context = require.context('../app', true, /.+_spec\.jsx?$/);
+context.keys().forEach(context);
+module.exports = context;