Ember-cli mirage sample

adapters.application.js

import Ember from 'ember';
import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  
});

adapters.old_adapter.js

// findHasMany (store, snapshot, url, relationship) {
//     if(url === 'ONE') {
//       return new Ember.RSVP.Promise(r => {
//         setTimeout(() => {
//           r({
//             data: [{
//               id:'1',
//               type: 'post',
//             },{
//               id:'2',
//               type: 'post',
//             },{
//               id:'3',
//               type: 'post',
//             }]
//           });
//         },3000);
//       });
//     } else {
//       return new Ember.RSVP.Promise(r => {
//         setTimeout(() => {
//           r({
//             data: []
//           });
//         },4000);
//       });
//     }
//   },
//   findRecord (store, type, id, snapshot) {
//     console.log('findRecord() with id: ' + id);
//     if(id == '1') {
//       return {
//         data: {
//           type: 'my-model',
//           id: '1',
//           relationships: {
//             posts: {
//               links: {
//               	related: 'ONE'
//               }
//             }
//           }
//         }
//       }
//     } else {
//       return {
//         data: {
//           type: 'my-model',
//           id: '2',
//           relationships: {
//             posts: {
//               links: {
//               	related: 'TWO'
//               }
//             }
//           }
//         }
//       }
//     }
//   },
  
//   findAll (store, type, sinceToken) {
//   	console.log('findAll()');
//     return {
//       data: [{
//         id: '1',
//         type: 'categories',
//         "attributes": {
//           name: "Heroes"
//         }
//       }, {
//         id: '2',
//         type: 'categories',
//         "attributes": {
//           "name": 'Angels'
//         }
//       }, {
//         id: '3',
//         type: 'categories',
//         attributes: {
//           name: 'Noir'
//         }
//       }]
//     }
//   }

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

mirage.config.js

import Ember from 'ember';

export default function () {
  window.server = this;

  this.get('/categories', function () {
    return {
      "data": [{
        "id": "1",
        "type": "categories",
        "attributes": {
          "name": "Heroes"
        }
      }, {
        "id": "2",
        "type": "categories",
        "attributes": {
          "name": "Angels"
        }
      }, {
        "id": "3",
        "type": "categories",
        "attributes": {
          "name": "Noir"
        }
      }]
    }
  });

  this.get('/categories/1', function () {
    return {
      "data": {
        "id": "1",
        "type": "categories",
        "attributes": {
          "name": "Heroes"
        },
        "relationships": {
          "posts": {
            "links": {
              "related": "/posts/category/1"
            }
          }
        }
      }
    }
  });

  this.get('/categories/2', function () {
    return {
      "data": {
        "id": "2",
        "type": "categories",
        "attributes": {
          "name": "Angels"
        },
        "relationships": {
          "posts": {
            "links": {
              "related": "/posts/category/2"
            }
          }
        }
      }
    }
  });

  this.get('/categories/3', function () {
    return {
      "data": {
        "id": "3",
        "type": "categories",
        "attributes": {
          "name": "Noir"
        },
        "relationships": {
          "posts": {
            "links": {
              "related": "/posts/category/3"
            }
          }
        }
      }
    }
  });

  this.get('/posts/category/1', function () {
    return new Ember.RSVP.Promise(r => {
      Ember.run.later(() => {
        r({
          "data": [{
            "id": "155",
            "type": "posts",
            "attributes": {
              "commented": false
            }
          }, {
            "id": "183",
            "type": "posts",
            "attributes": {
              "commented": true
            }
          }, {
            "id": "57",
            "type": "posts",
            "attributes": {
              "commented": false
            }
          }]
        });
      }, 5000);
    });
  });

  this.get('/posts/category/2', function () {
    return new Ember.RSVP.Promise(r => {
      Ember.run.later(() => {
        r({
          "data": [{
            "id": "155",
            "type": "posts",
            "attributes": {
              "commented": false
            }
          }, {
            "id": "183",
            "type": "posts",
            "attributes": {
              "commented": true
            }
          }, {
            "id": "57",
            "type": "posts",
            "attributes": {
              "commented": false
            }
          }, {
            "id": "183",
            "type": "posts",
            "attributes": {
              "commented": true
            }
          }, {
            "id": "57",
            "type": "posts",
            "attributes": {
              "commented": false
            }
          }, {
            "id": "183",
            "type": "posts",
            "attributes": {
              "commented": true
            }
          }, {
            "id": "57",
            "type": "posts",
            "attributes": {
              "commented": false
            }
          }]
        });
      }, 5000);
    });
  });

  this.get('/posts/category/3', function () {
    return new Ember.RSVP.Promise(r => {
      Ember.run.later(() => {
        r({
          "data": []
        });
      }, 5000);
    });
  });

}

models.category.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  posts: DS.hasMany('post')
});

models.post.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  category: DS.belongsTo('category')
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('home', {path: '/'});
  this.route('categories', {path: '/categories'});
  this.route('category', {path: '/category/:category_id'});
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  
});

routes.categories.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model() {
    return this.store.findAll('category');
  }
  
});

templates.application.hbs

<h1>Welcome!</h1>

{{nav-bar}}

{{outlet}}

templates.categories.hbs

<h1>Categories!</h1>

<h3>Categories with [#link-to 'category' c.id] (<u>passing id</u>):</h3>
{{#if model.isPending}}
	<div style="background-color:green; padding:50px">Loading...</div>
{{else}}
  {{#each model as |c|}}
    <div>Category {{c.id}}: {{#link-to 'category' c.id}}{{c.name}}{{/link-to}}</div>
  {{else}}
    <div style="background-color:red; padding:50px">This will ONLY be shown if model has no posts.</div>
  {{/each}}
{{/if}}

<br><br>

<h3>The same categories with just [#link-to 'category' c] (<u>without id</u>):</h3>
{{#if model.isPending}}
	<div style="background-color:green; padding:50px">Loading...</div>
{{else}}
  {{#each model as |c|}}
    <div>Category {{c.id}}: {{#link-to 'category' c}}{{c.name}}{{/link-to}}</div>
  {{else}}
    <div style="background-color:red; padding:50px">This will ONLY be shown if model has no posts.</div>
  {{/each}}
{{/if}}

templates.category.hbs

<h1>Category {{model.id}}: {{model.name}}</h1>

<h3>Attempt #1</h3>
{{#if model.posts.isPending}}
	<div style="background-color:green; padding:50px">Loading...</div>
{{else}}
  {{#each model.posts as |p|}}
    <div>Post {{p.id}}</div>
  {{else}}
    <div style="background-color:red; padding:50px">This will ONLY be shown if model has no posts.</div>
  {{/each}}
{{/if}}

<hr>

<h3>Attempt #2</h3>
{{#unless model.posts.isFulfilled}}
    <div style="background-color:green; padding:50px">Loading...</div>
{{else}}
  {{#if model.posts}}
    {{#each model.posts as |p|}}
      <div>Post {{p.id}}</div>
    {{else}}
      <div style="background-color:red; padding:50px">This will ONLY be shown if model has no posts.</div>
    {{/each}}
  {{/if}}
{{/unless}}

templates.components.nav-bar.hbs

{{link-to 'Home' "home"}} | {{link-to 'Categories' "categories"}}

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

twiddle.json

{
  "version": "0.12.1",
  "ENV": {
    "ember-cli-mirage": {
      "enabled": true
    }
  },
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-cli-mirage": "0.3.1"
  }
}