Services, Ember Data & Testing

Services

// app/services/session.js
import Service, { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class SessionService extends Service {
  @tracked currentUser = null;

  isAuthenticated() {
    return this.currentUser !== null;
  }
}

// Injected wherever needed, by convention matching the service's name
import Component from '@glimmer/component';
export default class NavBar extends Component {
  @service session;
}

Ember Data

// app/models/post.js
import Model, { attr, hasMany } from '@ember-data/model';

export default class PostModel extends Model {
  @attr title;
  @attr body;
  @hasMany('comment') comments;
}

// Usage in a route/component
const posts = await this.store.findAll('post');
const post = await this.store.findRecord('post', 1);

// Ember Data's opinionated store/adapter/serializer layer pays off for
// data-heavy apps with many related resources — for a handful of simple
// API calls, a lighter custom fetch-based service may be more appropriate.

Testing

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module('Integration | Component | counter', function (hooks) {
  setupRenderingTest(hooks);

  test('it increments on click', async function (assert) {
    await render(hbs`<Counter />`);
    assert.dom('p').hasText('Count: 0');
  });
});

ember test
ember generate component my-widget
ember generate route posts