group :development, :test do
  gem "jasmine"
end

bundle install

rails generate jasmine:install

Run tests

1. In your browser
2. Continuous Integration Mode (CI)

Browser Mode

rake jasmine

http://localhost:8888/

rails generate jasmine:examples

Configurable Settings

Raise Exceptions

Stop Spec on Expectation Failure

Run Tests in Random Order

Continous Integration Mode

rake jasmine:ci

Jasmine.configure do |config|
   config.ci_port = 1234
end

Configuration

• jasmine.yml
• jasmine_helper.rb

Sample configuration:

# spec/javascripts/support/jasmine.yml
random: true
show_console_log: false
stop_spec_on_expectation_failure: true

# spec/javascripts/support/jasmine_helper.rb
Jasmine.configure do |config|
  config.random = false
  config.show_console_log = false
  config.stop_spec_on_expectation_failure: false
  config.show_full_stack_trace = false
  config.prevent_phantom_js_auto_install = false
end

Testing

Testing JavaScript

Plugins worth considering

• Jasmine-Jquery – this plugin provides a lot of jquery related matchers. Download it here
• Jasmine-Matchers – a tool to provide additional matchers. Download it here
• Jasmine-Fixture – a plugin that provides DOM creation using CSS selectors, therefore you can interact with the DOM much easier. Download it here

Write Beautiful Unit tests

Importance of Test Discipline

• Writing tests first gives you a clearer perspective on the ideal API design.
• Does the developer understand the problem enough to articulate in code all critical component requirements?
• Manual QA is error-prone. In my experience, it’s impossible for a developer to remember all features that need testing after making a change to refactor, add new features, or remove features.
• Continous Integration prevents failed builds from getting deployed to production.

Bug Report vs plain Unit Test

• What are you trying to test?
• What should it do?
• What is the real-time output (actual behavior)?
• What is the expected output (expected behavior)?

describe("CalculatorAddMethod", function() {
  var calculator = new Calculator();
  it("should return number", function() {
    const actual = typeof Calculator.add(5,10);
    const expected = 'number'
    expect(actual).toEqual(expected);
  });
});

• What are you trying to test?
  • -> Go for the test description. It is testing for the return type of the add method of Calculator().
• What should it do?
  • -> Again, look at the test description. It clearly says that it is testing for the return type of add method.
• What is the actual output?
  • -> There is a dedicated variable which holds the actual result and how you got the actual result. TWO FOR ONE!
• What is the expected output?
  • -> Again, there is a dedicated variable which holds the actual result. Straight as a ruler!

Make your tests even better

Easter Egg

Conclusion

• What are you trying to test?
• What should it do?
• What is the real-time output (actual behavior)?
• What is the expected output (expected behavior)?
• How can be the test reproduced?

config.generators do |g|
  g.helper false
  g.stylesheets false
  g.javascripts false
  g.view_specs false
end

1. Action
2. Dispatcher
3. Store

Component

import React from 'react';
import checkoutActions from "../actions/checkout-action";
import checkoutStore from "../store/checkout-store";
class CartElements extends React.Component{
  constructor(){
    super()
    this.state = {
      currentCart : checkoutStore.getCart()
    }
  }
  componentDidMount(){
    checkoutStore.addListener(this.updateCartNumber)
  };
  updateCartNumber = () => {
    this.setState({
      currentCart: checkoutStore.getCart()
    })
  };
  updateCart = () => {
    checkoutActions.addCart(parseInt(this.refs.cartNumber.value))
  };
  gotoCheckout = () => {
    window.location.href +="?products=[1,2,3]"
  };
  render(){
    var checkoutButton = "";
    if(this.state.currentCart > 0){
      checkoutButton = <a className="button" href="/welcome/checkout?products=[1,2,3,4]">CheckOut</a>;
    }
    return(
      <div>
        <div className="input-group">
            <input type="number" ref="cartNumber"/>
        </div>
        <button className="button success" onClick={this.updateCart}>Add to Cart</button>
        {checkoutButton}
      </div>
    )
  }
}
export default CartElements

Action File

import dispatcher from "../dispatcher";
import constants from "../const/store-const";
var checkoutActions  = {
  addCart: function(data){
    dispatcher.dispatch({
      actionType: constants.ADD_CART,
      data: data
    })
  }
}
export default checkoutActions;

1. emitChange
2. addListener
3. removeListener

import dispatcher from '../dispatcher.js';
import EventEmitter from 'events';
import assign from 'object-assign';
var CHANGE_EVENT = 'change';
var EventEmitterEvent  = EventEmitter.EventEmitter
var _number  = 0;
var checkoutStore = assign({}, EventEmitterEvent.prototype, {
  addCart: function(number){
    return _number = _number + number;
  },
  getCart: function(){
    return _number;
  },
  emitChange: function(){
    this.emit(CHANGE_EVENT)
  },
  addListener: function(callback){
    this.on(CHANGE_EVENT, callback)
  },
  removeListner: function(callback){
    this.removeListner(CHANGE_EVENT, callback)
  }
});
dispatcher.register((action)=>{
  switch (action.actionType){
    case 'ADD_CART':
      console.log("hello")
      checkoutStore.addCart(action.data)
      checkoutStore.emitChange()
      break;
  }
})
export default checkoutStore;

class CartIconOnTopBar extends React.Component{
  constructor(){
    super()
    this.state = {
      cartItemCount: checkoutStore.getCart()
    }
  }
  componentDidMount(){
   checkoutStore.addListener(this.updateCart)
  };
  updateCart = () => {
    this.setState({
      cartItemCount: checkoutStore.getCart()
    })
  };
  openClassModal = () => {
  };
  render(){
    return(
        <li>
          <a href="#" onClick={this.openCartModal} className="cart-element">
            <i className="fi-shopping-cart"></i>
            <span className="cart-count"> {this.state.cartItemCount} </span>
          </a>
        </li>
    )
  }
}