selectors

components.stream-selector.js

import Ember from 'ember';

const {
  Component,
  computed,
  isPresent
} = Ember;

let streams = [
  'CNN',
  'Fox News',
  'MSNBC',
  'ESPN'
];

export default Component.extend({
  classNames: ['data-filter', 'stream-selector'],

  isLoading: null,

  streams,

  activeStream: computed({
    get() {
      return this.get('streams.firstObject');
    },
    set(key, value) {
      let active;

      if (isPresent(value)) {
        active = value;
      } else {
        active = this.get('streams.firstObject');
      }

      return active;
    }
  })
});

components.viz-selector.js

import Ember from 'ember';

const {
  Component
} = Ember;

let visualizations = [
  'video + audio',
  'video only',
  'audio only',
  'transcript'
];

export default Component.extend({
  classNames: ['data-filter', 'viz-selector'],

  visualizations,

  activeViz: null
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Filters Land',
  
  activeStream: 'none',
  activeViz: 'none'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.option {
  cursor: pointer;
}

templates.application.hbs

<h1>{{appName}}</h1>
<br>
{{stream-selector
	activeStream=activeStream
  on-select-stream=(action (mut activeStream))}}
<br>
{{viz-selector
	activeViz=activeViz
  on-select-viz=(action (mut activeViz))}}
<br>
<br>
<p>Current input stream: {{activeStream}}</p>
<br>
<p>Current visualization: {{activeViz}}</p>

templates.components.stream-selector.hbs

<span class="stream-selector-text">
  Input streams
</span>

<div class="options-wrapper">
  <ul class="options">
    {{#each streams as |stream|}}
      <li class="option {{if (eq activeStream stream) "active"}} {{if isLoading "disabled"}}"
        role="button" onclick={{action attrs.on-select-stream stream}}
        disabled={{isLoading}}>

        {{stream}}

      </li>
    {{/each}}
  </ul>
</div>

templates.components.viz-selector.hbs

<span class="visualization-selector-text">
  Visualizations
</span>

<div class="options-wrapper">
  <ul class="options">
    {{#each visualizations as |viz|}}
      <li class="option {{if (eq activeViz viz) "active"}} {{if isLoading "disabled"}}"
        role="button" onclick={{action attrs.on-select-viz viz}} disabled={{isLoading}}>

        {{viz}}

      </li>
    {{/each}}
  </ul>
</div>

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.integration.components.viz-selector-test.js

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('viz-selector', 'TODO: put something here', {
  integration: true
});

test('I can see viz options in the component', function(assert) {

  // Set any properties with this.set('myProperty', 'value');
  // Handle any actions with this.on('myAction', function(val) { ... });
  
  this.setProperties({
    activeViz: null,
    
    actions: {
      
      foo: () => {}
    }
  });

  this.render(hbs`
    {{viz-selector
      activeViz=activeViz
      on-select-viz=(action "foo")}}
  `);
  
  let trimmedText = this.$().text().trim();

  assert.ok(trimmedText.includes('Visualizations'));
});

tests.test-helper.js

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

setResolver(resolver);

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": true
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-truth-helpers": "1.3.0"
  }
}