Ember Testing Example

Model, controller, view and integration tests for Ember.js. Uses Mocha and Chai.

HTML

<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/handlebars-1.0.0-rc.3.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/ember-1.0.0-rc.2.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/kiddsoftware-jsfiddle/mocha-1.9.0.css">
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/mocha-1.9.0.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/sinon-1.6.0.js"></script>
<script src="	 https://s3.amazonaws.com/kiddsoftware-jsfiddle/chai-1.5.0.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/sinon-chai.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/chai-jquery.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/ember-data-a29070da.js"></script>
<!-- Mocha test output goes here. -->
<div id="mocha"></div>

<!-- Handlebars templates for our application. -->
<script type="text/x-handlebars">
    <h1>Testing Ember.js with Mocha</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <p>{{#linkTo 'employees'}}Show employees{{/linkTo}}</p>
</script>
    
<script type="text/x-handlebars" data-template-name="employees">
    <h2>Employees</h2>
    <ul>
       {{#each employee in controller}}
         <li>{{#linkTo 'employee' employee}}{{employee.name}}{{/linkTo}}</li>
       {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="employee">
    <h2>{{name}}</h2>
    <p>Salary: <span class="salary">${{salary}}</span></p>
    <button {{action 'giveRaise'}}>Give Raise</button>
    {{#if managedBy}}
      <p class="managed-by">
         Managed by: {{#linkTo 'employee' managedBy}}{{managedBy.name}}{{/linkTo}}
      </p>
    {{/if}}
    {{#if manages}}
      <h3>Manages</h3>
      <ul class="manages">
       {{#each employee in manages}}
          <li>{{#linkTo 'employee' employee}}{{employee.name}}{{/linkTo}}</li>
       {{/each}}
      </ul>
    {{/if}}
   ...

JavaScript

//================================================================================
// Application Code
import DS from 'ember-data';

export default DS.DateTransform.reopen({
  serialize: function(date) {
    if (date instanceof Date) {
      return date.toISOString();
    } else if (moment.isMoment(date)) {
      return date.toISOString();
    }

    return null;
  },
});