Bug 974828 - [Settings][dsds] Outgoing data confirmation is wrong

- update test
- change the way about how we show confirm window

apps/settings/js/simcard_manager.js

@@ -28,7 +28,11 @@
       // `handleEvent` is used to handle these sim related changes
       this.simManagerOutgoingCallSelect.addEventListener('change', this);
       this.simManagerOutgoingMessagesSelect.addEventListener('change', this);
-      this.simManagerOutgoingDataSelect.addEventListener('change', this);
+
+      // XXX because we handle `onchange` event differently in value selector,
+      // in order to show confirm dialog after users changing value, the better
+      // way right now is to check values when `onblur` event triggered.
+      this.addOutgoingDataSelectEvent();
 
       this.addVoiceChangeEventOnConns();
       this.addCardStateChangeEventOnIccs();
@@ -74,21 +78,34 @@
         case this.simManagerOutgoingMessagesSelect:
           SimSettingsHelper.setServiceOnCard('outgoingMessages', cardIndex);
           break;
+      }
+    },
+    addOutgoingDataSelectEvent: function() {
+      var prevCardIndex;
+      var newCardIndex;
+
+      // initialize these two variables when focus
+      this.simManagerOutgoingDataSelect.addEventListener('focus', function() {
+          prevCardIndex = this.selectedIndex;
+          newCardIndex = this.selectedIndex;
+      });
 
-        case this.simManagerOutgoingDataSelect:
-
-          // UX needs additional hint for users to make sure
-          // they really want to change data connection
-          var wantToChange = window.confirm(_('change-outgoing-data-confirm'));
-
-          if (wantToChange) {
-            SimSettingsHelper.setServiceOnCard('outgoingData', cardIndex);
-          } else {
-            var previousCardIndex = (cardIndex === 0) ? 1 : 0;
-            this.simManagerOutgoingDataSelect.selectedIndex = previousCardIndex;
+      this.simManagerOutgoingDataSelect.addEventListener('blur', function() {
+          newCardIndex = this.selectedIndex;
+          if (prevCardIndex !== newCardIndex) {
+            // UX needs additional hint for users to make sure
+            // they really want to change data connection
+            var wantToChange =
+              window.confirm(_('change-outgoing-data-confirm'));
+
+            if (wantToChange) {
+              SimSettingsHelper.setServiceOnCard('outgoingData',
+                newCardIndex);
+            } else {
+              this.selectedIndex = prevCardIndex;
+            }
           }
-          break;
-      }
+      });
     },
     getSimCardsCount: function() {
       return this.simcards.length;

apps/settings/test/unit/simcard_manager_test.js

@@ -1,5 +1,5 @@
 /* global mocha, MockL10n, MockTemplate, MockSimUIModel,
-   SimUIModel, MockSimSettingsHelper, SimCardManager,
+   SimUIModel, MockSimSettingsHelper, SimCardManager, SimSettingsHelper,
    MockNavigatorMozIccManager, MockNavigatorMozMobileConnections,
    MockMobileOperator, MockNavigatorSettings, MockAirplaneModeHelper, test,
    requireApp, suite, suiteTeardown, suiteSetup, setup, assert, sinon */
@@ -123,6 +123,83 @@ suite('SimCardManager > ', function() {
     stubById.restore();
   });
 
+  suite('addOutgoingDataSelectEvent > ', function() {
+    var select;
+
+    function triggerEventOnSelect(evtName) {
+      if (select.addEventListener.withArgs(evtName)) {
+        var cb = select.addEventListener.withArgs(evtName).args[0][1];
+        cb.call(select);
+      }
+    }
+
+    setup(function() {
+      select = document.createElement('select');
+
+      [0, 1].forEach(function(index) {
+        var option = document.createElement('option');
+        option.text = index;
+        option.value = index;
+        if (index === 0) {
+          option.selected = true;
+        }
+        select.add(option);
+      });
+
+      SimCardManager.simManagerOutgoingDataSelect = select;
+      this.sinon.stub(select, 'addEventListener');
+      this.sinon.stub(SimSettingsHelper, 'setServiceOnCard');
+
+      SimCardManager.addOutgoingDataSelectEvent();
+    });
+
+    suite('if there is no change in option', function() {
+      setup(function() {
+        this.sinon.stub(window, 'confirm', function() {
+          return false;
+        });
+
+        triggerEventOnSelect('focus');
+        select.selectedIndex = 0;
+        triggerEventOnSelect('blur');
+      });
+      test('nothing happened', function() {
+        assert.isFalse(SimSettingsHelper.setServiceOnCard.called);
+      });
+    });
+
+    suite('if option is changed, but users don\'t confirm it', function() {
+      setup(function() {
+        this.sinon.stub(window, 'confirm', function() {
+          return false;
+        });
+
+        triggerEventOnSelect('focus');
+        select.selectedIndex = 1;
+        triggerEventOnSelect('blur');
+      });
+      test('we would set the select back to original value', function() {
+        assert.equal(select.selectedIndex, 0);
+        assert.isFalse(SimSettingsHelper.setServiceOnCard.called);
+      });
+    });
+
+    suite('if option is chagned, and users confirm it', function() {
+      setup(function() {
+        this.sinon.stub(window, 'confirm', function() {
+          return true;
+        });
+
+        triggerEventOnSelect('focus');
+        select.selectedIndex = 1;
+        triggerEventOnSelect('blur');
+      });
+      test('we would set cardIndex on mozSettings', function() {
+        assert.equal(select.selectedIndex, 1);
+        assert.isTrue(SimSettingsHelper.setServiceOnCard.called);
+      });
+    });
+  });
 
   // add test below
   suite('init > ', function() {
@@ -135,6 +212,7 @@ suite('SimCardManager > ', function() {
       this.sinon.stub(SimCardManager, 'addCardStateChangeEventOnIccs');
       this.sinon.stub(SimCardManager, 'addAirplaneModeChangeEvent');
       this.sinon.stub(SimCardManager, 'addVoiceChangeEventOnConns');
+      this.sinon.stub(SimCardManager, 'addOutgoingDataSelectEvent');
       SimCardManager.init();
     });
 
@@ -143,15 +221,11 @@ suite('SimCardManager > ', function() {
         SimCardManager.simManagerOutgoingCallSelect;
       var outgoingMessages =
         SimCardManager.simManagerOutgoingMessagesSelect;
-      var outgoingData =
-        SimCardManager.simManagerOutgoingDataSelect;
 
       assert.equal(outgoingCall.addEventListener.lastCall.args[0],
         'change');
       assert.equal(outgoingMessages.addEventListener.lastCall.args[0],
         'change');
-      assert.equal(outgoingData.addEventListener.lastCall.args[0],
-        'change');
     });
 
     test('is UI inited successfully', function() {