jonpitch

import Ember from 'ember';

export default Ember.Component.extend({
  theme: Ember.inject.service()
  
  // ...
});

jonpitch

// theme map
$themes: (
  default: (
    first: (
      primary: #58b15f,
      secondary: #e3f0d8
    ),
    second: (
      primary: #287f6e,
      secondary: #83e5d2

jonpitch

import Ember from 'ember';

export default Ember.Service.extend({

  base: 'default',
  theme: 'first',

  // the property used as a reference for styles
  name: Ember.computed('base', function() {
    const base = this.get('base');

jonpitch

import Ember from 'ember';

export default Ember.Route.extend({
  theme: Ember.inject.service(),
  
  // set theme to "second" when hitting route
  beforeModel: function() {
    this._super(...arguments);
    this.get('theme').setTheme('second');
  },

jonpitch

<div class="my-awesome-class" data-theme="{{theme.name}}">
  stuff goes here
</div>

jonpitch

// usage:
div.my-awesome-class {
  @include theme('color', 'primary');
}

// results in the output:
div.my-awesome-class[data-theme="default-first"] {
  color: #58b15f;
}
div.my-awesome-class[data-theme="default-second"] {

jonpitch

test('this is a dummy test', function(assert) {
  const a = true;
  const b = true;
  
  // a developer can quickly scan these messages to understand what
  // needs to happen and why.
  assert.ok(a, 'A is true when X');
  assert.equal(a, b, 'A and B are equal when X');
});

jonpitch

// without page object - bad
test('here is a test that does not use a page object', function(assert) {
  this.render(hbs`{{my-component}}`);
  
  const $button = this.$('#some-button-id');
  const $description = this.$('p');
  
  assert.ok($button.is(':visible'), 'I see the button');
  assert.equal($description.text().trim(), 'Some text', 'The text is shown correctly');
});

jonpitch

test('a test demonstrating a scenario based api response', function(assert) {
  // override the request made in this test
  server.get('/api/things', function({ db }, request) {
    return {
      // some different response
    };
  });
  
  // assertions
});

jonpitch

// bad - what part of login are we testing?
test('login', function(assert) {
  // ...
});

// good - i know exactly what this test is doing
test('user can successfully log in', function(assert) {
  // ...
});