fix: disables label action on disabled component (#111)

* Update component.js * Adds tests for disabled labels
knownasilya · Apr 2, 2018 · 471575a · 471575a
1 parent d2b3ad1
commit 471575a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/addon/components/x-toggle/component.js b/addon/components/x-toggle/component.js
@@ -22,8 +22,9 @@ export default Component.extend({
   actions: {
     sendToggle(value) {
       let onToggle = this.get('onToggle');
-
-      if (value !== this.get('value') && typeof onToggle === 'function') {
+      let disabled = this.get('disabled');
+
+      if (!disabled && (value !== this.get('value')) && (typeof onToggle === 'function')) {
         onToggle(value);
 
         // The click on input/label will toggle the input unconditionally.

diff --git a/tests/integration/components/x-toggle/component-test.js b/tests/integration/components/x-toggle/component-test.js
@@ -64,6 +64,27 @@ test('clicking component labels triggers onToggle action', function(assert) {
   assert.equal(this.get('value'), false, 'clicking off label again, value stays false');
 });
 
+test('clicking disabled component labels does not trigger onToggle action', function(assert) {
+  this.set('value', false);
+  this.set('disabled', true);
+  this.set('onToggle', val => {
+    this.set('value', val);
+  });
+
+  this.render(hbs`{{x-toggle
+    value=value
+    showLabels=true
+    onToggle=(action onToggle)
+    disabled=disabled
+  }}`);
+
+  this.$('.on-label').click();
+  assert.equal(this.get('value'), false, 'clicking on label does not change the value');
+
+  this.$('.off-label').click();
+  assert.equal(this.get('value'), false, 'clicking off label does not change the value');
+});
+
 if (emberVersionGTE(2, 0)) {
   test('clicking component works with bespoke values and mut helper', function(assert) {
     this.set('value', false);