fix: check value before sending action (#68)

* Guard against toggle * First attempt at test * Fix test
knownasilya · May 18, 2017 · 2094f0c · 2094f0c
1 parent 1d662ac
commit 2094f0c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/addon/components/x-toggle/component.js b/addon/components/x-toggle/component.js
@@ -23,7 +23,7 @@ export default Component.extend({
     sendToggle(value) {
       let onToggle = this.get('onToggle');
 
-      if (typeof onToggle === 'function') {
+      if (value !== this.get('value') && typeof onToggle === 'function') {
         onToggle(value);
       }
     }

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -174,20 +174,24 @@
   \{{#toggle.offLabel as |label|}}
     &lt;b&gt;\{{label}}&lt;/b&gt;
   \{{/toggle.offLabel}}
+
+  \{{toggle.switch theme='flip' onLabel='diff on' offLabel='diff off'}}
+
   \{{#toggle.onLabel as |label|}}
     &lt;b&gt;\{{label}}&lt;/b&gt;
   \{{/toggle.onLabel}}
-  \{{toggle.switch theme='flip' onLabel='diff on' offLabel='diff off'}}
 \{{/x-toggle}}
 </pre>
 <span class='flexy'>
   {{#x-toggle value=value showLabels=true onToggle=(action (mut value)) as |toggle|}}
     {{#toggle.offLabel as |label|}}
       <b>{{label}}</b>
     {{/toggle.offLabel}}
+
+    {{toggle.switch theme='flip' onLabel='diff on' offLabel='diff off'}}
+
     {{#toggle.onLabel as |label|}}
       <b>{{label}}</b>
     {{/toggle.onLabel}}
-    {{toggle.switch theme='flip' onLabel='diff on' offLabel='diff off'}}
   {{/x-toggle}}
 </span>
diff --git a/tests/integration/components/x-toggle/component-test.js b/tests/integration/components/x-toggle/component-test.js
@@ -43,7 +43,7 @@ test('clicking component triggers onToggle action', function(assert) {
   this.$('div.x-toggle-btn').click();
 
   setTimeout(() => {
-    if(!this.get('completed')) {
+    if (!this.get('completed')) {
       assert.equal(true, false, 'timed out waiting for toggle event');
       done();
     }
@@ -76,7 +76,7 @@ test('clicking component labels triggers onToggle action', function(assert) {
   assert.equal(this.get('value'), false, 'clicking off label again, value stays false');
 });
 
-if (emberVersionGTE(2,0)) {
+if (emberVersionGTE(2, 0)) {
   test('clicking component works with bespoke values and mut helper', function(assert) {
     this.set('value', false);
     this.render(hbs`{{x-toggle
@@ -152,4 +152,31 @@ if (emberVersionGTE(2,0)) {
     this.set('value', false);
     assert.equal(this.$('.x-toggle-container').hasClass('x-toggle-container-checked'), false);
   });
+
+  test('onToggle not called unless value changes', function(assert) {
+    this.set('timesCalled', 0);
+    this.on('onToggle', (value) => {
+      const timesCalled = this.get('timesCalled') + 1;
+      this.set('timesCalled', timesCalled);
+      this.set('value', value);
+    });
+
+    this.set('value', false);
+    this.set('show', false);
+
+    this.render(hbs`
+      {{#x-toggle value=value showLabels=true onToggle=(action 'onToggle') as |toggle|}}
+        {{toggle.offLabel}}
+        {{toggle.onLabel}}
+        {{toggle.switch}}
+      {{/x-toggle}}
+    `);
+
+    this.$('.on-label').click();
+    assert.equal(this.get('value'), true, 'clicking on label toggles value true');
+    assert.equal(this.get('timesCalled'), 1, 'should call onToggle once');
+    this.$('.on-label').click();
+    assert.equal(this.get('value'), true, 'clicking on label again stays true');
+    assert.equal(this.get('timesCalled'), 1, 'should not call onToggle again if value does not change');
+  });
 }