Merge pull request #25051 from lanahuong/Bug_998428

Bug 998428 - Start button should be disabled when the Timer time-picker is set to 0:00. r=mcav
mozilla-b2g · Nov 5, 2014 · 0004cde · 0004cde
2 parents 3c5f8c3 + efe5dca
commit 0004cde
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 2 deletions.
diff --git a/apps/clock/js/panels/timer/main.js b/apps/clock/js/panels/timer/main.js
@@ -97,6 +97,25 @@ Timer.Panel = function(element) {
   element.addEventListener('panel-visibilitychange',
                            this.onvisibilitychange.bind(this));
 
+  // The start button is disable by default (picker at 00:00 by default)
+  this.nodes.create.setAttribute('disabled', 'true');
+
+  var create = this.nodes.create;
+  var picker = this.picker;
+
+  var enableButton = function() {
+    if(timeFromPicker(picker.value) === 0) {
+      create.setAttribute('disabled', 'true');
+    } else {
+      create.removeAttribute('disabled');
+    }
+  };
+
+  // The start button is enable if the value of the timer is not 00:00
+  picker.nodes.minutes.addEventListener('transitionend', enableButton);
+  picker.nodes.hours.addEventListener('transitionend', enableButton);
+
+
   Timer.singleton(function(err, timer) {
     this.timer = timer;
     timer.onend = this.dialog.bind(this);

diff --git a/apps/clock/test/unit/panels/timer/timer_panel_test.js b/apps/clock/test/unit/panels/timer/timer_panel_test.js
@@ -155,6 +155,50 @@ suite('Timer.Panel', function() {
     fakeTick(panel);
     assert.equal(panel.nodes.time.textContent, '00:59:55');
   });
+
+  test('Create button is disabled when picker is set to 0:00', function() {
+    var panel = new Timer.Panel(document.createElement('div'));
+    var create = panel.nodes.create;
+    var nodes = panel.picker.nodes;
+
+    create = {
+      setAttribute: function() {},
+      removeAttribute: function() {}
+    };
+
+    this.sinon.spy(create, 'removeAttribute');
+    this.sinon.spy(create, 'setAttribute');
+
+    assert.isTrue(panel.nodes.create.disabled);
+
+    panel.picker.value = '3:00';
+    nodes.hours.dispatchEvent(
+      new CustomEvent('transitionend')
+    );
+
+    assert.isFalse(panel.nodes.create.disabled);
+
+    panel.picker.value = '0:00';
+    nodes.hours.dispatchEvent(
+      new CustomEvent('transitionend')
+    );
+
+    assert.isTrue(panel.nodes.create.disabled);
+
+    panel.picker.value = '0:15';
+    nodes.minutes.dispatchEvent(
+      new CustomEvent('transitionend')
+    );
+
+    assert.isFalse(panel.nodes.create.disabled);
+
+    panel.picker.value = '0:00';
+    nodes.minutes.dispatchEvent(
+      new CustomEvent('transitionend')
+    );
+
+    assert.isTrue(panel.nodes.create.disabled);
+  });
 
   suite('Timer.Panel, Events', function() {
     var panel;
@@ -208,8 +252,13 @@ suite('Timer.Panel', function() {
       assert.ok(timer.cancel.called);
     });
 
-    test('click: create ', function() {
-      panel.picker = { value: '0:60' };
+    test('click: create', function() {
+      panel.picker.value = '1:00';
+
+      panel.picker.nodes.hours.dispatchEvent(
+        new CustomEvent('transitionend')
+      );
+
       panel.nodes.create.dispatchEvent(
         new CustomEvent('click')
       );