Merge pull request #58 from mike-north/more-tests

Clickable action support applied broadly

addon/components/-base-toggle-component.js

@@ -1,11 +1,12 @@
 import Ember from 'ember';
 import BaseToplevelComponent from './-base-toplevel-component';
 import RippleSupport from '../mixins/ripple-support';
+import ClickActionSupport from '../mixins/click-action-support';
 import layout from '../templates/components/mdl-checkbox';
 
 const { computed } = Ember;
 
-export default BaseToplevelComponent.extend(RippleSupport, {
+export default BaseToplevelComponent.extend(RippleSupport, ClickActionSupport, {
   tagName: 'label',
   layout,
   value: false,

addon/components/mdl-nav-item.js

@@ -1,8 +1,9 @@
 import Ember from 'ember';
 import ChildComponentSupport from 'ember-composability/mixins/child-component-support';
+import ClickActionSupport from '../mixins/click-action-support';
 import MdlNav from './mdl-nav';
 
-export default Ember.Component.extend(ChildComponentSupport, {
+export default Ember.Component.extend(ChildComponentSupport, ClickActionSupport, {
   _parentComponentTypes: Ember.A([MdlNav]),
   inDrawer: true,
   inHeader: true

addon/components/mdl-radio.js

@@ -1,15 +1,23 @@
+import Ember from 'ember';
 import BaseToggleComponent from './-base-toggle-component';
 import layout from '../templates/components/mdl-radio';
 
+const { computed, computed: { oneWay } } = Ember;
+
 export default BaseToggleComponent.extend({
   primaryClassName: 'radio',
   layout,
   checked: false,
+  name: oneWay('_defaultName'),
 
   didInsertElement() {
     this._super(...arguments);
     let mdlradio = new window.MaterialRadio(this.get('element'));
     this.element.MaterialRadio = mdlradio;
     this.set('_mdlComponent', mdlradio);
-  }
+  },
+
+  _defaultName: computed('elementId', function() {
+    return `${this.get('elementId')}-name`;
+  })
 });

addon/templates/components/mdl-radio.hbs

@@ -1,2 +1,2 @@
-<input type="radio" id={{_inputId}} class="mdl-radio__button" name="options" value={{value}} disabled={{disabled}} checked={{checked}} />
+<input type="radio" id={{_inputId}} class="mdl-radio__button" name={{name}} value={{value}} disabled={{disabled}} checked={{checked}} />
 <span class="mdl-radio__label">{{label}}{{yield}}</span>

tests/integration/components/mdl-button-test.js

@@ -41,3 +41,28 @@ test('fires action "action" on click by default', function(assert) {
   this.$('.mdl-button').click();
 });
 
+test('does not fire action when disabled', function(assert) {
+  assert.expect(2);
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+  let clickCount = 0;
+  this.on('buttonClicked', val => {
+    clickCount++;
+  });
+
+  this.set('buttonDisabled', false);
+
+  this.render(hbs`
+    {{#mdl-button action='buttonClicked' class='this-is-my-button' disabled=buttonDisabled}}
+      Hello
+    {{/mdl-button}}
+  `);
+
+  this.$('.mdl-button').click();
+  assert.equal(clickCount, 1, 'One click action fired');
+
+  this.set('buttonDisabled', true);
+  this.$('.mdl-button').click();
+
+  assert.equal(clickCount, 1, 'Still one click');
+});