Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/apps/settings/test/unit/panels/about/factory_reset_test.js

@@ -0,0 +1,127 @@
+'use strict';
+
+suite('about > factory_reset', function() {
+  var factoryReset;
+  var realNavigatorPower;
+  var modules = [
+    'panels/about/factory_reset'
+  ];
+  var maps = {};
+
+  var MockPower = {
+    factoryReset: function() {}
+  };
+
+  var elements = {
+    resetButton: document.createElement('button'),
+    resetDialog: document.createElement('form'),
+    resetConfirm: document.createElement('button'),
+    resetCancel: document.createElement('button')
+  };
+
+  setup(function(done) {
+    testRequire(modules, maps,
+      function(FactoryReset) {
+        realNavigatorPower = navigator.mozPower;
+        navigator.mozPower = MockPower;
+
+        factoryReset = FactoryReset();
+        elements.resetDialog.hidden = true;
+        factoryReset._elements = elements;
+        done();
+    });
+  });
+
+  suiteTeardown(function() {
+    navigator.mozPower = realNavigatorPower;
+    realNavigatorPower = null;
+  });
+
+  suite('initiation', function() {
+    setup(function() {
+      this.sinon.stub(factoryReset, '_resetClick');
+    });
+
+    test('resetButton is enabled when mozPower exist', function() {
+      factoryReset.init(elements);
+      assert.equal(factoryReset._elements.resetButton.disabled, false);
+    });
+
+    test('resetButton is disabled when mozPower does not exist', function() {
+      navigator.mozPower = null;
+      factoryReset.init(elements);
+      assert.equal(factoryReset._elements.resetButton.disabled, true);
+    });
+
+    test('resetButton is enabled when mozPower exist', function() {
+      factoryReset.init(elements);
+      factoryReset._elements.resetButton.click();
+      assert.ok(factoryReset._resetClick.called);
+    });
+  });
+
+  suite('resetClick', function() {
+    setup(function() {
+      this.sinon.stub(factoryReset, '_factoryReset');
+      factoryReset.init(elements);
+    });
+
+    test('resetDialog is shown when calling resetClick', function() {
+      assert.equal(factoryReset._elements.resetDialog.hidden, true);
+      factoryReset._resetClick();
+      assert.equal(factoryReset._elements.resetDialog.hidden, false);
+    });
+
+    test('resetDialog is hidden when cancel button is clicked', function() {
+      factoryReset._resetClick();
+      assert.equal(factoryReset._elements.resetDialog.hidden, false);
+      factoryReset._elements.resetCancel.click();
+      assert.equal(factoryReset._elements.resetDialog.hidden, true);
+    });
+
+    test('factoryReset is called when confirm button is clicked', function() {
+      factoryReset._resetClick();
+      assert.equal(factoryReset._elements.resetDialog.hidden, false);
+      factoryReset._elements.resetConfirm.click();
+      assert.ok(factoryReset._factoryReset.called);
+      assert.equal(factoryReset._elements.resetDialog.hidden, true);
+    });
+
+    test('if mozPower is not defined, dialog is still hidden ' +
+      'when confirm button is clicked', function() {
+        navigator.mozPower = null;
+        factoryReset._resetClick();
+        assert.equal(factoryReset._elements.resetDialog.hidden, false);
+        factoryReset._elements.resetConfirm.click();
+        assert.ok(factoryReset._factoryReset.called);
+        assert.equal(factoryReset._elements.resetDialog.hidden, true);
+    });
+  });
+
+  suite('factoryReset', function() {
+    setup(function() {
+      this.sinon.spy(navigator.mozPower, 'factoryReset');
+      this.sinon.stub(console, 'error');
+    });
+
+    test('mozPower factoryReset is called', function() {
+      factoryReset._factoryReset();
+      assert.ok(navigator.mozPower.factoryReset.called);
+    });
+
+    test('if mozPower is not defined, return error',
+      function() {
+        navigator.mozPower = null;
+        factoryReset._factoryReset();
+        assert.ok(console.error.calledWith('Cannot get mozPower'));
+    });
+
+    test('if mozPower factoryReset is not defined, ' +
+      'mozPower factoryReset should not be called', function() {
+        navigator.mozPower.factoryReset = null;
+        factoryReset._factoryReset();
+        assert.ok(
+          console.error.calledWith('Cannot invoke mozPower.factoryReset()'));
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/about/hardware_info_test.js

@@ -0,0 +1,227 @@
+/* global MockNavigatorMozMobileConnections, MockNavigatorMozIccManager */
+
+'use strict';
+
+require('/shared/test/unit/mocks/mock_navigator_moz_icc_manager.js');
+require('/shared/test/unit/mocks/mock_navigator_moz_mobile_connections.js');
+
+suite('about > hardware_info', function() {
+  var hardwareInfo;
+  var realL10n;
+  var realNavigatorSettings;
+  var realMobileConnections;
+  var realIccManager;
+
+  var modules = [
+    'shared_mocks/mock_l20n',
+    'shared_mocks/mock_navigator_moz_settings',
+    'panels/about/hardware_info'
+  ];
+  var maps = {};
+
+  var elements = {
+    updateStatus: document.createElement('li'),
+    deviceInfoPhoneNum: document.createElement('li'),
+    deviceInfoMsisdns: document.createElement('li')
+  };
+
+  setup(function(done) {
+    testRequire(modules, maps,
+      function(MockL10n, MockNavigatorSettings, HardwareInfo) {
+        realL10n = document.l10n;
+        document.l10n = MockL10n;
+
+        realIccManager = navigator.mozIccManager;
+        navigator.mozIccManager = MockNavigatorMozIccManager;
+
+        realMobileConnections = navigator.mozMobileConnections;
+        navigator.mozMobileConnections = MockNavigatorMozMobileConnections;
+
+        realNavigatorSettings = navigator.mozSettings;
+        navigator.mozSettings = MockNavigatorSettings;
+
+        hardwareInfo = HardwareInfo();
+        hardwareInfo._elements = elements;
+        done();
+    });
+  });
+
+  suiteTeardown(function() {
+    document.l10n = realL10n;
+    realL10n = null;
+
+    navigator.mozSettings = realNavigatorSettings;
+    realNavigatorSettings = null;
+
+    navigator.mozMobileConnections = realMobileConnections;
+    realMobileConnections = null;
+
+    navigator.mozIccManager = realIccManager;
+    realIccManager = null;
+  });
+
+  suite('initiation', function() {
+    setup(function() {
+      this.sinon.stub(hardwareInfo, '_loadHardwareInfo');
+      hardwareInfo.init(elements);
+    });
+
+    test('_loadHardwareInfo and _loadLastUpdated are called while initiate',
+      function() {
+        assert.ok(hardwareInfo._loadHardwareInfo.called);
+    });
+  });
+
+  suite('loadHardwareInfo >', function() {
+    var iccIds = ['12345', '22345'];
+
+    setup(function() {
+      MockNavigatorMozIccManager.addIcc(iccIds[0]);
+      MockNavigatorMozMobileConnections[0].iccId = iccIds[0];
+      this.sinon.spy(hardwareInfo, '_renderPhoneNumberElement');
+    });
+
+    suite('single sim', function() {
+      test('the list item should be hidden when without iccinfo',
+        function() {
+          MockNavigatorMozIccManager.getIccById(iccIds[0]).iccInfo = null;
+          hardwareInfo.init(elements);
+          assert.isTrue(hardwareInfo._elements.deviceInfoPhoneNum.hidden);
+      });
+
+      test('should show unknown phone number when no msisdn and mdn',
+        function() {
+          MockNavigatorMozIccManager.getIccById(iccIds[0]).iccInfo = {};
+          hardwareInfo._loadHardwareInfo();
+          assert.ok(hardwareInfo._renderPhoneNumberElement.calledWith(
+            {}, 0, false));
+          assert.isFalse(hardwareInfo._elements.deviceInfoPhoneNum.hidden);
+      });
+
+      test('should show correct value when with mdn', function() {
+        MockNavigatorMozIccManager.getIccById(iccIds[0]).iccInfo =
+          { mdn: 'mdn' };
+        hardwareInfo._loadHardwareInfo();
+        assert.ok(hardwareInfo._renderPhoneNumberElement.calledWith(
+          { mdn: 'mdn' }, 0, false));
+        assert.isFalse(hardwareInfo._elements.deviceInfoPhoneNum.hidden);
+      });
+
+      test('should show correct value when with msisdn', function() {
+        MockNavigatorMozIccManager.getIccById(iccIds[0]).iccInfo =
+          { msisdn: 'msisdn' };
+        hardwareInfo._loadHardwareInfo();
+        assert.ok(hardwareInfo._renderPhoneNumberElement.calledWith(
+          { msisdn: 'msisdn' }, 0, false));
+        assert.isFalse(hardwareInfo._elements.deviceInfoPhoneNum.hidden);
+      });
+    });
+
+    suite('multiple sim', function() {
+      setup(function() {
+        MockNavigatorMozIccManager.addIcc(iccIds[1]);
+        MockNavigatorMozMobileConnections.mAddMobileConnection();
+        MockNavigatorMozMobileConnections[1].iccId = iccIds[1];
+        MockNavigatorMozIccManager.getIccById(iccIds[0]).iccInfo =
+          { mdn: 'mdn1' };
+        MockNavigatorMozIccManager.getIccById(iccIds[1]).iccInfo =
+          { mdn: 'mdn2' };
+      });
+
+      test('the list item should be hidden when without iccinfo',
+        function() {
+          MockNavigatorMozIccManager.getIccById(iccIds[0]).iccInfo = null;
+          MockNavigatorMozIccManager.getIccById(iccIds[1]).iccInfo = null;
+          hardwareInfo._loadHardwareInfo();
+          assert.isTrue(hardwareInfo._elements.deviceInfoPhoneNum.hidden);
+      });
+
+      test('should show the list item when there are iccinfos', function() {
+        MockNavigatorMozIccManager.getIccById(iccIds[0]).iccInfo = null;
+        MockNavigatorMozIccManager.getIccById(iccIds[1]).iccInfo = {};
+        hardwareInfo._loadHardwareInfo();
+        assert.isFalse(hardwareInfo._elements.deviceInfoPhoneNum.hidden);
+      });
+
+      test('should show unknown phone number when no msisdn and mdn',
+        function() {
+          MockNavigatorMozIccManager.getIccById(iccIds[0]).iccInfo = {};
+          MockNavigatorMozIccManager.getIccById(iccIds[1]).iccInfo = {};
+          hardwareInfo._loadHardwareInfo();
+          assert.ok(hardwareInfo._renderPhoneNumberElement.calledWith(
+            {}, 0, true));
+          assert.ok(hardwareInfo._renderPhoneNumberElement.calledWith(
+            {}, 1, true));
+      });
+
+      test('should show correct sim indicator', function() {
+        hardwareInfo._loadHardwareInfo();
+        assert.ok(hardwareInfo._renderPhoneNumberElement.calledWith(
+          { mdn: 'mdn1' }, 0, true));
+        assert.ok(hardwareInfo._renderPhoneNumberElement.calledWith(
+          { mdn: 'mdn2' }, 1, true));
+      });
+    });
+  });
+
+  suite('_renderPhoneNumberElement >', function() {
+    suite('single sim', function() {
+      test('should show unknown phone number when no msisdn and mdn',
+        function() {
+          var span = hardwareInfo._renderPhoneNumberElement({}, 0, false);
+          assert.ok(span.getAttribute('data-l10n-id', 'unknown-phoneNumber'));
+      });
+
+      test('should show correct value when with mdn', function() {
+        var span = hardwareInfo._renderPhoneNumberElement(
+          { mdn: 'mdn' }, 0, false);
+        assert.equal(span.textContent, 'mdn');
+      });
+
+      test('should show correct value when with msisdn', function() {
+        var span = hardwareInfo._renderPhoneNumberElement(
+          { msisdn: 'msisdn' }, 0, false);
+        assert.isFalse(hardwareInfo._elements.deviceInfoPhoneNum.hidden);
+        assert.equal(span.textContent, 'msisdn');
+      });
+    });
+
+    suite('multiple sim', function() {
+      test('should show unknown phone number when no msisdn and mdn',
+        function() {
+          this.sinon.spy(document.l10n, 'setAttributes');
+          var spans0 = hardwareInfo._renderPhoneNumberElement({}, 0, true);
+          assert.equal(document.l10n.setAttributes.args[0][0], spans0);
+          assert.equal(document.l10n.setAttributes.args[0][1],
+            'unknown-phoneNumber-sim');
+          assert.equal(document.l10n.setAttributes.args[0][2].index,
+            1);
+          var spans1 = hardwareInfo._renderPhoneNumberElement({}, 1, true);
+          assert.equal(document.l10n.setAttributes.args[1][0], spans1);
+          assert.equal(document.l10n.setAttributes.args[1][1],
+            'unknown-phoneNumber-sim');
+          assert.equal(document.l10n.setAttributes.args[1][2].index,
+            2);
+      });
+
+      test('should show correct sim indicator', function() {
+        hardwareInfo._loadHardwareInfo();
+        var spans0 = hardwareInfo._renderPhoneNumberElement(
+          { mdn: 'mdn1' }, 0, true);
+        var spans1 = hardwareInfo._renderPhoneNumberElement(
+          { mdn: 'mdn2' }, 1, true);
+
+        var sim1Args = JSON.parse(spans0.getAttribute('data-l10n-args'));
+        var sim2Args = JSON.parse(spans1.getAttribute('data-l10n-args'));
+        assert.equal(spans0.getAttribute('data-l10n-id'),
+          'deviceInfo-MSISDN-with-index');
+        assert.equal(spans1.getAttribute('data-l10n-id'),
+          'deviceInfo-MSISDN-with-index');
+        assert.equal(sim1Args.index, 1);
+        assert.equal(sim1Args.msisdn, 'mdn1');
+        assert.equal(sim2Args.index, 2);
+        assert.equal(sim2Args.msisdn, 'mdn2');
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/about/update_check_test.js

@@ -0,0 +1,266 @@
+'use strict';
+
+suite('about > update_check', function() {
+  var updateCheck;
+  var realNavigatorSettings;
+  var geckoUpdateSetting = 'gecko.updateStatus';
+  var appsUpdateSetting = 'apps.updateStatus';
+
+  var modules = [
+    'shared_mocks/mock_navigator_moz_settings',
+    'panels/about/update_check'
+  ];
+  var maps = {};
+
+  var elements = {
+    updateStatus: document.createElement('li'),
+    checkUpdateNow: document.createElement('button'),
+    lastUpdateDate: document.createElement('small'),
+    systemStatus: document.createElement('li'),
+    generalInfo: document.createElement('p')
+  };
+
+  setup(function(done) {
+    this.clock = this.sinon.useFakeTimers();
+
+    testRequire(modules, maps,
+      function(MockNavigatorSettings, module) {
+        realNavigatorSettings = navigator.mozSettings;
+        navigator.mozSettings = MockNavigatorSettings;
+
+        updateCheck = module();
+        updateCheck._elements = elements;
+        done();
+    });
+  });
+
+  suiteTeardown(function() {
+    navigator.mozSettings = realNavigatorSettings;
+    realNavigatorSettings = null;
+  });
+
+  suite('initiation', function() {
+    setup(function() {
+      this.sinon.stub(updateCheck, '_loadLastUpdated');
+      this.sinon.stub(updateCheck, '_checkForUpdates');
+
+      updateCheck.init(elements);
+    });
+
+    test('_loadHardwareInfo and _loadLastUpdated are called while initiate',
+      function() {
+        assert.ok(updateCheck._loadLastUpdated.called);
+    });
+
+    test('_checkForUpdates is called when initiate', function() {
+      updateCheck._elements.checkUpdateNow.dispatchEvent(
+        new CustomEvent('click'));
+      assert.ok(updateCheck._checkForUpdates.called);
+    });
+  });
+
+  suite('checkForUpdates >', function() {
+    setup(function() {
+      this.sinon.stub(updateCheck, '_onUpdateStatus');
+      updateCheck._checkForUpdates();
+    });
+
+    test('triggers the updates', function() {
+      var setting = 'gaia.system.checkForUpdates';
+      assert.isTrue(navigator.mozSettings.mSettings[setting]);
+    });
+
+    test('register handlers', function() {
+      assert.isFunction(updateCheck._checkStatus[geckoUpdateSetting].cb);
+      assert.isFunction(updateCheck._checkStatus[appsUpdateSetting].cb);
+    });
+
+    test('displays the checking updates text', function() {
+      assert.isTrue(updateCheck._elements.updateStatus
+        .classList.contains('checking'));
+      assert.isTrue(updateCheck._elements.updateStatus
+        .classList.contains('visible'));
+      assert.equal(updateCheck._elements.systemStatus.textContent.length, 0);
+    });
+
+    suite('getting response for system update >', function() {
+      suite('successful >', function() {
+        setup(function() {
+          navigator.mozSettings.mTriggerObservers(geckoUpdateSetting, {
+            settingValue: 'check-complete'
+          });
+        });
+
+        test('does not hide the status', function() {
+          assert.isTrue(updateCheck._elements.updateStatus.classList
+            .contains('visible'));
+        });
+
+        test('does not hide the checking updates text', function() {
+          assert.isTrue(updateCheck._elements.updateStatus.classList
+            .contains('checking'));
+        });
+      });
+    });
+
+    suite('getting response for app update >', function() {
+      suite('successful >', function() {
+        setup(function() {
+          navigator.mozSettings.mTriggerObservers(appsUpdateSetting, {
+            settingValue: 'check-complete'
+          });
+        });
+
+        test('does not hide the status', function() {
+          assert.isTrue(updateCheck._elements.updateStatus.classList
+            .contains('visible'));
+        });
+
+        test('does not hide the checking updates text', function() {
+          assert.isTrue(updateCheck._elements.updateStatus.classList
+            .contains('checking'));
+        });
+      });
+    });
+  });
+
+  suite('onUpdateStatus >', function() {
+    setup(function() {
+      this.sinon.stub(updateCheck, '_statusCompleteUpdater');
+    });
+
+    teardown(function() {
+      navigator.mozSettings.mTeardown();
+    });
+
+    test('system update _checkStatus value is updated', function(){
+      updateCheck._onUpdateStatus(geckoUpdateSetting,
+        {settingValue: 'check-complete'});
+
+      assert.equal(updateCheck._checkStatus[geckoUpdateSetting].value,
+        'check-complete');
+    });
+
+    test('app update _checkStatus value is updated', function(){
+      updateCheck._onUpdateStatus(appsUpdateSetting,
+        {settingValue: 'check-complete'});
+
+      assert.equal(updateCheck._checkStatus[appsUpdateSetting].value,
+        'check-complete');
+    });
+
+    test('no-updates', function() {
+      updateCheck._onUpdateStatus(appsUpdateSetting,
+        {settingValue: 'no-updates'});
+
+      assert.equal(updateCheck._elements.systemStatus
+        .getAttribute('data-l10n-id'), 'no-updates');
+    });
+
+    test('already-latest-version', function() {
+      updateCheck._onUpdateStatus(appsUpdateSetting,
+        {settingValue: 'already-latest-version'});
+
+      assert.equal(updateCheck._elements.systemStatus
+        .getAttribute('data-l10n-id'), 'already-latest-version');
+    });
+
+    test('retry-when-online', function() {
+      updateCheck._onUpdateStatus(appsUpdateSetting,
+        {settingValue: 'retry-when-online'});
+
+      assert.equal(updateCheck._elements.systemStatus
+        .getAttribute('data-l10n-id'), 'retry-when-online');
+    });
+
+    test('check-error', function() {
+      var errors = ['check-error-http-200', 'check-error-http-403',
+                    'check-error-http-404', 'check-error-http-500',
+                    'check-error-2152398878'];
+      for (var i = 0; i < errors.length; i++) {
+        updateCheck._onUpdateStatus(appsUpdateSetting,
+          {settingValue: errors[i]});
+
+        assert.equal(updateCheck._elements.systemStatus
+          .getAttribute('data-l10n-id'), 'check-error');
+      }
+    });
+
+    test('remove the system update handler', function() {
+      this.sinon.spy(navigator.mozSettings, 'removeObserver');
+      updateCheck._checkForUpdates();
+      navigator.mozSettings.mTriggerObservers(geckoUpdateSetting, {
+        settingValue: 'check-complete'
+      });
+
+      var removedObserver = navigator.mozSettings
+        .mRemovedObservers[geckoUpdateSetting][0];
+      assert.isFunction(removedObserver);
+      assert.ok(navigator.mozSettings.removeObserver.calledWith(
+        geckoUpdateSetting));
+    });
+  });
+
+  suite('_statusCompleteUpdater >', function() {
+    suite('both successful >', function() {
+      setup(function() {
+        updateCheck._elements.updateStatus.classList
+          .add('checking', 'visible');
+        updateCheck._checkStatus[geckoUpdateSetting].value = 'check-complete';
+        updateCheck._checkStatus[appsUpdateSetting].value = 'check-complete';
+        updateCheck._statusCompleteUpdater();
+      });
+
+      test('hides the status', function() {
+        assert.isTrue(updateCheck._elements.updateStatus.classList
+          .contains('visible'));
+        this.clock.tick(5001);
+        assert.isFalse(updateCheck._elements.updateStatus.classList
+          .contains('visible'));
+      });
+
+      test('removes the text in the system description', function() {
+        assert.equal(updateCheck._elements.systemStatus.textContent.length, 0);
+      });
+
+      test('hide the checking updates text', function() {
+        assert.isFalse(updateCheck._elements.updateStatus.classList
+          .contains('checking'));
+      });
+    });
+
+    suite('not both successful >', function() {
+      setup(function() {
+        updateCheck._elements.updateStatus.classList
+          .add('checking', 'visible');
+        updateCheck._checkStatus[geckoUpdateSetting].value = 'no-updates';
+        updateCheck._checkStatus[appsUpdateSetting].value = 'check-complete';
+        updateCheck._statusCompleteUpdater();
+      });
+
+      test('hide the status', function() {
+        assert.isTrue(updateCheck._elements.updateStatus.classList
+          .contains('visible'));
+        this.clock.tick(5001);
+        assert.isFalse(updateCheck._elements.updateStatus.classList
+          .contains('visible'));
+      });
+
+      test('hide the checking updates text', function() {
+        assert.isFalse(updateCheck._elements.updateStatus.classList
+          .contains('checking'));
+      });
+
+      suite('starting an update again >', function() {
+        setup(function() {
+          updateCheck._statusCompleteUpdater();
+        });
+
+        test('should remove the text', function() {
+          assert.equal(updateCheck._elements.systemStatus
+            .textContent.length, 0);
+        });
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/about_more_info/commit_info_test.js

@@ -0,0 +1,36 @@
+'use strict';
+
+suite('about software info >', function() {
+  var commitInfo;
+
+  var modules = [
+    'panels/about_more_info/commit_info'
+  ];
+
+  var maps = {};
+
+  var elements = {
+    dispDate: document.createElement('li'),
+    dispHash: document.createElement('li')
+  };
+
+  setup(function(done) {
+    testRequire(modules, maps, function(CommitInfo) {
+      commitInfo = CommitInfo();
+      commitInfo._elements = elements;
+      done();
+    });
+  });
+
+  suite('Initialization >', function() {
+    setup(function() {
+      this.sinon.stub(commitInfo, '_loadGaiaCommit');
+      commitInfo.init(elements);
+    });
+
+    test('function called', function() {
+      assert.ok(commitInfo._loadGaiaCommit.called);
+    });
+  });
+});
+

gaia/apps/settings/test/unit/panels/about_more_info/device_info_test.js

@@ -0,0 +1,276 @@
+/* global MockNavigatorMozMobileConnections, MockNavigatorMozTelephony */
+'use strict';
+
+require('/shared/test/unit/mocks/mock_navigator_moz_mobile_connections.js');
+require('/shared/test/unit/mocks/mock_navigator_moz_telephony.js');
+
+suite('about device info >', function() {
+  var deviceInfo;
+  var realL10n;
+  var realMobileConnections;
+  var realTelephony;
+
+  var modules = [
+    'shared_mocks/mock_l20n',
+    'panels/about_more_info/device_info'
+  ];
+
+  var maps = {};
+
+  var elements = {
+    listImeis: document.createElement('li'),
+    listIccIds: document.createElement('li'),
+    deviceInfoImeis: document.createElement('small'),
+    deviceInfoIccIds: document.createElement('small')
+  };
+
+  setup(function(done) {
+    testRequire(modules, maps, function(MockL10n, DeviceInfo) {
+      realL10n = document.l10n;
+      document.l10n = MockL10n;
+
+      realMobileConnections = navigator.mozMobileConnections;
+      navigator.mozMobileConnections = MockNavigatorMozMobileConnections;
+
+      realTelephony = navigator.mozTelephony;
+      navigator.mozTelephony = MockNavigatorMozTelephony;
+
+      deviceInfo = DeviceInfo();
+      deviceInfo._elements = elements;
+      done();
+    });
+  });
+
+  suiteTeardown(function() {
+    document.l10n = realL10n;
+    realL10n = null;
+
+    navigator.mozMobileConnections = realMobileConnections;
+    realMobileConnections = null;
+
+    navigator.mozTelephony = realTelephony;
+    realTelephony = null;
+  });
+
+  suite('Initialization >', function() {
+    setup(function() {
+      this.sinon.stub(deviceInfo, '_loadImei');
+      this.sinon.stub(deviceInfo, '_loadIccId');
+      deviceInfo.init(elements);
+    });
+
+    test('function called', function() {
+      assert.ok(deviceInfo._loadImei.called);
+      assert.ok(deviceInfo._loadIccId.called);
+    });
+  });
+
+  suite('loadIccId >', function() {
+    var iccIds = ['12345', '22345'];
+    setup(function() {
+      navigator.mozMobileConnections[0].iccId = iccIds[0];
+    });
+
+    suite('single sim', function() {
+      test('the list item should be hidden when mozMobileConnections is ' +
+        'unavailable', function() {
+          navigator.mozMobileConnections = null;
+          deviceInfo._loadIccId();
+          assert.isTrue(deviceInfo._elements.listIccIds.hidden);
+      });
+
+      test('the list item should be hidden when mozTelephony is unavalilable',
+        function() {
+          navigator.mozTelephony = null;
+          deviceInfo._loadIccId();
+          assert.isTrue(deviceInfo._elements.listIccIds.hidden);
+      });
+
+      test('should show "Not available" when iccid is unavalilable',
+        function() {
+          navigator.mozMobileConnections[0].iccId = null;
+          deviceInfo._loadIccId();
+          var span = deviceInfo._elements.deviceInfoIccIds
+            .querySelector('span');
+          this.sinon.spy(span, 'setAttribute');
+          assert.equal(span.getAttribute('data-l10n-id'), 'unavailable');
+      });
+
+      test('should show correct value when with iccid', function() {
+        deviceInfo._loadIccId();
+        var span = deviceInfo._elements.deviceInfoIccIds.querySelector('span');
+        assert.equal(span.textContent, iccIds[0]);
+      });
+    });
+
+    suite('multiple sim', function() {
+      setup(function() {
+        navigator.mozMobileConnections.mAddMobileConnection();
+      });
+
+      test('should show correct sim indicator', function() {
+        iccIds = ['12345', '22345'];
+        navigator.mozMobileConnections[0].iccId = iccIds[0];
+        navigator.mozMobileConnections[1].iccId = iccIds[1];
+        this.sinon.stub(document.l10n, 'setAttributes');
+        deviceInfo._loadIccId();
+        var spans = deviceInfo._elements.deviceInfoIccIds
+          .querySelectorAll('span');
+        iccIds.forEach(function(iccId, index) {
+          assert.ok(document.l10n.setAttributes.calledWith(
+            spans[index], 'deviceInfo-ICCID-with-index', {
+              index: index + 1,
+              iccid: iccId
+            }
+          ));
+        });
+      });
+
+      test('should show unavailable sim indicator', function() {
+        navigator.mozMobileConnections[0].iccId = null;
+        navigator.mozMobileConnections[1].iccId = null;
+        this.sinon.stub(document.l10n, 'setAttributes');
+        deviceInfo._loadIccId();
+        var spans = deviceInfo._elements.deviceInfoIccIds
+          .querySelectorAll('span');
+        assert.ok(document.l10n.setAttributes.calledWith(
+          spans[0], 'deviceInfo-ICCID-unavailable-sim', {index:1}));
+        assert.ok(document.l10n.setAttributes.calledWith(
+          spans[1], 'deviceInfo-ICCID-unavailable-sim', {index:2}));
+      });
+    });
+  });
+
+  suite('loadImei >', function() {
+    test('the list item should be hidden when mozMobileConnections is ' +
+      'unavailable', function(done) {
+      navigator.mozMobileConnections = null;
+      deviceInfo._loadImei().then(function() {
+        assert.isTrue(deviceInfo._elements.listImeis.hidden);
+      }).then(done, done);
+    });
+
+    test('the list item should be hidden when mozTelephony is unavalilable',
+      function(done) {
+        navigator.mozTelephony = null;
+        deviceInfo._loadImei().then(function() {
+          assert.isTrue(deviceInfo._elements.listImeis.hidden);
+        }).then(done, done);
+    });
+
+    test('should show correct value when getting an IMEI successfully',
+      function(done) {
+        this.sinon.stub(document.l10n, 'setAttributes');
+        this.sinon.stub(deviceInfo, '_getImeiCode', function() {
+          return Promise.resolve('fakeImei');
+        });
+        var promise = deviceInfo._loadImei();
+        assert.ok(deviceInfo._getImeiCode.called);
+
+        promise.then(function() {
+          var span = deviceInfo._elements.deviceInfoImeis.querySelector('span');
+          assert.equal(span.dataset.slot, 0);
+          assert.ok(document.l10n.setAttributes.calledWith(
+            span, 'deviceInfo-IMEI-with-index', {
+              index: 1,
+              imei: 'fakeImei'
+            }
+          ));
+        }).then(done, done);
+    });
+
+    test('should show correct value when with getting imei failed',
+      function(done) {
+        this.sinon.stub(deviceInfo, '_getImeiCode', function() {
+          return Promise.reject();
+        });
+        var promise = deviceInfo._loadImei();
+
+        promise.then(function() {
+          var span = deviceInfo._elements.deviceInfoImeis.querySelector('span');
+          assert.equal(span.getAttribute('data-l10n-id'), 'unavailable');
+        }).then(done, done);
+    });
+
+    suite('multiple sim', function() {
+      setup(function() {
+        navigator.mozMobileConnections.mAddMobileConnection();
+      });
+
+      test('should show multiple IMEI codes', function(done) {
+        var count = 0;
+        this.sinon.stub(document.l10n, 'setAttributes');
+        this.sinon.stub(deviceInfo, '_getImeiCode', function() {
+          count += 1;
+          return Promise.resolve('fakeImei' + count);
+        });
+        var promise = deviceInfo._loadImei();
+
+        promise.then(function() {
+          var spans = deviceInfo._elements.deviceInfoImeis
+            .querySelectorAll('span');
+          for (var index = 0; index < 2; index++) {
+            assert.equal(spans[index].dataset.slot, index);
+            assert.ok(document.l10n.setAttributes.calledWith(
+              spans[index], 'deviceInfo-IMEI-with-index', {
+                index: index + 1,
+                imei: 'fakeImei' + (index + 1)
+              }
+            ));
+          }
+        }).then(done, done);
+      });
+    });
+  });
+
+  suite('getImeiCode >', function() {
+    test('when dial data is resolved', function(done) {
+      this.sinon.stub(navigator.mozTelephony, 'dial', function() {
+        return Promise.resolve({
+          result: Promise.resolve({
+            success: true,
+            serviceCode: 'scImei',
+            statusMessage: 'fakeImei'
+          })
+        });
+      });
+
+      var promise = deviceInfo._getImeiCode(0);
+      assert.ok(navigator.mozTelephony.dial.called);
+      promise.then(function(data) {
+        assert.equal(data, 'fakeImei');
+      }).then(done, done);
+    });
+
+    test('when dial data is invalid', function(done) {
+      this.sinon.stub(navigator.mozTelephony, 'dial', function() {
+        return Promise.resolve({
+          result: Promise.resolve({})
+        });
+      });
+
+      var promise = deviceInfo._getImeiCode(0);
+      promise.catch(function(result) {
+        assert.deepEqual(result,
+          new Error('Could not retrieve the IMEI code for SIM 0'));
+      }).then(done, done);
+    });
+    
+    test('when dial data is rejected', function(done) {
+      this.sinon.stub(navigator.mozTelephony, 'dial', function() {
+        return Promise.resolve({
+          result: Promise.reject({
+            success: false,
+            statusMessage: 'error'
+          })
+        });
+      });
+
+      var promise = deviceInfo._getImeiCode(0);
+      assert.ok(navigator.mozTelephony.dial.called);
+      promise.catch(function(result) {
+        assert.equal(result.statusMessage, 'error');
+      }).then(done, done);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/about_more_info/hardware_info_test.js

@@ -0,0 +1,98 @@
+'use strict';
+
+suite('about hardware info >', function() {
+  var hardwareInfo;
+  var MockVersionDetector;
+  var MockBluetooth;
+  var realSettingsListener;
+
+  var modules = [
+    'shared_mocks/mock_settings_listener',
+    'panels/about_more_info/hardware_info'
+  ];
+
+  var maps = {
+    '*': {
+      'shared/settings_listener': 'shared_mocks/mock_settings_listener',
+      'modules/bluetooth/bluetooth_context': 'MockBluetooth'
+    }
+  };
+
+  var elements = {
+    deviceInfoMac: document.createElement('li'),
+    btAddr: document.createElement('li')
+  };
+
+  setup(function(done) {
+    var requireCtx = testRequire([], maps, function() {});
+
+    define('MockVersionDetector', function() {
+      return MockVersionDetector;
+    });
+
+    MockBluetooth = {
+      observe: function() {},
+      address: ''
+    };
+    define('MockBluetooth', function() {
+      return MockBluetooth;
+    });
+
+    requireCtx(modules, function(MockSettingsListener, HardwareInfo) {
+      realSettingsListener = window.SettingsListener;
+      window.SettingsListener = MockSettingsListener;
+
+      hardwareInfo = HardwareInfo();
+      hardwareInfo._elements = elements;
+      done();
+    });
+  });
+
+  suiteTeardown(function() {
+    window.SettingsListener = realSettingsListener;
+  });
+
+  suite('Initialization >', function() {
+    setup(function() {
+      this.sinon.stub(hardwareInfo, '_loadMacAddress');
+      this.sinon.stub(hardwareInfo, '_loadBluetoothAddress');
+      hardwareInfo.init(elements);
+    });
+
+    test('function called', function() {
+      assert.ok(hardwareInfo._loadMacAddress.called);
+      assert.ok(hardwareInfo._loadBluetoothAddress.called);
+    });
+  });
+
+  suite('loadBluetoothAddress >', function() {
+    test('should show bluetooth address', function() {
+      var fakeAddress = 'fakeAddress';
+      MockBluetooth.address = fakeAddress;
+      this.sinon.stub(MockBluetooth, 'observe');
+      this.sinon.spy(hardwareInfo, '_refreshBluetoothAddress');
+
+      hardwareInfo._loadBluetoothAddress();
+      assert.ok(MockBluetooth.observe.calledWith('address'));
+      assert.equal(hardwareInfo._refreshBluetoothAddress.args[0][0],
+        fakeAddress);
+
+      // Ensure the observer works
+      var fakeAddress2 = 'fakeAddress2';
+      MockBluetooth.observe.args[0][1](fakeAddress2);
+      assert.equal(hardwareInfo._refreshBluetoothAddress.args[1][0],
+        fakeAddress2);
+    });
+
+    suite('should use correct bluetooth module', function() {
+      setup(function() {
+        this.sinon.stub(MockBluetooth, 'observe');
+      });
+
+      test('bluetooth', function() {
+        hardwareInfo._loadBluetoothAddress();
+        assert.isTrue(MockBluetooth.observe.called);
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/accessibility/panel_test.js

@@ -0,0 +1,50 @@
+'use strict';
+
+suite('Accessibility Panel > ', function() {
+
+  var modules = [
+    'panels/accessibility/panel',
+    'shared/settings_listener',
+    'unit/mock_settings_panel'
+  ];
+  var map = {
+    '*': {
+      'modules/settings_panel': 'unit/mock_settings_panel',
+      'shared/settings_listener': 'shared_mocks/mock_settings_listener'
+    }
+  };
+
+  var settingsListener;
+
+  suiteSetup(function(done) {
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+    var self = this;
+
+    requireCtx(modules, function(AccessibilityPanel, MockSettingsListener,
+                                 MockSettingsPanel) {
+      MockSettingsPanel.mInnerFunction = options => Object.assign({}, options);
+
+      self.panel = AccessibilityPanel();
+
+      settingsListener = MockSettingsListener;
+      settingsListener.observe = sinon.spy();
+      settingsListener.unobserve = sinon.spy();
+      done();
+    });
+  });
+
+  suite('panel initialized', function() {
+    setup(function() {
+      this.panel.onInit(document.body);
+    });
+    test('settings listener observer attached', function() {
+      assert(settingsListener.observe.
+        calledWith('accessibility.screenreader'));
+      assert(settingsListener.observe.
+        calledWith('accessibility.colors.enable'));
+      assert(settingsListener.observe.
+        calledWith('accessibility.monoaudio.enable'));
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/achievements/achievements_list_test.js

@@ -0,0 +1,72 @@
+'use strict';
+
+/* globals loadBodyHTML*/
+
+requireApp('settings/shared/test/unit/load_body_html_helper.js');
+
+suite('Achievements List > ', function() {
+
+  var modules = [
+    'unit/mock_settings_service',
+    'modules/mvvm/observable_array',
+    'unit/mock_list_view',
+    'panels/achievements/achievements_template',
+    'panels/achievements/achievements_list'
+  ];
+  var maps = {
+    'panels/achievements/achievements_list': {
+      'modules/settings_service': 'unit/mock_settings_service',
+      'modules/mvvm/list_view': 'unit/mock_list_view',
+      'panels/achievements/achievements_template': 'MockAchievementsTemplate'
+    }
+  };
+  var achievementsList, observableArray;
+  var mockAchievement = {
+    issuer: 'fxos-sharing',
+    criteria: 'achievements/sharing-is-caring'
+  };
+
+  suiteSetup(function(done) {
+    loadBodyHTML('_achievements.html');
+
+    // Create a new requirejs context
+    var requireCtx = testRequire([], maps, function() {});
+
+    // Define MockAchievementsTemplate
+    var MockAchievementsTemplate = {};
+    define('MockAchievementsTemplate', function() {
+      return function() {
+        return MockAchievementsTemplate;
+      };
+    });
+
+    requireCtx(modules, function(MockSettingsService, ObservableArray,
+      MockListView, MockAchievementsTemplate, AchievementsList) {
+      achievementsList = AchievementsList(document.body.querySelector(
+        '.achievements-list'));
+      observableArray = ObservableArray;
+      done();
+    });
+  });
+
+  suite('achievements list initialized', function() {
+    test('constructed', function() {
+      assert.equal(achievementsList.achievements.length, 0);
+      assert.isTrue(achievementsList._achievements instanceof observableArray);
+    });
+  });
+
+  suite('update achievements list', function() {
+    test('add an achievement to the list', function() {
+      var achievements = [mockAchievement];
+      achievementsList.achievements = achievements;
+      assert.equal(achievementsList.achievements.length, 1);
+    });
+
+    test('remove last achievement from the list', function() {
+      var achievements = [];
+      achievementsList.achievements = achievements;
+      assert.equal(achievementsList.achievements.length, 0);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/achievements/achievements_template_test.js

@@ -0,0 +1,48 @@
+'use strict';
+
+suite('Achievements Template > ', function() {
+
+  var modules = [
+    'panels/achievements/achievements_template'
+  ];
+
+  var achievementsTemplate;
+  var mockAchievement = {
+    issuer: 'fxos-sharing',
+    criteria: 'achievements/sharing-is-caring'
+  };
+
+  suiteSetup(function(done) {
+    var requireCtx = testRequire([], {}, function() {});
+
+    requireCtx(modules, function(achtemplate) {
+      achievementsTemplate = achtemplate;
+      done();
+    });
+  });
+
+  test('achievements template rendered', function() {
+    var subject = achievementsTemplate(mockAchievement);
+    assert.equal(subject.tagName, 'LI');
+    assert.isTrue(subject.classList.contains('achievements-item'));
+
+    var details = subject.querySelector('.details');
+    assert.ok(details);
+
+    var span = details.querySelector('span');
+    assert.ok(span);
+    assert.equal(span.getAttribute('data-l10n-id'),
+      'achievements-sharing-is-caring-name');
+
+    var small = details.querySelector('small');
+    assert.ok(small);
+    assert.equal(small.getAttribute('data-l10n-id'),
+      'achievements-sharing-is-caring-description');
+    assert.isTrue(small.classList.contains('description'));
+
+    var icon = subject.querySelector('img');
+    assert.ok(icon);
+    assert.isTrue(icon.classList.contains('icon'));
+    assert.isTrue(icon.src.indexOf('sharing-is-caring') > 0);
+  });
+});

gaia/apps/settings/test/unit/panels/achievements/panel_test.js

@@ -0,0 +1,73 @@
+'use strict';
+
+suite('Achievements Panel > ', function() {
+
+  var modules = [
+    'panels/achievements/panel',
+    'panels/achievements/achievements_list',
+    'shared/settings_listener',
+    'unit/mock_settings_panel'
+  ];
+  var map = {
+    '*': {
+      'modules/settings_panel': 'unit/mock_settings_panel',
+      'panels/achievements/achievements_list': 'MockAchievementsList',
+      'shared/settings_listener': 'shared_mocks/mock_settings_listener'
+    }
+  };
+
+  var settingsListener;
+
+  suiteSetup(function(done) {
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+    var that = this;
+
+    var MockAchievementsList = {
+      get achievements() {},
+      set achievements(val) {}
+    };
+
+    define('MockAchievementsList', function() {
+      return function() {
+        return MockAchievementsList;
+      };
+    });
+
+    requireCtx(modules, function(AchievementsPanel, MockAchievementsList,
+      MockSettingsListener, MockSettingsPanel) {
+      MockSettingsPanel.mInnerFunction = options => Object.assign({}, options);
+
+      that.panel = AchievementsPanel();
+      that.achievementsList = MockAchievementsList();
+
+      settingsListener = MockSettingsListener;
+      settingsListener.observe = sinon.spy();
+      settingsListener.unobserve = sinon.spy();
+      done();
+    });
+  });
+
+  suite('panel initialized', function() {
+    setup(function() {
+      this.panel.onInit(document.body);
+      this.panel.onBeforeShow();
+    });
+    test('settings listener observer attached', function() {
+      assert(settingsListener.observe.calledOnce);
+      assert(settingsListener.observe.calledWith('achievements',
+        this.achievementsList.achievements));
+    });
+  });
+
+  suite('panel uninitialized', function() {
+    setup(function() {
+      this.panel.onHide();
+    });
+    test('settings listener observer detached', function() {
+      assert(settingsListener.unobserve.calledOnce);
+      assert(settingsListener.unobserve.calledWith('achievements'));
+    });
+  });
+
+});

gaia/apps/settings/test/unit/panels/addon_details/addon_details_test.js

@@ -0,0 +1,93 @@
+'use strict';
+
+/* globals MockMozApps, MockL10n */
+
+require('/shared/test/unit/mocks/mock_l20n.js');
+require('mock_moz_apps.js');
+
+suite('Addon Details Test > ', function() {
+
+  var modules = [
+    'panels/addon_details/addon_details',
+    'shared_mocks/mock_manifest_helper',
+    'unit/mock_addon_manager'
+  ];
+  var map = {
+    '*': {
+      'shared/manifest_helper': 'shared_mocks/mock_manifest_helper',
+      'modules/addon_manager': 'unit/mock_addon_manager'
+    }
+  };
+  var MockAddon = {
+    observe: sinon.stub(),
+    unobserve: sinon.stub(),
+    instance: {
+      manifest: {}
+    }
+  };
+  var MockObsoleteAddon = Object.assign({}, MockAddon, {
+    instance: { manifest: { customizations: [] } }
+  });
+  var MockObsoleteRemovableAddon = Object.assign({}, MockAddon, {
+    instance: { manifest: { customizations: [] }, removable: true }
+  });
+
+  var realL10n, realMozApps, subject;
+
+  suiteSetup(function(done) {
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+    realL10n = document.l10n;
+    document.l10n = MockL10n;
+    realMozApps = navigator.mozApps;
+    navigator.mozApps = MockMozApps;
+
+    requireCtx(modules, (AddonDetails, MockManifestHelper,
+      MockAddonManager) => {
+      subject = AddonDetails({
+        body: document.createElement('div'),
+        header: document.createElement('div'),
+        enabledState: document.createElement('div'),
+        name: document.createElement('div'),
+        icon: document.createElement('div'),
+        version: document.createElement('div'),
+        description: document.createElement('div'),
+        developer: document.createElement('div'),
+        targetsList: document.createElement('div'),
+        obsoleteStatus: document.createElement('div'),
+        obsoleteStatusInfo: document.createElement('div')
+      });
+      done();
+    });
+  });
+
+  suiteTeardown(function() {
+    document.l10n = realL10n;
+    realL10n = null;
+    navigator.mozApps = realMozApps;
+    realMozApps = null;
+  });
+
+  suite('render > obsoleteStatus', function() {
+    test('hidden', function() {
+      subject.render(MockAddon);
+      assert.isTrue(subject._elements.obsoleteStatus.hidden);
+    });
+
+    test('visible', function() {
+      subject.render(MockObsoleteAddon);
+      assert.isFalse(subject._elements.obsoleteStatus.hidden);
+      assert.equal(
+        subject._elements.obsoleteStatusInfo.getAttribute('data-l10n-id'),
+        'addon-obsolete');
+    });
+
+    test('visible can delete', function() {
+      subject.render(MockObsoleteRemovableAddon);
+      assert.isFalse(subject._elements.obsoleteStatus.hidden);
+      assert.equal(
+        subject._elements.obsoleteStatusInfo.getAttribute('data-l10n-id'),
+        'addon-obsolete-can-delete');
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/addon_details/panel_test.js

@@ -0,0 +1,70 @@
+'use strict';
+
+suite('Addon Details Panel > ', function() {
+
+  var modules = [
+    'panels/addon_details/panel',
+    'unit/mock_settings_panel',
+    'unit/mock_addon_manager',
+    'panels/addon_details/addon_details',
+    'unit/mock_settings_service'
+  ];
+  var map = {
+    '*': {
+      'modules/settings_panel': 'unit/mock_settings_panel',
+      'modules/addon_manager': 'unit/mock_addon_manager',
+      'panels/addon_details/addon_details': 'MockAddonDetails',
+      'modules/settings_service': 'unit/mock_settings_service',
+      'shared/toaster': 'MockToaster'
+    }
+  };
+  var MockAddon = {};
+  var MockPanel = {
+    querySelector: () => document.createElement('div')
+  };
+  var subject;
+
+  suiteSetup(function(done) {
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+
+    var MockAddonDetails = {
+      _updateEnabledState: sinon.stub(),
+      render: sinon.stub(),
+      updateNames: sinon.stub()
+    };
+
+    define('MockAddonDetails', function() {
+      return function() {
+        return MockAddonDetails;
+      };
+    });
+
+    // Define MockToaster
+    define('MockToaster', function() {
+      return {
+        showToast: function() {}
+      };
+    });
+
+    requireCtx(modules, (AddonDetailsPanel, MockSettingsPanel,
+      MockAddonManager, MockAddonDetails, MockSettingsService) => {
+      MockSettingsPanel.mInnerFunction = options => Object.assign({}, options);
+
+      subject = AddonDetailsPanel();
+      done();
+    });
+  });
+
+  suite('panel initialized', function() {
+    setup(function() {
+      subject.onInit(MockPanel);
+      subject.onBeforeShow(MockPanel, MockAddon);
+    });
+    test('elements are initialized', function() {
+      var elements = Object.keys(subject._elements);
+      assert.isTrue(elements.length > 0);
+      elements.forEach(key => assert.ok(subject._elements[key]));
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/addons/addons_list_test.js

@@ -0,0 +1,58 @@
+suite('Addons List >', function() {
+  'use strict';
+
+  var addonsList;
+
+  suiteSetup(function(done) {
+    var map = {
+      '*': {
+        'modules/settings_service': 'unit/mock_settings_service',
+        'modules/mvvm/list_view': 'unit/mock_list_view'
+      }
+    };
+
+    var modules = [
+      'panels/addons/addons_list',
+      'MockAddonManager'
+    ];
+
+    define('MockAddonManager', function() {
+      return {
+        addons: {
+          addEventListener: function() {},
+          array: []
+        }
+      };
+    });
+
+    testRequire(modules, map, function(AddonsList, MockAddonManager) {
+      addonsList = AddonsList(document.body, MockAddonManager);
+      done();
+    });
+  });
+
+  suite('_sortByName >', function() {
+    test('addons should be in alphabetical order (case insensitive)',
+      function() {
+        var addons = [
+          { _app: { manifest: { name: 'second' } } },
+          { _app: { manifest: { name: 'X Last' } } },
+          { _app: { manifest: { name: 'Third' } } },
+          { _app: { manifest: { name: '1st' } } },
+        ];
+        var sortedAddons = [
+          { _app: { manifest: { name: '1st' } } },
+          { _app: { manifest: { name: 'second' } } },
+          { _app: { manifest: { name: 'Third' } } },
+          { _app: { manifest: { name: 'X Last' } } }
+        ];
+
+        assert.deepEqual(
+          addonsList._sortByName(addons),
+          sortedAddons,
+          'addons should be in the right order'
+        );
+      }
+    );
+  });
+});

gaia/apps/settings/test/unit/panels/addons/panel_test.js

@@ -0,0 +1,82 @@
+/* globals loadBodyHTML*/
+'use strict';
+
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('Addons Panel > ', function() {
+
+  var modules = [
+    'panels/addons/panel',
+    'panels/addons/addons_list',
+    'unit/mock_addon_manager',
+    'unit/mock_settings_panel'
+  ];
+  var map = {
+    '*': {
+      'modules/settings_panel': 'unit/mock_settings_panel',
+      'panels/addons/addons_list': 'MockAddonsList',
+      'modules/addon_manager': 'unit/mock_addon_manager'
+    }
+  };
+
+  suiteSetup(function(done) {
+    loadBodyHTML('_addons.html');
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+    var that = this;
+
+    var MockAddonsList = {
+      setFilter: sinon.stub().returns({
+        then: function(callback) { callback(); }
+      }),
+      unsetFilter: sinon.stub().returns({
+        then: function(callback) { callback(); }
+      }),
+      set enabled(value) { this._enabled = value; },
+      get enabled() { return this._enabled; }
+    };
+
+    define('MockAddonsList', function() {
+      return function() {
+        return MockAddonsList;
+      };
+    });
+
+    requireCtx(modules, function(AddonsPanel, MockAddonsList,
+      MockAddonManager, MockSettingsPanel) {
+      MockSettingsPanel.mInnerFunction = options => Object.assign({}, options);
+
+      that.panel = AddonsPanel();
+      that.addonsList = MockAddonsList();
+      done();
+    });
+  });
+
+  suite('panel initialized', function() {
+    setup(function() {
+      this.panel.onInit(document.body);
+      assert.notOk(this.addonsList.enabled);
+      this.panel.onBeforeShow();
+    });
+    test('no filter should be set', function() {
+      assert(this.addonsList.setFilter.notCalled);
+      assert.isTrue(this.addonsList.enabled);
+    });
+  });
+
+  suite('panel initialized with filter', function() {
+    setup(function() {
+      this.panel.onInit(document.body);
+      this.panel.onBeforeShow(document.body, { manifestURL: 'test' });
+    });
+    test('filter should be set', function() {
+      assert(this.addonsList.setFilter.calledOnce);
+      assert.isTrue(this.addonsList.enabled);
+    });
+    test('filter should be unset', function() {
+      this.panel.onBeforeHide();
+      assert(this.addonsList.unsetFilter.calledOnce);
+      assert.isFalse(this.addonsList.enabled);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/apn_editor/apn_editor_session_test.js

@@ -0,0 +1,105 @@
+'use strict';
+
+suite('ApnEditorSession', function() {
+  var map = {
+    '*': {
+      'panels/apn_editor/apn_editor_const': 'MockApnEditorConst',
+      'modules/apn/apn_settings_manager': 'MockApnSettingsManager'
+    }
+  };
+
+  var modules = [
+    'panels/apn_editor/apn_editor_session',
+    'MockApnEditorConst',
+    'MockApnSettingsManager'
+  ];
+
+  suiteSetup(function(done) {
+    var requireCtx = testRequire([], map, function() {});
+
+    define('MockApnSettingsManager', function() {
+      return {
+        addApn: function(serviceId, apnSetting) {
+          return;
+        }
+      };
+    }.bind(this));
+
+    define('MockApnEditorConst', function() {
+      return {
+        APN_PROPERTIES: [
+          'apn', 'user', 'password', 'proxy', 'port',
+          'mmsc', 'mmsproxy', 'mmsport', 'authtype','types',
+          'protocol', 'roaming_protocol', 'mtu'
+        ],
+        VALUE_CONVERTERS: {
+          'TO_STRING': {
+            'types': function(types) {
+              if (types && Array.isArray(types) && types.length) {
+                return types.join(', ');
+              } else {
+                return 'default';
+              }
+            }
+          },
+          'TO_DATA': {
+            'types': function(string) {
+              return string.split(',').map((str) => str.trim());
+            }
+          }
+        }
+      };
+    });
+
+    requireCtx(modules,
+      function(ApnEditorSession, MockApnEditorConst, MockApnSettingsManager) {
+        this.ApnEditorSession = ApnEditorSession;
+        this.MockApnEditorConst = MockApnEditorConst;
+        this.MockApnSettingsManager = MockApnSettingsManager;
+        done();
+    }.bind(this));
+  });
+
+  suite('commit', function() {
+    setup(function() {
+      this.spyAddApn = this.sinon.spy(this.MockApnSettingsManager, 'addApn');
+      this.inputElements = {
+        apn: { value: 'TestApn' },
+        user: { value: 'Test Name' }
+      };
+      this.apnEditorSession = this.ApnEditorSession(
+        'id12345', 'new', this.inputElements);
+    });
+
+    test('a new APN with one APN Type', function() {
+      this.inputElements.types = { value: 'default' };
+      this.apnEditorSession.commit();
+
+      assert(this.spyAddApn.calledWith(
+        'id12345', 
+        { apn: 'TestApn', types: ['default'], user: 'Test Name' }
+      ), 'not calling with the correct arguments');
+    });
+
+    test('new APNs with three APN Types', function() {
+      this.inputElements.types = { value: 'default,mms,supl' };
+      this.apnEditorSession.commit();
+
+      assert(this.spyAddApn.callCount === 3);
+      assert(this.spyAddApn.getCall(0).calledWith(
+        'id12345', { apn: 'TestApn', types: ['default'], user: 'Test Name' }
+      ), '1st time not calling with the correct arguments');
+      assert(this.spyAddApn.getCall(1).calledWith(
+        'id12345', { apn: 'TestApn', types: ['mms'], user: 'Test Name' }
+      ), '2nd time not calling with the correct arguments');
+      assert(this.spyAddApn.getCall(2).calledWith(
+        'id12345', { apn: 'TestApn', types: ['supl'], user: 'Test Name' }
+      ), '3rd time not calling with the correct arguments');
+    });
+
+    teardown(function() {
+      this.spyAddApn.reset();
+    });
+
+  });
+});

gaia/apps/settings/test/unit/panels/apn_editor/apn_editor_test.js

@@ -0,0 +1,141 @@
+'use strict';
+
+suite('ApnEditor', function() {
+  var mockRootElement = {
+    querySelector: function(name) {
+      var obj = {
+        className: name
+      };
+      return obj;
+    }
+  };
+
+  var map = {
+    '*': {
+      'panels/apn_editor/apn_editor_session': 'MockApnEditorSession'
+    }
+  };
+  var modules = [
+    'panels/apn_editor/apn_editor',
+    'panels/apn_editor/apn_editor_const',
+    'MockApnEditorSession'
+  ];
+
+  suiteSetup(function(done) {
+    var requireCtx = testRequire([], map, function() {});
+
+    this.mockApnEditorSession = {};
+    define('MockApnEditorSession', function() {
+      return sinon.stub().returns(this.mockApnEditorSession);
+    }.bind(this));
+
+    requireCtx(modules,
+      function(ApnEditor, ApnEditorConst, MockApnEditorSession) {
+        this.ApnEditor = ApnEditor;
+        this.ApnEditorConst = ApnEditorConst;
+        this.MockApnEditorSession = MockApnEditorSession;
+        done();
+    }.bind(this));
+  });
+
+  setup(function() {
+    this.MockApnEditorSession.reset();
+    this.apnEditor = this.ApnEditor(mockRootElement);
+  });
+
+  suite('_fillInputElements', function() {
+    var mockInputElements = {};
+    var mockApn = {};
+
+    suiteSetup(function() {
+      mockApn = {};
+      this.ApnEditorConst.APN_PROPERTIES.forEach(function(name) {
+        mockApn[name] = name + '_value';
+      }, this);
+    });
+
+    setup(function() {
+      mockInputElements = {};
+      this.ApnEditorConst.APN_PROPERTIES.forEach(function(name) {
+        mockInputElements[name] = {};
+      }, this);
+
+      this.sinon.stub(this.apnEditor, '_convertValue', function(value) {
+        return value;
+      });
+    });
+
+    test('values of the input elements should be filled correctly', function() {
+      this.apnEditor._fillInputElements(mockInputElements, mockApn);
+      this.ApnEditorConst.APN_PROPERTIES.forEach(function(name) {
+        assert.equal(mockInputElements[name].value, mockApn[name]);
+      }, this);
+    });
+
+    test('should fill default values when necessary', function() {
+      this.apnEditor._fillInputElements(mockInputElements, {});
+      this.ApnEditorConst.APN_PROPERTIES.forEach(function(name) {
+        assert.equal(mockInputElements[name].value,
+          this.ApnEditorConst.APN_PROPERTY_DEFAULTS[name]);
+      }, this);
+    });
+  });
+
+  suite('createApn', function() {
+    var serviceId = 0;
+    var mockApnItem = {
+      apn: {}
+    };
+
+    setup(function() {
+      this.sinon.stub(this.apnEditor, '_fillInputElements');
+    });
+
+    test('the result should equal to the one returned from ApnEditorSession',
+      function() {
+        var session = this.apnEditor.createApn(serviceId, mockApnItem);
+        assert.equal(session, this.mockApnEditorSession);
+    });
+
+    test('should call to _fillInputElements', function() {
+      this.apnEditor.createApn(serviceId, mockApnItem);
+      sinon.assert.calledWith(this.apnEditor._fillInputElements,
+        this.apnEditor._inputElements, mockApnItem.apn);
+    });
+
+    test('should call to MockApnEditorSession', function() {
+      this.apnEditor.createApn(serviceId, mockApnItem);
+      sinon.assert.calledWith(this.MockApnEditorSession, serviceId, 'new',
+        this.apnEditor._inputElements, mockApnItem);
+    });
+  });
+
+  suite('editApn', function() {
+    var serviceId = 0;
+    var mockApnItem = {
+      apn: {}
+    };
+
+    setup(function() {
+      this.sinon.stub(this.apnEditor, '_fillInputElements');
+    });
+
+    test('the result should equal to the one returned from ApnEditorSession',
+      function() {
+        var session = this.apnEditor.createApn(serviceId, mockApnItem);
+        assert.equal(session, this.mockApnEditorSession);
+    });
+
+    test('should call to _fillInputElements', function() {
+      this.apnEditor.createApn(serviceId, mockApnItem);
+      sinon.assert.calledWith(this.apnEditor._fillInputElements,
+        this.apnEditor._inputElements, mockApnItem.apn);
+    });
+
+    test('should call to MockApnEditorSession', function() {
+      this.apnEditor.editApn(serviceId, mockApnItem);
+      sinon.assert.calledWith(this.MockApnEditorSession, serviceId, 'edit',
+        this.apnEditor._inputElements, mockApnItem);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/app_permissions/app_permissions_detail_test.js

@@ -0,0 +1,203 @@
+/* global MockMozApps, MockPermissionSettings */
+'use strict';
+suite('app permission detail > ', function() {
+  var mockConfirmDialog, realConfirmDialog;
+  var PermissionDetail;
+
+  var mock_elements = {
+    detailTitle: {
+      textContent: false
+    },
+    uninstallButton: {
+      disabled: false
+    },
+    developerInfos: {
+      hidden: false
+    },
+    developerHeader: {
+      hidden: false
+    },
+    developerLink: {
+      href: 'testDeveloperLink'
+    },
+    developerName: {
+      textContent: 'testDeveloperName'
+    },
+    developerUrl: {
+      textContent: 'testDeveloperLink'
+    },
+    list: {
+      appendChild: function(item) {
+        mock_elements.list.children.push(item);
+      },
+      children: [],
+      innerHTML: 'listHTML'
+    },
+    header: {
+      hidden: false
+    }
+  };
+
+  var mockSelectEvent = {
+    target: {
+      dataset: {
+        perm: 'testComposedPermissions'
+      },
+      fakeAttributes: {},
+      setAttribute: function(attr, value) {
+        this.fakeAttributes[attr] = value;
+      },
+      value: null
+    }
+  };
+
+  var mock_app = {
+    manifest: {
+      name: 'testAppName',
+      developer: {
+        name: 'testDeveloperName',
+        url: 'testDeveloperUrl'
+      }
+    },
+    removable: true,
+    manifestURL: 'testManifestURL',
+    origin: 'testOrigin'
+  };
+
+  var mock_permissionsTable = {
+    composedPermissions: ['testComposedPermissions'],
+    accessModes: ['read', 'write', 'create'],
+    plainPermissions: [
+      'testPlainPermissions'
+    ]
+  };
+
+  mockConfirmDialog = function(value) {
+    return value;
+  };
+
+  suiteSetup(function(done) {
+    var modules = [
+      'panels/app_permissions_detail/app_permissions_detail'
+    ];
+
+    var maps = {
+      'panels/app_permissions_detail/app_permissions_detail': {
+        'shared/manifest_helper': 'shared_mocks/mock_manifest_helper',
+        'modules/settings_service': 'unit/mock_settings_service',
+        'modules/navigator/mozApps': 'unit/mock_moz_apps',
+        'modules/navigator/mozPermissionSettings':
+          'shared_mocks/mock_permission_settings'
+      }
+    };
+    testRequire(modules, maps,
+      function(PermissionDetailModule) {
+        realConfirmDialog = window.confirm;
+        window.confirm = mockConfirmDialog;
+
+        PermissionDetail = PermissionDetailModule;
+
+        done();
+    });
+  });
+
+  suiteTeardown(function() {
+    window.confirm = realConfirmDialog;
+  });
+
+  suite('Start test appPermissionDetail module', function() {
+    var permissionDetail;
+    var mock_perm_not_composed = 'testNotComposedPermission';
+    setup(function() {
+      MockPermissionSettings.set('testComposedPermissions-read', 'prompt');
+      MockPermissionSettings.set('testPlainPermissions', 'allow');
+      permissionDetail = PermissionDetail();
+      permissionDetail.init(mock_elements, mock_permissionsTable);
+    });
+
+    teardown(function() {
+      MockPermissionSettings.mTeardown();
+    });
+
+    test('selectValueChanged', function() {
+      permissionDetail.showAppDetails(mock_app);
+      mockSelectEvent.target.value = 'prompt';
+      permissionDetail.selectValueChanged(mockSelectEvent);
+      assert.equal(MockPermissionSettings.get('testComposedPermissions-read'),
+       'prompt', 'should display prompt permission value from' +
+       'mozPermissionSettings if user has selected');
+
+      mockSelectEvent.target.dataset.perm = mock_perm_not_composed;
+      mockSelectEvent.target.value = 'deny';
+      permissionDetail.selectValueChanged(mockSelectEvent);
+      assert.equal(MockPermissionSettings.get(mock_perm_not_composed),
+       'deny', 'should be able to set not composed permission all to deny');
+    });
+
+    test('showAppDetails, test the content of detail dialog', function() {
+      permissionDetail.showAppDetails(mock_app);
+
+      var selectOption = mock_elements.list.children[0];
+      var target = selectOption.querySelector('[selected="true"]');
+      var selectItem = selectOption.querySelector('select');
+      assert.equal(target.value, 'allow');
+      assert.equal(selectItem.dataset.perm, 'testPlainPermissions');
+
+      selectOption = mock_elements.list.children[1];
+      target = selectOption.querySelector('[selected="true"]');
+      selectItem = selectOption.querySelector('select');
+      assert.equal(target.value, 'prompt');
+      assert.equal(selectItem.dataset.perm, 'testComposedPermissions');
+
+      assert.equal(permissionDetail._elements.detailTitle.textContent,
+        mock_app.manifest.name);
+      assert.equal(permissionDetail._elements.uninstallButton.disabled,
+        !mock_app.removable);
+      assert.equal(permissionDetail._elements.developerName.textContent,
+        mock_app.manifest.developer.name);
+      assert.equal(permissionDetail._elements.developerInfos.hidden,
+        false);
+      assert.equal(permissionDetail._elements.developerHeader.hidden,
+        false);
+      assert.equal(permissionDetail._elements.developerUrl.hidden,
+        false);
+      assert.equal(permissionDetail._elements.developerLink.href,
+        mock_app.manifest.developer.url);
+      assert.equal(permissionDetail._elements.developerUrl.textContent,
+        mock_app.manifest.developer.url);
+      assert.equal(permissionDetail._elements.header.hidden,
+        false);
+
+      mock_app.manifest.developer.url = null;
+      permissionDetail.showAppDetails(mock_app);
+      assert.equal(permissionDetail._elements.developerLink.href,
+        undefined);
+      assert.equal(permissionDetail._elements.developerUrl.hidden,
+        true);
+
+      delete mock_app.manifest.developer;
+      permissionDetail.showAppDetails(mock_app);
+      assert.equal(permissionDetail._elements.developerInfos.hidden,
+        true);
+      assert.equal(permissionDetail._elements.developerHeader.hidden,
+        true);
+    });
+
+    test('uninstall', function() {
+      MockMozApps.mSetApps([mock_app]);
+      permissionDetail.showAppDetails(mock_app);
+      permissionDetail.uninstall();
+      assert.equal(MockMozApps.mApps.length, 0,
+        'should have no memeber in mozAppList if we remove it.');
+    });
+
+    test('would go back to previous panel when uninstalled', function() {
+      permissionDetail = PermissionDetail();
+      this.sinon.stub(permissionDetail, 'back');
+      permissionDetail.init(mock_elements, mock_permissionsTable);
+
+      window.dispatchEvent(new CustomEvent('applicationuninstall'));
+      assert.isTrue(permissionDetail.back.called);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/app_permissions/app_permissions_list_test.js

@@ -0,0 +1,167 @@
+/* global MockPermissionSettings */
+
+'use strict';
+suite('app permission list > ', function() {
+  var permissionList;
+  var mockAppsCache;
+  var mockMozApps;
+
+  var modules = [
+    'unit/mock_apps_cache',
+    'unit/mock_moz_apps',
+    'panels/app_permissions_list/app_permissions_list'
+  ];
+
+  var maps = {
+    'panels/app_permissions_list/app_permissions_list': {
+      'shared/manifest_helper': 'shared_mocks/mock_manifest_helper',
+      'modules/settings_service': 'unit/mock_settings_service',
+      'shared/settings_listener': 'shared_mocks/mock_settings_listener',
+      'modules/navigator/mozApps': 'unit/mock_moz_apps',
+      'modules/apps_cache': 'unit/mock_apps_cache',
+      'modules/navigator/mozPermissionSettings':
+        'shared_mocks/mock_permission_settings'
+    }
+  };
+
+  var mock_listRoot;
+
+  var mock_app1 = {
+    manifest: {
+      name: 'testAppName1',
+      developer: {
+        name: 'testDeveloperName',
+        url: 'testDeveloperUrl'
+      },
+      icons: null
+    },
+    removable: true,
+    manifestURL: 'testManifestURL',
+    origin: 'testOrigin1'
+  };
+
+  var mock_app2 = {
+    manifest: {
+      // When we execute _sortApps, mock_app2 will be placed in front of
+      // mock_app1.
+      name: 'atestAppName2',
+      developer: {
+        name: 'testDeveloperName',
+        url: 'testDeveloperUrl'
+      },
+      type: 'certified',
+      icons: {
+        30: 'http://test30',
+        60: 'http://test60'
+      }
+    },
+    removable: true,
+    manifestURL: 'testManifestURL',
+    origin: 'testOrigin2'
+  };
+
+  var mock_permissionsTable = {
+    permissionsTable: ['testApp'],
+    composedPermissions: ['testComposedPermissions'],
+    accessModes: ['read', 'write', 'create'],
+    plainPermissions: ['testApp']
+  };
+
+  setup(function(done) {
+    // We have to make listRoot clean every round
+    mock_listRoot = {
+      children: [],
+      appendChild: function(item) {
+        this.children.push(item);
+      }
+    };
+
+    testRequire(modules, maps, function(MockAppsCache, MockMozApps,
+      PermissionListModule) {
+        mockAppsCache = MockAppsCache;
+        mockMozApps = MockMozApps;
+        permissionList = PermissionListModule();
+        done();
+    });
+  });
+
+  suite('Start test appPermissionList module', function() {
+    setup(function() {
+      this.sinon.stub(mockMozApps, 'getSelf', function() {
+        return Promise.resolve(mock_app2);
+      });
+
+      MockPermissionSettings.set('testComposedPermissions-read', true);
+      mockAppsCache._apps = [mock_app1, mock_app2];
+
+      permissionList.init(mock_listRoot);
+      permissionList.setPermissionsTable(mock_permissionsTable);
+      permissionList._permissionTableHaveProcessed = false;
+    });
+
+    test('the app list content when push mock_app1 to permission list',
+      function(done) {
+        permissionList.refresh().then(function() {
+          var list = permissionList._listRoot.children[0];
+          var deviceRatio = window.devicePixelRatio || 1;
+          var choosedIcon = deviceRatio * 30;
+
+          assert.equal(list.querySelector('li:nth-child(1) a')
+            .dataset.appIndex, 0, 'the appIndex of first app should be 0');
+
+          assert.equal(list.querySelector('li:nth-child(1) img').src,
+            mock_app2.manifest.icons[choosedIcon] + '/',
+            'should show the icon from app manifest if it has');
+
+          assert.equal(
+            list.querySelector('li:nth-child(2) a').dataset.appIndex, 1);
+
+          assert.include(list.querySelector('li:nth-child(2) img').src,
+            'test/style/images/default.png',
+            'should show default icon if it is not defined in its manifest');
+
+          assert.equal(permissionList._permissionTableHaveProcessed, true);
+        }, function() {
+          // This line should not be rejected
+          assert.isTrue(false);
+        }).then(done, done);
+    });
+  });
+
+  suite('_onApplicationInstall', function() {
+    setup(function() {
+      permissionList.init(mock_listRoot);
+      permissionList._apps = [];
+      permissionList._onApplicationInstall({
+        application: mock_app1
+      });
+    });
+
+    test('will render the images right', function() {
+      var list = permissionList._listRoot.children[0];
+      assert.include(list.querySelector('li:nth-child(1) img').src,
+        'test/style/images/default.png',
+        'should display info of mock_app1 after we install it');
+    });
+  });
+
+  suite('_onApplicationUninstall', function() {
+    setup(function() {
+      permissionList.init(mock_listRoot);
+      permissionList._apps = [mock_app1, mock_app2];
+      permissionList._onApplicationUninstall({
+        application: {
+          origin: mock_app2.origin
+        }
+      });
+    });
+
+    test('will render the images right', function() {
+      var list = permissionList._listRoot.children[0];
+      assert.equal(list.querySelector('li:nth-child(1) a').dataset.appIndex, 0);
+      assert.include(list.querySelector('li:nth-child(1) img').src,
+        'test/style/images/default.png',
+        'should display info of mock_app1 when we remove mock_app2');
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/app_storage/panel_test.js

@@ -0,0 +1,90 @@
+/* globals loadBodyHTML*/
+'use strict';
+
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('AppStoragePanel', function() {
+  var modules = ['panels/app_storage/panel'];
+  var map = {
+    '*': {
+      'modules/settings_panel': 'MockSettingsPanel',
+      'modules/app_storage': 'MockAppStorage',
+      'modules/storage_helper': 'MockStorageHelper'
+    }
+  };
+
+  setup(function(done) {
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+    var that = this;
+
+    loadBodyHTML('_application_storage.html');
+
+    this.MockStorageHelper = {
+      showFormatedSize: function(element, l10nId, size) {return size;}
+    };
+    this.sinon.spy(this.MockStorageHelper, 'showFormatedSize');
+
+    define('MockStorageHelper', function() {
+      return that.MockStorageHelper;
+    });
+
+    // Define MockAppStorage
+    this.MockAppStorage = {
+      updateInfo: function () {},
+      usedPercentage: 1,
+      totalSize: 1,
+      usedSize: 1,
+      freeSize: 1,
+      observe: function() {},
+      unobserve: function() {}
+    };
+    define('MockAppStorage', function() {
+      return that.MockAppStorage;
+    });
+
+    // Define MockSettingsPanel
+    define('MockSettingsPanel', function() {
+      return function(options) {
+        return {
+          init: options.onInit,
+          beforeShow: options.onBeforeShow,
+          beforeHide: options.onBeforeHide,
+          hide: options.onHide
+        };
+      };
+    });
+
+    requireCtx(modules, function(AppStoragePanel) {
+      that.panel = AppStoragePanel();
+      that.panel.init(document.body);
+      done();
+    });
+  });
+
+  test('observe appStorage when onBeforeShow', function() {
+    this.sinon.stub(this.MockAppStorage, 'observe');
+    this.panel.beforeShow();
+    assert.ok(this.MockAppStorage.observe.calledWith(
+      sinon.match('usedPercentage')));
+    assert.ok(this.MockAppStorage.observe.calledWith(
+      sinon.match('totalSize')));
+    assert.ok(this.MockAppStorage.observe.calledWith(
+      sinon.match('usedSize')));
+    assert.ok(this.MockAppStorage.observe.calledWith(
+      sinon.match('freeSize')));
+  });
+
+  test('unobserve appStorage when onHide', function() {
+    this.sinon.stub(this.MockAppStorage, 'unobserve');
+    this.panel.hide();
+    assert.ok(this.MockAppStorage.unobserve.calledWith(
+      sinon.match('usedPercentage')));
+    assert.ok(this.MockAppStorage.unobserve.calledWith(
+      sinon.match('totalSize')));
+    assert.ok(this.MockAppStorage.unobserve.calledWith(
+      sinon.match('usedSize')));
+    assert.ok(this.MockAppStorage.unobserve.calledWith(
+      sinon.match('freeSize')));
+  });
+});

gaia/apps/settings/test/unit/panels/browsing_privacy/browsing_privacy_test.js

@@ -0,0 +1,49 @@
+suite('Browsing Privacy >', function() {
+  'use strict';
+
+  var realNavigatorSettings, browsingPrivacy;
+
+  suiteSetup(function(done) {
+    var modules = [
+      'shared_mocks/mock_navigator_moz_settings',
+      'panels/browsing_privacy/browsing_privacy'
+    ];
+
+    testRequire(modules, {}, function(MockNavigatorSettings, BrowsingPrivacy) {
+      realNavigatorSettings = navigator.mozSettings;
+      navigator.mozSettings = MockNavigatorSettings;
+
+      browsingPrivacy = BrowsingPrivacy();
+
+      done();
+    });
+  });
+
+  suiteTeardown(function() {
+    navigator.mozSettings = realNavigatorSettings;
+    realNavigatorSettings = null;
+  });
+
+
+  suite('clear functions >', function() {
+    test('clear history function sets setting', function() {
+      browsingPrivacy.clearHistory();
+      assert.isTrue(
+        navigator.mozSettings.mSettings['clear.browser.history'],
+        'clear browser history setting should be set'
+      );
+    });
+
+    test('clear private data function sets setting', function() {
+      browsingPrivacy.clearPrivateData();
+      assert.isTrue(
+        navigator.mozSettings.mSettings['clear.browser.private-data'],
+        'clear browser private data setting should be set'
+      );
+    });
+
+    teardown(function() {
+      navigator.mozSettings.mTeardown();
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/browsing_privacy/panel_test.js

@@ -0,0 +1,81 @@
+/* global loadBodyHTML, sinon */
+'use strict';
+
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('Browsing Privacy >', function() {
+  var browsingPrivacyPanel;
+  var MockBrowsingPrivacy = {
+    clearPrivateData: sinon.spy(),
+    clearHistory: sinon.spy()
+  };
+
+  suiteSetup(function(done) {
+    var map = {
+      '*': {
+        'panels/browsing_privacy/browsing_privacy': 'MockBrowsingPrivacy',
+        'modules/dialog_service': 'MockDialogService'
+      }
+    };
+
+    var modules = [
+      'panels/browsing_privacy/panel',
+      'MockBrowsingPrivacy',
+      'MockDialogService'
+    ];
+
+    var requireCtx = testRequire([], map, function() {});
+    define('MockBrowsingPrivacy', function() {
+      return function() {
+        return MockBrowsingPrivacy;
+      };
+    });
+    define('MockDialogService', function() {
+      return {
+        confirm: function() {
+          return Promise.resolve({
+            type: 'submit'
+          });
+        }
+      };
+    });
+
+    loadBodyHTML('_browsing_privacy.html');
+
+    requireCtx(modules, function(BrowsingPrivacyPanel) {
+      browsingPrivacyPanel = BrowsingPrivacyPanel();
+      browsingPrivacyPanel.init(document.body);
+
+      done();
+    });
+  });
+
+  suite('confirmation dialogs >', function() {
+    test(
+      'clear history dialog sets setting after confirm',
+      makeClickButtonTest(
+        '.clear-history-button',
+        'clearHistory'
+      )
+    );
+
+    test(
+      'clear private data dialog sets setting after confirm',
+      makeClickButtonTest(
+        '.clear-private-data-button',
+        'clearPrivateData'
+      )
+    );
+  });
+
+  function makeClickButtonTest(buttonId, expectedFunction) {
+    return function() {
+      document.body.querySelector(buttonId).click();
+
+      setTimeout(() => {
+        assert.isTrue(MockBrowsingPrivacy[expectedFunction].called,
+        expectedFunction + ' should be called');
+      }, 0);
+    };
+  }
+});

gaia/apps/settings/test/unit/panels/call/call_forwarding_test.js

@@ -0,0 +1,170 @@
+'use strict';
+/* global MockNavigatorSettings */
+requireApp('settings/test/unit/mock_navigator_settings.js');
+
+suite('CallForwarding > ', function() {
+  setup(function(done) {
+    var modules = [
+      'panels/call/call_forwarding',
+      'panels/call/call_constant',
+      'panels/call/call_utils',
+      'panels/call/call_settings_task_scheduler'
+    ];
+
+    window.navigator.mozSettings = MockNavigatorSettings;
+
+    testRequire(modules, {},
+      (CallForwarding, CallConstant, CallUtils, CallSettingsTaskScheduler) => {
+        this.CallForwarding = CallForwarding(0);
+        this.CallConstant = CallConstant;
+        this.CallUtils = CallUtils;
+        this.CallSettingsTaskScheduler = CallSettingsTaskScheduler;
+        this.sinon.stub(this.CallForwarding, '_getConn', function() {
+          return {
+            getCallForwardingOption: function() {
+              return Promise.resolve();
+            },
+            setCallForwardingOption: function() {
+              return Promise.resolve();
+            }
+          };
+        });
+        done();
+    });
+  });
+
+  suite('_getOption()', function() {
+    test('if the reason is not defined in constnt, just reject',
+      function(done) {
+        this.CallForwarding._getOption(0, 'fakeOptionName').catch(() => {
+          assert.isTrue(true);
+        }).then(done, done);
+    });
+
+    test('if the reason is defined, just resolve !', function(done) {
+      this.CallForwarding._getOption(0, 'fakeOption').then(() => {
+        assert.isTrue(true);
+      }).then(done, done);
+    });
+  });
+
+  suite('setCallForwardingValues()', function() {
+    test('if there is no key, just reject', function(done) {
+      this.CallForwarding.setCallForwardingValues({
+        key: '',
+        number: '111',
+        enabled: true
+      }).catch(() => {
+        assert.equal(this.CallForwarding._state, 'normal');
+        assert.isTrue(true);
+      }).then(done, done);
+    });
+
+    test('if we already enabled related key, just reject', function(done) {
+      this.CallForwarding._cfReasonStates[0] = true;
+      this.CallForwarding.setCallForwardingValues({
+        key: 'unConditional',
+        number: '111',
+        enabled: true
+      }).catch(() => {
+        assert.equal(this.CallForwarding._state, 'normal');
+        assert.isTrue(true);
+      }).then(done, done);
+    });
+
+    test('if enabled, but number is invalid, just reject', function(done) {
+      this.sinon.spy(this.CallUtils, 'isPhoneNumberValid');
+      this.CallForwarding.setCallForwardingValues({
+        key: 'noReply',
+        number: 'wrong_number_format_^@!',
+        enabled: true
+      }).catch((error) => {
+        assert.isTrue(this.CallUtils.isPhoneNumberValid.returned(false));
+        assert.equal(error.name, 'callForwardingInvalidNumberError');
+        assert.equal(this.CallForwarding._state, 'normal');
+      }).then(done, done);
+    });
+
+    test('if enabled and everything is right, just resolve', function(done) {
+      this.CallForwarding.setCallForwardingValues({
+        key: 'noReply',
+        number: '123456',
+        enabled: true
+      }).then((result) => {
+        assert.equal(this.CallForwarding._state, 'normal');
+        assert.equal(result.key, 'noReply');
+        assert.equal(result.action,
+          this.CallConstant.CALL_FORWARD_ACTION.REGISTRATION);
+      }).then(done, done);
+    });
+  });
+
+  suite('refresh()', function() {
+    suite('if success', function() {
+      var fakeNumber = '12345678';
+      var makeMozSettingsResolve = true;
+
+      setup(function() {
+        this.sinon.stub(window.navigator.mozSettings, 'createLock', function() {
+          return {
+            set: function() {
+              if (makeMozSettingsResolve) {
+                return Promise.resolve();
+              } else {
+                return Promise.reject();
+              }
+            }
+          };
+        });
+
+        // we will make all cfOptions have this number to make test easier
+        this.sinon.stub(this.CallUtils, 'findActiveVoiceRule', function() {
+          return {
+            number: fakeNumber
+          };
+        });
+
+        this.sinon.stub(this.CallSettingsTaskScheduler, 'enqueue', function() {
+          return Promise.resolve([
+            [[], [], [], []]
+          ]);
+        });
+      });
+
+      test('and mozSettigns works well, states will be right', function(done) {
+        makeMozSettingsResolve = true;
+        this.CallForwarding.refresh().then(() => {
+          Object.keys(
+            this.CallConstant.CALL_FORWARD_REASON_MAPPING).forEach((key) => {
+              assert.equal(this.CallForwarding['_' + key + 'Number'],
+                fakeNumber);
+              assert.isTrue(this.CallForwarding['_' + key + 'Enabled']);
+          });
+          assert.equal(this.CallForwarding._state, 'normal');
+        }).then(done, done);
+      });
+
+      test('but mozSettings is broken, we will reject the request',
+        function(done) {
+          makeMozSettingsResolve = false;
+          this.CallForwarding.refresh().catch(() => {
+            assert.equal(this.CallForwarding._state, 'error');
+          }).then(done, done);
+      });
+    });
+
+    suite('if failed', function() {
+      setup(function() {
+        this.sinon.stub(this.CallSettingsTaskScheduler, 'enqueue', function() {
+          return Promise.reject();
+        });
+      });
+
+      test('we will change to error state', function(done) {
+        this.CallForwarding.refresh().then(() => {
+          assert.equal(this.CallForwarding._state, 'error');
+        }).then(done, done);
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/call_barring/call_barring_test.js

@@ -0,0 +1,375 @@
+/* global MockMobileconnection */
+'use strict';
+
+require('/shared/test/unit/mocks/mock_navigator_moz_mobile_connections.js');
+
+suite('Call Barring settings', function() {
+  var _mobileConnection,
+      _serviceClass;
+
+  var callBarring;
+
+  suiteSetup(function(done) {
+    var modules = [
+      'panels/call_barring/call_barring'
+    ];
+
+    var maps = {
+      'panels/call_barring/call_barring': {
+        'modules/settings_service': 'unit/mock_settings_service'
+      }
+    };
+
+    testRequire(modules, maps, function(CallBarring) {
+      callBarring = CallBarring;
+      done();
+    });
+  });
+
+  setup(function() {
+    _mobileConnection = MockMobileconnection();
+    _serviceClass = _mobileConnection.ICC_SERVICE_CLASS_VOICE;
+  });
+
+  suite('> GET data', function() {
+    var _cbServiceMapper = {
+      'li-cb-baoc': 0,
+      'li-cb-boic': 1,
+      'li-cb-boic-exhc': 2,
+      'li-cb-baic': 3,
+      'li-cb-baic-r': 4
+    };
+
+    var serviceOn = {
+      set onsuccess(cb) {
+        this.result = {
+          'enabled': true
+        };
+        cb.call(this);
+      }
+    };
+    var serviceOff = {
+      set onsuccess(cb) {
+        this.result = {
+          'enabled': false
+        };
+        cb.call(this);
+      }
+    };
+
+    test('> When ALL services are OFF', function(done) {
+      this.sinon.stub(_mobileConnection,'getCallBarringOption')
+        .returns(serviceOff); // OFF for all the cases
+
+      callBarring.getAll(_mobileConnection).then(function finished() {
+        assert.isFalse(callBarring.baoc,
+          'baoc should not be active');
+        assert.isTrue(callBarring.baoc_enabled,
+          'baoc should be enabled');
+
+        assert.isFalse(callBarring.boic,
+          'boic should not be active');
+        assert.isTrue(callBarring.boic_enabled,
+          'boic should be enabled');
+
+        assert.isFalse(callBarring.boicExhc,
+          'boicExhc should not be active');
+        assert.isTrue(callBarring.boicExhc_enabled,
+          'boicExhc should be enabled');
+
+        assert.isFalse(callBarring.baic,
+          'baic should not be active');
+        assert.isTrue(callBarring.baic_enabled,
+          'baic should be enabled');
+
+        assert.isFalse(callBarring.baicR,
+          'baicR should not be active');
+        assert.isTrue(callBarring.baicR_enabled,
+          'baicR should be enabled');
+
+        done();
+      });
+    });
+
+    test('> When BAOC is ON and the rest are OFF', function(done) {
+      var options = {
+        'program': _cbServiceMapper['li-cb-baoc'],
+        'serviceClass': _serviceClass
+      };
+
+      this.sinon.stub(_mobileConnection, 'getCallBarringOption')
+        .returns(serviceOff) // OFF for all the cases
+        .withArgs(options).returns(serviceOn); // except BAOC
+
+      callBarring.getAll(_mobileConnection).then(function finished() {
+        assert.isTrue(callBarring.baoc_enabled,
+          'baoc should be enabled');
+        assert.isTrue(callBarring.baoc,
+          'baoc should be active');
+
+        assert.isFalse(callBarring.boic_enabled,
+          'boic should be disabled');
+        assert.isFalse(callBarring.boic,
+          'boic should not be active');
+
+        assert.isFalse(callBarring.boicExhc_enabled,
+          'boicExhc should be disabled');
+        assert.isFalse(callBarring.boicExhc,
+          'boicExhc should not be active');
+
+        assert.isTrue(callBarring.baic_enabled,
+          'baic should be enabled');
+        assert.isFalse(callBarring.baic,
+          'baic should not be active');
+
+        assert.isTrue(callBarring.baicR_enabled,
+          'baicR should be enabled');
+        assert.isFalse(callBarring.baicR,
+          'baicR should not be active');
+
+        done();
+      });
+    });
+
+    test('> When BOIC is ON and the rest are OFF', function(done) {
+      var options = {
+        'program': _cbServiceMapper['li-cb-boic'],
+        'serviceClass': _serviceClass
+      };
+
+      this.sinon.stub(_mobileConnection,'getCallBarringOption')
+        .returns(serviceOff) // OFF for all the cases
+        .withArgs(options).returns(serviceOn); // except BOIC
+
+      callBarring.getAll(_mobileConnection).then(function finished() {
+        assert.isTrue(callBarring.baoc_enabled,
+          'baoc should be enabled');
+        assert.isFalse(callBarring.baoc,
+          'baoc should not be active');
+
+        assert.isTrue(callBarring.boic_enabled,
+          'boic should be enabled');
+        assert.isTrue(callBarring.boic,
+          'boic should be active');
+
+        assert.isTrue(callBarring.boicExhc_enabled,
+          'boicExhc should be enabled');
+        assert.isFalse(callBarring.boicExhc,
+          'boicExhc should not be active');
+
+        assert.isTrue(callBarring.baic_enabled,
+          'baic should be enabled');
+        assert.isFalse(callBarring.baic,
+          'baic should not be active');
+
+        assert.isTrue(callBarring.baicR_enabled,
+          'baicR should be enabled');
+        assert.isFalse(callBarring.baicR,
+          'baicR should not be active');
+
+        done();
+      });
+    });
+
+    test('> When BOIC-Ex-Hc is ON and the rest are OFF', function(done) {
+      var options = {
+        'program': _cbServiceMapper['li-cb-boic-exhc'],
+        'serviceClass': _serviceClass
+      };
+
+      this.sinon.stub(_mobileConnection, 'getCallBarringOption')
+        .returns(serviceOff) // OFF for all the cases
+        .withArgs(options).returns(serviceOn); // except BOIC-ExHc
+
+      callBarring.getAll(_mobileConnection).then(function finished() {
+        assert.isTrue(callBarring.baoc_enabled,
+          'baoc should be enabled');
+        assert.isFalse(callBarring.baoc,
+          'baoc should not be active');
+
+        assert.isTrue(callBarring.boic_enabled,
+          'boic should be enabled');
+        assert.isFalse(callBarring.boic,
+          'boic should not be active');
+
+        assert.isTrue(callBarring.boicExhc_enabled,
+          'boicExhc should be enabled');
+        assert.isTrue(callBarring.boicExhc,
+          'boicExhc should be active');
+
+        assert.isTrue(callBarring.baic_enabled,
+          'baic should be enabled');
+        assert.isFalse(callBarring.baic,
+          'baic should not be active');
+
+        assert.isTrue(callBarring.baicR_enabled,
+          'baicR should be enabled');
+        assert.isFalse(callBarring.baicR,
+          'baicR should not be active');
+
+        done();
+      });
+    });
+
+    test('> When BOIC is ON and BOIC-Ex-Hc are ON, and the rest are OFF',
+    function(done) {
+      var options1 = {
+        'program': _cbServiceMapper['li-cb-boic'],
+        'serviceClass': _serviceClass
+      };
+      var options2 = {
+        'program': _cbServiceMapper['li-cb-boic-exhc'],
+        'serviceClass': _serviceClass
+      };
+
+      this.sinon.stub(_mobileConnection, 'getCallBarringOption')
+        .returns(serviceOff) // OFF for all the cases
+        .withArgs(options1).returns(serviceOn) // except for BOIC
+        .withArgs(options2).returns(serviceOn); // and BOIC-ExHc
+
+      callBarring.getAll(_mobileConnection).then(function finished() {
+        assert.isTrue(callBarring.baoc_enabled,
+          'baoc should be enabled');
+        assert.isFalse(callBarring.baoc,
+          'baoc should not be active');
+
+        assert.isTrue(callBarring.boic_enabled,
+          'boic should be enabled');
+        assert.isTrue(callBarring.boic,
+          'boic should be active');
+
+        assert.isTrue(callBarring.boicExhc_enabled,
+          'boicExhc should be enabled');
+        assert.isTrue(callBarring.boicExhc,
+          'boicExhc should be active');
+
+        assert.isTrue(callBarring.baic_enabled,
+          'baic should be enabled');
+        assert.isFalse(callBarring.baic,
+          'baic should not be active');
+
+        assert.isTrue(callBarring.baicR_enabled,
+          'baicR should be enabled');
+        assert.isFalse(callBarring.baicR,
+          'baicR should not be active');
+
+        done();
+      });
+    });
+
+    test('> When BAIC is ON and the rest are OFF', function(done) {
+      var options = {
+        'program': _cbServiceMapper['li-cb-baic'],
+        'serviceClass': _serviceClass
+      };
+
+      this.sinon.stub(_mobileConnection, 'getCallBarringOption')
+        .returns(serviceOff) // OFF for all the cases
+        .withArgs(options).returns(serviceOn); // except BAIC
+
+      callBarring.getAll(_mobileConnection).then(function finished() {
+        assert.isTrue(callBarring.baoc_enabled,
+          'baoc should be enabled');
+        assert.isFalse(callBarring.baoc,
+          'baoc should not be active');
+
+        assert.isTrue(callBarring.boic_enabled,
+          'boic should be enabled');
+        assert.isFalse(callBarring.boic,
+          'boic should not be active');
+
+        assert.isTrue(callBarring.boicExhc_enabled,
+          'boicExhc should be enabled');
+        assert.isFalse(callBarring.boicExhc,
+          'boicExhc should not be active');
+
+        assert.isTrue(callBarring.baic_enabled,
+          'baic should be enabled');
+        assert.isTrue(callBarring.baic,
+          'baic should be active');
+
+        assert.isFalse(callBarring.baicR_enabled,
+          'baicR should be disabled');
+        assert.isFalse(callBarring.baicR,
+          'baicR should not be active');
+
+        done();
+      });
+    });
+
+    test('> When BAIC-R is ON and the rest are OFF', function(done) {
+      var options = {
+        'program': _cbServiceMapper['li-cb-baic-r'],
+        'serviceClass': _serviceClass
+      };
+
+      this.sinon.stub(_mobileConnection, 'getCallBarringOption')
+        .returns(serviceOff) // OFF for all the cases
+        .withArgs(options).returns(serviceOn); // except for BAIC-R
+
+      callBarring.getAll(_mobileConnection).then(function finished() {
+        assert.isTrue(callBarring.baoc_enabled,
+          'baoc should be enabled');
+        assert.isFalse(callBarring.baoc,
+          'baoc should not be active');
+
+        assert.isTrue(callBarring.boic_enabled,
+          'boic should be enabled');
+        assert.isFalse(callBarring.boic,
+          'boic should not be active');
+
+        assert.isTrue(callBarring.boicExhc_enabled,
+          'boicExhc should be enabled');
+        assert.isFalse(callBarring.boicExhc,
+          'boicExhc should not be active');
+
+        assert.isTrue(callBarring.baic_enabled,
+          'baic should be enabled');
+        assert.isFalse(callBarring.baic,
+          'baic should not be active');
+
+        assert.isTrue(callBarring.baicR_enabled,
+          'baicR should be enabled');
+        assert.isTrue(callBarring.baicR,
+          'baicR should be active');
+
+        done();
+      });
+    });
+
+    test('> When ALL services are ON', function(done) {
+
+      this.sinon.stub(_mobileConnection, 'getCallBarringOption')
+        .returns(serviceOn); // ON for all the cases
+
+      callBarring.getAll(_mobileConnection).then(function finished() {
+        assert.isTrue(callBarring.baoc_enabled,
+          'baoc should be enabled');
+        assert.isTrue(callBarring.baoc,
+          'baoc should be active');
+
+        assert.isFalse(callBarring.boic_enabled,
+          'boic should be disabled');
+        assert.isTrue(callBarring.boic,
+          'boic should be active');
+
+        assert.isFalse(callBarring.boicExhc_enabled,
+          'boicExhc should be disabled');
+        assert.isTrue(callBarring.boicExhc,
+          'boicExhc should be active');
+
+        assert.isTrue(callBarring.baic_enabled,
+          'baic should be enabled');
+        assert.isTrue(callBarring.baic,
+          'baic should be active');
+
+        assert.isFalse(callBarring.baicR_enabled,
+          'baicR should be disabled');
+        assert.isTrue(callBarring.baicR,
+          'baicR should be active');
+
+        done();
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/call_barring/panel_test.js

@@ -0,0 +1,546 @@
+/* global loadBodyHTML, MockL10n, MockNavigatorMozMobileConnections */
+'use strict';
+
+require('/shared/js/component_utils.js');
+require('/shared/elements/gaia_switch/script.js');
+require('/shared/test/unit/mocks/mock_l20n.js');
+require('/shared/test/unit/load_body_html_helper.js');
+require('/shared/test/unit/mocks/mock_navigator_moz_mobile_connections.js');
+
+suite('Call Barring Panel >', function() {
+  var modules = [
+    'panels/call_barring/panel'
+  ];
+  var map = {
+    '*': {
+      'modules/settings_panel': 'MockSettingsPanel',
+      'panels/call_barring/call_barring': 'MockCallBarring',
+      'panels/call_barring/passcode_dialog': 'MockPasscode',
+      'shared/toaster': 'MockToaster'
+    }
+  };
+
+  var realL10n,
+      realDsdsSettings,
+      realMozMobileConnections;
+
+  var _mobileConnection,
+      _serviceClass;
+
+  var baocElement,
+      boicElement,
+      boicExhcElement,
+      baicElement,
+      baicRElement;
+
+  suiteSetup(function() {
+    realDsdsSettings = window.DsdsSettings;
+    window.DsdsSettings = {
+      getIccCardIndexForCallSettings: function() {
+        return 0;
+      }
+    };
+
+    realL10n = document.l10n;
+    document.l10n = MockL10n;
+
+    realMozMobileConnections = navigator.mozMobileConnections;
+    navigator.mozMobileConnections = MockNavigatorMozMobileConnections;
+
+    _mobileConnection = MockNavigatorMozMobileConnections[0];
+    _serviceClass = _mobileConnection.ICC_SERVICE_CLASS_VOICE;
+  });
+
+  suiteTeardown(function() {
+    window.DsdsSettings = realDsdsSettings;
+    document.l10n = realL10n;
+    navigator.mozMobileConnections = realMozMobileConnections;
+  });
+
+  function resetHTML() {
+    document.body.innerHTML = '';
+    loadBodyHTML('_call_barring.html');
+
+    baocElement = document.getElementById('li-cb-baoc');
+    boicElement = document.getElementById('li-cb-boic');
+    boicExhcElement = document.getElementById('li-cb-boicExhc');
+    baicElement = document.getElementById('li-cb-baic');
+    baicRElement = document.getElementById('li-cb-baicR');
+  }
+
+  function isItemDisabled(element) {
+    // getAttribute returns a 'string', asserts errors if not a boolean
+    return element.getAttribute('aria-disabled') === 'true';
+  }
+  function isItemChecked(element) {
+    return element.querySelector('gaia-switch').checked || false;
+  }
+
+  setup(function(done) {
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+    var that = this;
+
+    // Define MockSettingsPanel
+    define('MockSettingsPanel', function() {
+      return function(options) {
+        return {
+          init: options.onInit,
+          beforeShow: options.onBeforeShow,
+          show: options.onShow,
+          beforeHide: options.onBeforeHide
+        };
+      };
+    });
+
+    // Define MockCallBarring
+    this.mockCallBarring = {
+      getAll: function(api) {},
+      set: function(api, setting, passcode) {
+        return new Promise(function(res, rej) {
+          res();
+        });
+      },
+      observe: function() {},
+      unobserve: function() {}
+    };
+    define('MockCallBarring', function() {
+      return that.mockCallBarring;
+    });
+
+    // Define MockPasscode
+    this.mockPasscode = {
+      init: function() {},
+      show: function() {}
+    };
+    define('MockPasscode', function() {
+      return function() {
+        return that.mockPasscode;
+      };
+    });
+
+    // Define MockToaster
+    this.mockToaster = {
+      showToast: function() {}
+    };
+    define('MockToaster', function() {
+      return that.mockToaster;
+    });
+
+    requireCtx(modules, function(CallBarringPanel) {
+      that.panel = CallBarringPanel();
+      done();
+    });
+
+    resetHTML();
+  });
+
+  test('listen to \'panelready\' before showing >', function() {
+    this.sinon.stub(window, 'addEventListener');
+    this.panel.init(document.body);
+    this.panel.beforeShow(document.body);
+    assert.isTrue(window.addEventListener.calledWith('panelready'));
+  });
+
+  test('reset DOM values before showing >', function() {
+    var targets = [
+        baocElement,
+        boicElement,
+        boicExhcElement,
+        baicElement,
+        baicRElement
+      ];
+    // activate all before testing
+    targets.forEach(function(element) {
+      element.querySelector('gaia-switch').checked = true;
+    });
+
+    this.panel.init(document.body);
+    this.panel.beforeShow(document.body);
+
+    targets.forEach(function(element) {
+      var input = element.querySelector('gaia-switch');
+      assert.isFalse(input.checked);
+    });
+  });
+
+  test('observe settings status before showing >', function() {
+    this.sinon.stub(this.mockCallBarring, 'observe');
+    this.panel.init(document.body);
+    this.panel.beforeShow(document.body);
+    assert.isTrue(this.mockCallBarring.observe.calledWith('baoc'));
+    assert.isTrue(this.mockCallBarring.observe.calledWith('boic'));
+    assert.isTrue(this.mockCallBarring.observe.calledWith('boicExhc'));
+    assert.isTrue(this.mockCallBarring.observe.calledWith('baic'));
+    assert.isTrue(this.mockCallBarring.observe.calledWith('baicR'));
+  });
+
+  test('observe settings availability before showing >', function() {
+    this.sinon.stub(this.mockCallBarring, 'observe');
+    this.panel.init(document.body);
+    this.panel.beforeShow(document.body);
+    assert.isTrue(this.mockCallBarring.observe.calledWith('baoc_enabled'));
+    assert.isTrue(this.mockCallBarring.observe.calledWith('boic_enabled'));
+    assert.isTrue(this.mockCallBarring.observe.calledWith('boicExhc_enabled'));
+    assert.isTrue(this.mockCallBarring.observe.calledWith('baic_enabled'));
+    assert.isTrue(this.mockCallBarring.observe.calledWith('baicR_enabled'));
+  });
+
+  test('observe updating status before showing >', function() {
+    this.sinon.stub(this.mockCallBarring, 'observe');
+    this.panel.init(document.body);
+    this.panel.beforeShow(document.body);
+    assert.isTrue(this.mockCallBarring.observe.calledWith('updating'));
+  });
+
+  test('stop listening to \'panelready\' before hiding >', function() {
+    this.sinon.stub(window, 'removeEventListener');
+    this.panel.init(document.body);
+    this.panel.beforeHide();
+    assert.isTrue(window.removeEventListener.calledWith('panelready'));
+  });
+
+  test('stop observing settings status before hiding >', function() {
+    this.sinon.stub(this.mockCallBarring, 'unobserve');
+    this.panel.init(document.body);
+    this.panel.beforeHide();
+    assert.isTrue(this.mockCallBarring.unobserve.calledWith('baoc'));
+    assert.isTrue(this.mockCallBarring.unobserve.calledWith('boic'));
+    assert.isTrue(this.mockCallBarring.unobserve.calledWith('boicExhc'));
+    assert.isTrue(this.mockCallBarring.unobserve.calledWith('baic'));
+    assert.isTrue(this.mockCallBarring.unobserve.calledWith('baicR'));
+  });
+
+  test('stop observing settings availability before hiding >', function() {
+    this.sinon.stub(this.mockCallBarring, 'unobserve');
+    this.panel.init(document.body);
+    this.panel.beforeHide();
+    assert.isTrue(this.mockCallBarring.unobserve.calledWith('baoc_enabled'));
+    assert.isTrue(this.mockCallBarring.unobserve.calledWith('boic_enabled'));
+    assert.isTrue(this.mockCallBarring.unobserve.calledWith(
+      'boicExhc_enabled'));
+    assert.isTrue(this.mockCallBarring.unobserve.calledWith('baic_enabled'));
+    assert.isTrue(this.mockCallBarring.unobserve.calledWith('baicR_enabled'));
+  });
+
+  test('stop observing update status before hiding >', function() {
+    this.sinon.stub(this.mockCallBarring, 'unobserve');
+    this.panel.init(document.body);
+    this.panel.beforeHide();
+    assert.isTrue(this.mockCallBarring.unobserve.calledWith('updating'));
+  });
+
+  test('get data when showing >', function() {
+    this.sinon.stub(this.mockCallBarring, 'getAll');
+    this.panel.init(document.body);
+    this.panel.beforeShow();
+    this.panel.show();
+    assert.isTrue(this.mockCallBarring.getAll.calledWith(_mobileConnection));
+  });
+
+  suite('Click on item, cancel password >', function() {
+    setup(function() {
+      resetHTML();
+      this.panel.init(document.body);
+
+      this.sinon.stub(this.mockPasscode, 'show', function() {
+        return Promise.reject();
+      });
+      this.sinon.spy(this.mockCallBarring, 'set');
+    });
+
+    teardown(function() {
+      document.body.innerHTML = '';
+    });
+
+    test('click on each item > ', function() {
+      var targets = [
+        baocElement,
+        boicElement,
+        boicExhcElement,
+        baicElement,
+        baicRElement
+      ];
+
+      targets.forEach(function(element) {
+        var input = element.querySelector('gaia-switch');
+        input.click();
+        assert.isFalse(input.checked, 'state doesn\'t change on click');
+        assert.isTrue(this.mockPasscode.show.called, 'show passcode screen');
+        setTimeout(function() {
+          assert.isFalse(this.mockCallBarring.set.called,
+            'doesn\'t set a new value');
+          assert.isFalse(input.checked, 'state remains the same');
+        }.bind(this));
+      }.bind(this));
+    });
+  });
+
+  suite('Click on item, insert wrong password >', function() {
+    setup(function() {
+      resetHTML();
+      this.panel.init(document.body);
+
+      this.sinon.stub(this.mockPasscode, 'show', function() {
+        return Promise.resolve('0000');
+      });
+      this.sinon.stub(this.mockCallBarring, 'set', function() {
+        return Promise.reject({
+          'name': 'wrong_password',
+          'message': ''
+        });
+      });
+      this.sinon.stub(this.mockToaster, 'showToast');
+    });
+
+    teardown(function() {
+      document.body.innerHTML = '';
+    });
+
+    test('click on each item > ', function() {
+      var targets = [
+        baocElement,
+        boicElement,
+        boicExhcElement,
+        baicElement,
+        baicRElement
+      ];
+
+      var toastContent = {
+        messageL10nId: 'callBarring-update-item-error',
+        messageL10nArgs: {'error': 'wrong_password'},
+        latency: 2000,
+        useTransition: true
+      };
+
+      targets.forEach(function(element) {
+        var input = element.querySelector('gaia-switch');
+        input.click();
+        assert.isFalse(input.checked, 'state doesn\'t change on click');
+        assert.isTrue(this.mockPasscode.show.called, 'show passcode screen');
+        setTimeout(function() {
+          assert.isTrue(this.mockCallBarring.set.called,
+            'try to set a new value');
+          assert.isTrue(this.mockToaster.showToast.calledWith(toastContent),
+            'should show error');
+          assert.isFalse(input.checked, 'state remains the same');
+        }.bind(this));
+      }.bind(this));
+    });
+  });
+
+  suite('Click on item, insert wrong password and got GenericFailure >',
+    function() {
+    setup(function() {
+      resetHTML();
+      this.panel.init(document.body);
+
+      this.sinon.stub(this.mockPasscode, 'show', function() {
+        return Promise.resolve('0000');
+      });
+      this.sinon.stub(this.mockCallBarring, 'set', function() {
+        return Promise.reject({
+          'name': 'GenericFailure',
+          'message': ''
+        });
+      });
+      this.sinon.stub(this.mockToaster, 'showToast');
+    });
+
+    teardown(function() {
+      document.body.innerHTML = '';
+    });
+
+    test('click on each item > ', function() {
+      var targets = [
+        baocElement,
+        boicElement,
+        boicExhcElement,
+        baicElement,
+        baicRElement
+      ];
+
+      var toastContent = {
+        messageL10nId: 'callBarring-update-generic-error',
+        latency: 2000,
+        useTransition: true
+      };
+
+      targets.forEach(function(element) {
+        var input = element.querySelector('gaia-switch');
+        input.click();
+        assert.isFalse(input.checked, 'state doesn\'t change on click');
+        assert.isTrue(this.mockPasscode.show.called, 'show passcode screen');
+        setTimeout(function() {
+          assert.isTrue(this.mockCallBarring.set.called,
+            'try to set a new value');
+          assert.isTrue(this.mockToaster.showToast.calledWith(toastContent),
+            'should show error');
+          assert.isFalse(input.checked, 'state remains the same');
+        }.bind(this));
+      }.bind(this));
+    });
+  });
+
+  suite('Click on item, insert correct password >', function() {
+    setup(function() {
+      resetHTML();
+      this.panel.init(document.body);
+
+      this.sinon.stub(this.mockPasscode, 'show', function() {
+        return Promise.resolve('0000');
+      });
+      this.sinon.stub(this.mockCallBarring, 'set', function() {
+        return Promise.resolve();
+      });
+
+      this.sinon.stub(this.mockToaster, 'showToast');
+    });
+
+    teardown(function() {
+      document.body.innerHTML = '';
+    });
+
+    test('click on each item > ', function() {
+      var targets = [
+        baocElement,
+        boicElement,
+        boicExhcElement,
+        baicElement,
+        baicRElement
+      ];
+
+      targets.forEach(function(element) {
+        var input = element.querySelector('gaia-switch');
+        input.click();
+        assert.isFalse(input.checked, 'state doesn\'t change on click');
+        assert.isTrue(this.mockPasscode.show.called, 'show passcode screen');
+        setTimeout(function() {
+          assert.isTrue(this.mockCallBarring.set.called,
+            'try to set a new value');
+          assert.isFalse(this.mockToaster.showToast.called,
+            'shouldn\'t show any error');
+        }.bind(this));
+      }.bind(this));
+    });
+  });
+
+  suite('Update UI when data changes >', function() {
+    setup(function() {
+      resetHTML();
+
+      this.sinon.stub(this.mockCallBarring, 'observe',
+        function observe(data, callback) {
+          Object.defineProperty(this.mockCallBarring, data, {
+            set: function(newVal) {
+              callback(newVal);
+            }
+          });
+      }.bind(this));
+
+      this.panel.init(document.body);
+    });
+
+    teardown(function() {
+      document.body.innerHTML = '';
+    });
+
+    test('activating services >', function() {
+      var targets = [
+        baocElement,
+        boicElement,
+        boicExhcElement,
+        baicElement,
+        baicRElement
+      ];
+
+      this.panel.beforeShow(document.body);
+
+      this.mockCallBarring.baoc = true;
+      this.mockCallBarring.boic = true;
+      this.mockCallBarring.boicExhc = true;
+      this.mockCallBarring.baic = true;
+      this.mockCallBarring.baicR = true;
+
+      targets.forEach(function(element) {
+        assert.isTrue(isItemChecked(element));
+      });
+    });
+
+    test('deactivating services >', function() {
+      var targets = [
+        baocElement,
+        boicElement,
+        boicExhcElement,
+        baicElement,
+        baicRElement
+      ];
+
+      targets.forEach(function(element) {
+        element.querySelector('gaia-switch').checked = true;
+      });
+      this.mockCallBarring.baoc = false;
+      this.mockCallBarring.boic = false;
+      this.mockCallBarring.boicExhc = false;
+      this.mockCallBarring.baic = false;
+      this.mockCallBarring.baicR = false;
+
+      this.panel.beforeShow(document.body);
+      targets.forEach(function(element) {
+        assert.isFalse(isItemChecked(element));
+      });
+    });
+
+    test('enabling DOM elements >', function() {
+      var targets = [
+        baocElement,
+        boicElement,
+        boicExhcElement,
+        baicElement,
+        baicRElement
+      ];
+
+      targets.forEach(function(element) {
+        element.setAttribute('aria-disabled', 'true');
+      });
+
+      this.panel.beforeShow(document.body);
+
+      this.mockCallBarring.baoc_enabled = true;
+      this.mockCallBarring.boic_enabled = true;
+      this.mockCallBarring.boicExhc_enabled = true;
+      this.mockCallBarring.baic_enabled = true;
+      this.mockCallBarring.baicR_enabled = true;
+
+      targets.forEach(function(element) {
+        assert.isFalse(isItemDisabled(element));
+      });
+    });
+
+    test('disabling DOM elements >', function() {
+      var targets = [
+        baocElement,
+        boicElement,
+        boicExhcElement,
+        baicElement,
+        baicRElement
+      ];
+
+      targets.forEach(function(element) {
+        element.setAttribute('aria-disabled', 'false');
+      });
+
+      this.panel.beforeShow(document.body);
+
+      this.mockCallBarring.baoc_enabled = false;
+      this.mockCallBarring.boic_enabled = false;
+      this.mockCallBarring.boicExhc_enabled = false;
+      this.mockCallBarring.baic_enabled = false;
+      this.mockCallBarring.baicR_enabled = false;
+
+      targets.forEach(function(element) {
+        assert.isTrue(isItemDisabled(element));
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/call_fdn_list/panel_test.js

@@ -0,0 +1,199 @@
+require('/shared/js/component_utils.js');
+require('/shared/elements/gaia_menu/script.js');
+
+suite('CallFdnList Panel > ', function() {
+  'use strict';
+
+  var callFdnListPanel;
+  var mockFdnContext;
+  var mockDialogService;
+  var mockDsdsSettings;
+  var realL10n;
+
+  var modules = [
+    'shared_mocks/mock_l20n',
+    'modules/fdn_context',
+    'modules/dialog_service',
+    'modules/settings_panel',
+    'dsds_settings',
+    'panels/call_fdn_list/panel'
+  ];
+
+  var map = {
+    '*': {
+      'modules/fdn_context': 'MockFdnContext',
+      'modules/dialog_service': 'MockDialogService',
+      'modules/settings_panel': 'MockSettingsPanel',
+      'dsds_settings': 'MockDsdsSettings'
+    }
+  };
+
+  setup(function(done) {
+    define('MockDsdsSettings', function() {
+      return  {
+        getIccCardIndexForCallSettings: function() {
+          return 0;
+        }
+      };
+    });
+
+    // Define MockSettingsPanel
+    define('MockSettingsPanel', function() {
+      return function(options) {
+        var obj = {
+          init: options.onInit,
+          beforeShow: options.onBeforeShow,
+          beforeHide: options.onBeforeHide,
+          hide: options.onHide,
+        };
+        Object.keys(options).forEach(function(key) {
+          if (key.match(/^_(.*?)/)) {
+            obj[key] = options[key];
+          }
+        });
+        return obj;
+      };
+    });
+
+    define('MockDialogService', function() {
+      return {
+        show: function() {
+          return Promise.resolve({
+            type: 'submit'
+          });
+        }
+      };
+    });
+
+    define('MockFdnContext', function() {
+      return {
+        createAction: function() {},
+        getContacts: function() {}
+      };
+    });
+
+    var requireCtx = testRequire([], map, function() {});
+    requireCtx(modules, function(MockL10n, MockFdnContext, MockDialogService,
+      MockSettingsPanel, MockDsdsSettings, CallFdnListPanel) {
+        realL10n = document.l10n;
+        document.l10n = MockL10n;
+        mockFdnContext = MockFdnContext;
+        mockDialogService = MockDialogService;
+        mockDsdsSettings = MockDsdsSettings;
+        callFdnListPanel = CallFdnListPanel();
+
+        var panel = createElement('div');
+        panel.appendChild(createElement('button', 'fdnContact'));
+        panel.appendChild(createElement('gaia-menu', 'call-fdnList-action'));
+        panel.appendChild(createElement('div', 'fdnAction-name'));
+        panel.appendChild(createElement('div', 'fdnAction-number'));
+        panel.appendChild(createElement('div', 'fdnAction-number'));
+        panel.appendChild(createElement('button', 'fdnAction-call'));
+        panel.appendChild(createElement('button', 'fdnAction-edit'));
+        panel.appendChild(createElement('button', 'fdnAction-delete'));
+        panel.appendChild(createElement('ul', 'fdn-contactsContainer'));
+
+        callFdnListPanel.init(panel);
+        done();
+    });
+  });
+
+  teardown(function() {
+    document.l10n = realL10n;
+  });
+
+  suite('_renderAuthorizedNumbers', function() {
+    var fakeContacts = [{}, {}];
+    setup(function() {
+      this.sinon.stub(mockFdnContext, 'getContacts', function() {
+        return Promise.resolve(fakeContacts);
+      });
+      this.sinon.stub(callFdnListPanel, '_renderFdnContact', function() {
+        return document.createElement('li');
+      });
+    });
+
+    test('we will do related works', function(done) {
+      callFdnListPanel._renderAuthorizedNumbers().then(function() {
+        assert.isTrue(callFdnListPanel._renderFdnContact.calledTwice);
+        assert.equal(fakeContacts.length,
+          callFdnListPanel._elements.contactsContainer.children.length);
+      }).then(done, done);
+    });
+  });
+
+  suite('_showActionMenu', function() {
+    var fakeContact = {
+      name: 'fakeName',
+      number: 'fakeNumber'
+    };
+
+    setup(function() {
+      callFdnListPanel._showActionMenu(fakeContact);
+    });
+
+    test('we will show the menu and update information on it', function() {
+      assert.equal(callFdnListPanel._currentContact, fakeContact);
+      assert.equal(callFdnListPanel._elements.fdnActionMenuName.textContent,
+        fakeContact.name);
+      assert.equal(callFdnListPanel._elements.fdnActionMenuNumber.textContent,
+        fakeContact.number);
+      assert.isFalse(callFdnListPanel._elements.fdnActionMenu.hidden);
+    });
+  });
+
+  suite('_hideActionMenu', function() {
+    setup(function() {
+      callFdnListPanel._hideActionMenu();
+    });
+
+    test('the menu will be hidden', function() {
+      assert.isTrue(callFdnListPanel._elements.fdnActionMenu.hidden);
+    });
+  });
+
+  suite('_renderFdnContact', function() {
+    var fakeContact = {
+      name: 'fakeContact',
+      number: '123456'
+    };
+
+    setup(function() {
+      this.sinon.stub(callFdnListPanel, '_showActionMenu');
+    });
+
+    test('we will show right info on the contact item', function() {
+      var contactItem = callFdnListPanel._renderFdnContact(fakeContact);
+      assert.equal(contactItem.querySelector('span').textContent,
+        fakeContact.name);
+      assert.equal(contactItem.querySelector('small').textContent,
+        fakeContact.number);
+    });
+
+    test('when click on the item, show action menu', function() {
+      var contactItem = callFdnListPanel._renderFdnContact(fakeContact);
+      contactItem.click();
+      assert.isTrue(callFdnListPanel._showActionMenu.called);
+    });
+  });
+
+  suite('_updateContact', function() {
+    setup(function() {
+      this.sinon.stub(callFdnListPanel, '_renderAuthorizedNumbers');
+    });
+
+    test('we will _renderAuthorizedNumbers ' +
+      'after pin2 is entered correctly', function(done) {
+        callFdnListPanel._updateContact().then(function() {
+          assert.isTrue(callFdnListPanel._renderAuthorizedNumbers.called);
+        }).then(done, done);
+    });
+  });
+
+  function createElement(type, className) {
+    var element = document.createElement(type);
+    className = className || '';
+    element.className = className;
+    return element;
+  }
+});

gaia/apps/settings/test/unit/panels/call_fdn_settings/panel_test.js

@@ -0,0 +1,156 @@
+/* globals loadBodyHTML */
+
+require('/shared/js/component_utils.js');
+require('/shared/elements/gaia_switch/script.js');
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('CallFdnSettings > ', function() {
+  'use strict';
+
+  var callFdnSettingsPanel;
+  var mockDialogService;
+  var mockIccObject;
+  var realMozMobileConnections;
+  var realMozIccManager;
+
+  var modules = [
+    'modules/dialog_service',
+    'panels/call_fdn_settings/panel'
+  ];
+
+  var map = {
+    '*': {
+      'modules/settings_panel': 'MockSettingsPanel',
+      'modules/dialog_service': 'MockDialogService'
+    }
+  };
+
+  suiteSetup(function() {
+    realMozIccManager = window.navigator.mozIccManager;
+    realMozMobileConnections = window.navigator.mozMobileConnections;
+  });
+
+  suiteTeardown(function() {
+    window.navigator.mozIccManager = realMozIccManager;
+    window.navigator.mozMobileConnections = realMozMobileConnections;
+  });
+
+  setup(function(done) {
+    loadBodyHTML('_call_fdn_settings.html');
+
+    mockIccObject = {
+      _fdnEnabled: true,
+      iccId: 1234,
+      oncardstatechange: function() {},
+      getCardLock: function() {
+        return Promise.resolve({
+          enabled: this._fdnEnabled
+        });
+      }
+    };
+    navigator.mozMobileConnections = [mockIccObject];
+
+    navigator.mozIccManager = {
+      getIccById: function() {
+        return mockIccObject;
+      }
+    };
+
+    define('MockSettingsPanel', function() {
+      return function(options) {
+        return options;
+      };
+    });
+
+    define('MockDialogService', function() {
+      return {
+        show: function() {
+          return Promise.resolve();
+        }
+      };
+    });
+
+    testRequire(modules, map, function(MockDialogService,
+      CallFdnSettingsPanel) {
+        mockDialogService = MockDialogService;
+        callFdnSettingsPanel = CallFdnSettingsPanel();
+        callFdnSettingsPanel.onInit(document.body, {});
+        done();
+    });
+  });
+
+  teardown(function() {
+    document.body.innerHTML = '';
+  });
+
+  suite('onBeforeShow >', function() {
+    setup(function() {
+      this.sinon.stub(callFdnSettingsPanel, '_updateFdnStatus');
+      callFdnSettingsPanel.onBeforeShow(document.body, {});
+    });
+
+    test('we will updateFdnStatus each time', function() {
+      assert.ok(callFdnSettingsPanel._updateFdnStatus.called);
+    });
+  });
+
+  suite('_showToggleFdnDialog >', function() {
+    setup(function() {
+      this.sinon.spy(mockDialogService, 'show');
+      this.sinon.stub(callFdnSettingsPanel, '_updateFdnStatus');
+    });
+
+    test('if checked then enableFdn', function(done) {
+      callFdnSettingsPanel._elements.simFdnCheckBox.checked = true;
+      callFdnSettingsPanel._showToggleFdnDialog().then(() => {
+        var dialogOptions = mockDialogService.show.getCall(0).args[1];
+        assert.equal(dialogOptions.method, 'enable_fdn');
+        assert.ok(callFdnSettingsPanel._updateFdnStatus.called);
+      }).then(done, done);
+    });
+
+    test('if unchecked then disableFdn', function(done) {
+      callFdnSettingsPanel._elements.simFdnCheckBox.checked = false;
+      callFdnSettingsPanel._showToggleFdnDialog().then(() => {
+        var dialogOptions = mockDialogService.show.getCall(0).args[1];
+        assert.equal(dialogOptions.method, 'disable_fdn');
+        assert.ok(callFdnSettingsPanel._updateFdnStatus.called);
+      }).then(done, done);
+    });
+
+    test('if cardState is puk2required then unlockPuk2', function(done) {
+      mockIccObject.cardState = 'puk2Required';
+      callFdnSettingsPanel._showToggleFdnDialog().then(() => {
+        var dialogOptions = mockDialogService.show.getCall(0).args[1];
+        assert.equal(dialogOptions.method, 'unlock_puk2');
+        assert.ok(callFdnSettingsPanel._updateFdnStatus.called);
+      }).then(done, done);
+    });
+  });
+
+  suite('_updateFdnStatus >', function() {
+    test('if fdn is enabled, change UI', function(done) {
+      mockIccObject._fdnEnabled = true;
+      doAssertion(true, done);
+    });
+
+    test('if fdn is disabled, change UI', function(done) {
+      mockIccObject._fdnEnabled = false;
+      doAssertion(false, done);
+    });
+
+    function doAssertion(enabled, done) {
+      callFdnSettingsPanel._updateFdnStatus().then(() => {
+        assert.equal(enabled ? 'enabled' : 'disabled',
+          callFdnSettingsPanel._elements.simFdnDesc.getAttribute(
+            'data-l10n-id'));
+        assert.equal(enabled,
+          callFdnSettingsPanel._elements.simFdnCheckBox.checked);
+        assert.equal(false,
+          callFdnSettingsPanel._elements.simFdnCheckBox.disabled);
+        assert.equal(!enabled,
+          callFdnSettingsPanel._elements.resetPin2Item.hidden);
+      }).then(done, done);
+    }
+  });
+});

gaia/apps/settings/test/unit/panels/date_time/panel_test.js

@@ -0,0 +1,172 @@
+/* globals loadBodyHTML*/
+'use strict';
+
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('Date & Time panel > ', function() {
+  var modules = [
+    'panels/date_time/panel'
+  ];
+  var map = {
+    '*': {
+      'modules/settings_panel': 'MockSettingsPanel',
+      'modules/date_time': 'MockDateTime'
+    }
+  };
+
+  setup(function(done) {
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+    var that = this;
+
+    loadBodyHTML('_date_time.html');
+
+    // Define MockDateTime
+    this.MockDateTime = {
+      isMock: true,
+      autoUpdateDate: function() {},
+      autoUpdateClock: function() {},
+      moztimechange: function() {},
+      setTimezoneAutoEnabled: function() {},
+      setClockAutoAvailable: function() {},
+      setTimezoneAutoAvailable: function() {},
+      observe: function() {},
+      unobserve: function() {},
+      getHour12ForCurrentLocale: function() {}
+    };
+    define('MockDateTime', function() {
+      return that.MockDateTime;
+    });
+
+    // Define MockSettingsPanel
+    define('MockSettingsPanel', function() {
+      return function(options) {
+        return {
+          init: options.onInit.bind(options),
+          beforeShow: options.onBeforeShow.bind(options),
+          hide: options.onHide.bind(options)
+        };
+      };
+    });
+
+    requireCtx(modules, function(module) {
+      that.panel = module();
+      that.panel.init(document.body);
+      done();
+    });
+  });
+
+  suite('handle lifecycle', function() {
+    test('observe DateTime when onBeforeShow', function() {
+      this.sinon.stub(this.MockDateTime, 'observe');
+      this.sinon.stub(this.MockDateTime, 'setTimezoneAutoEnabled');
+      this.panel.beforeShow();
+      assert.ok(this.MockDateTime.observe.calledWith('time'));
+      assert.ok(this.MockDateTime.observe.calledWith('date'));
+      assert.ok(this.MockDateTime.observe.calledWith('timezone'));
+      assert.ok(this.MockDateTime.observe.calledWith('clockAutoEnabled'));
+      assert.ok(this.MockDateTime.observe.calledWith('clockAutoAvailable'));
+      assert.ok(this.MockDateTime.observe.calledWith('timezoneAutoAvailable'));
+      assert.ok(this.MockDateTime.observe.calledWith('userSelectedTimezone'));
+    });
+
+    test('unobserve DateTime when onHide', function() {
+      this.sinon.stub(this.MockDateTime, 'unobserve');
+      this.panel.hide();
+      assert.ok(this.MockDateTime.unobserve.calledWith('date'));
+      assert.ok(this.MockDateTime.unobserve.calledWith('time'));
+      assert.ok(this.MockDateTime.unobserve.calledWith('timezone'));
+      assert.ok(this.MockDateTime.unobserve.calledWith('clockAutoEnabled'));
+      assert.ok(this.MockDateTime.unobserve.calledWith('clockAutoAvailable'));
+      assert.ok(this.MockDateTime.unobserve.calledWith(
+        'timezoneAutoAvailable'));
+      assert.ok(this.MockDateTime.unobserve.calledWith('userSelectedTimezone'));
+    });
+  });
+
+  suite.only('UI visibility', function() {
+    var timezonePickers;
+    var timezoneInfo;
+
+    setup(function() {
+      timezonePickers = document.querySelector('.timezone-picker');
+      timezoneInfo = document.querySelector('.timezone-info');
+    });
+
+    test('auto time is enabled and auto timezone is available', function() {
+      this.MockDateTime.clockAutoEnabled = true;
+      this.MockDateTime.clockAutoAvailable = true;
+      this.MockDateTime.timezoneAutoAvailable = true;
+
+      this.panel.beforeShow();
+
+      for (var i = 0; i < timezonePickers.length; i++) {
+        assert.isFalse(timezonePickers[i].hidden, 'timezone picker is visible');
+      }
+      assert.isFalse(timezoneInfo.hidden, 'timezone info visible');
+    });
+
+    test('auto time is enabled but auto timezone is unavailable', function() {
+      this.MockDateTime.clockAutoEnabled = true;
+      this.MockDateTime.clockAutoAvailable = true;
+      this.MockDateTime.timezoneAutoAvailable = false;
+
+      this.panel.beforeShow();
+
+      for (var i = 0; i < timezonePickers.length; i++) {
+        assert.isFalse(timezonePickers[i].hidden, 'timezone picker is visible');
+      }
+      assert.isTrue(timezoneInfo.hidden, 'timezone info is invisible');
+    });
+
+    test('auto time is disabled', function() {
+      this.MockDateTime.clockAutoEnabled = false;
+      this.MockDateTime.clockAutoAvailable = true;
+      this.MockDateTime.timezoneAutoAvailable = true;
+
+      this.panel.beforeShow();
+
+      for (var i = 0; i < timezonePickers.length; i++) {
+        assert.isFalse(timezonePickers[i].hidden, 'timezone picker is visible');
+      }
+      assert.isTrue(timezoneInfo.hidden, 'timezone info is invisible');
+    });
+  });
+
+  suite.only('Time Format', function() {
+    var timeFormatBlock, timeFormatSwitch, timeFormatSelect;
+
+    setup(function() {
+      timeFormatBlock = document.querySelector('.timeformat');
+      timeFormatSwitch =
+        document.querySelector('.time-format-auto gaia-switch');
+      timeFormatSelect = document.querySelector('.time-format-time');
+    });
+
+    test('initially, default time format is set', function() {
+      this.panel.beforeShow();
+
+      assert.isTrue(timeFormatBlock.classList.contains('disabled'));
+      assert.isTrue(timeFormatSwitch.checked);
+      assert.equal(timeFormatSelect.value, 'ampm');
+    });
+
+    test('the UI is properly updated if locale.hour12 is true', function() {
+      this.MockDateTime.currentHour12 = true;
+      this.panel.beforeShow();
+
+      assert.isFalse(timeFormatBlock.classList.contains('disabled'));
+      assert.isFalse(timeFormatSwitch.checked);
+      assert.equal(timeFormatSelect.value, 'ampm');
+    });
+
+    test('the UI is properly updated if locale.hour12 is false', function() {
+      this.MockDateTime.currentHour12 = false;
+      this.panel.beforeShow();
+
+      assert.isFalse(timeFormatBlock.classList.contains('disabled'));
+      assert.isFalse(timeFormatSwitch.checked);
+      assert.equal(timeFormatSelect.value, '24');
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/developer/developer_test.js

@@ -0,0 +1,127 @@
+'use strict';
+
+/* globals loadBodyHTML*/
+
+requireApp('settings/shared/test/unit/load_body_html_helper.js');
+
+suite('Developer > ', function() {
+
+  var modules = [
+    'MockDialogService',
+    'unit/mock_apps_cache',
+    'shared_mocks/mock_screen_layout',
+    'unit/mock_settings_cache',
+    'shared_mocks/mock_navigator_moz_power',
+    'panels/developer/developer',
+    'unit/mock_homescreen_settings'
+  ];
+  var maps = {
+    'panels/developer/developer': {
+      'modules/dialog_service': 'MockDialogService',
+      'modules/apps_cache': 'unit/mock_apps_cache',
+      'shared/screen_layout': 'shared_mocks/mock_screen_layout',
+      'modules/settings_cache': 'unit/mock_settings_cache',
+      'shared/homescreens/homescreen_settings': 'unit/mock_homescreen_settings'
+    }
+  };
+  var developer, realMozPower, mozPower, dialogService, settingsCache;
+
+  suiteSetup(function(done) {
+    loadBodyHTML('_developer.html');
+
+    realMozPower = navigator.mozPower;
+
+    // Create a new requirejs context
+    var requireCtx = testRequire([], maps, function() {});
+
+    // Define MockDialogService
+    define('MockDialogService', function() {
+      return {
+        show: function() {},
+        alert: function() {},
+        confirm: function() {}
+      };
+    });
+
+    requireCtx(modules, function(MockDialogService, MockAppsCache,
+      MockScreenLayout, MockSettingsCache, MockNavigatorMozPower, Developer) {
+      navigator.mozPower = mozPower = MockNavigatorMozPower;
+      var panel = document.body;
+      developer = Developer();
+      dialogService = MockDialogService;
+      settingsCache = MockSettingsCache;
+      developer.init({
+        resetSwitch: panel.querySelector('.reset-devtools'),
+        ftuLauncher: panel.querySelector('.ftuLauncher'),
+        softwareHomeButton: panel.querySelector('.software-home-button'),
+        homegesture: panel.querySelector('.homegesture'),
+        homescreenPaging: panel.querySelector('.homescreen-paging')
+      });
+      done();
+    });
+  });
+
+  suiteTeardown(function() {
+    navigator.mozPower = realMozPower;
+  });
+
+  suite('developer initialized', function() {
+    test('constructed', function() {
+      assert.isFalse(developer._elements.resetSwitch.disabled);
+    });
+  });
+
+  suite('factory reset', function() {
+    test('button clicked', function() {
+      var _resetDeviceStub = sinon.stub(developer, '_resetDevice');
+      developer._elements.resetSwitch.click();
+      assert(_resetDeviceStub.calledOnce);
+      _resetDeviceStub.restore();
+    });
+
+    suite('_resetDevice', function() {
+      var _wipeStub;
+      function waitFor(test, callback) {
+        test() ? callback() : setTimeout(() => waitFor(test, callback), 25);
+      }
+
+      setup(function() {
+        _wipeStub = sinon.stub(developer, '_wipe');
+      });
+
+      teardown(function() {
+        developer._wipe.restore();
+      });
+
+      test('with restricted devtools', function(done) {
+        sinon.stub(dialogService, 'confirm').returns(
+          Promise.resolve({ type: 'submit' }));
+        sinon.stub(dialogService, 'show', function() {
+          return Promise.resolve({ type: 'submit', value: 'final_warning'});
+        });
+        developer._resetDevice();
+        waitFor(() => dialogService.show.args.length === 2, () => {
+          assert.equal(dialogService.show.args[1][0],
+            'full-developer-mode-final-warning');
+          done();
+        });
+      });
+
+      test('with unrestricted devtools', function(done) {
+        sinon.stub(settingsCache, 'getSettings', callback => callback({
+          'devtools.unrestricted': true
+        }));
+        developer._resetDevice();
+        waitFor(() => _wipeStub.calledWith('normal'), done);
+      });
+    });
+
+    test('_wipe', function() {
+      sinon.stub(mozPower, 'factoryReset');
+      ['normal', 'root'].forEach(reason => {
+        developer._wipe(reason);
+        assert(mozPower.factoryReset.calledWith(reason));
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/display/display_test.js

@@ -0,0 +1,80 @@
+'use strict';
+
+suite('start testing > ', function() {
+  var DisplayConstructor;
+
+  var mockSettingsListener;
+
+  var display;
+  var mockElements;
+  suiteSetup(function(done) {
+    var modules = [
+      'shared_mocks/mock_settings_listener',
+      'panels/display/display'
+    ];
+    var maps = {
+      'panels/display/display': {
+        'shared/settings_listener': 'shared_mocks/mock_settings_listener',
+        'panels/display/slider_handler': 'MockSliderHandler'
+      }
+    };
+
+    define('MockSliderHandler', function() {
+      return function() {
+        return {
+          init: function() {}
+        };
+      };
+    });
+
+    testRequire(modules, maps, function(MockSettingsListener, Display) {
+      mockSettingsListener = MockSettingsListener;
+      DisplayConstructor = Display;
+      done();
+    });
+  });
+
+  setup(function() {
+    display = DisplayConstructor();
+    mockElements = {
+      brightnessAuto: {},
+      brightnessAutoCheckbox: {},
+      brightnessManual: {},
+      brightnessManualInput: {}
+    };
+  });
+
+  suite('start test display module > ', function() {
+    test('init', function() {
+      var testConfig = {'testKey': 'testData'};
+      this.sinon.stub(display, 'initBrightnessItems');
+      display.init({}, testConfig);
+      assert.deepEqual(display.initBrightnessItems.args[0], [testConfig]);
+    });
+
+    test('initBrightnessItems with ambientLight', function() {
+      var brightnessValue = true;
+      var config = {
+        ambientLight: true
+      };
+      display.elements = mockElements;
+      display.initBrightnessItems(config);
+      mockSettingsListener.mTriggerCallback('screen.automatic-brightness',
+        brightnessValue);
+      assert.equal(mockElements.brightnessAuto.hidden, false);
+      assert.equal(mockElements.brightnessManual.hidden, brightnessValue);
+    });
+
+    test('initBrightnessItems without ambientLight', function() {
+      var config = {};
+      display.elements = mockElements;
+      display.initBrightnessItems(config);
+      assert.equal(mockElements.brightnessAuto.hidden, true);
+      assert.equal(mockElements.brightnessManual.hidden, false);
+
+      assert.deepEqual(mockSettingsListener.getSettingsLock().locks[0], {
+        'screen.automatic-brightness': false
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/display/panel_test.js

@@ -0,0 +1,71 @@
+/* global loadBodyHTML*/
+'use strict';
+
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('DisplayPanel', function() {
+  var modules = [
+    'panels/display/panel',
+    'shared_mocks/mock_lazy_loader',
+  ];
+  var map = {
+    '*': {
+      'modules/settings_panel': 'MockSettingsPanel',
+      'panels/display/display': 'MockDisplay',
+      'shared/lazy_loader': 'shared_mocks/mock_lazy_loader'
+    }
+  };
+
+  setup(function(done) {
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+    var that = this;
+
+    loadBodyHTML('_display.html');
+
+    // Define MockSettingsPanel
+    define('MockSettingsPanel', function() {
+      return function(options) {
+        return {
+          init: options.onInit,
+          beforeShow: options.onBeforeShow,
+          beforeHide: options.onBeforeHide,
+          hide: options.onHide
+        };
+      };
+    });
+
+    // Define MockDisplay
+    this.mockDisplay = {
+      init: function() {},
+      initBrightnessItems: function() {}
+    };
+    define('MockDisplay', function() {
+      return function() {
+        return that.mockDisplay;
+      };
+    });
+
+    requireCtx(modules, function(DisplayPanel, MockLazyLoader) {
+      that.panel = DisplayPanel();
+      that.mockLazyLoader = MockLazyLoader;
+      done();
+    });
+  });
+
+  test('init display module with correct data', function(done) {
+    this.sinon.stub(this.mockDisplay, 'init');
+    var mockSensorData = {};
+    this.sinon.stub(this.mockLazyLoader, 'getJSON', function() {
+      return Promise.resolve(mockSensorData);
+    });
+
+    this.panel.init(document.body);
+
+    // Can't run other checks till promise is done
+    this.mockLazyLoader.getJSON.getCall(0).returnValue.then(function(data) {
+      assert.ok(
+        this.mockDisplay.init.calledWith(sinon.match.any, mockSensorData));
+    }.bind(this)).then(done, done);
+  });
+});

gaia/apps/settings/test/unit/panels/feedback_send/feedback_send_test.js

@@ -0,0 +1,207 @@
+'use strict';
+suite('sendFeedback > ', function() {
+  var SendFeedback;
+  var MockAsyncStorage, RealAsyncStorage;
+  var MockXMLHttpRequest, RealXMLHttpRequest;
+  suiteSetup(function(done) {
+    navigator.addIdleObserver = sinon.spy();
+    testRequire([
+        'unit/mock_async_storage',
+        'unit/mock_xml_http_request',
+        'panels/feedback_send/feedback_send'
+      ],
+      function(mockAsyncStorage, mockXMLHttpRequest, module) {
+        MockAsyncStorage = mockAsyncStorage;
+        MockXMLHttpRequest = mockXMLHttpRequest;
+        SendFeedback = module;
+        done();
+    });
+  });
+
+  var mock_elements = {
+    title: {
+      _keys: {},
+      setAttribute: function(key, value) { this._keys[key] = value; },
+      getAttribute: function(key) { return this._keys[key]; },
+      removeAttribute: function(key) { delete this._keys[key]; },
+    },
+    description: {
+      value: 'testDescription',
+      textLength: 15
+    },
+    emailInput: {
+      value: 'testemailInput',
+      validity: {
+        valid: true
+      }
+    },
+    emailColumn: {
+      hidden: true
+    },
+    emailEnable: {
+      checked: false
+    },
+    sendBtn: {
+      disabled: false
+    }
+  };
+
+  var test_data = {
+    description: 'test'
+  };
+
+  var mock_happy_options = {
+    feel: 'feedback-happy'
+  };
+
+  var mock_sad_options = {
+    feel: 'feedback-sad'
+  };
+
+  var mock_settings = {
+    'feedback.url': 'testfeedbackurl',
+    'deviceinfo.os': 'testos',
+    'deviceinfo.hardware': 'testhw',
+    'language.current': 'testlang'
+  };
+
+  suite('Start test sendFeedback module', function() {
+    var sendFeedback;
+    setup(function() {
+      sendFeedback = SendFeedback();
+      RealAsyncStorage = window.asyncStorage;
+      window.asyncStorage = MockAsyncStorage;
+      RealXMLHttpRequest = window.XMLHttpRequest;
+      window.XMLHttpRequest = MockXMLHttpRequest;
+      sendFeedback._sendData = {};
+      window.asyncStorage.setItem('feedback', test_data);
+      sendFeedback._SettingsCache = {
+        cache: mock_settings
+      };
+      this.sinon.stub(sendFeedback._SettingsService, 'navigate');
+      sendFeedback._xhr = MockXMLHttpRequest;
+      sendFeedback.init(mock_elements, mock_happy_options);
+    });
+
+    teardown(function() {
+      sendFeedback._xhr = null;
+      sendFeedback._showEmail = false;
+      sendFeedback.elements = null;
+      sendFeedback.options = null;
+      sendFeedback._sendData = {};
+      window.asyncStorage = RealAsyncStorage;
+      window.XMLHttpRequest = RealXMLHttpRequest;
+    });
+
+    test('update title and get previous inputs', function() {
+      sendFeedback.options = mock_happy_options;
+      sendFeedback.updateTitle();
+      sendFeedback.getPreviousInputs();
+      assert.equal(sendFeedback.elements.title.getAttribute('data-l10n-id'),
+        'feedback_whyfeel_' +
+        (mock_happy_options.feel === 'feedback-happy' ? 'happy' : 'sad'));
+      assert.deepEqual(sendFeedback._inputData, {
+        description: test_data.description,
+        email: '',
+        emailEnable: false
+      });
+    });
+
+    test('_isHappy', function() {
+      sendFeedback.options = mock_happy_options;
+      assert.isTrue(sendFeedback._isHappy());
+
+      sendFeedback.options = mock_sad_options;
+      assert.isFalse(sendFeedback._isHappy());
+    });
+
+    test('enableEmail', function() {
+      var originalValue = sendFeedback._showEmail;
+      sendFeedback.enableEmail();
+      assert.equal(sendFeedback._showEmail, !originalValue);
+      assert.equal(sendFeedback.elements.emailEnable.checked, !originalValue);
+      assert.equal(sendFeedback.elements.emailColumn.hidden, originalValue);
+    });
+
+    test('back', function(done) {
+      sendFeedback._inputData = {};
+      sendFeedback.back();
+      window.asyncStorage.getItem('feedback', function(value) {
+        assert.deepEqual(value, {
+          description: '', email: '', emailEnable: false });
+        done();
+      });
+    });
+
+    test('send', function() {
+      this.sinon.spy(sendFeedback, '_openDoneDialog');
+
+      sendFeedback.elements.emailColumn.hidden = false;
+      sendFeedback.elements.emailInput.value = 'testemailInput';
+      sendFeedback.elements.description.value = 'testDescription';
+      sendFeedback.options = mock_happy_options;
+      sendFeedback.send();
+      assert.equal(sendFeedback._xhr.data.requestUrl,
+        mock_settings['feedback.url']);
+      assert.equal(sendFeedback._xhr.data.value, JSON.stringify({
+        product: 'Firefox OS',
+        platform: 'Firefox OS',
+        description: 'testDescription',
+        email: 'testemailInput',
+        version: mock_settings['deviceinfo.os'],
+        device: mock_settings['deviceinfo.hardware'],
+        locale: mock_settings['language.current'],
+        happy: (mock_happy_options.feel === 'feedback-happy')
+      }));
+
+      sendFeedback._xhr.readyState = 4;
+      sendFeedback._xhr.triggerOnLoad(201);
+      assert.equal(sendFeedback._openDoneDialog.called, true);
+      assert.equal(sendFeedback.elements.sendBtn.disabled, false);
+    });
+
+    test('_responseHandler', function() {
+      sendFeedback._xhr.readyState = 4;
+
+      this.sinon.spy(sendFeedback, '_openAlertDialog');
+      sendFeedback._xhr.status = 400;
+      sendFeedback._responseHandler();
+      assert.equal(
+        sendFeedback._openAlertDialog.calledWithExactly('unknown-error'), true);
+
+      sendFeedback._xhr.status = 429;
+      sendFeedback._responseHandler();
+      assert.equal(sendFeedback._openAlertDialog.called, true);
+
+      sendFeedback._xhr.status = 404;
+      sendFeedback._responseHandler();
+      assert.equal(
+        sendFeedback._openAlertDialog.calledWithExactly('server-off'), true);
+
+      sendFeedback._xhr.status = 402;
+      sendFeedback._responseHandler();
+      assert.equal(
+        sendFeedback._openAlertDialog.calledWithExactly('unknown-error'), true);
+    });
+
+    suite('_messageHandler', function() {
+      test('_messageHandler with success', function() {
+        this.sinon.spy(sendFeedback, '_openDoneDialog');
+
+        sendFeedback._messageHandler('success');
+        assert.equal(sendFeedback._openDoneDialog.called, true);
+        assert.equal(sendFeedback.elements.sendBtn.disabled, false);
+      });
+
+      test('_messageHandler with failure', function() {
+        this.sinon.spy(sendFeedback, 'keepAllInputs');
+        this.sinon.spy(sendFeedback, '_openAlertDialog');
+
+        sendFeedback._messageHandler('wrong-email');
+        assert.equal(sendFeedback.keepAllInputs.called, true);
+        assert.equal(sendFeedback._openAlertDialog.called, true);
+        assert.equal(sendFeedback.elements.sendBtn.disabled, false);
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/feedback_send/panel_test.js

@@ -0,0 +1,96 @@
+/* globals loadBodyHTML*/
+'use strict';
+
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('SendFeedbackPanel', function() {
+  var modules = [
+    'panels/feedback_send/panel',
+    'panels/feedback_send/feedback_send',
+    'unit/mock_settings_panel'
+  ];
+  var map = {
+    '*': {
+      'modules/settings_panel': 'unit/mock_settings_panel',
+      'panels/feedback_send/feedback_send': 'MockSendFeedback',
+    }
+  };
+
+  setup(function(done) {
+    var that = this;
+
+    loadBodyHTML('_send_feedback.html');
+
+    var requireCtx = testRequire([], map, function() {});
+
+    var MockSendFeedback = {
+      init: function() {},
+      keepAllInputs: function() {
+        return true;
+      }
+    };
+
+    define('MockSendFeedback', function() {
+      return function() {
+        return MockSendFeedback;
+      };
+    });
+
+    requireCtx(modules, function(SendFeedbackPanel, MockSendFeedback,
+      MockSettingsPanel) {
+        MockSettingsPanel.mInnerFunction = function(options) {
+          var obj = {};
+          for (var key in options) {
+            obj[key] = options[key];
+          }
+          return obj;
+        };
+        that.sendFeedback = MockSendFeedback();
+        that.panel = SendFeedbackPanel();
+        that.panel.onInit(document.body);
+        done();
+    });
+  });
+
+  suite('onBeforeHide', function() {
+    var realHidden;
+    var hidden = true;
+
+    function documentHidden() {
+      return hidden;
+    }
+
+    function setDocumentHidden(value) {
+      hidden = value;
+    }
+
+    setup(function() {
+      realHidden = Object.getOwnPropertyDescriptor(document, 'hidden');
+      Object.defineProperty(document, 'hidden', {
+        configurable: true,
+        get: documentHidden,
+        set: setDocumentHidden
+      });
+      this.sinon.spy(this.sendFeedback, 'keepAllInputs');
+    });
+
+    teardown(function() {
+      if (realHidden) {
+        Object.defineProperty(document, 'hidden', realHidden);
+      }
+    });
+
+    test('should not call keepAllInputs', function() {
+      document.hidden = false;
+      this.panel.onBeforeHide();
+      assert.isFalse(this.sendFeedback.keepAllInputs.called);
+    });
+
+    test('should call keepAllInputs', function() {
+      document.hidden = true;
+      this.panel.onBeforeHide();
+      assert.isTrue(this.sendFeedback.keepAllInputs.called);
+    });
+  });
+
+});

gaia/apps/settings/test/unit/panels/findmydevice/findmydevice_test.js

@@ -0,0 +1,351 @@
+/* global MocksHelper */
+/* global HtmlImports */
+/* global MockSettingsListener */
+/* global MockSettingsHelper */
+/* global MockLazyLoader */
+/* global IAC_API_WAKEUP_REASON_TRY_DISABLE */
+
+'use strict';
+
+// require helpers for managing html
+require('/shared/js/component_utils.js');
+require('/shared/elements/gaia_switch/script.js');
+require('/shared/test/unit/load_body_html_helper.js');
+require('/shared/js/html_imports.js');
+
+require('/shared/test/unit/mocks/mocks_helper.js');
+require('/shared/test/unit/mocks/mock_settings_listener.js');
+require('/shared/test/unit/mocks/mock_settings_helper.js');
+require('/shared/test/unit/mocks/mock_lazy_loader.js');
+require('/shared/js/findmydevice_iac_api.js');
+
+var mocksForFindMyDevice = new MocksHelper([
+  'SettingsListener', 'SettingsHelper', 'LazyLoader'
+]).init();
+
+suite('Find My Device panel > ', function() {
+  var MockMozId, realMozId;
+  var subject;
+  var signinSection, settingsSection, trackingSection, login, loginButton,
+      checkbox, unverifiedError, header;
+  var wakeUpFindMyDevice;
+
+  mocksForFindMyDevice.attachTestHelpers();
+
+  setup(function(done) {
+    realMozId = navigator.mozId;
+    MockMozId = {
+      onlogin: null,
+      onlogout: null,
+      onready: null,
+      onerror: null,
+      oncancel: null,
+
+      watch: function(options) {
+        this.onlogin = options.onlogin;
+        this.onlogout = options.onlogout;
+        this.onready = options.onready;
+        this.onerror = options.onerror;
+
+        setTimeout(function() {
+          options.onready();
+        });
+      },
+
+      request: function(options) {
+        this.oncancel = options.oncancel;
+      },
+    };
+
+    navigator.mozId = MockMozId;
+
+    this.sinon.stub(MockLazyLoader, 'getJSON', function() {
+      return Promise.resolve({});
+    });
+
+    // first, load settings app
+    loadBodyHTML('/index.html');
+
+    // next, insert fmd panel into page
+    var importHook = document.createElement('link');
+    importHook.setAttribute('rel', 'import');
+    importHook.setAttribute('href', '/elements/findmydevice.html');
+    document.head.appendChild(importHook);
+    HtmlImports.populate(function onDOMReady() {
+      // double-check panel is ready
+      if (document.querySelector('.findmydevice-signin') == null) {
+        throw new Error('failed to load findmydevice panel into page');
+      }
+
+      // grab pointers to useful elements
+      header = document.querySelector('#findmydevice gaia-header');
+      signinSection = document.querySelector('.findmydevice-signin');
+      settingsSection = document.querySelector('.findmydevice-settings');
+      trackingSection = document.querySelector('.findmydevice-tracking');
+      checkbox = document.querySelector('.findmydevice-enabled gaia-switch');
+      login = document.querySelector('.findmydevice-login');
+      loginButton = document.querySelector('.findmydevice-login > button');
+      unverifiedError = document.querySelector(
+        '.findmydevice-fxa-unverified-error');
+
+      // manually enable the loginButton
+      loginButton.removeAttribute('disabled');
+
+      // Define a map so that we can replace the module with a mock.
+      var map = {
+        '*': {
+          'modules/settings_utils': 'MockSettingsUtils',
+          'shared/settings_listener': 'MockSettingsListener',
+          'shared/findmydevice_iac_api': 'MockWakeUpFindMyDevice',
+          'shared/settings_helper': 'MockSettingsHelper',
+          'shared/lazy_loader': 'MockLazyLoader'
+        }
+      };
+
+      // Define the mock for replacing "modules/settings_utils".
+      define('MockSettingsUtils', function() {
+        return {
+          runHeaderFontFit: function() {}
+        };
+      });
+
+      // Define the mock for replacing "shared/settings_listener".
+      define('MockSettingsListener', function() {
+        return MockSettingsListener;
+      });
+
+      define('MockWakeUpFindMyDevice', function() {
+        return sinon.stub();
+      });
+
+      define('MockSettingsHelper', function() {
+        return MockSettingsHelper;
+      });
+
+      define('MockLazyLoader', function() {
+        return MockLazyLoader;
+      });
+
+      var modules = [
+        '/js/panels/findmydevice/findmydevice.js',
+        'MockWakeUpFindMyDevice'
+      ];
+
+      testRequire(modules, map, function(
+        FindMyDevice, MockWakeUpFindMyDevice) {
+        wakeUpFindMyDevice = MockWakeUpFindMyDevice;
+        subject = FindMyDevice();
+        subject.onInit({
+          header: header,
+          login: login,
+          loginButton: loginButton,
+          unverifiedError: unverifiedError,
+          checkbox: checkbox,
+          status: trackingSection,
+          signin: signinSection,
+          settings: settingsSection
+        });
+        subject.onBeforeShow();
+        // Ensure promise is resolved and FindMyDevice.init()
+        // is finished before tests start
+        MockLazyLoader.getJSON.getCall(0).returnValue.then(
+          function() { done(); });
+      });
+    });
+  });
+
+  test('prompt for login when logged out of FxA', function() {
+    MockSettingsListener.mCallbacks['findmydevice.logged-in'](false);
+    assert.isFalse(signinSection.hidden);
+    assert.isTrue(settingsSection.hidden);
+  });
+
+  test('consider ourselves logged out if onerror fires when not offline',
+  function() {
+    MockMozId.onerror('{"name": "NOT_OFFLINE"}');
+    assert.isFalse(
+      MockSettingsHelper.instances['findmydevice.logged-in'].value);
+  });
+
+  test('persist panel if onerror fires due to being offline', function() {
+    MockSettingsListener.mCallbacks['findmydevice.logged-in'](true);
+    MockMozId.onerror('{"name": "OFFLINE"}');
+    assert.isFalse(settingsSection.hidden);
+    assert.isTrue(signinSection.hidden);
+
+    MockSettingsListener.mCallbacks['findmydevice.logged-in'](false);
+    MockMozId.onerror('{"name": "OFFLINE"}');
+    assert.isTrue(settingsSection.hidden);
+    assert.isFalse(signinSection.hidden);
+  });
+
+  test('show settings when logged in to FxA', function() {
+    MockSettingsListener.mCallbacks['findmydevice.logged-in'](true);
+    assert.isFalse(settingsSection.hidden);
+    assert.isTrue(signinSection.hidden);
+  });
+
+  test('ignore clicks when button is disabled', function() {
+    loginButton.disabled = true;
+    var onLoginClickSpy = sinon.spy(subject, '_onLoginClick');
+    loginButton.click();
+    sinon.assert.notCalled(onLoginClickSpy);
+    subject._onLoginClick.restore();
+  });
+
+  test('enable button after watch fires onready', function() {
+    loginButton.disabled = true;
+    MockMozId.onready();
+    assert.isFalse(!!loginButton.disabled);
+  });
+
+  test('enable button after watch fires onerror', function() {
+    loginButton.disabled = true;
+    MockMozId.onerror('{"name": "NOT_OFFLINE"}');
+    assert.isFalse(!!loginButton.disabled);
+  });
+
+  test('auto-enable if not registered when logging in using the login button',
+  function(done) {
+    MockSettingsHelper('findmydevice.registered').set(false);
+
+    MockMozId.onlogout();
+    loginButton.click();
+    MockMozId.onlogin();
+
+    MockSettingsHelper('findmydevice.enabled').get(function(enabled) {
+      assert.isTrue(enabled);
+      done();
+    });
+  });
+
+  test('don\'t auto-enable if registered when logging in with the login button',
+  function() {
+    MockSettingsHelper('findmydevice.registered').set(true);
+
+    MockMozId.onlogout();
+    loginButton.click();
+    MockMozId.onlogin();
+
+    assert.isUndefined(
+      MockSettingsHelper.instances['findmydevice.enabled'].value);
+  });
+
+  test('bug 997310 - don\'t disable on non-interactive login', function() {
+    MockMozId.onlogin();
+    var nLocks = MockSettingsListener.getSettingsLock().locks.length;
+    assert.equal(nLocks, 0, 'set no settings on non-interactive login');
+  });
+
+  test('notify in settings panel when phone is tracked', function() {
+    MockSettingsListener.mCallbacks['findmydevice.enabled'](false);
+    assert.isTrue(trackingSection.hidden);
+    MockSettingsListener.mCallbacks['findmydevice.enabled'](true);
+    assert.isFalse(trackingSection.hidden);
+
+    MockSettingsListener.mCallbacks['findmydevice.tracking'](true);
+    assert.equal(trackingSection.getAttribute('data-l10n-id'),
+                                              'findmydevice-active-tracking');
+    MockSettingsListener.mCallbacks['findmydevice.tracking'](false);
+    assert.equal(trackingSection.getAttribute('data-l10n-id'),
+                                              'findmydevice-not-tracking');
+  });
+
+  test('prevent accidental auto-enable on FxA sign-in', function() {
+    MockMozId.onlogout();
+    loginButton.click();
+    assert.equal(true, subject._interactiveLogin,
+      'ensure _interactiveLogin is true after login button is clicked');
+    MockMozId.oncancel();
+    assert.equal(false, subject._interactiveLogin,
+      'ensure _interactiveLogin is false after FxA cancel');
+    MockMozId.onlogin();
+    assert.equal(0, MockSettingsListener.getSettingsLock().locks.length,
+      'ensure findmydevice.enabled was not set automatically on FxA login');
+  });
+
+  test('disallow changes when findmydevice.can-disable is false', function() {
+    MockSettingsListener.mCallbacks['findmydevice.can-disable'](false);
+    assert.isTrue(checkbox.disabled,
+      'checkbox is not disabled while findmydevice.can-disable is false');
+    MockSettingsListener.mCallbacks['findmydevice.can-disable'](true);
+    assert.isFalse(checkbox.disabled,
+      'checkbox is disabled while findmydevice.can-disable is true');
+  });
+
+  test('wake up find my device upon a disable attempt', function() {
+    checkbox.checked = true;
+    var event = new CustomEvent('click', {
+      bubbles: true,
+      cancelable: true
+    });
+    checkbox.querySelector('label').dispatchEvent(event);
+    assert.ok(wakeUpFindMyDevice.calledWith(
+      IAC_API_WAKEUP_REASON_TRY_DISABLE));
+    wakeUpFindMyDevice.reset();
+  });
+
+  test('hide error message for unverified account by default', function() {
+    assert.isTrue(unverifiedError.hidden);
+  });
+
+  test('don\'t display error message for unverified account when offline',
+  function() {
+    MockMozId.onerror('{"name": "OFFLINE"}');
+    assert.isTrue(unverifiedError.hidden);
+  });
+
+  test('display error message for unverified accounts', function() {
+    MockMozId.onerror('{"name": "UNVERIFIED_ACCOUNT"}');
+    assert.isFalse(unverifiedError.hidden);
+    assert.isTrue(login.hidden);
+  });
+
+  test('hide error message for unverified accounts on login',
+  function() {
+    unverifiedError.hidden = false;
+    login.hidden = true;
+
+    MockMozId.onlogin();
+    assert.isTrue(unverifiedError.hidden);
+    assert.isFalse(login.hidden);
+  });
+
+  test('hide error message for unverified accounts on logout',
+  function() {
+    unverifiedError.hidden = false;
+    login.hidden = true;
+
+    MockMozId.onlogout();
+    assert.isTrue(unverifiedError.hidden);
+    assert.isFalse(login.hidden);
+  });
+
+  teardown(function() {
+    navigator.mozId = realMozId;
+  });
+
+  suite('mozId login/logout forces logged-in setting value', function() {
+    var loggedIn = 'findmydevice.logged-in';
+    setup(function() {
+      MockSettingsHelper(loggedIn).set(null);
+    });
+
+    test('onlogin(true)', function(done) {
+      MockMozId.onlogin(true);
+      MockSettingsHelper(loggedIn).get(v => {
+        assert.isTrue(v);
+        done();
+      });
+    });
+
+    test('onlogout(false)', function(done) {
+      MockMozId.onlogout(false);
+      MockSettingsHelper(loggedIn).get(v => {
+        assert.isFalse(v);
+        done();
+      });
+    });
+
+  });
+});

gaia/apps/settings/test/unit/panels/firefox_accounts/firefox_accounts_test.js

@@ -0,0 +1,265 @@
+/* globals HtmlImports, loadBodyHTML, MockFxAccountsIACHelper,
+  MockL10n */
+
+'use strict';
+
+// require helpers for managing html
+require('/shared/test/unit/load_body_html_helper.js');
+require('/shared/js/html_imports.js');
+
+// mocks and globals
+require('mock_fx_accounts_iac_helper.js');
+require('/shared/js/text_normalizer.js');
+require('/shared/test/unit/mocks/mock_l20n.js');
+
+suite('firefox accounts panel > ', function() {
+  var suiteSandbox = sinon.sandbox.create(),
+    setAttributesSpy,
+    realL10n,
+    alertSpy,
+    firefoxAccounts,
+    elements;
+
+  setup(function(done) {
+
+    realL10n = document.l10n;
+    document.l10n = MockL10n;
+
+    // first, load settings app
+    loadBodyHTML('/index.html');
+
+    // next, insert fxa panel into page
+    var importHook = document.createElement('link');
+    importHook.setAttribute('rel', 'import');
+    importHook.setAttribute('href', '/elements/firefox_accounts.html');
+    document.head.appendChild(importHook);
+    HtmlImports.populate(function onDOMReady() {
+      // double-check panel is ready
+      if (null == document.getElementById('fxa-logged-out')) {
+        throw new Error('failed to load fxa panel into page');
+      }
+      // grab pointers to useful elements
+      elements = {
+        fxaContainer: document.getElementById('fxa'),
+        loggedOutPanel: document.getElementById('fxa-logged-out'),
+        loggedInPanel: document.getElementById('fxa-logged-in'),
+        unverifiedPanel: document.getElementById('fxa-unverified'),
+        resendEmail: document.getElementById('fxa-resend-email'),
+        cancelBtn: document.getElementById('fxa-cancel-confirmation'),
+        loginBtn: document.getElementById('fxa-login'),
+        logoutBtn: document.getElementById('fxa-logout'),
+        loggedInEmail: document.getElementById('fxa-logged-in-text'),
+        unverifiedEmail: document.getElementById('fxa-unverified-text'),
+        resendLink: document.getElementById('fxa-resend')
+      };
+
+      var modules = [
+        '/js/panels/firefox_accounts/firefox_accounts.js',
+        'MockFxAccountsIACHelper',
+        'MockDialogService'
+      ];
+
+      var map = {
+        '*': {
+          'shared/fxa_iac_client': 'MockFxAccountsIACHelper',
+          'shared/text_normalizer': 'MockTextNormalizer',
+          'modules/dialog_service': 'MockDialogService'
+        }
+      };
+
+      define('MockFxAccountsIACHelper', function() {
+        return MockFxAccountsIACHelper;
+      });
+
+      define('MockTextNormalizer', function() {
+        return {
+          escapeHTML: function(string) { return string; }
+        };
+      });
+
+      define('MockDialogService', function() {
+        return {
+          alert: function() { return Promise.resolve(); }
+        };
+      });
+
+      testRequire(modules, map,
+        function(FirefoxAccounts, MockFxAccountsIACHelper, MockDialogService) {
+          firefoxAccounts = FirefoxAccounts();
+          firefoxAccounts.onInit(elements);
+          alertSpy = sinon.stub(MockDialogService, 'alert');
+          done();
+        }
+      );
+    });
+  });
+  suiteTeardown(function() {
+    suiteSandbox.restore();
+    document.l10n = realL10n;
+    document.body.innerHTML = '';
+  });
+
+  setup(function() {
+    setAttributesSpy = sinon.spy(document.l10n, 'setAttributes');
+  });
+
+  teardown(function() {
+    document.l10n.setAttributes.restore();
+    MockFxAccountsIACHelper.resetListeners();
+  });
+
+  test('show the correct panel and email on FxaPanel init', function() {
+    // set the state in the mock
+    MockFxAccountsIACHelper.setCurrentState({
+      email: 'init@ialization.com',
+      verified: true
+    });
+
+    // init FxaPanel
+    firefoxAccounts.onBeforeShow();
+
+    // check the right screen is visible
+    assert.isTrue(elements.loggedOutPanel.hidden);
+    assert.isTrue(elements.unverifiedPanel.hidden);
+    assert.isFalse(elements.loggedInPanel.hidden);
+
+    // test setAttributes was called with correct args
+    assert.deepEqual(setAttributesSpy.args[0], [
+      document.getElementById('fxa-logged-in-text'),
+      'fxa-logged-in-text',
+      { email: 'init@ialization.com' }
+    ]);
+  });
+
+  test('show the correct panel and email after onlogout event', function() {
+    MockFxAccountsIACHelper.setCurrentState(null);
+    firefoxAccounts.onBeforeShow();
+    MockFxAccountsIACHelper.fireEvent('onlogout');
+    assert.isFalse(elements.loggedOutPanel.hidden);
+    assert.isTrue(elements.unverifiedPanel.hidden);
+    assert.isTrue(elements.loggedInPanel.hidden);
+  });
+
+  test('show the correct panel and email after onlogin event', function() {
+    MockFxAccountsIACHelper.setCurrentState({
+      email: 'on@log.in',
+      verified: false
+    });
+    firefoxAccounts.onBeforeShow();
+    MockFxAccountsIACHelper.fireEvent('onlogin');
+    assert.isTrue(elements.loggedOutPanel.hidden);
+    assert.isFalse(elements.unverifiedPanel.hidden);
+    assert.isTrue(elements.loggedInPanel.hidden);
+
+    // test setAttributes was called with correct args
+    assert.deepEqual(setAttributesSpy.args[0], [
+      document.getElementById('fxa-unverified-text'),
+      'fxa-verification-email-sent-msg',
+      { email: 'on@log.in' }
+    ]);
+  });
+
+  test('show the correct panel and email after onverified event',
+    function() {
+      MockFxAccountsIACHelper.setCurrentState({
+        email: 'on@verifiedlog.in',
+        verified: true
+      });
+      firefoxAccounts.onBeforeShow();
+      MockFxAccountsIACHelper.fireEvent('onverified');
+      assert.isTrue(elements.loggedOutPanel.hidden);
+      assert.isTrue(elements.unverifiedPanel.hidden);
+      assert.isFalse(elements.loggedInPanel.hidden);
+
+      // test setAttributes was called with correct args
+      assert.deepEqual(setAttributesSpy.args[0], [
+        document.getElementById('fxa-logged-in-text'),
+        'fxa-logged-in-text',
+        { email: 'on@verifiedlog.in' }
+      ]);
+  });
+
+  suite('resendVerificationEmail tests > ', function() {
+    var getAccountSpy;
+
+    suiteSetup(function() {
+      getAccountSpy = sinon.stub(MockFxAccountsIACHelper, 'getAccount');
+      firefoxAccounts.onBeforeShow();
+    });
+
+    suiteTeardown(function() {
+      MockFxAccountsIACHelper.getAccount.restore();
+      getAccountSpy = null;
+    });
+
+    setup(function() {
+      getAccountSpy.reset();
+    });
+
+    test('on resend click, if link is enabled, get accounts', function() {
+      var fakeEvt = {
+        stopPropagation: function() {},
+        preventDefault: function() {},
+        target: {
+          classList: {
+            contains: function() {
+              // _onResendCLick is looking for the .disabled class in the
+              // classList. to keep the mock simple, always return false.
+              return false;
+            }
+          }
+        }
+      };
+      firefoxAccounts._onResendClick(fakeEvt);
+      assert.isTrue(getAccountSpy.called);
+    });
+
+    test('on resend click, if link is disabled, do nothing', function() {
+      var fakeEvt = {
+        stopPropagation: function() {},
+        preventDefault: function() {},
+        target: {
+          classList: {
+            contains: function() {
+              // _onResendCLick is looking for the .disabled class in the
+              // classList. to keep the mock simple, always return true.
+              return true;
+            }
+          }
+        }
+      };
+      firefoxAccounts._onResendClick(fakeEvt);
+      assert.isFalse(getAccountSpy.called);
+    });
+
+    test('_onResend should alert resend message', function(done) {
+      firefoxAccounts._onResend('foo@bar.com');
+      assert.isTrue(
+        alertSpy.calledWith({
+          id: 'fxa-resend-alert',
+          args: { email: 'foo@bar.com' }
+        })
+      );
+      done();
+    });
+
+    suite('timer tests > ', function() {
+      setup(function() {
+        this.clock = sinon.useFakeTimers();
+      });
+
+      teardown(function() {
+        this.clock.restore();
+      });
+
+      test('_onResend should disable link for 60 seconds', function(done) {
+        firefoxAccounts._onResend('foo@bar.com');
+        this.clock.tick(100);
+        assert.isTrue(elements.resendLink.classList.contains('disabled'));
+        this.clock.tick(59900);
+        assert.isFalse(elements.resendLink.classList.contains('disabled'));
+        done();
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/firefox_sync/panel_test.js

@@ -0,0 +1,972 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/* global ERROR_DIALOG_CLOSED_BY_USER */
+/* global ERROR_INVALID_SYNC_ACCOUNT */
+/* global ERROR_UNVERIFIED_ACCOUNT */
+/* global expect */
+/* global loadBodyHTML */
+/* global MockL10n */
+/* global MockMozIntl */
+/* global MockSettingsListener */
+/* global Panel */
+/* global SyncManagerBridge */
+
+'use strict';
+
+require('/shared/test/unit/load_body_html_helper.js');
+require('/shared/js/sync/errors.js');
+require('/shared/test/unit/mocks/mock_moz_intl.js');
+require('/shared/test/unit/mocks/mock_l20n.js');
+
+suite('Firefox Sync panel >', () => {
+  var realMozIntl = null;
+  var realMozL10n = null;
+  var realAddIdleObserver = null;
+
+  var isOnline = true;
+
+  const BOOKMARKS = 'sync.collections.bookmarks.enabled';
+  const HISTORY   = 'sync.collections.history.enabled';
+  const PASSWORDS = 'sync.collections.passwords.enabled';
+  const LOGGED_OUT_SCREEN = 'loggedout';
+  const LOGGED_IN_SCREEN = 'loggedin';
+
+  const LOGGED_OUT_SCREEN_ELEMENTS = [{
+    name: 'login',
+    event: 'click',
+    listener: 'enable'
+  }];
+
+  const LOGGED_IN_SCREEN_ELEMENTS = [{
+    name: 'logout',
+    event: 'click',
+    listener: 'disable'
+  }, {
+    name: 'user'
+  }, {
+    name: 'syncNow',
+    event: 'click',
+    listener: 'sync'
+  }, {
+    name: 'tos',
+    event: 'click',
+    listener: 'openTos'
+  }, {
+    name: 'privacy',
+    event: 'click',
+    listener: 'openPrivacy'
+  }, {
+    name: 'collectionsBookmarks'
+  }, {
+    name: 'collectionsHistory'
+  }, {
+    name: 'collectionsPasswords'
+  }, {
+    name: 'lastSync'
+  }, {
+    name: 'unverified'
+  }, {
+    name: 'emptyAccount'
+  }];
+
+  // Global spies and stubs.
+  var alertSpy;
+  var disableStub;
+  var enableStub;
+  var getInfoStub;
+  var observeSpy;
+  var syncStub;
+
+  function suiteSetupCommon() {
+    var panel = Panel();
+    panel.onInit(document.body);
+    return panel.syncPanel;
+  }
+
+  // Subject spies and stubs.
+  var cleanSpy;
+  var hideEmptyAccountSpy;
+  var refreshSpy;
+  var showEmptyAccountSpy;
+  var showLastSyncSpy;
+  var showScreenSpy;
+  var showSyncNowSpy;
+  var showUnverifiedSpy;
+  var showUserSpy;
+
+  function setSubjectSpiesAndStubs(subject) {
+    cleanSpy = sinon.spy(subject, 'clean');
+    hideEmptyAccountSpy = sinon.spy(subject, 'hideEmptyAccount');
+    refreshSpy = sinon.spy(subject, 'refresh');
+    showEmptyAccountSpy = sinon.spy(subject, 'showEmptyAccount');
+    showLastSyncSpy = sinon.spy(subject, 'showLastSync');
+    showScreenSpy = sinon.spy(subject, 'showScreen');
+    showSyncNowSpy = sinon.spy(subject, 'showSyncNow');
+    showUnverifiedSpy = sinon.spy(subject, 'showUnverified');
+    showUserSpy = sinon.spy(subject, 'showUser');
+  }
+
+  function restoreSubjectSpiesAndStubs() {
+    cleanSpy.restore();
+    hideEmptyAccountSpy.restore();
+    refreshSpy.restore();
+    showEmptyAccountSpy.restore();
+    showLastSyncSpy.restore();
+    showScreenSpy.restore();
+    showSyncNowSpy.restore();
+    showUnverifiedSpy.restore();
+    showUserSpy.restore();
+  }
+
+  function setListenerSpies(subject, listenerSpies) {
+    LOGGED_IN_SCREEN_ELEMENTS.forEach(element => {
+      if (!element || !element.listener) {
+        return;
+      }
+      var spy = sinon.spy(subject, element.listener);
+      listenerSpies.set(element.name, spy);
+    });
+    LOGGED_OUT_SCREEN_ELEMENTS.forEach(element => {
+      if (!element || !element.listener) {
+        return;
+      }
+      var spy = sinon.spy(subject, element.listener);
+      listenerSpies.set(element.name, spy);
+    });
+  }
+
+  function restoreListenerSpies(listenerSpies) {
+    LOGGED_IN_SCREEN_ELEMENTS.forEach(element => {
+      if (!element || !element.listener) {
+        return;
+      }
+      var spy = listenerSpies.get(element.name);
+      spy.restore();
+      listenerSpies.delete(element.name);
+    });
+    LOGGED_OUT_SCREEN_ELEMENTS.forEach(element => {
+      var spy = listenerSpies.get(element.name);
+      spy.restore();
+      listenerSpies.delete(element.name);
+    });
+  }
+
+  suiteSetup(done => {
+    loadBodyHTML('_firefox_sync.html');
+
+    realAddIdleObserver = navigator.addIdleObserver;
+    navigator.addIdleObserver = function() {};
+
+    Object.defineProperty(navigator, 'onLine', {
+      configurable: true,
+      get: function() {
+        return isOnline;
+      }
+    });
+
+    var map = {
+      '*': {
+        'modules/dialog_service': 'unit/mock_dialog_service',
+        'modules/settings_panel': 'unit/mock_settings_panel',
+        'shared/settings_listener': 'shared_mocks/mock_settings_listener',
+        'shared/lazy_loader': 'shared_mocks/mock_lazy_loader'
+      }
+    };
+
+    testRequire([
+      'modules/dialog_service',
+      'modules/settings_panel',
+      'shared/settings_listener',
+      'modules/sync_manager_bridge',
+      'panels/firefox_sync/panel',
+      'shared_mocks/mock_lazy_loader',
+      'panels/firefox_sync/firefox_sync',
+    ], map, (MockDialogService,
+             MockSettingsPanel, MockSettingsListener,
+             SyncManagerBridge, Panel, MockLazyLoader,
+             FirefoxSyncPanel) => {
+       MockSettingsPanel.mInnerFunction = (options) => {
+        var obj = {};
+        for (var key in options) {
+          obj[key] = options[key];
+        }
+        return obj;
+      };
+
+      this.Panel = Panel;
+      this.SyncManagerBridge = SyncManagerBridge;
+      this.LazyLoader = MockLazyLoader;
+      this.FirefoxSyncPanel = FirefoxSyncPanel;
+
+      alertSpy = this.sinon.spy(MockDialogService, 'alert');
+      observeSpy = this.sinon.spy(MockSettingsListener, 'observe');
+      getInfoStub = this.sinon.stub(SyncManagerBridge, 'getInfo', () => {
+        return Promise.resolve();
+      });
+      disableStub = this.sinon.stub(SyncManagerBridge, 'disable');
+      syncStub = this.sinon.stub(SyncManagerBridge, 'sync');
+      enableStub = this.sinon.stub(SyncManagerBridge, 'enable');
+
+      realMozIntl = window.mozIntl;
+      window.mozIntl = MockMozIntl;
+
+      realMozL10n = document.l10n;
+      document.l10n = MockL10n;
+
+      done();
+    });
+  });
+
+  suiteTeardown(() => {
+    delete navigator.onLine;
+    alertSpy.restore();
+    enableStub.restore();
+    disableStub.restore();
+    getInfoStub.restore();
+    observeSpy.restore();
+    syncStub.restore();
+    window.mozIntl = realMozIntl;
+    document.l10n = realMozL10n;
+  });
+
+  teardown(() => {
+    alertSpy.reset();
+    enableStub.reset();
+    disableStub.reset();
+    getInfoStub.reset();
+    syncStub.reset();
+  });
+
+  suite('Initial state', () => {
+    var subject;
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+    });
+
+    suiteTeardown(() => {
+      subject = null;
+    });
+
+    test('Integrity', () => {
+      assert.ok(subject !== undefined);
+      assert.ok(SyncManagerBridge !== undefined);
+      assert.ok(subject.screens.loggedIn !== undefined);
+      assert.ok(subject.screens.loggedOut !== undefined);
+    });
+
+    test('Settings should be observed', () => {
+      this.sinon.assert.calledThrice(observeSpy);
+      assert.equal(observeSpy.getCall(0).args[0], BOOKMARKS);
+      assert.equal(observeSpy.getCall(1).args[0], HISTORY);
+      assert.equal(observeSpy.getCall(2).args[0], PASSWORDS);
+    });
+  });
+
+  suite('Collection settings observers', () => {
+    var subject;
+    var maybeEnableSyncNowSpy;
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+      subject.showScreen(LOGGED_IN_SCREEN);
+    });
+
+    suiteTeardown(() => {
+      subject = null;
+    });
+
+    setup(() => {
+      maybeEnableSyncNowSpy = this.sinon.spy(subject, 'maybeEnableSyncNow');
+    });
+
+    teardown(() => {
+      maybeEnableSyncNowSpy.restore();
+    });
+
+    [{
+      setting: HISTORY,
+      enabled: true
+    }, {
+      setting: HISTORY,
+      enabled: false
+    }, {
+      setting: PASSWORDS,
+      enabled: true
+    }, {
+      setting: PASSWORDS,
+      enabled: false
+    }].forEach(config => {
+      test((config.enabled ? 'Enabling ' : 'Disabling ') + config.setting +
+           ' should be observed', done => {
+        subject.collections.set(config.setting, !config.enabled);
+        MockSettingsListener.mTriggerCallback(config.setting, config.enabled);
+        setTimeout(() => {
+          var value = subject.collections.get(config.setting);
+          config.enabled ? assert.ok(value)
+                         : assert.isUndefined(value);
+          this.sinon.assert.calledOnce(maybeEnableSyncNowSpy);
+          done();
+        });
+      });
+    });
+  });
+
+  suite('onShow', () => {
+    var panel;
+    var subject;
+
+    suiteSetup(() => {
+      panel = Panel();
+      panel.onInit(document.body);
+      subject = panel.syncPanel;
+      setSubjectSpiesAndStubs(subject);
+      panel.onShow();
+    });
+
+    suiteTeardown(() => {
+      panel = null;
+      subject = null;
+      restoreSubjectSpiesAndStubs();
+    });
+
+    test('onShow should refresh', () => {
+      this.sinon.assert.calledOnce(refreshSpy);
+      this.sinon.assert.calledOnce(getInfoStub);
+    });
+  });
+
+  suite('onHide', () => {
+    var panel;
+    var subject;
+
+    suiteSetup(() => {
+      panel = Panel();
+      panel.onInit(document.body);
+      subject = panel.syncPanel;
+      setSubjectSpiesAndStubs(subject);
+      panel.onHide();
+    });
+
+    suiteTeardown(() => {
+      panel = null;
+      subject = null;
+      restoreSubjectSpiesAndStubs();
+    });
+
+    test('onHide should clean', () => {
+      this.sinon.assert.calledOnce(cleanSpy);
+    });
+  });
+
+  suite('onsyncchange "disabled"', () => {
+    var subject;
+
+    var listenerSpies = new Map();
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+      setSubjectSpiesAndStubs(subject);
+      setListenerSpies(subject, listenerSpies);
+      subject.onsyncchange({
+        state: 'disabled'
+      });
+    });
+
+    suiteTeardown(() => {
+      subject = null;
+      restoreSubjectSpiesAndStubs();
+      restoreListenerSpies(listenerSpies);
+    });
+
+    test('onsyncchange disabled should show logged out screen', () => {
+      this.sinon.assert.calledOnce(showScreenSpy);
+      assert.equal(showScreenSpy.getCall(0).args[0], LOGGED_OUT_SCREEN);
+      this.sinon.assert.calledOnce(cleanSpy);
+      assert.ok(!subject.screens.loggedOut.hidden);
+      assert.ok(subject.screens.loggedIn.hidden);
+    });
+
+    test('Logged out screen elements should be defined', () => {
+      LOGGED_OUT_SCREEN_ELEMENTS.forEach(element => {
+        assert.ok(subject.elements[element.name]);
+      });
+    });
+
+    test('Logged in screen elements should NOT be defined', () => {
+      LOGGED_IN_SCREEN_ELEMENTS.forEach(element => {
+        assert.isNull(subject.elements[element.name]);
+      });
+    });
+
+    LOGGED_OUT_SCREEN_ELEMENTS.forEach(element => {
+      if (!element || !element.event) {
+        return;
+      }
+      test(element.name + ' ' + element.event + ' listener should be set',
+        () => {
+        subject.elements[element.name][element.event]();
+        var spy = listenerSpies.get(element.name);
+        this.sinon.assert.calledOnce(spy);
+      });
+    });
+
+    test('Should have enabled "Get Started" button', () => {
+      expect(subject.elements.login).to.be.an('object');
+      expect(subject.elements.login.getAttribute('data-l10n-id'))
+        .to.equals('fxsync-get-started');
+      expect(subject.elements.login.disabled).to.equals(false);
+    });
+  });
+
+  suite('onsyncchange "errored"', () => {
+    var subject;
+
+    var listenerSpies = new Map();
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+    });
+
+    suiteTeardown(() => {
+      subject = null;
+    });
+
+    setup(() => {
+      setSubjectSpiesAndStubs(subject);
+      setListenerSpies(subject, listenerSpies);
+    });
+
+    teardown(() => {
+      restoreSubjectSpiesAndStubs();
+      restoreListenerSpies(listenerSpies);
+    });
+
+    test('onsyncchange errored ERROR_INVALID_SYNC_ACCOUNT ' +
+         'should show logged in screen', () => {
+      [ERROR_INVALID_SYNC_ACCOUNT,
+       ERROR_UNVERIFIED_ACCOUNT].forEach(error => {
+        showScreenSpy.reset();
+        subject.onsyncchange({
+          state: 'errored',
+          error: error
+        });
+        setTimeout(() => {
+          this.sinon.assert.calledOnce(showScreenSpy);
+          this.sinon.assert.notCalled(cleanSpy);
+          assert.equal(showScreenSpy.getCall(0).args[0], LOGGED_IN_SCREEN);
+          assert.ok(subject.screens.loggedOut.hidden);
+          assert.ok(!subject.screens.loggedIn.hidden);
+          LOGGED_IN_SCREEN_ELEMENTS.forEach(element => {
+            assert.ok(subject.elements[element.name]);
+          });
+          LOGGED_OUT_SCREEN_ELEMENTS.forEach(element => {
+            assert.isNull(subject.elements[element.name]);
+          });
+
+          if (error == ERROR_INVALID_SYNC_ACCOUNT) {
+            this.sinon.assert.calledOnce(showEmptyAccountSpy);
+            assert.ok(!subject.elements.emptyAccount.hidden);
+          }
+
+          if (error == ERROR_UNVERIFIED_ACCOUNT) {
+            this.sinon.assert.calledOnce(showUnverifiedSpy);
+            assert.ok(!subject.elements.unverified.hidden);
+          }
+        });
+      });
+    });
+  });
+
+  suite('onsyncchange "enabling"', () => {
+    var subject;
+
+    var listenerSpies = new Map();
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+      setSubjectSpiesAndStubs(subject);
+      setListenerSpies(subject, listenerSpies);
+      subject.onsyncchange({
+        state: 'enabling'
+      });
+    });
+
+    suiteTeardown(() => {
+      subject = null;
+      restoreSubjectSpiesAndStubs();
+      restoreListenerSpies(listenerSpies);
+    });
+
+    test('onsyncchange enabling should show logged out screen', () => {
+      expect(showScreenSpy.calledOnce).to.equals(true);
+      expect(showScreenSpy.getCall(0).args[0]).to.equals(LOGGED_OUT_SCREEN);
+      expect(subject.screens.loggedOut.hidden).to.equals(false);
+      expect(subject.screens.loggedIn.hidden).to.equals(true);
+    });
+
+    test('Logged out screen elements should be defined', () => {
+      LOGGED_OUT_SCREEN_ELEMENTS.forEach(element => {
+        expect(subject.elements[element.name]).to.be.an('object');
+      });
+    });
+
+    test('Logged in screen elements should NOT be defined', () => {
+      LOGGED_IN_SCREEN_ELEMENTS.forEach(element => {
+        expect(subject.elements[element.name]).to.equals(null);
+      });
+    });
+
+    test('Should have disabled "Signing..." button', () => {
+      expect(subject.elements.login).to.be.an('object');
+      expect(subject.elements.login.getAttribute('data-l10n-id'))
+        .to.equals('fxsync-signing');
+      expect(subject.elements.login.disabled).to.equals(true);
+    });
+  });
+
+  suite('onsyncchange "enabled"', () => {
+    var subject;
+    var email = 'user@domain.org';
+
+    var disabledElements = ['syncNow'];
+
+    var listenerSpies = new Map();
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+      setSubjectSpiesAndStubs(subject);
+      setListenerSpies(subject, listenerSpies);
+      subject.onsyncchange({
+        state: 'enabled',
+        user: email
+      });
+    });
+
+    suiteTeardown(() => {
+      subject = null;
+      restoreSubjectSpiesAndStubs();
+      restoreListenerSpies(listenerSpies);
+    });
+
+    test('onsyncchange enabled should show logged in screen', () => {
+      this.sinon.assert.calledOnce(showScreenSpy);
+      assert.equal(showScreenSpy.getCall(0).args[0], LOGGED_IN_SCREEN);
+      assert.ok(subject.screens.loggedOut.hidden);
+      assert.ok(!subject.screens.loggedIn.hidden);
+    });
+
+    test('Sync Now button should be disabled', () => {
+      this.sinon.assert.calledOnce(showSyncNowSpy);
+      assert.ok(subject.elements.syncNow.disabled);
+    });
+
+    test('Unverified should be hidden', () => {
+      assert.ok(subject.elements.unverified.hidden);
+    });
+
+    test('User email should be shown', () => {
+      this.sinon.assert.calledOnce(showUserSpy);
+      assert.equal(subject.elements.user.textContent, email);
+    });
+
+    test('Last sync label should be hidden', () => {
+      this.sinon.assert.calledOnce(showLastSyncSpy);
+      assert.ok(subject.elements.lastSync.classList.contains('hidden'));
+    });
+
+    test('Empty account should be hidden', () => {
+      this.sinon.assert.calledOnce(hideEmptyAccountSpy);
+      assert.ok(subject.elements.emptyAccount.hidden);
+    });
+
+    test('Logged in screen elements should be defined', () => {
+      LOGGED_IN_SCREEN_ELEMENTS.forEach(element => {
+        assert.ok(subject.elements[element.name]);
+      });
+    });
+
+    test('Logged out screen elements should NOT be defined', () => {
+      LOGGED_OUT_SCREEN_ELEMENTS.forEach(element => {
+        assert.isNull(subject.elements[element.name]);
+      });
+    });
+
+    LOGGED_IN_SCREEN_ELEMENTS.forEach(element => {
+      if (!element || !element.event) {
+        return;
+      }
+      test(element.name + ' ' + element.event + ' listener should be set',
+           () => {
+        subject.elements[element.name][element.event]();
+        var spy = listenerSpies.get(element.name);
+        disabledElements.indexOf(element.name) > -1 ?
+          this.sinon.assert.notCalled(spy) :
+          this.sinon.assert.calledOnce(spy);
+      });
+    });
+  });
+
+  suite('onsyncchange "enabled" with error', () => {
+    var subject;
+    var email = 'user@domain.org';
+    var error = 'error';
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+      setSubjectSpiesAndStubs(subject);
+    });
+
+    suiteTeardown(() => {
+      subject = null;
+      restoreSubjectSpiesAndStubs();
+    });
+
+    setup(() => {
+      subject.onsyncchange({
+        state: 'enabled',
+        user: email,
+        error: error
+      });
+    });
+
+    teardown(() => {
+      error = ERROR_INVALID_SYNC_ACCOUNT;
+    });
+
+    test('unknown error should not show empty account',
+      () => {
+      this.sinon.assert.notCalled(showEmptyAccountSpy);
+      assert.ok(subject.elements.emptyAccount.hidden);
+    });
+
+    test('ERROR_INVALID_SYNC_ACCOUNT should show empty account', () => {
+      this.sinon.assert.calledOnce(showEmptyAccountSpy);
+      assert.ok(!subject.elements.emptyAccount.hidden);
+    });
+  });
+
+  suite('onsyncchange "syncing"', () => {
+    var subject;
+
+    var disabledElements = ['syncNow'];
+
+    var listenerSpies = new Map();
+
+    var email = 'user@domain.org';
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+      setSubjectSpiesAndStubs(subject);
+      setListenerSpies(subject, listenerSpies);
+      subject.onsyncchange({
+        state: 'syncing',
+        user: email
+      });
+    });
+
+    suiteTeardown(() => {
+      subject = null;
+      restoreSubjectSpiesAndStubs();
+      restoreListenerSpies(listenerSpies);
+    });
+
+    test('onsyncchange syncing should show logged in screen', () => {
+      this.sinon.assert.calledOnce(showScreenSpy);
+      assert.equal(showScreenSpy.getCall(0).args[0], LOGGED_IN_SCREEN);
+      assert.ok(subject.screens.loggedOut.hidden);
+      assert.ok(!subject.screens.loggedIn.hidden);
+    });
+
+    test('User email should be shown', () => {
+      this.sinon.assert.calledOnce(showUserSpy);
+      assert.equal(subject.elements.user.textContent, email);
+    });
+
+    test('Sync Now button and collection switches should be disabled', () => {
+      assert.ok(subject.elements.syncNow.disabled);
+      assert.ok(subject.elements.collectionsHistory.disabled);
+      assert.ok(subject.elements.collectionsPasswords.disabled);
+    });
+
+    test('"Syncing" should be shown', () => {
+      assert.equal(subject.elements.syncNow.dataset.l10nId, 'fxsync-syncing');
+    });
+
+    test('Logged in screen elements should be defined', () => {
+      LOGGED_IN_SCREEN_ELEMENTS.forEach(element => {
+        assert.ok(subject.elements[element.name]);
+      });
+    });
+
+    test('Logged out screen elements should NOT be defined', () => {
+      LOGGED_OUT_SCREEN_ELEMENTS.forEach(element => {
+        assert.isNull(subject.elements[element.name]);
+      });
+    });
+
+    LOGGED_IN_SCREEN_ELEMENTS.forEach(element => {
+      if (!element || !element.event) {
+        return;
+      }
+      test(element.name + ' ' + element.event + ' listener should be set',
+           () => {
+        subject.elements[element.name][element.event]();
+        var spy = listenerSpies.get(element.name);
+        disabledElements.indexOf(element.name) > -1 ?
+          this.sinon.assert.notCalled(spy) :
+          this.sinon.assert.calledOnce(spy);
+      });
+    });
+  });
+
+  suite('onsyncchange "errored" - ERROR_UNVERIFIED_ACCOUNT', () => {
+    var subject;
+
+    var email = 'user@domain.org';
+
+    var disabledElements = [
+      'syncNow',
+      'collectionsHistory',
+      'collectionsPasswords'
+    ];
+
+    var listenerSpies = new Map();
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+      setSubjectSpiesAndStubs(subject);
+      setListenerSpies(subject, listenerSpies);
+      subject.onsyncchange({
+        state: 'errored',
+        user: email,
+        error: ERROR_UNVERIFIED_ACCOUNT
+      });
+    });
+
+    suiteTeardown(() => {
+      subject = null;
+      restoreSubjectSpiesAndStubs();
+      restoreListenerSpies(listenerSpies);
+    });
+
+    test('onsyncchange errored with ERROR_UNVERIFIED_ACCOUNT '+
+         'should show logged in screen', () => {
+      this.sinon.assert.calledOnce(showScreenSpy);
+      assert.equal(showScreenSpy.getCall(0).args[0], LOGGED_IN_SCREEN);
+      assert.ok(subject.screens.loggedOut.hidden);
+      assert.ok(!subject.screens.loggedIn.hidden);
+    });
+
+    test('Unverified screen', () => {
+      this.sinon.assert.calledOnce(showUserSpy);
+      assert.equal(subject.elements.user.textContent, email);
+      this.sinon.assert.calledOnce(showLastSyncSpy);
+      disabledElements.forEach(element => {
+        assert.ok(subject.elements[element].disabled);
+      });
+      assert.equal(subject.elements.unverified.hidden, false);
+    });
+
+    test('Logged in screen elements should be defined', () => {
+      LOGGED_IN_SCREEN_ELEMENTS.forEach(element => {
+        assert.ok(subject.elements[element.name]);
+      });
+    });
+
+    test('Logged out screen elements should NOT be defined', () => {
+      LOGGED_OUT_SCREEN_ELEMENTS.forEach(element => {
+        assert.isNull(subject.elements[element.name]);
+      });
+    });
+
+    LOGGED_IN_SCREEN_ELEMENTS.forEach(element => {
+      if (!element || !element.event) {
+        return;
+      }
+      test(element.name + ' ' + element.event + ' listener should be set',
+           () => {
+        subject.elements[element.name][element.event]();
+        var spy = listenerSpies.get(element.name);
+        disabledElements.indexOf(element.name) > -1 ?
+          this.sinon.assert.notCalled(spy) :
+          this.sinon.assert.calledOnce(spy);
+      });
+    });
+  });
+
+  suite('onsyncchange "errored" - ignored error', () => {
+    var subject;
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+      setSubjectSpiesAndStubs(subject);
+      subject.onsyncchange({
+        state: 'errored',
+        error: ERROR_DIALOG_CLOSED_BY_USER
+      });
+    });
+
+    suiteTeardown(() => {
+      subject = null;
+      restoreSubjectSpiesAndStubs();
+    });
+
+    test('onsyncchange errored with ERROR_DIALOG_CLOSED_BY_USER '+
+         'should be ignored', () => {
+      this.sinon.assert.notCalled(showScreenSpy);
+    });
+  });
+
+  suite('onsyncchange "errored" - known errors', () => {
+    var subject;
+    const ERROR_OFFLINE = 'fxsync-error-offline';
+    const ERROR_NO_KEY_FETCH_TOKEN = 'fxsync-error-no-key-fetch-token';
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+      setSubjectSpiesAndStubs(subject);
+    });
+
+    suiteTeardown(() => {
+      subject = null;
+      restoreSubjectSpiesAndStubs();
+    });
+
+    teardown(() => {
+      showScreenSpy.reset();
+      cleanSpy.reset();
+      alertSpy.reset();
+    });
+
+    [ERROR_OFFLINE,
+     ERROR_NO_KEY_FETCH_TOKEN].forEach(error => {
+      test('onsyncchange errored with ' + error +
+           ' should show alert', done => {
+        subject.onsyncchange({
+          state: 'errored',
+          error: error
+        });
+
+        setTimeout(() => {
+          this.sinon.assert.calledOnce(showScreenSpy);
+          this.sinon.assert.calledOnce(cleanSpy);
+          this.sinon.assert.calledOnce(alertSpy);
+          assert.equal(alertSpy.getCall(0).args[0],
+                       error + '-explanation');
+          assert.equal(alertSpy.getCall(0).args[1].title,
+                       error);
+          done();
+        });
+      });
+    });
+  });
+
+  suite('"Sync Now" button', () => {
+    var subject;
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+      subject.showScreen(LOGGED_IN_SCREEN);
+      setSubjectSpiesAndStubs(subject);
+    });
+
+    suiteTeardown(() => {
+      subject = null;
+      restoreSubjectSpiesAndStubs();
+    });
+
+    test('No collections selected should disable "Sync Now" button', done => {
+      assert.ok(subject.elements.syncNow);
+      MockSettingsListener.mTriggerCallback(PASSWORDS, false);
+      setTimeout(() => {
+        assert.ok(subject.elements.syncNow.disabled);
+        done();
+      });
+    });
+
+    test('At least one collection selected should enable "Sync Now" button',
+         done => {
+      assert.ok(subject.elements.syncNow);
+      MockSettingsListener.mTriggerCallback(PASSWORDS, true);
+      setTimeout(() => {
+        assert.ok(!subject.elements.syncNow.disabled);
+        done();
+      });
+    });
+
+    test('"Sync Now" should be disabled while offline', done => {
+      assert.ok(subject.elements.syncNow);
+      assert.ok(!subject.elements.syncNow.disabled);
+      isOnline = false;
+      window.dispatchEvent(new CustomEvent('online'));
+      setTimeout(() => {
+        assert.ok(subject.elements.syncNow.disabled);
+        done();
+      });
+    });
+  });
+
+  suite('showScreen', () => {
+    var subject;
+    var loadElementsSpy;
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+      subject.showScreen(LOGGED_IN_SCREEN);
+      loadElementsSpy = this.sinon.spy(subject, 'loadElements');
+    });
+
+    suiteTeardown(() => {
+      loadElementsSpy.restore();
+      subject = null;
+    });
+
+    test('showScreen should not load elements if they are already loaded',
+         () => {
+      subject.currentScreen = LOGGED_IN_SCREEN;
+      subject.showScreen(LOGGED_IN_SCREEN);
+      this.sinon.assert.notCalled(loadElementsSpy);
+    });
+  });
+
+  suite('showLastSync', () => {
+    var subject;
+    var setAttributesSpy;
+
+    suiteSetup(() => {
+      subject = suiteSetupCommon();
+      subject.showScreen(LOGGED_IN_SCREEN);
+      setAttributesSpy = this.sinon.spy(document.l10n, 'setAttributes');
+    });
+
+    suiteTeardown(() => {
+      subject = null;
+      setAttributesSpy.restore();
+    });
+
+    test('Last sync should not be shown', () => {
+      assert.ok(subject.elements.lastSync.classList.contains('hidden'));
+    });
+
+    test('Last sync should be shown', done => {
+      subject.showLastSync(Date.now());
+      setTimeout(() => {
+        assert.ok(!subject.elements.lastSync.classList.contains('hidden'));
+        assert.ok(setAttributesSpy.calledOnce);
+        var selector = 'span[data-l10n-id=fxsync-last-synced]';
+        var span = subject.elements.lastSync.querySelector(selector);
+        assert.equal(setAttributesSpy.args[0][0], span);
+        assert.equal(setAttributesSpy.args[0][1], 'fxsync-last-synced');
+        assert.deepEqual(setAttributesSpy.args[0][2], {
+          when: 'pretty date'
+        });
+        done();
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/frame/panel_test.js

@@ -0,0 +1,102 @@
+'use strict';
+
+suite('FramePanel', function() {
+  var panelDOM;
+  var framePanel;
+  var mockSettingsPanel;
+  var mockSettingsService;
+  var appOptions = {
+    mozapp: 'fakeApp',
+    src: 'fakeAppSrc'
+  };
+
+  var modules = [
+    'panels/frame/panel',
+    'modules/settings_panel',
+    'modules/settings_service'
+  ];
+
+  var map = {
+    '*': {
+      'modules/settings_panel': 'unit/mock_settings_panel',
+      'modules/settings_service': 'unit/mock_settings_service'
+    }
+  };
+
+  suiteSetup(function(done) {
+    testRequire(modules, map, function(FramePanel, MockSettingsPanel,
+      MockSettingsService) {
+        mockSettingsPanel = MockSettingsPanel;
+        mockSettingsPanel.mInnerFunction = function(options) {
+          return {
+            init: options.onInit,
+            beforeShow: options.onBeforeShow,
+            beforeHide: options.onBeforeHide,
+            hide: options.onHide,
+            _escapeHTML: options._escapeHTML,
+            _onBrowserClose: options._onBrowserClose
+          };
+        };
+
+        mockSettingsService = MockSettingsService;
+        framePanel = FramePanel();
+        done();
+    });
+  });
+
+  setup(function() {
+    panelDOM = document.createElement('div');
+    document.body.appendChild(panelDOM);
+  });
+
+  teardown(function() {
+    document.body.removeChild(panelDOM);
+  });
+
+  suite('when calling onBeforeShow', function() {
+    setup(function() {
+      framePanel.beforeShow(panelDOM, appOptions);
+    });
+
+    test('would create an iframe with related attributes', function() {
+      var frameDOM = panelDOM.querySelector('iframe');
+      assert.equal(appOptions.mozapp, frameDOM.getAttribute('mozapp'));
+      assert.equal(appOptions.src, frameDOM.getAttribute('src'));
+      assert.equal('true', frameDOM.getAttribute('mozbrowser'));
+    });
+  });
+
+  suite('handle mozbrowsershowmodalprompt events', function() {
+    setup(function() {
+      this.sinon.stub(window, 'alert');
+      this.sinon.stub(window, 'prompt');
+      this.sinon.stub(window, 'confirm');
+      framePanel.beforeShow(panelDOM, appOptions);
+    });
+
+    ['alert', 'prompt', 'confirm'].forEach(function(eventName) {
+      test('would handle ' + eventName + ' events', function() {
+        var frameDOM = panelDOM.querySelector('iframe');
+        frameDOM.dispatchEvent(new CustomEvent('mozbrowsershowmodalprompt', {
+          detail: {
+            promptType: eventName
+          }
+        }));
+        assert.isTrue(window[eventName].called);
+      });
+    });
+  });
+
+  suite('handle mozbrowserclose event', function() {
+    setup(function() {
+      this.sinon.spy(mockSettingsService, 'back');
+      framePanel.beforeShow(panelDOM, appOptions);
+    });
+
+    test('would close when app called window.close()', function() {
+      var frameDOM = panelDOM.querySelector('iframe');
+      frameDOM.dispatchEvent(new CustomEvent('mozbrowserclose'));
+      assert.isTrue(mockSettingsService.back.called);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/full_developer_mode/panel_test.js

@@ -0,0 +1,153 @@
+/* global loadBodyHTML*/
+'use strict';
+
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('Full developer mode panel > ', function() {
+  var MockSettingsCache;
+  var MockSettingsService;
+  var MockDialogService;
+  var FullDeveloperModePanel;
+
+  var panel;
+
+  var modules = [
+    'panels/full_developer_mode/panel'
+  ];
+  var map = {
+    '*': {
+      'modules/settings_cache': 'MockSettingsCache',
+      'modules/settings_service': 'MockSettingsService',
+      'modules/dialog_service': 'MockDialogService',
+      'modules/panel': 'MockPanel'
+    }
+  };
+
+  setup(function(done) {
+    loadBodyHTML('_full_developer_mode.html');
+
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+
+    // Define MockSettingsCache
+    MockSettingsCache = {
+      _settings: {},
+      getSettings: function(callback) {
+        callback(this._settings);
+      }
+    };
+    define('MockSettingsCache', function() {
+      return MockSettingsCache;
+    });
+
+    // Define MockSettingsService
+    MockSettingsService = {
+      back: sinon.stub()
+    };
+    define('MockSettingsService', function() {
+      return MockSettingsService;
+    });
+
+    // Define MockDialogService
+    MockDialogService = {
+      show: sinon.stub().returns(Promise.resolve())
+    };
+    define('MockDialogService', function() {
+      return MockDialogService;
+    });
+
+    // Define MockPanel
+    define('MockPanel', function() {
+      return function(options) {
+        return {
+          init: options.onInit.bind(options)
+        };
+      };
+    });
+
+    requireCtx(modules, function(_FullDeveloperModePanel) {
+      FullDeveloperModePanel = _FullDeveloperModePanel;
+      done();
+    });
+  });
+
+  teardown(function() {
+    document.body.innerHTML = '';
+  });
+
+  suite('full developer mode warning', function() {
+    var fullDevModeWarning;
+    var okBtn;
+    var cancelBtn;
+
+    setup(function() {
+      fullDevModeWarning = document.querySelector('.full-dev-mode-warning');
+      okBtn = fullDevModeWarning.querySelector('button[type="submit"]');
+      cancelBtn = fullDevModeWarning.querySelector('button[type="reset"]');
+      MockSettingsCache._settings = {
+        'developer.menu.enabled': true
+      };
+      panel = FullDeveloperModePanel();
+    });
+
+    suite('visibility', function() {
+      test('developer menu is enabled', function() {
+        panel.init(document.body);
+        assert.isFalse(fullDevModeWarning.hidden);
+      });
+
+      test('developer menu is disabled', function() {
+        MockSettingsCache._settings['developer.menu.enabled'] = false;
+        panel.init(document.body);
+        assert.isTrue(fullDevModeWarning.hidden);
+      });
+    });
+
+    test('click on the ok button', function() {
+      panel.init(document.body);
+      okBtn.dispatchEvent(new Event('click'));
+      sinon.assert.calledWith(MockDialogService.show,
+        'full-developer-mode-final-warning');
+    });
+
+    test('click on the cancel button', function() {
+      panel.init(document.body);
+      cancelBtn.dispatchEvent(new Event('click'));
+      sinon.assert.called(MockSettingsService.back);
+    });
+  });
+
+  suite('enable developer menu warning', function() {
+    var devMenuDisabledWarning;
+    var closeBtn;
+
+    setup(function() {
+      devMenuDisabledWarning =
+        document.querySelector('.dev-menu-disabled-warning');
+      closeBtn = devMenuDisabledWarning.querySelector('button[type="submit"]');
+      MockSettingsCache._settings = {
+        'developer.menu.enabled': false
+      };
+      panel = FullDeveloperModePanel();
+    });
+
+    suite('visibility', function() {
+      test('developer menu is enabled', function() {
+        panel.init(document.body);
+        assert.isFalse(devMenuDisabledWarning.hidden);
+      });
+
+      test('developer menu is disabled', function() {
+        MockSettingsCache._settings['developer.menu.enabled'] = true;
+        panel.init(document.body);
+        assert.isTrue(devMenuDisabledWarning.hidden);
+      });
+    });
+
+    test('click on the close button', function() {
+      panel.init(document.body);
+      closeBtn.dispatchEvent(new Event('click'));
+      sinon.assert.called(MockSettingsService.back);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/full_developer_mode_final_warning/panel_test.js

@@ -0,0 +1,107 @@
+/* global loadBodyHTML*/
+'use strict';
+
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('Full developer mode final warning > ', function() {
+  var FinalWarning;
+
+  var realL10n;
+  var realMozPower;
+
+  var warning;
+
+  var modules = [
+    'panels/full_developer_mode_final_warning/panel'
+  ];
+  var map = {
+    '*': {
+      'modules/dialog_panel': 'MockDialogPanel'
+    }
+  };
+
+  setup(function(done) {
+    loadBodyHTML('_full_developer_mode_final_warning.html');
+
+    realL10n = document.l10n;
+    document.l10n = {
+      setAttributes: sinon.stub()
+    };
+    realMozPower = navigator.mozPower;
+    navigator.mozPower = {
+      factoryReset: sinon.stub()
+    };
+
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+
+    // Define MockDialogPanel
+    define('MockDialogPanel', function() {
+      return function(options) {
+        return {
+          _initialized: false,
+          init: function(panel) {
+            options.onInit(panel);
+            panel.querySelector('button[type="submit"]').onclick =
+              options.onSubmit.bind(options);
+          },
+          beforeShow: function(panel) {
+            if (!this._initialized) {
+              this._initialized = true;
+              this.init(panel);
+            }
+            options.onBeforeShow(panel);
+          }
+        };
+      };
+    });
+
+    requireCtx(modules, function(_FinalWarning) {
+      FinalWarning = _FinalWarning;
+      done();
+    });
+  });
+
+  teardown(function() {
+    document.body.innerHTML = '';
+    document.l10n = realL10n;
+    navigator.mozPower = realMozPower;
+  });
+
+  suite('full developer mode warning', function() {
+    var okBtn;
+    var cancelBtn;
+    var warningInfo;
+
+    setup(function() {
+      okBtn = document.querySelector('button[type="submit"]');
+      cancelBtn = document.querySelector('button[type="reset"]');
+      warningInfo = document.querySelector('.warning-info');
+      warning = FinalWarning();
+    });
+
+    test('click on the ok button 10 times', function() {
+      warning.beforeShow(document.body);
+      sinon.assert.calledWith(document.l10n.setAttributes, warningInfo,
+        'enable-full-dev-mode-final-warning-msg', {
+          count: 10
+        });
+
+      for (var i = 0; i < 10; i++) {
+        document.l10n.setAttributes.reset();
+        navigator.mozPower.factoryReset.reset();
+        okBtn.dispatchEvent(new Event('click'));
+        if (i === 9) {
+          // Call to factory reset on the 10th click.
+          sinon.assert.calledWith(navigator.mozPower.factoryReset, 'root');
+        } else {
+          sinon.assert.notCalled(navigator.mozPower.factoryReset);
+          sinon.assert.calledWith(document.l10n.setAttributes, warningInfo,
+            'enable-full-dev-mode-final-warning-msg', {
+              count: 9 - i
+            });
+        }
+      }
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/help/support_test.js

@@ -0,0 +1,164 @@
+'use strict';
+
+suite('Help > ', function() {
+  var Help;
+  var MockLazyLoader, MockSettingsCache;
+
+  suiteSetup(function(done) {
+    testRequire([
+        'shared_mocks/mock_lazy_loader',
+        'unit/mock_settings_cache',
+        'panels/help/support'
+      ],
+      { //mock map
+        'panels/help/support': {
+          'module/settings_cache': 'unit/mock_settings_cache',
+          'shared/lazy_loader': 'shared_mocks/mock_lazy_loader'
+        }
+      },
+      function(mockLazyLoader, mockSettingsCache, support) {
+        MockLazyLoader = mockLazyLoader;
+        MockSettingsCache = mockSettingsCache;
+
+        Help = support();
+        done();
+      }
+    );
+  });
+
+  suite('initiation', function() {
+    var stubGetSupportInfo;
+    setup(function() {
+      var div = document.createElement('div');
+      var mock_elements = {};
+      mock_elements.userGuide = div;
+      mock_elements.help = div;
+      mock_elements.supportText = div;
+      mock_elements.supportNumber = div;
+
+      stubGetSupportInfo = this.sinon.stub(Help, '_getSupportInfo');
+      Help.init(mock_elements, null);
+    });
+
+    teardown(function() {
+      stubGetSupportInfo.restore();
+      Help.uninit();
+    });
+
+    test('we would call getSupportInfo in init', function() {
+      assert.ok(stubGetSupportInfo.called);
+    });
+  });
+
+  suite('getSupportInfo', function() {
+    var stubCallback;
+    setup(function() {
+      this.sinon.stub(MockLazyLoader, 'getJSON', function() {
+        return Promise.resolve({});
+      });
+      stubCallback = this.sinon.stub();
+    });
+
+    test('we would call getJSON in getSupportInfo', function() {
+      Help._getSupportInfo(stubCallback);
+      assert.ok(MockLazyLoader.getJSON.called);
+    });
+
+    test('we would not call getJSON when _supportInfo exist', function() {
+      Help._supportInfo = {
+        'onlinesupport': '',
+        'callsupport': ''
+      };
+      Help._getSupportInfo(stubCallback);
+      assert.ok(!MockLazyLoader.getJSON.called);
+    });
+  });
+
+  suite('renderSupportInfo without SIM', function() {
+    var stubSetOnlineSupport;
+    var stubSetCallSupport;
+    var blankSupportInfo = {
+      'support.onlinesupport.title': '',
+      'support.onlinesupport.href': '',
+      'support.callsupport1.title': '',
+      'support.callsupport1.href': ''
+    };
+    setup(function() {
+      Help._supportInfo = {
+        'onlinesupport': '',
+        'callsupport': ''
+      };
+      stubSetOnlineSupport =
+        this.sinon.stub(Help, '_setOnlineSupportInfo');
+      stubSetCallSupport =
+        this.sinon.stub(Help, '_setCallSupportInfo');
+    });
+
+    teardown(function() {
+      stubSetOnlineSupport.restore();
+      stubSetCallSupport.restore();
+      Help.uninit();
+    });
+
+    test('extra info not rendered when no supportinfo', function() {
+      Help._renderSupportInfo(blankSupportInfo);
+
+      assert.isTrue(stubSetOnlineSupport.calledWith(''));
+      assert.isTrue(stubSetCallSupport.calledWith(''));
+    });
+
+    test('extra info rendered', function() {
+      Help._renderSupportInfo({
+        'support.onlinesupport.title': 'mozilla',
+        'support.onlinesupport.href': 'www.mozilla.org',
+        'support.callsupport1.title': 'mobile',
+        'support.callsupport1.href': '123456',
+        'support.callsupport2.title': 'fxos',
+        'support.callsupport2.href': '789012',
+      });
+      assert.isTrue(stubSetOnlineSupport.calledWith(
+        { title: 'mozilla', href: 'www.mozilla.org' }
+      ));
+      assert.isTrue(stubSetCallSupport.calledWith(
+        [ { title: 'mobile', href: '123456' },
+          { title: 'fxos', href: '789012' } ]
+      ));
+    });
+  });
+
+  suite('setOnlineSupportInfo', function() {
+    var link;
+    setup(function() {
+      link = Help._createLinkNode({
+        href: 'www.mozilla.org',
+        title: 'mozilla'
+      }, null);
+    });
+
+    test('has link-text class', function() {
+      assert.ok(link.classList.contains('link-text'));
+    });
+
+    test('has correct text content', function() {
+      assert.equal(link.textContent, 'mozilla');
+    });
+  });
+
+  suite('setCallSupportInfo', function() {
+    var link;
+    setup(function() {
+      link = Help._createLinkNode({
+        href: '1234567',
+        title: 'mozilla'
+      }, 'tel');
+    });
+
+    test('has link-text class', function() {
+      assert.ok(link.classList.contains('link-text'));
+    });
+
+    test('has correct tel content', function() {
+      assert.equal(link.textContent, 'mozilla (1234567)');
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/homescreen_details/homescreen_details_test.js

@@ -0,0 +1,120 @@
+/* global MockNavigatorSettings */
+'use strict';
+
+require('/shared/test/unit/mocks/mock_navigator_moz_settings.js');
+
+suite('Homescreens_details > ', () => {
+  var modules = [
+    'shared_mocks/mock_manifest_helper',
+    'panels/homescreen_details/homescreen_details'
+  ];
+
+  var maps = {
+    '*': {
+      'modules/settings_service': 'unit/mock_settings_service',
+      'modules/navigator/mozApps': 'unit/mock_moz_apps',
+      'shared/manifest_helper': 'shared_mocks/mock_manifest_helper'
+    }
+  };
+
+  const DEFAULT_MANIFEST = 'app://homescreen.gaiamobile.org/manifest.webapp';
+
+  var elements = {
+    icon: document.createElement('img'),
+    headerTitle: document.createElement('div'),
+
+    detailTitle: document.createElement('div'),
+    detailName: document.createElement('div'),
+    detailVersion: document.createElement('div'),
+    detailDescription: document.createElement('div'),
+    detailURL: document.createElement('div'),
+    detailURLLink: document.createElement('div'),
+    uninstallButton: document.createElement('div')
+  };
+  var options = {
+    name: 'home',
+    author: 'author',
+    version: '0.0.1',
+    description: 'test homescreen',
+    removable: true,
+    app: {
+      manifestURL: 'app://testhome.gaiamobile.org'
+    }
+  };
+  var homescreensDetails;
+  var mockManifestHelper;
+  var realNavigatorSettings;
+
+  suiteSetup(done => {
+    testRequire(modules, maps, (MockManifestHelper, HomescreensDetails) => {
+      mockManifestHelper = MockManifestHelper;
+
+      realNavigatorSettings = navigator.mozSettings;
+      navigator.mozSettings = MockNavigatorSettings;
+
+      homescreensDetails = HomescreensDetails();
+      done();
+    });
+  });
+
+  suiteTeardown(() => {
+    navigator.mozSettings = realNavigatorSettings;
+    realNavigatorSettings = null;
+  });
+
+  suite('onInit', () => {
+    var uninstallSpy, backSpy;
+
+    setup(() => {
+      uninstallSpy = this.sinon.spy(homescreensDetails, 'uninstall');
+      backSpy = this.sinon.stub(homescreensDetails, 'back');
+
+      homescreensDetails.init(elements);
+      homescreensDetails.onBeforeShow(options);
+      MockNavigatorSettings.mSettings['homescreen.manifestURL'] =
+        options.app.manifestURL;
+    });
+
+    teardown(() => {
+      uninstallSpy.restore();
+      backSpy.restore();
+    });
+
+    test('The manifest URL setting should change when uninstalled', done => {
+      homescreensDetails._elements.uninstallButton
+        .dispatchEvent(new CustomEvent('click'));
+
+      setTimeout(() => {
+        assert.ok(uninstallSpy.called);
+        assert.equal(MockNavigatorSettings.mSettings['homescreen.manifestURL'],
+          DEFAULT_MANIFEST);
+        setTimeout(() => {
+          assert.ok(backSpy.called);
+          done();
+        });
+      });
+    });
+  });
+
+  suite('onBeforeShow', () => {
+    var uninstallSpy;
+
+    setup(() => {
+      uninstallSpy = this.sinon.stub(homescreensDetails, 'uninstall');
+
+      homescreensDetails.init(elements);
+      homescreensDetails.onBeforeShow(options);
+    });
+
+    teardown(() => {
+      uninstallSpy.restore();
+    });
+
+    test('we would set element value in onBeforeShow', () => {
+      assert.equal(homescreensDetails._elements.detailTitle.textContent,
+        options.name);
+      assert.equal(homescreensDetails._elements.detailDescription.textContent,
+        options.description);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/homescreens/homescreen_cols_test.js

@@ -0,0 +1,91 @@
+'use strict';
+
+suite('homescreens > homescreen_cols', () => {
+  var modules = [
+    'modules/mvvm/observable',
+    'unit/mock_homescreen_settings',
+    'panels/homescreens/homescreen_cols'
+  ];
+
+  var maps = {
+    '*': {
+      'shared/homescreens/homescreen_settings': 'unit/mock_homescreen_settings'
+    }
+  };
+
+  const DEFAULT_SELECTED_OPTION = '3';
+
+  var homescreenCols;
+  var mockHomescreenSettings;
+
+  setup(done => {
+    define('MockHomescreenSettings', () => {
+      return {
+        addEventListener: function(key, callback) {
+          if (!this._eventHandlers) {
+            this._eventHandlers = {};
+          }
+          this._eventHandlers[key] = callback;
+        },
+        put: () => {
+        },
+        get: () => {
+          return Promise.resolve(DEFAULT_SELECTED_OPTION);
+        },
+        setStoreName: () => {}
+      };
+    });
+
+    testRequire(modules, maps, (Observable,
+                                MockHomescreenSettings,
+                                HomescreenCols) => {
+      mockHomescreenSettings = MockHomescreenSettings;
+      homescreenCols = HomescreenCols();
+      done();
+    });
+  });
+
+  test('We will update cols to default value after init', done => {
+    setTimeout(() => {
+      assert.equal(homescreenCols.cols, DEFAULT_SELECTED_OPTION);
+      done();
+    });
+  });
+
+  test('When HomescreenSettings is updated, cols is updated too', () => {
+    var fakeGridCols = 4;
+    mockHomescreenSettings._eventHandlers.updated({
+      target: {
+        name: 'grid.cols',
+        value: fakeGridCols
+      }
+    });
+    assert.equal(homescreenCols.cols, fakeGridCols);
+  });
+
+  test('The last value will eventually be set', done => {
+    var lastValue = 9;
+    var resolveFunc;
+    var promise = new Promise(resolve => {
+      resolveFunc = resolve;
+    });
+    this.sinon.stub(mockHomescreenSettings, 'put', () => {
+      return promise;
+    });
+
+    homescreenCols.observe('cols', newValue => {
+      if (newValue === lastValue) {
+        done();
+      }
+    });
+
+    homescreenCols.setCols(3);
+    homescreenCols.setCols(4);
+    homescreenCols.setCols(5);
+    homescreenCols.setCols(6);
+    homescreenCols.setCols(7);
+    homescreenCols.setCols(8);
+    homescreenCols.setCols(lastValue);
+    resolveFunc();
+  });
+});

gaia/apps/settings/test/unit/panels/homescreens/homescreen_name_test.js

@@ -0,0 +1,71 @@
+/* global MockNavigatorSettings */
+'use strict';
+
+require('/shared/test/unit/mocks/mock_navigator_moz_settings.js');
+
+suite('homescreens > homescreen name', () => {
+  var modules = [
+    'shared_mocks/mock_settings_listener',
+    'unit/mock_apps_cache',
+    'panels/homescreens/homescreen_name'
+  ];
+
+  var map = {
+    '*': {
+      'shared/settings_listener': 'shared_mocks/mock_settings_listener',
+      'modules/apps_cache': 'unit/mock_apps_cache'
+    }
+  };
+
+  var homescreenName;
+
+  var realNavigatorSettings;
+  var realSettingsListener;
+
+  var mockAppsCache;
+
+  suiteSetup(() => {
+    realNavigatorSettings = navigator.mozSettings;
+    navigator.mozSettings = MockNavigatorSettings;
+  });
+
+  suiteTeardown(() => {
+    navigator.mozSettings = realNavigatorSettings;
+    realNavigatorSettings = null;
+
+    window.SettingsListener = realSettingsListener;
+  });
+
+  setup(done => {
+    var requireCtx = testRequire([], map, () => {});
+    requireCtx(modules, (MockSettingsListener, MockAppsCache,
+                         HomescreenName) => {
+      homescreenName = HomescreenName();
+      realSettingsListener = window.SettingsListener;
+      window.SettingsListener = MockSettingsListener;
+      mockAppsCache = MockAppsCache;
+      done();
+    });
+  });
+
+  test('_init() should watch name property changes', () => {
+    sinon.stub(homescreenName, '_watchNameChange');
+    homescreenName._init();
+    assert.isTrue(homescreenName._watchNameChange.calledOnce);
+  });
+
+  test('Name is set to a default value', () => {
+    assert.equal(homescreenName.name, '');
+  });
+
+  test('Getting Homescreen.name must call _updateManifestName()', done => {
+    var updateManifestNameStub = sinon.stub(homescreenName,
+      '_updateManifestName');
+    homescreenName.getName();
+    setTimeout(() => {
+      assert.isTrue(updateManifestNameStub.calledOnce);
+      updateManifestNameStub.restore();
+      done();
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/homescreens/panel_test.js

@@ -0,0 +1,137 @@
+/* global loadBodyHTML */
+'use strict';
+
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('homescreens > panel', () => {
+  var modules = [
+    'shared_mocks/mock_settings_listener',
+    'panels/homescreens/panel'
+  ];
+
+  var map = {
+    '*': {
+      'modules/settings_panel': 'MockSettingsPanel',
+      'panels/homescreens/wallpaper': 'MockWallpaper',
+      'panels/homescreens/homescreen_cols': 'MockHomescreenCols',
+      'panels/homescreens/homescreen_name': 'MockHomescreenName',
+      'shared/settings_listener': 'shared_mocks/mock_settings_listener'
+    }
+  };
+
+  var panel;
+  var mockWallpaper;
+  var mockWallpaperSrc;
+  var mockHomescreenCols;
+  var mockHomescreenName;
+  var mockHomescreenNameName;
+
+  suiteSetup(done => {
+    loadBodyHTML('_homescreens.html');
+
+    // Define MockSettingsPanel.
+    define('MockSettingsPanel', () => {
+      return options => {
+        return {
+          init: options.onInit.bind(options),
+          beforeShow: options.onBeforeShow.bind(options),
+          beforeHide: options.onBeforeHide.bind(options)
+        };
+      };
+    });
+
+    // Define MockWallpaper.
+    mockWallpaperSrc = 'mockSrc';
+    mockWallpaper = {
+      wallpaperSrc: mockWallpaperSrc,
+      selectWallpaper: () => {},
+      observe: () => {},
+      unobserve: () => {}
+    };
+    define('MockWallpaper', () => {
+      return () => {
+        return mockWallpaper;
+      };
+    });
+
+    // Define MockHomescreenCols.
+    mockHomescreenCols = {
+      cols: 3,
+      setCols: () => {},
+      observe: () => {},
+      unobserve: () => {}
+    };
+    define('MockHomescreenCols', () => {
+      return () => mockHomescreenCols;
+    });
+
+    // Define MockHomescreenName.
+    mockHomescreenNameName = 'New Home Screen';
+    mockHomescreenName = {
+      name: mockHomescreenNameName,
+      observe: () => {},
+      unobserve: () => {}
+    };
+    define('MockHomescreenName', () => {
+      return () => {
+        return mockHomescreenName;
+      };
+    });
+
+    testRequire(modules, map, (MockSettingsListener, Panel) => {
+      panel = Panel();
+      done();
+    });
+  });
+
+  test('observe wallpaperSrc when onBeforeShow', () => {
+    panel.init(document.body);
+    this.sinon.stub(mockWallpaper, 'observe');
+    panel.beforeShow();
+    assert.ok(mockWallpaper.observe.calledWith('wallpaperSrc'));
+
+    var location = document.location;
+    assert.equal(
+      document.querySelector('.wallpaper-preview').src,
+      location.protocol + '//' + location.host +
+      location.pathname.replace('_sandbox.html', mockWallpaperSrc));
+  });
+
+  test('unobserve wallpaperSrc when onHide', () => {
+    panel.init(document.body);
+    this.sinon.stub(mockWallpaper, 'unobserve');
+    panel.beforeHide();
+    assert.ok(mockWallpaper.unobserve.calledWith('wallpaperSrc'));
+  });
+
+  test('observe name when onBeforeShow', () => {
+    panel.init(document.body);
+    this.sinon.stub(mockHomescreenName, 'observe');
+    panel.beforeShow();
+    assert.ok(mockHomescreenName.observe.calledWith('name'));
+
+    assert.equal(document.querySelector('.current-homescreen').textContent,
+      mockHomescreenNameName);
+  });
+
+  test('unobserve name when onHide', () => {
+    panel.init(document.body);
+    this.sinon.stub(mockHomescreenName, 'unobserve');
+    panel.beforeHide();
+    assert.ok(mockHomescreenName.unobserve.calledWith('name'));
+  });
+
+  test('observe cols when onBeforeShow', () => {
+    panel.init(document.body);
+    this.sinon.stub(mockHomescreenCols, 'observe');
+    panel.beforeShow();
+    assert.ok(mockHomescreenCols.observe.calledWith('cols'));
+  });
+
+  test('unobserve cols when onHide', () => {
+    panel.init(document.body);
+    this.sinon.stub(mockHomescreenCols, 'unobserve');
+    panel.beforeHide();
+    assert.ok(mockHomescreenCols.unobserve.calledWith('cols'));
+  });
+});

gaia/apps/settings/test/unit/panels/homescreens/wallpaper_test.js

@@ -0,0 +1,142 @@
+/* global MockMozActivity */
+'use strict';
+
+require('/shared/test/unit/mocks/mock_moz_activity.js');
+
+suite('homescreens > wallpaper', () => {
+  var modules = [
+    'modules/mvvm/observable',
+    'shared_mocks/mock_settings_listener',
+    'shared_mocks/mock_settings_url',
+    'shared_mocks/mock_omadrm_fl',
+    'panels/homescreens/wallpaper'
+  ];
+
+  var maps = {
+    '*': {
+      'shared/settings_listener': 'shared_mocks/mock_settings_listener',
+      'shared/settings_url': 'shared_mocks/mock_settings_url',
+      'shared/omadrm/fl': 'shared_mocks/mock_omadrm_fl'
+    }
+  };
+
+  var mockSettingsListener;
+  var mockSettingsURL;
+  var mockForwardLock;
+  var wallpaper;
+  var realMozActivity;
+  var clock;
+
+  suiteSetup(done => {
+    testRequire(modules, maps, (Observable, MockSettingsListener,
+                                MockSettingsUrl, MockForwardLock,
+                                Wallpaper) => {
+      wallpaper = Wallpaper();
+      mockSettingsListener = MockSettingsListener;
+      mockSettingsURL = MockSettingsUrl;
+      mockForwardLock = MockForwardLock;
+      done();
+    });
+
+    realMozActivity = window.MozActivity;
+    window.MozActivity = MockMozActivity;
+  });
+
+  suiteTeardown(() => {
+    window.MozActivity = realMozActivity;
+  });
+
+  setup(() => {
+    MockMozActivity.mSetup();
+    clock = sinon.useFakeTimers();
+  });
+
+  teardown(() => {
+    MockMozActivity.mTeardown();
+    clock.restore();
+    // clear the lock so tests that write into settings would not read from
+    // other tests' locks
+    mockSettingsListener.getSettingsLock().clear();
+  });
+
+  test('_init', () => {
+    this.sinon.stub(wallpaper, '_watchWallpaperChange');
+    wallpaper._init();
+    assert.equal(wallpaper._watchWallpaperChange.calledOnce, true);
+  });
+
+  test('select wallpaper', function() {
+    this.sinon.stub(wallpaper, '_triggerActivity');
+    this.sinon.stub(mockForwardLock, 'getKey');
+    wallpaper.selectWallpaper();
+    assert.equal(mockForwardLock.getKey.calledOnce, true);
+    mockForwardLock.getKey.args[0][0]();
+    assert.equal(wallpaper._triggerActivity.calledOnce, true);
+  });
+
+  test('_watchWallpaperChange', () => {
+    var value = 'testlink';
+    wallpaper.wallpaperURL = new mockSettingsURL();
+    wallpaper._watchWallpaperChange();
+    mockSettingsListener.mTriggerCallback('wallpaper.image',
+      value);
+    assert.equal(wallpaper.wallpaperSrc, value);
+  });
+
+  test('_triggerActivity', function() {
+    this.sinon.stub(wallpaper, '_onPickSuccess');
+    this.sinon.stub(wallpaper, '_onPickError');
+    var secret = !null;
+    var testblob = 'testblob';
+
+    MockMozActivity.successResult = { blob: testblob };
+    wallpaper._triggerActivity(secret);
+
+    assert.equal(MockMozActivity.calls[0].name, 'pick');
+    assert.equal(MockMozActivity.calls[0].data.includeLocked, secret);
+    assert.deepEqual(MockMozActivity.calls[0].data.type,
+      ['wallpaper', 'image/*']);
+
+    // waiting for onsuccess. (50ms is defined in mock_moz_activity.js)
+    clock.tick(50);
+    assert.equal(wallpaper._onPickSuccess.calledOnce, true);
+    sinon.assert.calledWith(wallpaper._onPickSuccess, testblob, secret);
+
+    MockMozActivity.mTriggerOnError();
+    assert.equal(wallpaper._onPickError.calledOnce, true);
+  });
+
+  test('_onPickSuccess, blob type is mimeSubtype', () => {
+    var unlockBlobStub = this.sinon.stub(mockForwardLock, 'unlockBlob');
+    mockForwardLock.mSetupMimeSubtype('mimeSubtype');
+
+    var testBlob = {
+      type: 'test/mimeSubtype'
+    };
+    var testSecret = 'testSecret';
+
+    wallpaper._onPickSuccess(testBlob, testSecret);
+    assert.isTrue(unlockBlobStub.calledOnce);
+    assert.equal(unlockBlobStub.args[0][0], testSecret);
+    assert.equal(unlockBlobStub.args[0][1], testBlob);
+  });
+
+  test('_onPickSuccess, blob type is not mimeSubtype', function() {
+    this.sinon.stub(wallpaper, '_setWallpaper');
+    mockForwardLock.mSetupMimeSubtype('mimeSubtype');
+
+    var testBlob = {
+      type: 'test/notMimeSubtype'
+    };
+    wallpaper._onPickSuccess(testBlob);
+    sinon.assert.calledWith(wallpaper._setWallpaper, testBlob);
+  });
+
+  test('_setWallpaper', () => {
+    var blob = 'testblob';
+    wallpaper._setWallpaper(blob);
+    assert.deepEqual(mockSettingsListener.getSettingsLock().locks[0], {
+      'wallpaper.image': 'testblob'
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/homescreens_list/homescreens_list_test.js

@@ -0,0 +1,132 @@
+/* global MockNavigatorSettings */
+'use strict';
+
+require('/shared/test/unit/mocks/mock_navigator_moz_settings.js');
+
+suite('homescreens_list > ', () => {
+  var modules = [
+    'unit/mock_apps_cache',
+    'shared_mocks/mock_manifest_helper',
+    'panels/homescreens_list/homescreens_list'
+  ];
+
+  var maps = {
+    '*': {
+      'modules/apps_cache': 'unit/mock_apps_cache',
+      'shared/settings_listener': 'shared_mocks/mock_settings_listener',
+      'modules/settings_service': 'unit/mock_settings_service',
+      'modules/settings_cache': 'unit/mock_settings_cache',
+      'shared/manifest_helper': 'shared_mocks/mock_manifest_helper'
+    }
+  };
+
+  var elements = {
+    homescreensList: document.createElement('div'),
+    moreLink: document.createElement('div')
+  };
+  var homescreensList;
+  var mockAppsCache;
+  var mockManifestHelper;
+  var realNavigatorSettings;
+  var apps = [
+    {
+      origin: 'app://homescreen.gaiamobile.org',
+      manifestURL: 'app://homescreen.gaiamobile.org/manifest.webapp',
+      manifest: {
+        type: 'privileged',
+        role: 'homescreen',
+        inputs: {},
+        permissions: {}
+      }
+    },
+    {
+      origin: 'app://verticalhome.gaiamobile.org',
+      manifestURL: 'app://verticalhome.gaiamobile.org/manifest.webapp',
+      manifest: {
+        type: 'privileged',
+        role: 'homescreen',
+        inputs: {},
+        permissions: {}
+      }
+    }
+  ];
+
+  suiteSetup(done => {
+    testRequire(modules, maps, (MockAppsCache, MockManifestHelper,
+                                HomescreensList) => {
+      mockManifestHelper = MockManifestHelper;
+      mockAppsCache = MockAppsCache;
+
+      realNavigatorSettings = navigator.mozSettings;
+      navigator.mozSettings = MockNavigatorSettings;
+
+      homescreensList = HomescreensList();
+      done();
+    });
+  });
+
+  suiteTeardown(() => {
+    navigator.mozSettings = realNavigatorSettings;
+    realNavigatorSettings = null;
+  });
+
+  suite('initialisation', () => {
+    setup(function() {
+      this.sinon.stub(homescreensList, '_renderHomescreens');
+      this.sinon.spy(window, 'addEventListener');
+      homescreensList.init(elements);
+    });
+
+    test('we would call _renderHomescreens in init', () => {
+      assert.ok(homescreensList._renderHomescreens.called);
+    });
+
+    test('we would call _renderHomescreens in applicationinstall', () => {
+      assert.ok(window.addEventListener.calledWith('applicationinstall'));
+      window.dispatchEvent(new CustomEvent('applicationinstall'));
+      assert.ok(homescreensList._renderHomescreens.calledTwice);
+    });
+
+    test('we would call _renderHomescreens in applicationuninstall', () => {
+      assert.ok(window.addEventListener.calledWith('applicationuninstall'));
+      window.dispatchEvent(new CustomEvent('applicationuninstall'));
+      assert.ok(homescreensList._renderHomescreens.calledTwice);
+    });
+  });
+
+  suite('_renderHomescreens', () => {
+    setup(function() {
+      this.sinon.stub(homescreensList, 'listBuilder');
+    });
+
+    test('we would call listBuilder in _renderHomescreens', done => {
+      homescreensList._renderHomescreens().then(() => {
+        assert.equal(homescreensList._apps.length, 0);
+        assert.ok(homescreensList.listBuilder.called);
+      }, () => {
+        // We should not reject here
+        assert.isTrue(false);
+      }).then(done, done);
+    });
+  });
+
+  suite('listBuilder', () => {
+    setup(function() {
+      this.sinon.spy(document, 'createDocumentFragment');
+      this.sinon.stub(homescreensList, '_listItemBuilder', () => {
+        return document.createElement('div');
+      });
+      homescreensList._container = document.body;
+      homescreensList._apps = apps;
+      homescreensList.listBuilder();
+    });
+
+    test('createDocumentFragment is called', () => {
+      assert.ok(document.createDocumentFragment.called);
+    });
+
+    test('_listItemBuilder is called', () => {
+      assert.ok(homescreensList._listItemBuilder.calledTwice);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/hotspot/hotspot_settings_test.js

@@ -0,0 +1,98 @@
+/* global MockNavigatorSettings */
+'use strict';
+
+suite('Hotspot settings panel >', function() {
+  var hotspotSettings;
+  var realMozSettings;
+  var realSettingsListener;
+  var mockSettingsListener;
+
+  var modules = [
+    'panels/hotspot/hotspot_settings',
+    'shared_mocks/mock_navigator_moz_settings',
+    'shared_mocks/mock_settings_listener',
+  ];
+
+  var maps = {
+    '*': {
+      'shared/settings_listener': 'shared_mocks/mock_settings_listener',
+      'modules/settings_cache': 'unit/mock_settings_cache'
+    }
+  };
+
+  setup(function(done) {
+    testRequire(modules, maps, function(
+      HotspotSettings, MockNavigatorSettings, MockSettingsListener) {
+        realSettingsListener = window.SettingsListener;
+        window.SettingsListener = MockSettingsListener;
+        mockSettingsListener = MockSettingsListener;
+        // mock mozSettings
+        realMozSettings = navigator.mozSettings;
+        window.navigator.mozSettings = MockNavigatorSettings;
+        hotspotSettings = HotspotSettings();
+        done();
+    });
+  });
+
+  teardown(function() {
+    window.navigator.mozSettings = realMozSettings;
+    window.SettingsListener = realSettingsListener;
+  });
+
+  suite('Update settings values', function() {
+    setup(function() {
+        hotspotSettings._hotspotSSID = '';
+        hotspotSettings._hotspotSecurity = '';
+        hotspotSettings._hotspotPassword = '';
+    });
+
+    test('Should reflect the SSID setting change', function() {
+      var fakeCb = this.sinon.spy();
+      hotspotSettings.observe('hotspotSSID', fakeCb);
+
+      hotspotSettings.setHotspotSSID('testSSID');
+      mockSettingsListener.mTriggerCallback('tethering.wifi.ssid', 'testSSID');
+
+      assert.isTrue(fakeCb.calledWith('testSSID'));
+    });
+
+    test('Should reflect the Hotspot Security setting change', function() {
+      var fakeCb = this.sinon.spy();
+      hotspotSettings.observe('hotspotSecurity', fakeCb);
+
+      hotspotSettings.setHotspotSSID('hotspotSecurity');
+      mockSettingsListener.mTriggerCallback('tethering.wifi.security.type',
+        'open');
+
+      assert.isTrue(fakeCb.calledWith('open'));
+    });
+
+    test('Should reflect the Hotspot Password setting change', function() {
+      var fakeCb = this.sinon.spy();
+      hotspotSettings.observe('hotspotPassword', fakeCb);
+
+      hotspotSettings.setHotspotSSID('hotspotPassword');
+      mockSettingsListener.mTriggerCallback('tethering.wifi.security.password',
+        'testPassword');
+
+      assert.isTrue(fakeCb.calledWith('testPassword'));
+    });
+  });
+
+  suite('Generate password', function() {
+    var setting = 'tethering.wifi.security.password';
+
+    setup(function() {
+      var cset = [];
+      cset[setting] = undefined;
+      MockNavigatorSettings.mSet(cset);
+    });
+
+    test('Hotspot password should be generate correctly', function() {
+        var re = new RegExp('^[a-z]+[0-9]{4}');
+        hotspotSettings._updatePasswordIfNeeded();
+        var generatedPassword = MockNavigatorSettings.mSettings[setting];
+        assert.isTrue(re.test(generatedPassword));
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/hotspot/hotspot_test.js

@@ -0,0 +1,184 @@
+/* global SettingsListener */
+'use strict';
+
+suite('Hotspot panel >', function() {
+  var hotspot;
+  var realMozSettings;
+
+  var modules = [
+    'panels/hotspot/hotspot',
+    'shared_mocks/mock_navigator_moz_settings',
+    'shared_mocks/mock_settings_listener',
+  ];
+
+  var maps = {
+    '*': {
+      'shared/settings_listener': 'shared_mocks/mock_settings_listener',
+      'modules/settings_cache': 'unit/mock_settings_cache'
+    }
+  };
+
+  setup(function(done) {
+    testRequire(modules, maps, function(
+      Hotspot, MockNavigatorSettings, MockSettingsListener) {
+        window.SettingsListener = MockSettingsListener;
+        // mock mozSettings
+        realMozSettings = navigator.mozSettings;
+        window.navigator.mozSettings = MockNavigatorSettings;
+        hotspot = Hotspot();
+        done();
+    });
+  });
+
+  teardown(function() {
+    window.navigator.mozSettings = realMozSettings;
+  });
+
+  suite('initiation', function() {
+    setup(function() {
+      this.sinon.spy(SettingsListener, 'observe');
+      hotspot.init();
+    });
+
+    test('we should observe settings', function() {
+      assert.equal(SettingsListener.observe.callCount, 3);
+      assert.ok(SettingsListener.observe.getCall(0).calledWith(
+        hotspot.tetheringWifiKey, false),
+        'should observe hotspot wifi setting');
+      assert.ok(SettingsListener.observe.getCall(1).calledWith(
+        hotspot.tetheringUsbKey, false),
+        'should observe hotspot usb setting');
+      assert.ok(SettingsListener.observe.getCall(2).calledWith(
+        hotspot.usbStorageKey, false),
+        'should observe usb storage setting');
+    });
+  });
+
+  suite('hotspot settings changes and listeners', function() {
+    var fakeCallback;
+    setup(function() {
+      fakeCallback = this.sinon.spy();
+    });
+
+    test('we should notify every listener when property changes', function() {
+      hotspot.addEventListener('wifiHotspotChange', fakeCallback);
+      hotspot._hotspotSettingChange(false);
+      assert.ok(fakeCallback.calledWith(false),
+        'should notify the new value of wifi hotspot');
+      assert.isFalse(hotspot._hotspotSetting);
+
+      hotspot.addEventListener('usbHotspotChange', fakeCallback);
+      hotspot._usbHotspotSettingChange(false);
+      assert.ok(fakeCallback.calledWith(false),
+        'should notify the new value of usb tethering');
+      assert.isFalse(hotspot._usbHotspotSetting);
+
+      hotspot.addEventListener('usbStorageChange', fakeCallback);
+      hotspot._usbStorageSettingChange(false);
+      assert.ok(fakeCallback.calledWith(false),
+        'should notify the new value of usb storage');
+      assert.isFalse(hotspot._usbStorageSetting);
+
+      hotspot.addEventListener('incompatibleSettings', fakeCallback);
+      hotspot._incompatibleSettings(
+        hotspot.tetheringUsbKey, hotspot.tetheringWifiKey, false);
+      assert.ok(fakeCallback.calledWith(
+        hotspot.tetheringUsbKey, hotspot.tetheringWifiKey, false),
+          'should notify a conflict with the settings');
+    });
+
+    test('we should add and remove listeners correctly', function() {
+      hotspot.addEventListener('wifiHotspotChange', fakeCallback);
+      assert.equal(hotspot._hotspotChangeListeners.length, 1);
+
+      hotspot.removeEventListener('wifiHotspotChange', fakeCallback);
+      assert.equal(hotspot._hotspotChangeListeners.length, 0);
+
+      hotspot.addEventListener('usbHotspotChange', fakeCallback);
+      assert.equal(hotspot._usbHotspotChangeListeners.length, 1);
+
+      hotspot.removeEventListener('usbHotspotChange', fakeCallback);
+      assert.equal(hotspot._usbHotspotChangeListeners.length, 0);
+
+      hotspot.addEventListener('incompatibleSettings', fakeCallback);
+      assert.equal(hotspot._incompatibleSettingsListeners.length, 1);
+
+      hotspot.removeEventListener('incompatibleSettings', fakeCallback);
+      assert.equal(hotspot._incompatibleSettingsListeners.length, 0);
+
+      hotspot.addEventListener('usbStorageChange', fakeCallback);
+      assert.equal(hotspot._usbStorageChangeListeners.length, 1);
+
+      hotspot.removeEventListener('usbStorageChange', fakeCallback);
+      assert.equal(hotspot._usbStorageChangeListeners.length, 0);
+    });
+  });
+
+  suite('Incompatible settings', function() {
+    setup(function() {
+      hotspot._hotspotSetting = false;
+      hotspot._usbHotspotSetting = false;
+      hotspot._usbStorageSetting = false;
+    });
+
+    test('Wifi hotspot, No incompatible settings', function() {
+      var spy = this.sinon.spy(hotspot, '_setWifiTetheringSetting');
+      hotspot.checkIncompatibleSettings(hotspot.tetheringWifiKey, false);
+
+      assert.ok(spy.calledWith(false));
+
+      hotspot.checkIncompatibleSettings(hotspot.tetheringWifiKey, true);
+      assert.ok(spy.calledWith(true));
+    });
+
+    test('Wifi hotspot, Incompatible settings', function() {
+      var spy = this.sinon.spy(hotspot, '_incompatibleSettings');
+      hotspot._usbHotspotSetting = true;
+
+      hotspot.checkIncompatibleSettings(hotspot.tetheringWifiKey, true);
+      assert.ok(spy.calledWith(
+        hotspot.tetheringWifiKey, hotspot.tetheringUsbKey, false),
+          'should call _incompatibleSettings');
+    });
+
+    test('USB hotspot, No incompatible settings', function() {
+      var spy = this.sinon.spy(hotspot, '_setUsbTetheringSetting');
+
+      hotspot.checkIncompatibleSettings(hotspot.tetheringUsbKey, false);
+      assert.ok(spy.calledWith(false));
+
+      hotspot.checkIncompatibleSettings(hotspot.tetheringUsbKey, true);
+      assert.ok(spy.calledWith(true));
+    });
+
+    test('USB hotspot, Incompatible settings, USB storage enabled',
+      function() {
+        var spy = this.sinon.spy(hotspot, '_incompatibleSettings');
+        hotspot._usbStorageSetting = true;
+
+        hotspot.checkIncompatibleSettings(hotspot.tetheringUsbKey, true);
+        assert.ok(spy.calledWith(
+          hotspot.tetheringUsbKey, hotspot.usbStorageKey, false));
+    });
+
+    test('USB hotspot, Incompatible settings, Wifi hotspot enabled',
+      function() {
+        var spy = this.sinon.spy(hotspot, '_incompatibleSettings');
+        hotspot._hotspotSetting = true;
+
+        hotspot.checkIncompatibleSettings(hotspot.tetheringUsbKey, true);
+        assert.ok(spy.calledWith(
+          hotspot.tetheringUsbKey, hotspot.tetheringWifiKey, false));
+    });
+
+    test('USB hotspot, Incompatible settings, both enabled',
+      function() {
+        var spy = this.sinon.spy(hotspot, '_incompatibleSettings');
+        hotspot._hotspotSetting = true;
+        hotspot._usbStorageSetting = true;
+
+        hotspot.checkIncompatibleSettings(hotspot.tetheringUsbKey, true);
+        assert.ok(spy.calledWith(hotspot.tetheringUsbKey, null, true));
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/icc/icc_test.js

@@ -0,0 +1,279 @@
+'use strict';
+
+var MockNavigatorSettings, MockNavigatorMozIccManager, MockL10n, MockDump,
+    MocksHelper, HtmlImports, MockMozApps;
+
+requireApp('settings/test/unit/mock_navigator_settings.js');
+requireApp('settings/test/unit/mock_settings.js');
+requireApp('settings/test/unit/mock_moz_apps.js');
+require('/shared/test/unit/mocks/mock_navigator_moz_icc_manager.js');
+require('/shared/test/unit/mocks/mock_dump.js');
+require('/shared/test/unit/load_body_html_helper.js');
+require('/shared/test/unit/mocks_helper.js');
+require('/shared/test/unit/mocks/mock_l20n.js');
+
+var mocksForIccApp = ['Settings'];
+
+mocksForIccApp.forEach(function(mockName) {
+  if (!window[mockName]) {
+    window[mockName] = null;
+  }
+});
+
+var realL10n, realMozSettings, realMozIccManager, realDUMP, mocksHelper,
+    realMozApps;
+
+if (!document.l10n) {
+  document.l10n = null;
+}
+if (!window.navigator.mozSettings) {
+  window.navigator.mozSettings = null;
+}
+if (!window.navigator.mozIccManager) {
+  window.navigator.mozIccManager = null;
+}
+if (!window.DUMP) {
+  window.DUMP = null;
+}
+
+suite('STK (App menu) >', function() {
+  suiteSetup(function(done) {
+    // Load markup of settings APP
+    loadBodyHTML('/index.html');
+    // Inject the panel of downloads
+    var importHook = document.createElement('link');
+    importHook.setAttribute('rel', 'import');
+    importHook.setAttribute('href', '/elements/icc.html');
+    document.head.appendChild(importHook);
+
+    realL10n = document.l10n;
+    document.l10n = MockL10n;
+    realMozSettings = navigator.mozSettings;
+    navigator.mozSettings = MockNavigatorSettings;
+    realMozIccManager = navigator.mozIccManager;
+    navigator.mozIccManager = MockNavigatorMozIccManager;
+    realDUMP = window.DUMP;
+    window.DUMP = MockDump.disable();
+    realMozApps = window.navigator.mozApps;
+    window.navigator.mozApps = MockMozApps;
+
+    mocksHelper = new MocksHelper(mocksForIccApp);
+    mocksHelper.suiteSetup();
+
+    this.STK_NEXT_ACTION_INDICATOR = {
+      16: 'stkItemsNaiSetUpCall',
+      17: 'stkItemsNaiSendSs',
+      18: 'stkItemsNaiSendUssd',
+      19: 'stkItemsNaiSendSms',
+      32: 'stkItemsNaiPlayTone',
+      33: 'stkItemsNaiDisplayText',
+      34: 'stkItemsNaiGetInkey',
+      35: 'stkItemsNaiGetInput',
+      36: 'stkItemsNaiSelectItem',
+      37: 'stkItemsNaiSetUpMenu',
+      40: 'stkItemsNaiSetIdleModeText',
+      48: 'stkItemsNaiPerformCardApdu',  // class "a"
+      49: 'stkItemsNaiPowerOnCard',      // class "a"
+      50: 'stkItemsNaiPowerOffCard',     // class "a"
+      51: 'stkItemsNaiGetReaderStatus',  // class "a"
+      64: 'stkItemsNaiOpenChannel',      // class "e"
+      65: 'stkItemsNaiCloseChannel',     // class "e"
+      66: 'stkItemsNaiReceiveData',      // class "e"
+      67: 'stkItemsNaiSendData',         // class "e"
+      68: 'stkItemsNaiGetChannelStatus', // class "e"
+      96: 'Reserved',                    // for TIA/EIA-136
+      129: 'stkItemsNaiEndOfTheProactiveSession'
+    };
+
+    // The last item '0' is a terminated characher.
+    this.nextActionList = [16, 17, 18, 19, 32, 33, 34, 35, 36, 37, 40,
+                           48, 49, 50, 51, 64, 65, 66, 67, 68, 129, 0];
+
+    // Test commands
+    this.items = [{
+      'identifier': 2,
+      'text': 'Item stkItemsNaiSetUpCall', // nai: 16
+    },{
+      'identifier': 3,
+      'text': 'Item stkItemsNaiSendSs', // nai: 17
+    },{
+      'identifier': 4,
+      'text': 'Item stkItemsNaiSendUssd', // nai: 18
+    },{
+      'identifier': 5,
+      'text': 'Item stkItemsNaiSendSms', // nai: 19
+    },{
+      'identifier': 6,
+      'text': 'Item stkItemsNaiPlayTone', // nai: 32
+    },{
+      'identifier': 7,
+      'text': 'Item stkItemsNaiDisplayText', // nai: 33
+    },{
+      'identifier': 8,
+      'text': 'Item stkItemsNaiGetInkey', // nai: 34
+    },{
+      'identifier': 9,
+      'text': 'Item stkItemsNaiGetInput', // nai: 35
+    },{
+      'identifier': 10,
+      'text': 'Item stkItemsNaiSelectItem', // nai: 36
+    },{
+      'identifier': 11,
+      'text': 'Item stkItemsNaiSetUpMenu', // nai: 37
+    },{
+      'identifier': 12,
+      'text': 'Item stkItemsNaiSetIdleModeText', // nai: 40
+    },{
+      'identifier': 13,
+      'text': 'Item stkItemsNaiPerformCardApdu', // nai: 48
+    },{
+      'identifier': 14,
+      'text': 'Item stkItemsNaiPowerOnCard', // nai: 49
+    },{
+      'identifier': 15,
+      'text': 'Item stkItemsNaiPowerOffCard', // nai: 50
+    },{
+      'identifier': 16,
+      'text': 'Item stkItemsNaiGetReaderStatus', // nai: 51
+    },{
+      'identifier': 17,
+      'text': 'Item stkItemsNaiOpenChannel', // nai: 64
+    },{
+      'identifier': 18,
+      'text': 'Item stkItemsNaiCloseChannel', // nai: 65
+    },{
+      'identifier': 19,
+      'text': 'Item stkItemsNaiReceiveData', // nai: 66
+    },{
+      'identifier': 20,
+      'text': 'Item stkItemsNaiSendData', // nai: 67
+    },{
+      'identifier': 21,
+      'text': 'Item stkItemsNaiGetChannelStatus', // nai: 68
+    },{
+      'identifier': 22,
+      'text': 'Item stkItemsNaiEndOfTheProactiveSession', // nai: 129
+    }];
+    this.StkCommandEvent = new CustomEvent('stkasynccommand', {
+      detail: { 'message': {
+        'iccId': '12345',
+        'command': {
+          typeOfCommand: navigator.mozIccManager.STK_CMD_SELECT_ITEM,
+          options: {
+            'title': 'Dummy Test Menu',
+            'defaultItem': 1,
+            'items': this.items,
+            'isHelpAvailable': true,
+            'nextActionList': this.nextActionList
+          }
+        }
+      }}});
+
+    require('/shared/js/html_imports.js', function() {
+      HtmlImports.populate(function() {
+        var map = {
+          'shared/stk_helper': 'shared_mocks/mock_stk_helper'
+        };
+
+        testRequire([
+          'shared_mocks/mock_stk_helper'
+        ], map, function(MockStkHelper) {
+          // we have to replace `require` in icc.js
+          window.require = function(modules, callback) {
+            callback(MockStkHelper);
+          };
+          testRequire(['panels/icc/icc'], {}, function() {
+            done();
+          });
+        });
+      });
+    });
+  });
+
+  suiteTeardown(function() {
+    mocksHelper.suiteTeardown();
+    document.l10n = realL10n;
+    navigator.mozSettings = realMozSettings;
+    navigator.mozIccManager = realMozIccManager;
+    window.DUMP = realDUMP;
+    window.navigator.mozApps = realMozApps;
+  });
+
+  suite('UI checks >', function() {
+    setup(function() {
+      mocksHelper.setup();
+      window.dispatchEvent(this.StkCommandEvent);
+    });
+
+    teardown(function() {
+      mocksHelper.teardown();
+    });
+
+    test('Check initialization', function() {
+      assert.ok(document.getElementById('icc-stk-main-header'));
+      assert.ok(document.getElementById('icc-stk-header'));
+      assert.ok(document.getElementById('icc-stk-subheader'));
+      assert.ok(document.getElementById('icc-stk-list'));
+    });
+
+    test('Correct number of entries into the STK options list', function() {
+      // The list contains all the items plus the help entry
+      assert.equal(document.getElementById('icc-stk-list').childElementCount,
+        this.items.length + 1);
+    });
+
+    test('STK Header', function() {
+      assert.equal(document.getElementById('icc-stk-header').textContent,
+        'Dummy Test Menu');
+    });
+
+    test('All items with correct NAI data', function() {
+      this.items.forEach(function(item, index) {
+        assert.equal(document.querySelector('#icc-stk-list li:nth-child(' +
+          (index + 1) + ') small').getAttribute('data-l10n-id'),
+          this.STK_NEXT_ACTION_INDICATOR[this.nextActionList[index]]);
+      }, this);
+    });
+
+    test('All items with correct data', function() {
+      this.items.forEach(function(item, index) {
+        assert.equal(document.querySelector('#icc-stk-list li:nth-child(' +
+          (index + 1) + ') a').textContent, item.text);
+      });
+    });
+
+    test('Help entry showed (isHelpAvailable)', function() {
+      assert.equal(document.querySelector('#icc-stk-list li:nth-child(' +
+        (this.items.length + 1) + ') a').getAttribute('data-l10n-id'),
+        'operatorServices-helpmenu');
+    });
+  });
+
+  suite('Check timeouts >', function() {
+    var fakeClock = null;
+
+    setup(function() {
+      fakeClock = this.sinon.useFakeTimers();
+      mocksHelper.setup();
+    });
+
+    teardown(function() {
+      fakeClock.restore();
+      mocksHelper.teardown();
+    });
+
+    test('Wait for timeout (1 sec)', function(done) {
+      var testTimeout = 1000;
+      navigator.mozIccManager.getIccById('12345').sendStkResponse =
+        function(msg, res) {
+          assert.equal(res.resultCode,
+            navigator.mozIccManager.STK_RESULT_NO_RESPONSE_FROM_USER);
+          done();
+        };
+
+      MockNavigatorSettings.mSettings['icc.selectTimeout'] = testTimeout;
+      window.dispatchEvent(this.StkCommandEvent);
+      fakeClock.tick(testTimeout);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/improve_browser_os/panel_test.js

@@ -0,0 +1,285 @@
+/* global loadBodyHTML, MockNavigatorSettings */
+'use strict';
+
+require('/shared/js/component_utils.js');
+require('/shared/elements/gaia_radio/script.js');
+require('/shared/test/unit/mocks/mock_navigator_moz_settings.js');
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('Improve browser os panel > ', function() {
+  var realMozSettings;
+  var MockSettingsCache;
+  var ImproveBrowserOSPanel;
+
+  var panel;
+
+  var modules = [
+    'panels/improve_browser_os/panel'
+  ];
+  var map = {
+    '*': {
+      'modules/settings_cache': 'MockSettingsCache',
+      'modules/settings_panel': 'MockSettingsPanel'
+    }
+  };
+
+  suiteSetup(function(done) {
+    realMozSettings = navigator.mozSettings;
+    navigator.mozSettings = MockNavigatorSettings;
+
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+
+    // Define MockSettingsPanel
+    define('MockSettingsPanel', function() {
+      return function(options) {
+        return {
+          init: options.onInit.bind(options)
+        };
+      };
+    });
+
+    // Define MockSettingsCache
+    MockSettingsCache = {
+      _settings: {},
+      getSettings: function(callback) {
+        callback(this._settings);
+      }
+    };
+    define('MockSettingsCache', function() {
+      return MockSettingsCache;
+    });
+
+    requireCtx(modules, function(_ImproveBrowserOSPanel) {
+      ImproveBrowserOSPanel = _ImproveBrowserOSPanel;
+      done();
+    });
+  });
+
+  suiteTeardown(function() {
+    navigator.mozSettings = realMozSettings;
+  });
+
+  setup(function() {
+    loadBodyHTML('_improve_browser_os.html');
+    panel = ImproveBrowserOSPanel();
+    MockNavigatorSettings.mSetup();
+    MockNavigatorSettings.mSyncRepliesOnly = true;
+  });
+
+  teardown(function() {
+    document.body.innerHTML = '';
+    MockNavigatorSettings.mTeardown();
+  });
+
+  suite('metrics level', function() {
+    test('upgrade, sharing performance data, level basic', function(done) {
+      MockSettingsCache._settings = {
+        'debug.performance_data.shared': true,
+        'metrics.selectedMetrics.level': null
+      };
+      assert.isUndefined(
+        MockNavigatorSettings.mSettings['metrics.selectedMetrics.level']);
+      panel.init(document.body).then(() => {
+        var basicElem = document.querySelector('#metrics-basic');
+        var enhancedElem = document.querySelector('#metrics-enhanced');
+        var noneElem = document.querySelector('#metrics-none');
+        assert.isTrue(basicElem.checked);
+        assert.isFalse(enhancedElem.checked);
+        assert.isFalse(noneElem.checked);
+        MockNavigatorSettings.mReplyToRequests();
+        assert.equal(
+          MockNavigatorSettings.mSettings['metrics.selectedMetrics.level'],
+          'Basic');
+        assert.isNull(noneElem.getAttribute('disabled'));
+        assert.isNull(basicElem.getAttribute('disabled'));
+        assert.isNull(enhancedElem.getAttribute('disabled'));
+      }).then(done, done);
+    });
+
+    test('upgrade, not sharing performance data, level none', function(done) {
+      MockSettingsCache._settings = {
+        'debug.performance_data.shared': false,
+        'metrics.selectedMetrics.level': null
+      };
+      assert.isUndefined(
+        MockNavigatorSettings.mSettings['metrics.selectedMetrics.level']);
+      panel.init(document.body).then(() => {
+        var basicElem = document.querySelector('#metrics-basic');
+        var enhancedElem = document.querySelector('#metrics-enhanced');
+        var noneElem = document.querySelector('#metrics-none');
+        assert.isFalse(basicElem.checked);
+        assert.isFalse(enhancedElem.checked);
+        assert.isTrue(noneElem.checked);
+        MockNavigatorSettings.mReplyToRequests();
+        assert.equal(
+          MockNavigatorSettings.mSettings['metrics.selectedMetrics.level'],
+          'None');
+        assert.isNull(noneElem.getAttribute('disabled'));
+        assert.isNull(basicElem.getAttribute('disabled'));
+        assert.isNull(enhancedElem.getAttribute('disabled'));
+      }).then(done, done);
+    });
+
+    test('after ftu, metrics level none', function(done) {
+      MockSettingsCache._settings = {
+        'metrics.selectedMetrics.level': 'None'
+      };
+      assert.isUndefined(
+        MockNavigatorSettings.mSettings['metrics.selectedMetrics.level']);
+      panel.init(document.body).then(() => {
+        var basicElem = document.querySelector('#metrics-basic');
+        var enhancedElem = document.querySelector('#metrics-enhanced');
+        var noneElem = document.querySelector('#metrics-none');
+        assert.isFalse(basicElem.checked);
+        assert.isFalse(enhancedElem.checked);
+        assert.isTrue(noneElem.checked);
+        assert.isNull(noneElem.getAttribute('disabled'));
+        assert.isNull(basicElem.getAttribute('disabled'));
+        assert.isNull(enhancedElem.getAttribute('disabled'));
+      }).then(done, done);
+    });
+
+    test('after ftu, metrics level basic', function(done) {
+      MockSettingsCache._settings = {
+        'metrics.selectedMetrics.level': 'Basic'
+      };
+      panel.init(document.body).then(() => {
+        var basicElem = document.querySelector('#metrics-basic');
+        var enhancedElem = document.querySelector('#metrics-enhanced');
+        var noneElem = document.querySelector('#metrics-none');
+        assert.isTrue(basicElem.checked);
+        assert.isFalse(enhancedElem.checked);
+        assert.isFalse(noneElem.checked);
+        assert.isNull(noneElem.getAttribute('disabled'));
+        assert.isNull(basicElem.getAttribute('disabled'));
+        assert.isNull(enhancedElem.getAttribute('disabled'));
+      }).then(done, done);
+    });
+
+    test('after ftu, metrics level enhanced', function(done) {
+      MockSettingsCache._settings = {
+        'metrics.selectedMetrics.level': 'Enhanced'
+      };
+      panel.init(document.body).then(() => {
+        var basicElem = document.querySelector('#metrics-basic');
+        var enhancedElem = document.querySelector('#metrics-enhanced');
+        var noneElem = document.querySelector('#metrics-none');
+        assert.isFalse(basicElem.checked);
+        assert.isTrue(enhancedElem.checked);
+        assert.isFalse(noneElem.checked);
+        assert.isNull(noneElem.getAttribute('disabled'));
+        assert.isNull(basicElem.getAttribute('disabled'));
+        assert.isNull(enhancedElem.getAttribute('disabled'));
+      }).then(done, done);
+    });
+
+    test('after ftu, metrics level basic, dogfood', function(done) {
+      MockSettingsCache._settings = {
+        'metrics.selectedMetrics.level': 'Basic',
+        'debug.performance_data.dogfooding': true
+      };
+      panel.init(document.body).then(() => {
+        var basicElem = document.querySelector('#metrics-basic');
+        var enhancedElem = document.querySelector('#metrics-enhanced');
+        var noneElem = document.querySelector('#metrics-none');
+        assert.isTrue(basicElem.checked);
+        assert.isFalse(enhancedElem.checked);
+        assert.isFalse(noneElem.checked);
+        assert.equal(noneElem.getAttribute('disabled'), 'true');
+        assert.equal(basicElem.getAttribute('disabled'), 'true');
+        assert.equal(enhancedElem.getAttribute('disabled'), 'true');
+      }).then(done, done);
+    });
+
+    test('after ftu, metrics level enhanced, dogfood', function(done) {
+      MockSettingsCache._settings = {
+        'metrics.selectedMetrics.level': 'Enhanced',
+        'debug.performance_data.dogfooding': true
+      };
+      panel.init(document.body).then(() => {
+        var basicElem = document.querySelector('#metrics-basic');
+        var enhancedElem = document.querySelector('#metrics-enhanced');
+        var noneElem = document.querySelector('#metrics-none');
+        assert.isFalse(basicElem.checked);
+        assert.isTrue(enhancedElem.checked);
+        assert.isFalse(noneElem.checked);
+        assert.equal(noneElem.getAttribute('disabled'), 'true');
+        assert.equal(basicElem.getAttribute('disabled'), 'true');
+        assert.equal(enhancedElem.getAttribute('disabled'), 'true');
+      }).then(done, done);
+    });
+
+    test('after ftu, metrics level none, dogfood', function(done) {
+      MockSettingsCache._settings = {
+        'metrics.selectedMetrics.level': 'None',
+        'debug.performance_data.dogfooding': true
+      };
+      panel.init(document.body).then(() => {
+        var basicElem = document.querySelector('#metrics-basic');
+        var enhancedElem = document.querySelector('#metrics-enhanced');
+        var noneElem = document.querySelector('#metrics-none');
+        assert.isFalse(basicElem.checked);
+        assert.isFalse(enhancedElem.checked);
+        assert.isTrue(noneElem.checked);
+        assert.equal(noneElem.getAttribute('disabled'), 'true');
+        assert.equal(basicElem.getAttribute('disabled'), 'true');
+        assert.equal(enhancedElem.getAttribute('disabled'), 'true');
+      }).then(done, done);
+    });
+
+    test('metrics level Enhanced, devtools should be enabled', function(done) {
+      MockSettingsCache._settings = {
+        'metrics.selectedMetrics.level': 'Basic',
+        'debug.performance_data.dogfooding': false,
+        'devtools.overlay': 'false'
+      };
+      panel.init(document.body).then((setMetricLevel) => {
+        setMetricLevel('Enhanced');
+        assert.equal(
+          MockNavigatorSettings.mSettings['metrics.selectedMetrics.level'],
+          'Enhanced');
+        assert.equal(
+          MockNavigatorSettings.mSettings['devtools.overlay'],
+          true);
+        done();
+      });
+    });
+
+    test('metrics level Basic, devtools should be disabled', function(done) {
+      MockSettingsCache._settings = {
+        'metrics.selectedMetrics.level': 'None',
+        'debug.performance_data.dogfooding': false,
+        'devtools.overlay': 'true'
+      };
+      panel.init(document.body).then((setMetricLevel) => {
+        setMetricLevel('Basic');
+        assert.equal(
+          MockNavigatorSettings.mSettings['metrics.selectedMetrics.level'],
+          'Basic');
+        assert.equal(
+          MockNavigatorSettings.mSettings['devtools.overlay'],
+          false);
+        done();
+      });
+    });
+
+    test('metrics level None, devtools should be disabled', function(done) {
+      MockSettingsCache._settings = {
+        'metrics.selectedMetrics.level': 'Basic',
+        'debug.performance_data.dogfooding': false,
+        'devtools.overlay': 'true'
+      };
+      panel.init(document.body).then((setMetricLevel) => {
+        setMetricLevel('None');
+        assert.equal(
+          MockNavigatorSettings.mSettings['metrics.selectedMetrics.level'],
+          'None');
+        assert.equal(
+          MockNavigatorSettings.mSettings['devtools.overlay'],
+          false);
+        done();
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/keyboard/enabled_layouts_test.js

@@ -0,0 +1,82 @@
+'use strict';
+
+suite('KeyboardEnabledLayoutsCore', function() {
+  var map = {
+    'panels/keyboard/enabled_layouts': {
+      'modules/settings_service': 'unit/mock_settings_service',
+      'modules/mvvm/list_view': 'unit/mock_list_view'
+    }
+  };
+
+  suiteSetup(function(done) {
+    // setup mocks
+    this.mockLayoutTemplate = function() {};
+    this.mockEnabledLayouts = [];
+    this.mockElements = { listViewRoot: {} };
+
+    testRequire([
+      'unit/mock_keyboard_context',
+      'unit/mock_list_view',
+      'panels/keyboard/enabled_layouts'
+    ], map, function(MockKeyboardContext, MockListView,
+      KeyboardEnabledLayoutsCore) {
+        this.MockKeyboardContext = MockKeyboardContext;
+        this.MockListView = MockListView;
+        this.KeyboardEnabledLayoutsCore = KeyboardEnabledLayoutsCore;
+        done();
+    }.bind(this));
+  });
+
+  setup(function() {
+    this.MockKeyboardContext.mEnabledLayouts = this.mockEnabledLayouts;
+    this.subject = this.KeyboardEnabledLayoutsCore(this.MockKeyboardContext,
+      this.mockLayoutTemplate);
+  });
+
+  teardown(function() {
+    this.MockKeyboardContext.mTeardown();
+  });
+
+  test('init', function() {
+    sinon.spy(this.subject, '_initEnabledLayoutListView');
+
+    this.subject.init(this.mockElements);
+
+    assert.ok(this.subject._initEnabledLayoutListView.calledWith(
+      this.mockElements.listViewRoot, this.mockEnabledLayouts,
+      this.mockLayoutTemplate),
+      '_initEnabledLayoutListView should be called with correct parameters');
+  });
+
+  test('when enabled = true', function() {
+    this.subject._listView = { enabled: false };
+    this.subject.enabled = true;
+    assert.ok(this.subject._listView.enabled,
+      'the list view should be enabled');
+  });
+
+  test('when enabled = false', function() {
+    this.subject._listView = { enabled: true };
+    this.subject.enabled = false;
+    assert.ok(!this.subject._listView.enabled,
+      'the list view should be disabled');
+  });
+
+  test('_initEnabledLayoutListView', function() {
+    this.ListViewStub = sinon.stub().returns({});
+    this.MockListView.mInnerFunction = this.ListViewStub;
+    var listViewRoot = {};
+    var layouts = [{}];
+    var layoutTemplate = function() {};
+
+    this.subject._initEnabledLayoutListView(listViewRoot, layouts,
+      layoutTemplate);
+
+    assert.ok(this.ListViewStub
+      .calledWith(listViewRoot, layouts, layoutTemplate),
+      'the list view should be created with correct arguments');
+    assert.ok(this.subject._listView, 'the list view should be created');
+
+    this.MockListView.mTeardown();
+  });
+});

gaia/apps/settings/test/unit/panels/keyboard/installed_keyboards_test.js

@@ -0,0 +1,97 @@
+'use strict';
+
+suite('KeyboardCore', function() {
+  var map = {
+    'panels/keyboard/installed_keyboards': {
+      'modules/mvvm/list_view': 'unit/mock_list_view'
+    }
+  };
+
+  suiteSetup(function(done) {
+    // setup mocks
+    this.mockKeyboardTemplate = function() {};
+    this.mockKeyboards = [];
+    this.mockElements = { listViewRoot: {} };
+
+    testRequire([
+      'unit/mock_keyboard_context',
+      'unit/mock_list_view',
+      'panels/keyboard/installed_keyboards'
+    ], map, function(MockKeyboardContext, MockListView, KeyboardCore) {
+      this.MockKeyboardContext = MockKeyboardContext;
+      this.MockListView = MockListView;
+      this.KeyboardCore = KeyboardCore;
+      done();
+    }.bind(this));
+  });
+
+  setup(function() {
+    this.subject =
+      this.KeyboardCore(this.MockKeyboardContext, this.mockKeyboardTemplate);
+  });
+
+  teardown(function() {
+    this.MockKeyboardContext.mTeardown();
+  });
+
+  test('init', function() {
+    this.MockKeyboardContext.mKeyboards = this.mockKeyboards;
+    sinon.spy(this.subject, '_initAllKeyboardListView');
+
+    this.subject.init(this.mockElements);
+
+    assert.ok(this.subject._initAllKeyboardListView.calledWith(
+      this.mockElements.listViewRoot, this.mockKeyboards,
+      this.mockKeyboardTemplate),
+      '_initAllKeyboardListView should be called with correct parameters');
+  });
+
+  test('when enabled = true', function() {
+    this.subject._listView = { enabled: false };
+    this.subject.enabled = true;
+    assert.ok(this.subject._listView.enabled,
+      'the list view should be enabled');
+  });
+
+  test('when enabled = false' , function() {
+    this.subject._listView = { enabled: true };
+    this.subject.enabled = false;
+    assert.ok(!this.subject._listView.enabled,
+      'the list view should be disabled');
+  });
+
+  suite('_initAllKeyboardListView', function() {
+    setup(function() {
+      this.mockKeyboards = [];
+      this.ListViewStub = sinon.stub().returns({});
+      this.MockListView.mInnerFunction = this.ListViewStub;
+    });
+
+    teardown(function() {
+      this.MockListView.mTeardown();
+    });
+
+    test('when called', function() {
+      this.subject._initAllKeyboardListView(this.mockElements.listViewRoot,
+        this.mockKeyboards, this.mockKeyboardTemplate);
+
+      assert.ok(this.ListViewStub.calledWith(this.mockElements.listViewRoot,
+        this.mockKeyboards, this.mockKeyboardTemplate),
+        'the list view should be created with correct arguments');
+      assert.ok(this.subject._listView, 'the list view should be created');
+    });
+
+    test('when there are no installed keyboards', function() {
+      this.subject._initAllKeyboardListView(this.mockElements.listViewRoot,
+        this.mockKeyboards, this.mockKeyboardTemplate);
+      assert.ok(this.mockElements.listViewRoot.hidden, 'should hide the list');
+    });
+
+    test('when there are installed keyboards', function() {
+      this.mockKeyboards.push({});
+      this.subject._initAllKeyboardListView(this.mockElements.listViewRoot,
+        this.mockKeyboards, this.mockKeyboardTemplate);
+      assert.ok(!this.mockElements.listViewRoot.hidden, 'should show the list');
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/keyboard/panel_test.js

@@ -0,0 +1,91 @@
+'use strict';
+
+suite('KeyboardPanel', function() {
+  var map = {
+    '*': {
+      'modules/keyboard_context': 'MockKeyboardContext',
+      'modules/settings_panel': 'MockSettingsPanel',
+      'panels/keyboard/installed_keyboards': 'MockInstalledKeyboards',
+      'panels/keyboard/enabled_layouts': 'MockEnabledLayouts'
+    }
+  };
+
+  setup(function(done) {
+    this.fakeRootElement = {
+      querySelector: function() {}
+    };
+
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+    var that = this;
+
+    // Define MockKeyboardContext
+    define('MockKeyboardContext', function() {
+      return {};
+    });
+
+    // Define MockSettingsPanel
+    define('MockSettingsPanel', function() {
+      return function(options) {
+        return {
+          init: options.onInit,
+          beforeShow: options.onBeforeShow,
+          beforeHide: options.onBeforeHide,
+          hide: options.onHide
+        };
+      };
+    });
+
+    // Define MockInstalledKeyboards
+    this.mockInstalledKeyboards = {
+      enabled: false,
+      init: function() {}
+    };
+    this.MockInstalledKeyboards = function() {
+      return that.mockInstalledKeyboards;
+    };
+    define('MockInstalledKeyboards', function() {
+      return that.MockInstalledKeyboards;
+    });
+
+    // Define MockEnabledLayouts
+    this.mockEnabledLayouts = {
+      enabled: false,
+      init: function() {}
+    };
+    this.MockEnabledLayouts = function() {
+      return that.mockEnabledLayouts;
+    };
+    define('MockEnabledLayouts', function() {
+      return that.MockEnabledLayouts;
+    });
+
+    requireCtx([
+      'panels/keyboard/panel'
+    ],
+    function(KeyboardPanel) {
+      that.panel = KeyboardPanel();
+      done();
+    });
+  });
+
+  test('Init MockEnabledLayouts when onInit', function() {
+    sinon.spy(this.mockInstalledKeyboards, 'init');
+    sinon.spy(this.mockEnabledLayouts, 'init');
+    this.panel.init(this.fakeRootElement);
+    sinon.assert.called(this.mockInstalledKeyboards.init);
+    sinon.assert.called(this.mockEnabledLayouts.init);
+  });
+
+  test('Enabled MockEnabledLayouts when onBeforeShow', function() {
+    this.panel.beforeShow();
+    assert.ok(this.mockInstalledKeyboards.enabled);
+    assert.ok(this.mockEnabledLayouts.enabled);
+  });
+
+  test('Disable MockEnabledLayouts when onHide', function() {
+    this.panel.hide();
+    assert.ok(!this.mockInstalledKeyboards.enabled);
+    assert.ok(!this.mockEnabledLayouts.enabled);
+  });
+});

gaia/apps/settings/test/unit/panels/keyboard_add_layouts/installed_keyboards_test.js

@@ -0,0 +1,102 @@
+'use strict';
+
+suite('KeyboardAddLayoutsCore', function() {
+  var map = {
+    'panels/keyboard_add_layouts/core': {
+      'modules/settings_service': 'unit/mock_settings_service',
+      'modules/mvvm/list_view': 'unit/mock_list_view'
+    }
+  };
+
+  suiteSetup(function(done) {
+    // setup mocks
+    this.mockKeybordTemplate = function() {};
+    this.mockKeybordTemplate.listViews =
+      [{ enabled: false }, { enabled: false }];
+    this.mockKeyboards = [];
+    this.mockElements = { listViewRoot: {} };
+
+    testRequire([
+      'unit/mock_keyboard_context',
+      'unit/mock_list_view',
+      'panels/keyboard_add_layouts/core'
+    ], map, function(MockKeyboardContext, MockListView,
+      KeyboardAddLayoutsCore) {
+        this.MockKeyboardContext = MockKeyboardContext;
+        this.MockListView = MockListView;
+        this.KeyboardAddLayoutsCore = KeyboardAddLayoutsCore;
+        done();
+    }.bind(this));
+  });
+
+  setup(function() {
+    this.MockKeyboardContext.mKeyboards = this.mockKeyboards;
+    this.subject = this.KeyboardAddLayoutsCore(this.MockKeyboardContext,
+      this.mockKeybordTemplate);
+  });
+
+  teardown(function() {
+    this.MockKeyboardContext.mTeardown();
+  });
+
+  test('init', function() {
+    this.subject._showEnabledDefaultDialog = function() {};
+    sinon.spy(this.MockKeyboardContext, 'defaultKeyboardEnabled');
+    sinon.spy(this.subject, '_initInstalledLayoutListView');
+
+    this.subject.init(this.mockElements, this.mockKeybordTemplate);
+
+    assert.ok(this.subject._initInstalledLayoutListView.calledWith(
+      this.mockElements.listViewRoot, this.mockKeyboards,
+      this.mockKeybordTemplate),
+      '_initAllKeyboardListView should be called with correct parameters');
+    assert.ok(this.MockKeyboardContext.defaultKeyboardEnabled.calledWith(
+      this.subject._showEnabledDefaultDialog),
+      '_showEnabledDefaultDialog should be set to the keyboard context ' +
+      'correctly');
+
+    this.MockKeyboardContext.defaultKeyboardEnabled.restore();
+  });
+
+  test('when enabled = true', function() {
+    this.subject._keyboardTemplate = this.mockKeybordTemplate;
+    this.subject._listView = { enabled: false };
+    this.subject.enabled = true;
+
+    assert.ok(this.subject._listView.enabled,
+      'the list view should be enabled');
+    assert.ok(this.subject._keyboardTemplate
+      .listViews.every(function(listView) { return listView.enabled; }),
+      'all inner list views should be enabled');
+  });
+
+  test('when enabled = false', function() {
+    this.subject._keyboardTemplate = this.mockKeybordTemplate;
+    this.subject._listView = { enabled: true };
+    this.subject.enabled = false;
+
+    assert.ok(!this.subject._listView.enabled,
+      'the list view should be disabled');
+    assert.ok(!this.subject._keyboardTemplate
+      .listViews.every(function(listView) { return listView.enabled; }),
+      'all inner list views should be disabled');
+  });
+
+  test('_initInstalledLayoutListView', function() {
+    this.ListViewStub = sinon.stub().returns({});
+    this.MockListView.mInnerFunction = this.ListViewStub;
+    var listViewRoot = {};
+    var keyboards = [{}];
+    var keyboardTemplate = function() {};
+
+    this.subject._initInstalledLayoutListView(listViewRoot, keyboards,
+      keyboardTemplate);
+
+    assert.ok(this.ListViewStub
+      .calledWith(listViewRoot, keyboards, keyboardTemplate),
+      'the list view should be created with correct arguments');
+    assert.ok(this.subject._listView, 'the list view should be created');
+
+    this.MockListView.mTeardown();
+  });
+});

gaia/apps/settings/test/unit/panels/keyboard_add_layouts/integration_test.js

@@ -0,0 +1,145 @@
+/* globals MocksHelper */
+'use strict';
+
+require('/shared/test/unit/mocks/mock_keyboard_helper.js');
+require('/shared/test/unit/mocks/mock_manifest_helper.js');
+
+suite('KeyboardAddLayoutsPanel', function() {
+  var map = {
+    '*': {
+      'shared/manifest_helper': 'shared_mocks/mock_manifest_helper',
+      'shared/keyboard_helper': 'shared_mocks/mock_keyboard_helper',
+      'modules/settings_panel': 'unit/mock_settings_panel',
+      'modules/settings_service': 'unit/mock_settings_service'
+    }
+  };
+
+  var mockHelper = new MocksHelper([
+    'KeyboardHelper',
+    'ManifestHelper'
+  ]).init();
+  mockHelper.attachTestHelpers();
+
+  suiteSetup(function(done) {
+    testRequire([
+      'modules/keyboard_context',
+      'panels/keyboard_add_layouts/panel',
+      'unit/mock_settings_panel'
+    ], map,
+    (function(KeyboardContext, KeyboardAddLayoutsPanel, MockSettingsPanel) {
+      this.KeyboardContext = KeyboardContext;
+      this.KeyboardAddLayoutsPanel = KeyboardAddLayoutsPanel;
+      this.MockSettingsPanel = MockSettingsPanel;
+      this.MockSettingsPanel.mInnerFunction = function(options) {
+        return {
+          init: options.onInit,
+          beforeShow: options.onBeforeShow,
+          beforeHide: options.onBeforeHide,
+          hide: options.onHide
+        };
+      };
+      done();
+    }).bind(this));
+  });
+
+  suiteTeardown(function() {
+    this.MockSettingsPanel.mTeardown();
+  });
+
+  suite('KeyboardAddLayoutsPanel', function() {
+    var keyboards;
+
+    setup(function(done) {
+      this.root = document.createElement('div');
+      this.root.id = 'keyboard-selection-addMore';
+      this.container = document.createElement('div');
+      this.container.className = 'keyboardAppContainer';
+      this.root.appendChild(this.container);
+      document.body.appendChild(this.root);
+      this.KeyboardContext.init();
+      this.KeyboardContext.keyboards(function(_keyboards) {
+        keyboards = _keyboards;
+        done();
+      });
+    });
+
+    teardown(function() {
+      document.body.removeChild(this.root);
+    });
+
+    suite('Shows all Keyboards and Layouts', function() {
+      setup(function() {
+        this.KeyboardAddLayoutsPanel().init(this.root);
+      });
+
+      function checkDom(container) {
+        var elements = Array.prototype.slice.apply(container.children);
+        assert.equal(elements.length, keyboards.length);
+
+        elements.forEach(function(element, index) {
+          var keyboard = keyboards.get(index);
+          assert.equal(
+            element.querySelector('h2').textContent,
+            keyboard.name,
+            'keyboards[' + index + '] name correct'
+          );
+
+          var ul = element.querySelector('ul');
+          var children = Array.prototype.slice.apply(ul.children);
+          children.forEach(function(li, index2) {
+            assert.equal(
+              li.querySelector('label').textContent,
+              keyboard.layouts[index2].name,
+              'keyboards[' + index + '].layouts[' + index2 + '] name correct'
+            );
+          });
+        });
+      }
+
+      test('creates a div for each keyboard', function() {
+        checkDom(this.container);
+      });
+      test('removing and adding keyboards creates dom', function() {
+        var temp = keyboards.get(1);
+        keyboards.splice(1, 1);
+        checkDom(this.container);
+
+        keyboards.splice(1, 0, temp);
+        checkDom(this.container);
+      });
+      test('keyboards properly observe', function() {
+        var keyboard = keyboards.get(1);
+        var keyboardContainer = this.container.children[1];
+
+        keyboard.name = 'test';
+        assert.equal(
+          keyboardContainer.querySelector('h2').textContent,
+          'test'
+        );
+
+        keyboard.layouts[0].name = 'test';
+        assert.equal(keyboardContainer
+          .querySelector('li:nth-child(1) gaia-checkbox').textContent,
+          'test'
+        );
+
+        var enabled = !keyboard.layouts[0].enabled;
+        keyboard.layouts[0].enabled = enabled;
+        assert.equal(
+          keyboardContainer.querySelector(
+            'li:nth-child(1) gaia-checkbox').checked,
+          enabled
+        );
+      });
+      test('click event on checkbox changes enabled', function() {
+        var layout = keyboards.get(0).layouts[0];
+        var checkbox = this.container.children[1]
+                          .querySelector('li:nth-child(1) gaia-checkbox');
+        checkbox.checked = !checkbox.checked;
+        // might want to fire this as a custom event some day
+        checkbox.dispatchEvent(new CustomEvent('change'));
+        assert.equal(layout.enabled, checkbox.checked);
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/keyboard_add_layouts/panel_test.js

@@ -0,0 +1,89 @@
+'use strict';
+
+suite('KeyboardAddLayoutsPanel', function() {
+  var map = {
+    '*': {
+      'shared/keyboard_helper': 'MockKeyboardHelper',
+      'modules/keyboard_context': 'MockKeyboardContext',
+      'modules/settings_panel': 'MockSettingsPanel',
+      'panels/keyboard_add_layouts/core': 'MockCore'
+    }
+  };
+
+  setup(function(done) {
+    this.fakeRootElement = {
+      querySelector: function() {}
+    };
+
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+    var that = this;
+
+    // Define MockKeyboardHelper
+    this.MockKeyboardHelper = {
+      saveToSettings: function() {}
+    };
+    define('MockKeyboardHelper', function() {
+      return that.MockKeyboardHelper;
+    });
+
+    // Define MockKeyboardContext
+    define('MockKeyboardContext', function() {
+      return {};
+    });
+
+    // Define MockCore
+    this.mockCore = {
+      enabled: false,
+      init: function() {}
+    };
+    this.MockCore = function() {
+      return that.mockCore;
+    };
+    define('MockCore', function() {
+      return that.MockCore;
+    });
+
+    // Define MockSettingsPanel
+    define('MockSettingsPanel', function() {
+      return function(options) {
+        return {
+          init: options.onInit,
+          beforeShow: options.onBeforeShow,
+          beforeHide: options.onBeforeHide,
+          hide: options.onHide
+        };
+      };
+    });
+
+    requireCtx([
+      'panels/keyboard_add_layouts/panel'
+    ],
+    function(KeyboardAddLayoutsPanel) {
+      that.panel = KeyboardAddLayoutsPanel();
+      done();
+    });
+  });
+
+  test('Init the core when onInit', function() {
+    sinon.spy(this.mockCore, 'init');
+    this.panel.init(this.fakeRootElement);
+    sinon.assert.called(this.mockCore.init);
+  });
+
+  test('Save to settings when leaving panel', function() {
+    sinon.spy(this.MockKeyboardHelper, 'saveToSettings');
+    this.panel.beforeHide();
+    sinon.assert.called(this.MockKeyboardHelper.saveToSettings);
+  });
+
+  test('Enabled the core when onBeforeShow', function() {
+    this.panel.beforeShow();
+    assert.ok(this.mockCore.enabled);
+  });
+
+  test('Disable the core when onHide', function() {
+    this.panel.hide();
+    assert.ok(!this.mockCore.enabled);
+  });
+});

gaia/apps/settings/test/unit/panels/languages/language_test.js

@@ -0,0 +1,99 @@
+'use strict';
+
+suite('Languages > ', function() {
+  var mockKeyboardHelper;
+  var languages;
+  var realL10n;
+  var realMozActivity;
+
+  var OSVersion = '' + Math.random();
+
+  var modules = [
+    'shared_mocks/mock_l20n',
+    'shared_mocks/mock_keyboard_helper',
+    'shared_mocks/mock_moz_activity',
+    'unit/mock_settings_cache',
+    'panels/languages/languages'
+  ];
+  var maps = {
+    'panels/languages/languages': {
+      'shared/keyboard_helper': 'shared_mocks/mock_keyboard_helper',
+      'modules/settings_cache': 'unit/mock_settings_cache',
+      'modules/date_time': 'MockDateTime'
+    }
+  };
+
+  suiteSetup(function(done) {
+    // Create a new requirejs context
+    var requireCtx = testRequire([], maps, function() {});
+    var that = this;
+
+    // Define MockDateTime
+    this.MockDateTime = {};
+    define('MockDateTime', function() {
+      return that.MockDateTime;
+    });
+
+    requireCtx(modules, function(
+      MockL10n, MockKeyboardHelper, MockMozActivity, MockSettingsCache,
+      Languages) {
+      // mock l10n
+      realL10n = document.l10n;
+      document.l10n = MockL10n;
+
+      // mock keyboard helper
+      mockKeyboardHelper = MockKeyboardHelper;
+
+      // mock MozActivity
+      realMozActivity = window.MozActivity;
+      window.MozActivity = MockMozActivity;
+
+      // mock SettingsCache
+      that.MockSettingsCache = MockSettingsCache;
+      MockSettingsCache.mockSettings({
+        'langpack.channel': OSVersion
+      });
+
+      languages = Languages();
+      languages.onInit({}, {
+        moreLanguages: document.createElement('a'),
+        langSel: document.createElement('select')
+      });
+      done();
+    });
+  });
+
+  suiteTeardown(function() {
+    this.MockSettingsCache.mTeardown();
+    document.l10n = realL10n;
+    window.MozActivity = realMozActivity;
+  });
+
+  suite('when localized change', function() {
+    setup(function() {
+      this.sinon.stub(mockKeyboardHelper, 'changeDefaultLayouts');
+      this.sinon.stub(languages, 'updateDateTime');
+    });
+    test('we would call update() and changeDefaultLayouts()', function() {
+      languages.onLocalized();
+      assert.ok(languages.updateDateTime.called);
+      assert.ok(mockKeyboardHelper.changeDefaultLayouts.called);
+    });
+  });
+
+  suite('when get more languages is activated', function() {
+    setup(function() {
+      window.MozActivity.mSetup();
+    });
+    teardown(function() {
+      window.MozActivity.mTeardown();
+    });
+    test('we launch a MozActivity', function() {
+      languages.showMoreLanguages();
+      assert.equal(window.MozActivity.calls[0].name, 'marketplace-category');
+      assert.equal(window.MozActivity.calls[0].data.slug, 'langpacks');
+      assert.equal(window.MozActivity.calls[0].data.fxos_version, OSVersion);
+    });
+  });
+
+});

gaia/apps/settings/test/unit/panels/languages/panel_test.js

@@ -0,0 +1,130 @@
+'use strict';
+
+suite('Languages Panel > ', function() {
+  var realSettings;
+
+  var modules = [
+    'panels/languages/panel',
+    'shared_mocks/mock_navigator_moz_settings',
+  ];
+  var map = {
+    '*': {
+      'panels/languages/languages': 'MockLanguages',
+      'modules/settings_panel': 'MockSettingsPanel'
+    }
+  };
+
+  suiteSetup(function(done) {
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+    var that = this;
+
+    // Define MockSettingsPanel
+    define('MockSettingsPanel', function() {
+      return function(options) {
+        return {
+          onBeforeShow: options.onBeforeShow,
+          onBeforeHide: options.onBeforeHide
+        };
+      };
+    });
+
+    // Define MockLanguages
+    this.mockLanguages = {
+      onLocalized: sinon.spy(),
+      buildList: sinon.spy(),
+      updateDateTime: sinon.spy(),
+    };
+    define('MockLanguages', function() {
+      return function MockLanguages() {
+        return that.mockLanguages;
+      };
+    });
+
+    requireCtx(modules, function(LanguagePanel, MockNavigatorSettings) {
+      realSettings = window.navigator.mozSettings;
+      window.navigator.mozSettings = MockNavigatorSettings;
+
+      that.panel = LanguagePanel();
+      done();
+    });
+  });
+
+  suiteTeardown(function() {
+    window.navigator.mozSettings = realSettings;
+  });
+
+  suite('panel has not been opened yet', function() {
+    setup(function() {
+      // spies are not sandboxed in order to make them available early for
+      // LanguagePanel to bind them;  reset them manually here.
+      this.mockLanguages.onLocalized.reset();
+      this.mockLanguages.buildList.reset();
+    });
+    test('DOMRetranslated fires', function() {
+      document.dispatchEvent(new CustomEvent('DOMRetranslated'));
+      assert.isFalse(
+        this.mockLanguages.onLocalized.called, 'onLocalized was never called');
+    });
+    test('additionallanguageschange fires', function() {
+      document.dispatchEvent(new CustomEvent('additionallanguageschange'));
+      assert.isFalse(
+        this.mockLanguages.buildList.called, 'buildList was never called');
+    });
+  });
+
+  suite('panel is open', function() {
+    setup(function() {
+      this.panel.onBeforeShow();
+      this.mockLanguages.onLocalized.reset();
+      this.mockLanguages.buildList.reset();
+    });
+    teardown(function() {
+      this.panel.onBeforeHide();
+    });
+    test('localized fires', function() {
+      document.dispatchEvent(new CustomEvent('DOMRetranslated'));
+      assert.ok(
+        this.mockLanguages.onLocalized.called, 'onLocalized was called');
+    });
+    test('additionallanguageschange fires', function() {
+      document.dispatchEvent(new CustomEvent('additionallanguageschange'));
+      assert.ok(
+        this.mockLanguages.buildList.called, 'buildList was called');
+    });
+  });
+
+  suite('screen reader was started', function() {
+    setup(function() {
+      this.panel.onBeforeShow();
+    });
+
+    test('language list updated', function() {
+      this.mockLanguages.buildList.reset();
+      navigator.mozSettings.mTriggerObservers(
+        'accessibility.screenreader', { settingValue: true });
+      assert.isTrue(
+        this.mockLanguages.buildList.called, 'buildList was never called');
+    });
+  });
+
+  suite('panel was closed', function() {
+    setup(function() {
+      this.panel.onBeforeShow();
+      this.panel.onBeforeHide();
+      this.mockLanguages.onLocalized.reset();
+      this.mockLanguages.buildList.reset();
+    });
+    test('localized fires', function() {
+      window.dispatchEvent(new CustomEvent('localized'));
+      assert.isFalse(
+        this.mockLanguages.onLocalized.called, 'onLocalized was never called');
+    });
+    test('additionallanguageschange fires', function() {
+      document.dispatchEvent(new CustomEvent('additionallanguageschange'));
+      assert.isFalse(
+        this.mockLanguages.buildList.called, 'buildList was never called');
+    });
+  });
+
+});

gaia/apps/settings/test/unit/panels/messaging/panel_test.js

@@ -0,0 +1,114 @@
+'use strict';
+
+suite('Messaging panel', function() {
+  var mockSettingsPanel;
+  var mockSIMSlotManager;
+  var mockMessaging;
+  var messagingPanel;
+
+  var modules = [
+    'panels/messaging/panel',
+    'shared_mocks/mock_simslot_manager',
+    'shared_mocks/mock_mobile_operator',
+    'unit/mock_messaging',
+    'unit/mock_settings_panel',
+    'unit/mock_settings_service'
+  ];
+
+  var map = {
+    '*': {
+      'shared/simslot_manager': 'shared_mocks/mock_simslot_manager',
+      'shared/mobile_operator': 'shared_mocks/mock_mobile_operator',
+      'modules/messaging': 'unit/mock_messaging',
+      'modules/settings_panel': 'unit/mock_settings_panel',
+      'modules/settings_service': 'unit/mock_settings_service'
+    }
+  };
+
+  setup(function(done) {
+    testRequire(modules, map, function(MessagingPanel, MockSIMSlotManager,
+      MockMobileOperator, MockMessaging, MockSettingsPanel,
+      MockSettingsService) {
+        mockMessaging = MockMessaging;
+        mockSIMSlotManager = MockSIMSlotManager;
+        mockSettingsPanel = MockSettingsPanel;
+        mockSettingsPanel.mInnerFunction = function(options) {
+          var obj = {};
+          for (var key in options) {
+            obj[key] = options[key];
+          }
+          return obj;
+        };
+        messagingPanel = MessagingPanel();
+        done();
+    });
+  });
+
+  suite('onInit', function() {
+    var fakePanel = document.createElement('div');
+
+    suite('when DSDS', function() {
+      setup(function() {
+        this.sinon.stub(mockSIMSlotManager, 'isMultiSIM').returns(true);
+        this.sinon.stub(mockMessaging, 'injectCBSTemplate');
+      });
+
+      test('do nothing', function(done) {
+        Promise.resolve(messagingPanel.onInit(fakePanel))
+        .then(function() {
+          assert.isFalse(mockMessaging.injectCBSTemplate.called);
+        }).then(done, done);
+      });
+    });
+
+    suite('when single SIM', function() {
+      setup(function() {
+        this.sinon.stub(mockSIMSlotManager, 'isMultiSIM').returns(false);
+        this.sinon.stub(mockMessaging, 'injectCBSTemplate');
+        this.sinon.stub(mockMessaging.initCBS, 'bind');
+        this.sinon.stub(mockMessaging.disableItems, 'bind');
+        this.sinon.stub(messagingPanel._updateSmsc, 'bind');
+        this.sinon.stub(messagingPanel, '_initDeliveryReportSettings');
+      });
+
+      test('do following operations', function(done) {
+        Promise.resolve(messagingPanel.onInit(fakePanel))
+        .then(function() {
+          assert.isTrue(mockMessaging.injectCBSTemplate.called);
+          assert.isTrue(mockMessaging.initCBS.bind.calledWith(
+            mockMessaging, fakePanel, 0));
+          assert.isTrue(mockMessaging.disableItems.bind.calledWith(
+            mockMessaging, fakePanel));
+          assert.isTrue(messagingPanel._updateSmsc.bind.calledWith(
+            null, 0));
+          assert.isTrue(messagingPanel._initDeliveryReportSettings.called);
+        }).then(done, done);
+      });
+    });
+  });
+
+  suite('onBeforeShow', function() {
+    var fakePanel = document.createElement('div');
+
+    setup(function() {
+      this.sinon.stub(mockSIMSlotManager, 'isMultiSIM').returns(true);
+      this.sinon.stub(mockMessaging.disableItems, 'bind');
+      this.sinon.stub(messagingPanel, '_showDsds');
+      this.sinon.stub(messagingPanel, '_initDeliveryReportSettings');
+      this.sinon.stub(messagingPanel._initCarrierNames, 'bind');
+      this.sinon.stub(messagingPanel._bindSimcardsClickEvent, 'bind');
+    });
+
+    test('will do following operations', function(done) {
+      Promise.resolve(messagingPanel.onBeforeShow(fakePanel))
+      .then(function() {
+        assert.isTrue(mockMessaging.disableItems.bind.calledWith(
+          mockMessaging, fakePanel));
+        assert.isTrue(messagingPanel._showDsds.called);
+        assert.isTrue(messagingPanel._initDeliveryReportSettings.called);
+        assert.isTrue(messagingPanel._initCarrierNames.bind.called);
+        assert.isTrue(messagingPanel._bindSimcardsClickEvent.bind.called);
+      }).then(done, done);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/operator_settings/models/auto_selection_model_test.js

@@ -0,0 +1,145 @@
+'use strict';
+
+suite('AutoSelectionModel', function() {
+  var AutoSelectionModel;
+  var MobileConnectionWrapper;
+  var Observable;
+
+  var mockConnWrapper;
+
+  var modules = [
+    'panels/operator_settings/models/auto_selection_model',
+    'panels/operator_settings/models/mobile_connection_wrapper',
+    'modules/mvvm/observable'
+  ];
+
+  suiteSetup(function(done) {
+    testRequire(modules, (asModel, connWrapper, observable) => {
+      AutoSelectionModel = asModel;
+      MobileConnectionWrapper = connWrapper;
+      Observable = observable;
+      done();
+    });
+  });
+
+  setup(function() {
+    mockConnWrapper = {
+      networkSelectionMode: null,
+      observe: function() {},
+      setAutoSelection: function() {}
+    };
+  });
+
+  suite('initial state', function() {
+    test('networkSelectionMode is manual', function() {
+        mockConnWrapper.networkSelectionMode = 'manual';
+        var model = AutoSelectionModel(mockConnWrapper);
+        assert.equal(model.targetState, AutoSelectionModel.STATE.DISABLED);
+        assert.equal(model.currentState, AutoSelectionModel.STATE.DISABLED);
+    });
+
+    test('networkSelectionMode is automatic', function() {
+        mockConnWrapper.networkSelectionMode = 'automatic';
+        var model = AutoSelectionModel(mockConnWrapper);
+        assert.equal(model.targetState, AutoSelectionModel.STATE.ENABLED);
+        assert.equal(model.currentState, AutoSelectionModel.STATE.ENABLED);
+    });
+
+    test('networkSelectionMode is a value other then manual and automatic',
+      function() {
+        mockConnWrapper.networkSelectionMode = 'fake_value';
+        var model = AutoSelectionModel(mockConnWrapper);
+        assert.equal(model.targetState, AutoSelectionModel.STATE.UNKNOWN);
+        assert.equal(model.currentState, AutoSelectionModel.STATE.UNKNOWN);
+    });
+  });
+
+  suite('set target state', function() {
+    suite('mobile connection is idle', function() {
+      test('setAutoSelection should be called when setting the state to ' +
+        'enabled', function(done) {
+          mockConnWrapper.networkSelectionMode = 'manual';
+          mockConnWrapper.state = MobileConnectionWrapper.STATE.IDLE;
+          sinon.stub(mockConnWrapper, 'setAutoSelection', function() {
+            return Promise.resolve();
+          });
+
+          var model = AutoSelectionModel(mockConnWrapper);
+          model.observe('transitioning', function(transitioning) {
+            if (transitioning) {
+              return;
+            }
+            sinon.assert.called(mockConnWrapper.setAutoSelection);
+            assert.equal(model.targetState, AutoSelectionModel.STATE.ENABLED);
+            assert.equal(model.currentState, AutoSelectionModel.STATE.ENABLED);
+            done();
+          });
+          model.targetState = AutoSelectionModel.STATE.ENABLED;
+      });
+      test('targetState should be the current network selection mode when ' +
+        'setAutoSelection fails', function(done) {
+          mockConnWrapper.networkSelectionMode = 'manual';
+          mockConnWrapper.state = MobileConnectionWrapper.STATE.IDLE;
+          sinon.stub(mockConnWrapper, 'setAutoSelection', function() {
+            return Promise.reject();
+          });
+
+          var model = AutoSelectionModel(mockConnWrapper);
+          model.observe('transitioning', function(transitioning) {
+            if (transitioning) {
+              return;
+            }
+            sinon.assert.called(mockConnWrapper.setAutoSelection);
+            assert.equal(model.targetState, AutoSelectionModel.STATE.DISABLED);
+            assert.equal(model.currentState, AutoSelectionModel.STATE.DISABLED);
+            done();
+          });
+          model.targetState = AutoSelectionModel.STATE.ENABLED;
+      });
+    });
+
+    suite('mobile connection is busy', function() {
+      test('the final state should be the last targetState', function(done) {
+        var USER_ACTION_TIME = 10;
+
+        mockConnWrapper = Observable({
+          networkSelectionMode: 'manual',
+          state: MobileConnectionWrapper.STATE.BUSY,
+          setAutoSelection: sinon.stub().returns(Promise.resolve())
+        });
+
+        var finalTargetState = AutoSelectionModel.STATE.ENABLED;
+        var model = AutoSelectionModel(mockConnWrapper);
+        model.observe('transitioning', function(transitioning) {
+          if (transitioning) {
+            return;
+          }
+          assert.equal(model.targetState, finalTargetState);
+          assert.equal(model.currentState, finalTargetState);
+          done();
+        });
+
+        // The following code tries to simulate random actions from the user and
+        // stop at `finalTargetState`.
+        var count = 0;
+        var intervalId = setInterval(function() {
+          count++;
+          if (count === 11) {
+            clearInterval(intervalId);
+            model.targetState = finalTargetState;
+            // After a series of operation, we make the mobile connection become
+            // idle.
+            setTimeout(() => {
+              mockConnWrapper.state = MobileConnectionWrapper.STATE.IDLE;
+            }, 100);
+          } else {
+            // Some random actions.
+            model.targetState = (Math.random() * 100) % 2 ?
+              AutoSelectionModel.STATE.ENABLED :
+              AutoSelectionModel.STATE.DISABLED;
+          }
+        }, USER_ACTION_TIME);
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/operator_settings/models/mobile_connection_wrapper_test.js

@@ -0,0 +1,126 @@
+'use strict';
+
+suite('MobileConnectionWrapper', function() {
+  var MobileConnectionWrapper;
+
+  var wrapper;
+  var mockConn;
+  var mockNetworks = [];
+  var mockNetwork = {};
+
+  var modules = [
+    'panels/operator_settings/models/mobile_connection_wrapper'
+  ];
+
+  suiteSetup(function(done) { 
+    testRequire(modules, (connWrapper) => {
+      MobileConnectionWrapper = connWrapper;
+      done();
+    });
+  });
+
+  setup(function() {
+    mockConn = {
+      networkSelectionMode: 'auto',
+      getNetworks: sinon.stub().returns(Promise.resolve(mockNetworks)),
+      selectNetwork: sinon.stub().returns(Promise.resolve()),
+      selectNetworkAutomatically: sinon.stub().returns(Promise.resolve())
+    };
+    wrapper = MobileConnectionWrapper(mockConn);
+  });
+
+  suite('initial state', function() {
+    test('should store correct mobile connection object', function() {
+      assert.equal(wrapper._conn, mockConn);
+    });
+
+    test('the state should be idle', function() {
+      assert.equal(wrapper.state, MobileConnectionWrapper.STATE.IDLE);
+    });
+  });
+
+  suite('networkSelectionMode', function() {
+    test('should return correct mode', function() {
+      assert.equal(wrapper.networkSelectionMode, mockConn.networkSelectionMode);
+    });
+  });
+
+  suite('stop', () => {
+    test('should cancel the current search', function(done) {
+      assert.isRejected(wrapper.search(), /^canceled$/).notify(done);
+      wrapper.stop();
+    });
+  });
+
+  // The behavior of the following three methods are the same.
+  [{
+    method: 'search',
+    mozConnMethod: 'getNetworks'
+  }, {
+    method: 'connect',
+    mozConnMethod: 'selectNetwork',
+    params: [mockNetwork]
+  }, {
+    method: 'setAutoSelection',
+    mozConnMethod: 'selectNetworkAutomatically'
+  }].forEach(function({method, params, mozConnMethod}) {
+    var callMethod = function(p) {
+      return wrapper[method].apply(wrapper, p);
+    };
+
+    suite(method, function() {
+      suite('when the state is not idle', function() {
+        setup(function() {
+          wrapper._state = MobileConnectionWrapper.STATE.BUSY;
+        });
+
+        test('should reject', function(done) {
+          assert.isRejected(callMethod(params), /^busy$/).notify(done);
+        });
+
+        test('should not call to method on mobile connection', function(done) {
+          callMethod(params).catch(() => {
+            sinon.assert.notCalled(mockConn[mozConnMethod]);
+          }).then(done, done); 
+        });
+      });
+
+      suite('when the state is idle', function() {
+        test('should call to mobile connection with correct parameters',
+          function(done) {
+            callMethod(params).then(() => {
+              sinon.assert.calledWith.apply(null,
+                [mockConn[mozConnMethod]].concat(params));
+            }).then(done, done);
+        });
+
+        test('the state should change to busy and then idle when completed',
+          function(done) {
+            callMethod(params).then(() => {
+              assert.equal(wrapper.state, MobileConnectionWrapper.STATE.IDLE);
+            }).then(done, done);
+            assert.equal(wrapper.state, MobileConnectionWrapper.STATE.BUSY);
+        });
+      });
+
+      suite('when mobile connection rejects', function() {
+        setup(function() {
+          mockConn[mozConnMethod] =
+            sinon.stub().returns(Promise.reject('error'));
+        });
+
+        test('should reject with the error', function(done) {
+          assert.isRejected(callMethod(params), /^error$/).notify(done);
+        });
+
+        test('the state should change to busy and then idle when rejected',
+          function(done) {
+            callMethod(params).catch(() => {
+              assert.equal(wrapper.state, MobileConnectionWrapper.STATE.IDLE);
+            }).then(done, done);
+            assert.equal(wrapper.state, MobileConnectionWrapper.STATE.BUSY);
+        });
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/operator_settings/models/network_type_manager_test.js

@@ -0,0 +1,168 @@
+/* global MockNavigatorMozMobileConnections */
+'use strict';
+
+require('/shared/test/unit/mocks/mock_navigator_moz_mobile_connections.js');
+
+suite('NetworkTypeManager', function() {
+  var NetworkTypeManager;
+  var networkTypeManager;
+  var _mobileConnection;
+  var realMozMobileConnections;
+  var mockNetworkInfo;
+  var mockSupportedNetworkTypes = [
+    'wcdma/gsm',
+    'gsm',
+    'wcdma',
+    'wcdma/gsm-auto',
+    'cdma/evdo',
+    'cdma',
+    'evdo',
+    'wcdma/gsm/cdma/evdo',
+    'lte/cdma/evdo',
+    'lte/wcdma/gsm',
+    'lte/wcdma/gsm/cdma/evdo',
+    'lte',
+    'lte/wcdma'
+  ];
+  var mockSettingshelper;
+
+  var modules = [
+    'panels/operator_settings/models/network_type_manager'
+  ];
+
+  var map = {
+    '*': {
+      'shared/settings_helper': 'MockSettingsHelper',
+      'modules/mobile/suppoted_network_info': 'MockNetworkInfo'
+    }
+  };
+
+  setup(function(done) {
+    var requireCtx = testRequire([], map, function() {});
+
+    mockSettingshelper = {
+      get: function() {},
+      set: function() {}
+    };
+    define('MockSettingsHelper', function() {
+      return function() {
+        return mockSettingshelper;
+      };
+    });
+
+    mockNetworkInfo = {
+      getSupportedNetworkInfo: function(conn, callback) {}
+    };
+    define('MockNetworkInfo', function() {
+      return mockNetworkInfo;
+    });
+
+    realMozMobileConnections = navigator.mozMobileConnections;
+    navigator.mozMobileConnections = MockNavigatorMozMobileConnections;
+    _mobileConnection = MockNavigatorMozMobileConnections[0];
+    _mobileConnection.supportedNetworkTypes = mockSupportedNetworkTypes;
+
+    requireCtx(modules, (_NetworkTypeManager) => {
+      NetworkTypeManager = _NetworkTypeManager;
+      networkTypeManager = NetworkTypeManager(_mobileConnection);
+      done();
+    });
+  });
+
+  teardown(function() {
+    _mobileConnection = null;
+    navigator.mozMobileConnections = realMozMobileConnections;
+  });
+
+  suite('initial state', function() {
+    suite('support setting preferred network type', function() {
+      test('networkTypes', function(done) {
+        var doAssert = function() {
+          if (networkTypeManager.networkTypes.array.length !== 0) {
+            assert.deepEqual(networkTypeManager.networkTypes.array,
+              mockSupportedNetworkTypes);
+            done();
+          }
+        };
+        networkTypeManager.networkTypes.observe('length', doAssert);
+        doAssert();
+      });
+
+      test('preferredNetworkType', function(done) {
+        networkTypeManager._preferredNetworkType = 'mockNetworkType';
+        var doAssert = function() {
+          if (networkTypeManager.preferredNetworkType !== null) {
+            assert.equal(networkTypeManager.preferredNetworkType,
+              'mockNetworkType');
+            done();
+          }
+        };
+        networkTypeManager.observe('preferredNetworkType', doAssert);
+        doAssert();
+      });
+
+      test('_serviceId', function() {
+        assert.equal(networkTypeManager._serviceId, 0);
+      });
+    });
+
+    suite('does not support setting preferred network type', function() {
+      test('should throw an exception', function() {
+        assert.throw(() => {
+          networkTypeManager({});
+        }, Error);
+      });
+    });
+  });
+
+  suite('getSupportedNetworkInfo', function() {
+    suite('_supportedNetworkInfo is not null', function() {
+      test('should return the value of _supportedNetworkInfo', function(done) {
+        var mockResult = {};
+        networkTypeManager._supportedNetworkInfo = mockResult;
+        assert.becomes(networkTypeManager.getSupportedNetworkInfo(),
+          mockResult).notify(done);
+      });
+    });
+  });
+
+  suite('setPreferredNetworkType', function() {
+    var mockNetworkType = 'mockNetworkType';
+
+    setup(function() {
+      sinon.stub(_mobileConnection, 'setPreferredNetworkType', function() {
+        return Promise.resolve();
+      });
+      networkTypeManager = NetworkTypeManager(_mobileConnection);
+    });
+
+    teardown(function() {
+      _mobileConnection.setPreferredNetworkType.restore();
+    });
+
+    test('preferredNetworkType should change to the setting value',
+      function(done) {
+        networkTypeManager.observe('preferredNetworkType', function(value) {
+          if (value === mockNetworkType) {
+            done();
+          }
+        });
+        networkTypeManager.setPreferredNetworkType(mockNetworkType);
+    });
+
+    test('the setting value should be stored using SettingsHelper',
+      function(done) {
+        var settingsHeplerGetCallback;
+        sinon.stub(mockSettingshelper, 'get', function(callback) {
+          settingsHeplerGetCallback = callback;
+        });
+        sinon.spy(mockSettingshelper, 'set');
+        networkTypeManager.setPreferredNetworkType(mockNetworkType).then(() => {
+          settingsHeplerGetCallback({});
+          assert.deepEqual(mockSettingshelper.set.args[0][0], {
+            '0': mockNetworkType
+          });
+        }).then(done, done);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/operator_settings/models/operator_item_test.js

@@ -0,0 +1,142 @@
+'use strict';
+
+suite('OperatorItem', function() {
+  var OperatorItem;
+
+  var modules = [
+    'panels/operator_settings/models/operator_item'
+  ];
+
+  setup(function(done) {
+    testRequire(modules, (_OperatorItem) => {
+      OperatorItem = _OperatorItem;
+      done();
+    });
+  });
+
+  suite('name', function() {
+    test('when short name is available', function() {
+      var mockNetwork = {
+        state: 'available',
+        shortName: 'shortName',
+        longName: 'longName' 
+      };
+
+      var operatorItem = OperatorItem(mockNetwork);
+      assert.equal(operatorItem.name, mockNetwork.shortName);
+    });
+
+    test('when only long name is available', function() {
+      var mockNetwork = {
+        state: 'available',
+        longName: 'longName' 
+      };
+
+      var operatorItem = OperatorItem(mockNetwork);
+      assert.equal(operatorItem.name, mockNetwork.longName);
+    });
+  });
+
+  suite('network', function() {
+    test('should be the network used for constructing', function() {
+      var mockNetwork = {
+        state: 'available',
+        shortName: 'shortName',
+        longName: 'longName' 
+      };
+
+      var operatorItem = OperatorItem(mockNetwork);
+      assert.equal(operatorItem.network, mockNetwork);
+    });
+  });
+
+  suite('state and _type', function() {
+    test('when network.state is current', function() {
+      var mockNetwork = {
+        state: 'current'
+      };
+
+      var operatorItem = OperatorItem(mockNetwork);
+      assert.equal(operatorItem.state, OperatorItem.STATE.CONNECTED);
+      assert.equal(operatorItem._type, OperatorItem.TYPE.AVAILABLE);
+    });
+
+    test('when network.state is connected', function() {
+      var mockNetwork = {
+        state: 'connected'
+      };
+
+      var operatorItem = OperatorItem(mockNetwork);
+      assert.equal(operatorItem.state, OperatorItem.STATE.CONNECTED);
+      assert.equal(operatorItem._type, OperatorItem.TYPE.AVAILABLE);
+    });
+
+    test('when network.state is available', function() {
+      var mockNetwork = {
+        state: 'available'
+      };
+
+      var operatorItem = OperatorItem(mockNetwork);
+      assert.equal(operatorItem.state, OperatorItem.STATE.IDLE);
+      assert.equal(operatorItem._type, OperatorItem.TYPE.AVAILABLE);
+    });
+
+    test('when network.state is forbidden', function() {
+      var mockNetwork = {
+        state: 'forbidden'
+      };
+
+      var operatorItem = OperatorItem(mockNetwork);
+      assert.equal(operatorItem.state, OperatorItem.STATE.IDLE);
+      assert.equal(operatorItem._type, OperatorItem.TYPE.FORBIDDEN);
+    });
+
+    test('when network.state is others', function() {
+      var mockNetwork = {
+        state: 'other_state'
+      };
+
+      var operatorItem = OperatorItem(mockNetwork);
+      assert.equal(operatorItem.state, OperatorItem.STATE.IDLE);
+      assert.equal(operatorItem._type, OperatorItem.TYPE.UNKNOWN);
+    });
+  });
+
+  suite('info', function() {
+    var mockNetwork;
+    var operatorItem;
+
+    setup(function() {
+      mockNetwork = {
+        state: 'other_state'
+      };
+      operatorItem = OperatorItem(mockNetwork);
+    });
+
+    test('when the state is OperatorItem.STATE.IDLE', function() {
+      operatorItem._state = OperatorItem.STATE.IDLE;
+      assert.equal(operatorItem.info, operatorItem._type,
+        'info should be _type');
+    });
+
+    test('when the state is not OperatorItem.STATE.IDLE', function() {
+      operatorItem._state = OperatorItem.STATE.CONNECTING;
+      assert.equal(operatorItem.info, operatorItem._state,
+        'info should be _state');
+
+      operatorItem._state = OperatorItem.STATE.CONNECTED;
+      assert.equal(operatorItem.info, operatorItem._state,
+        'info should be _state');
+
+      operatorItem._state = OperatorItem.STATE.FAILED;
+      assert.equal(operatorItem.info, operatorItem._state,
+        'info should be _state');
+    });
+
+    test('when the state is null', function() {
+      operatorItem._state = null;
+      assert.equal(operatorItem.info, OperatorItem.TYPE.UNKNOWN,
+        'info should be OperatorItem.TYPE.UNKNOWN');
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/operator_settings/models/operator_manager_test.js

@@ -0,0 +1,358 @@
+'use strict';
+
+suite('OperatorManager', function() {
+  var OperatorManager;
+  var OperatorItem;
+  var Observable;
+  var AutoSelectionModel;
+  var mockConn = {};
+
+  var mockAutoSelectionModel;
+  var mockConnWrapper;
+
+  var operatorManager;
+
+  var modules = [
+    'panels/operator_settings/models/operator_manager',
+    'panels/operator_settings/models/operator_item',
+    'panels/operator_settings/models/auto_selection_model',
+    'modules/mvvm/observable'
+  ];
+
+  var map = {
+    '*': {
+      'panels/operator_settings/models/mobile_connection_wrapper':
+        'MockMobileConnectionWrapper',
+      'panels/operator_settings/models/auto_selection_model':
+        'MockAutoSelectionModel',
+      'panels/operator_settings/models/operator_item':
+        'MockOperatorItem'
+    }
+  };
+
+  setup(function(done) {
+    var requireCtx = testRequire([], map, function() {});
+
+    mockConnWrapper = {
+      search: function() {},
+      stop: function() {},
+      connect: function() {}
+    };
+    define('MockMobileConnectionWrapper', function() {
+      return function() {
+        return mockConnWrapper;
+      };
+    });
+
+    define('MockAutoSelectionModel', function() {
+      var ctor = function() {
+        return mockAutoSelectionModel;
+      };
+      ctor.STATE = {
+        UNKNOWN: 0,
+        ENABLED: 1,
+        DISABLED: 2
+      };
+      return ctor;
+    });
+
+    define('MockOperatorItem', function() {
+      var ctor = function(network) {
+        return {
+          network: network
+        };
+      };
+      ctor.STATE = {
+        IDLE: 'idle',
+        CONNECTING: 'connecting',
+        CONNECTED: 'connected',
+        FAILED: 'failed'
+      };
+      return ctor;
+    });
+
+    requireCtx(modules, (_OperatorManager, _OperatorItem, _AutoSelectionModel,
+        _Observable) => {
+      OperatorManager = _OperatorManager;
+      OperatorItem = _OperatorItem;
+      AutoSelectionModel = _AutoSelectionModel;
+      Observable = _Observable;
+
+      mockAutoSelectionModel = Observable({
+        targetState: null
+      });
+
+      operatorManager = OperatorManager(mockConn);
+      done();
+    });
+  });
+
+  suite('autoSelectionState', function() {
+    var mockAutoSelectionState = 'mockState';
+    
+    setup(function() {
+      mockAutoSelectionModel.targetState = mockAutoSelectionState;
+    });
+
+    test('autoSelectionState should be the current target state of the auto ' +
+      'selection model', function(done) {
+        var doAssert = function() {
+          if (operatorManager.autoSelectionState !== null) {
+            assert.equal(operatorManager.autoSelectionState,
+              mockAutoSelectionState);
+            done();
+          }
+        };
+        operatorManager.observe('autoSelectionState', doAssert);
+        doAssert();
+    });
+
+    test('autoSelectionState should change along with the target state of ' +
+      'the auto selection model', function() {
+        mockAutoSelectionModel.targetState = 'anotherState';
+        assert.equal(operatorManager.autoSelectionState,
+          mockAutoSelectionModel.targetState);
+    });
+
+    test('the target state of the auto selection mode should change along ' +
+      'with _autoSelectionState', function() {
+        operatorManager._autoSelectionState = 'anoterState';
+        assert.equal(mockAutoSelectionModel.targetState,
+          operatorManager.autoSelectionState);
+      });
+  });
+
+  suite('search', function() {
+    var mockNetworks = [{
+      state: 'connected'
+    }, {
+      state: 'available'
+    }, {
+      state: 'forbidden'
+    }];
+
+    suite('when searching', function() {
+      test('should do nothing', function() {
+        this.sinon.stub(mockConnWrapper, 'search');
+        operatorManager._searching = true;
+        operatorManager.search();
+        sinon.assert.notCalled(mockConnWrapper.search);
+      });
+    });
+
+    suite('when not searching', function() {
+      test('operators should become the result returned from conn wrapper',
+        function(done) {
+          this.sinon.stub(mockConnWrapper, 'search', function() {
+            return Promise.resolve(mockNetworks);
+          });
+          operatorManager._searching = false;
+          operatorManager.search().then(function() {
+            mockNetworks.forEach(function(network, index) {
+              assert.equal(network.state,
+                operatorManager.operators.get(index).network.state);
+            });
+          }).then(done, done);
+      });
+
+      test('searching should be true while searching', function(done) {
+        this.sinon.stub(mockConnWrapper, 'search', function() {
+          return Promise.resolve();
+        });
+        operatorManager._searching = false;
+        operatorManager.search().then(function() {
+          assert.isFalse(operatorManager.searching);
+        }).then(done, done);
+        assert.isTrue(operatorManager.searching);
+      });
+
+      test('should not clear the operator list when being rejected with busy',
+        function(done) {
+          var mockOperators = [{}, {}];
+          this.sinon.stub(mockConnWrapper, 'search', function() {
+            return Promise.reject('busy');
+          });
+          operatorManager._searching = false;
+          operatorManager._operators.reset(mockOperators);
+          operatorManager.search().then(function() {
+            assert.deepEqual(operatorManager.operators.array, mockOperators);
+          }).then(done, done);
+      });
+    });
+  });
+
+  suite('stop', function() {
+    test('should call to stop of the mobile connection wrapper', function() {
+      this.sinon.stub(operatorManager._connWrapper, 'stop');
+      operatorManager.stop();
+      sinon.assert.called(operatorManager._connWrapper.stop);
+    });
+
+    test('_isSearching should be set to false', function() {
+      operatorManager._searching = true;
+      operatorManager.stop();
+      assert.isFalse(operatorManager._searching);
+    });
+  });
+
+  suite('connect', function() {
+    var operatorItem;
+    setup(function() {
+      operatorItem = {
+        setState: sinon.stub()
+      };
+    });
+
+    test('should early return when operator manager is connecting', function() {
+      this.sinon.stub(mockConnWrapper, 'connect', function() {
+        return Promise.resolve();
+      });
+      operatorManager._connecting = true;
+      operatorManager.connect(operatorItem);
+      sinon.assert.notCalled(mockConnWrapper.connect);
+    });
+
+    test('should early return when the operator is already connected',
+      function() {
+        this.sinon.stub(mockConnWrapper, 'connect', function() {
+          return Promise.resolve();
+        });
+        operatorManager._connecting = false;
+        operatorManager._connectedOperatorItem = operatorItem;
+        operatorManager.connect(operatorItem);
+        sinon.assert.notCalled(mockConnWrapper.connect);
+    });
+
+    test('connectedOperatorItem should be the set correctly when success',
+      function() {
+        this.sinon.stub(mockConnWrapper, 'connect', function() {
+          return Promise.resolve();
+        });
+        operatorManager.connect(operatorItem).then(function() {
+          assert.equal(operatorManager.connectedOperatorItem, operatorItem);
+        });
+    });
+
+    suite('operator item states', function() {
+      test('should set the operator item as connecting at start', function() {
+        this.sinon.stub(mockConnWrapper, 'connect', function() {
+          return Promise.resolve();
+        });
+        operatorManager.connect(operatorItem);
+        sinon.assert.calledWith(operatorItem.setState,
+          OperatorItem.STATE.CONNECTING);
+      });
+
+      test('should set the operator item as connected when success',
+        function(done) {
+          this.sinon.stub(mockConnWrapper, 'connect', function() {
+            return Promise.resolve();
+          });
+          operatorManager.connect(operatorItem).then(function() {
+            sinon.assert.calledWith(operatorItem.setState,
+              OperatorItem.STATE.CONNECTED);
+            done();
+          });
+      });
+
+      test('should set the operator item as connected when failed',
+        function(done) {
+          this.sinon.stub(mockConnWrapper, 'connect', function() {
+            return Promise.reject();
+          });
+          operatorManager.connect(operatorItem).then(function() {
+            sinon.assert.calledWith(operatorItem.setState,
+              OperatorItem.STATE.FAILED);
+          }).then(done, done);
+      });
+
+      test('should set the operator item as idle when reconnecting',
+        function(done) {
+          var clock = sinon.useFakeTimers();
+          this.sinon.stub(mockConnWrapper, 'connect', function() {
+            return Promise.reject();
+          });
+          operatorManager.connect(operatorItem).then(function() {
+            operatorItem.setState.reset();
+            clock.tick(6000);
+            sinon.assert.calledWith(operatorItem.setState,
+              OperatorItem.STATE.IDLE);
+            clock.restore();
+          }).then(done, done);
+        });
+    });
+
+    suite('should reconnect when possible', function() {
+      var clock;
+      var originalConnectedItem;
+
+      setup(function() {
+        clock = sinon.useFakeTimers();
+        this.sinon.stub(mockConnWrapper, 'connect', function() {
+          return Promise.reject();
+        });
+        this.sinon.spy(operatorManager, 'connect');
+        this.sinon.stub(operatorManager, 'search');
+        originalConnectedItem = {
+          setState: sinon.stub()
+        };
+      });
+
+      teardown(function() {
+        clock.restore();
+      });
+
+      test('original operator is available and auto selection is disabled ',
+        function(done) {
+          operatorManager._connectedOperatorItem = originalConnectedItem;
+          operatorManager._autoSelectionState =
+            AutoSelectionModel.STATE.DISABLED;
+
+          operatorManager.connect(operatorItem).then(function() {
+            clock.tick(6000);
+            sinon.assert.calledWith(operatorManager.connect,
+              originalConnectedItem);
+          }).then(done, done);
+      });
+
+      test('original operator is unavailable', function(done) {
+        operatorManager._connectedOperatorItem = null;
+        operatorManager._autoSelectionState = AutoSelectionModel.STATE.DISABLED;
+
+        operatorManager.connect(operatorItem).then(function() {
+          clock.tick(6000);
+          sinon.assert.calledOnce(operatorManager.connect,
+            originalConnectedItem);
+        }).then(done, done);
+      });
+
+      test('auto selection is enabled', function(done) {
+        operatorManager._connectedOperatorItem = originalConnectedItem;
+        operatorManager._autoSelectionState = AutoSelectionModel.STATE.ENABLED;
+
+        operatorManager.connect(operatorItem).then(function() {
+          clock.tick(6000);
+          sinon.assert.calledOnce(operatorManager.connect,
+            originalConnectedItem);
+        }).then(done, done);
+      });
+    });
+  });
+
+  suite('setAutoSelection', function() {
+    test('the state should be set as AutoSelectionModel.STATE.ENABLED ' +
+      'when enabling', function() {
+        operatorManager.setAutoSelection(true);
+        assert.equal(operatorManager.autoSelectionState,
+          AutoSelectionModel.STATE.ENABLED);
+      });
+
+    test('the state should be set as AutoSelectionModel.STATE.ENABLED ' +
+      'when disabling', function() {
+        this.sinon.stub(operatorManager, 'search');
+        operatorManager.setAutoSelection(false);
+        assert.equal(operatorManager.autoSelectionState,
+          AutoSelectionModel.STATE.DISABLED);
+      });
+  });
+});

gaia/apps/settings/test/unit/panels/operator_settings/models/panel_model_test.js

@@ -0,0 +1,142 @@
+'use strict';
+
+suite('PanelModel', function() {
+  var PanelModel;
+  var mockConn;
+  var mockNetworkInfo;
+  var mockHardwareSupportMode = {};
+
+  var realMozMobileConnections;
+
+  var panelModel;
+
+  var modules = [
+    'panels/operator_settings/models/panel_model'
+  ];
+
+  var map = {
+    '*': {
+      'modules/mobile/supported_network_info': 'MockNetworkInfo'
+    }
+  };
+
+  setup(function(done) {
+    var requireCtx = testRequire([], map, function() {});
+
+    mockConn = {
+      voice: {
+        type: 'gsm'
+      },
+      addEventListener: sinon.stub()
+    };
+
+    mockNetworkInfo = {
+      getSupportedNetworkInfo: function(conn, callback) {
+        callback(mockHardwareSupportMode);
+      }
+    };
+    define('MockNetworkInfo', function() {
+      return mockNetworkInfo;
+    });
+
+    realMozMobileConnections = navigator.mozMobileConnections;
+    navigator.mozMobileConnections = [mockConn];
+
+    requireCtx(modules, (_PanelModel) => {
+      PanelModel = _PanelModel;
+      panelModel = PanelModel(mockConn);
+      done();
+    });
+  });
+
+  teardown(function() {
+    navigator.mozMobileConnections = realMozMobileConnections;
+  });
+
+  suite('_hardwareSupportedMode', function() {
+    suite('should be gsm', function() {
+      ['gsm', 'wcdma', 'lte'].forEach(function(type) {
+        test(type, function() {
+          mockHardwareSupportMode = {
+            [type]: true
+          };
+          panelModel = PanelModel(mockConn);
+          assert.equal(panelModel._hardwareSupportedMode, 'gsm');
+        });
+      });
+    });
+
+    suite('should be cdma', function() {
+      ['evdo', 'cdma'].forEach(function(type) {
+        test(type, function() {
+          mockHardwareSupportMode = {
+            [type]: true
+          };
+          panelModel = PanelModel(mockConn);
+          assert.equal(panelModel._hardwareSupportedMode, 'cdma');
+        });
+      });
+    });
+  });
+
+  suite('_voiceType', function() {
+    var mockVoiceType = 'mockVoiceType';
+
+    test('should be the type reported from mobile connection', function() {
+      mockConn.voice.type = mockVoiceType;
+      panelModel = PanelModel(mockConn);
+      assert.equal(panelModel._voiceType, mockVoiceType);
+    });
+
+    test('_voiceType should change when mobile connection emits voicechange',
+      function() {
+        mockConn.voice.type = mockVoiceType;
+        mockConn.addEventListener.args[0][1]();
+        assert.equal(panelModel._voiceType, mockVoiceType);
+    });
+  });
+
+  suite('connectingMode', function() {
+    suite('when voice type is available', function() {
+      ['gprs', 'edge', 'umts', 'hsdpa', 'hsupa',
+       'hspa', 'hspa+', 'lte', 'gsm'].forEach(function(type) {
+        test(type, function() {
+          panelModel._voiceType = type;
+          assert.equal(panelModel.connectingMode, 'gsm');
+        });
+      });
+
+      ['is95a', 'is95b', '1xrtt', 'evdo0',
+       'evdoa', 'evdob', 'ehrpd'].forEach(function(type) {
+        test(type, function() {
+          panelModel._voiceType = type;
+          assert.equal(panelModel.connectingMode, 'cdma');
+        });
+      });
+    });
+
+    suite('when voice type is unavailable', function() {
+      ['gsm', 'wcdma', 'lte'].forEach(function(type) {
+        test(type, function() {
+          mockHardwareSupportMode = {
+            [type]: true
+          };
+          panelModel = PanelModel(mockConn);
+          panelModel._voiceType = null;
+          assert.equal(panelModel.connectingMode, 'gsm');
+        });
+      });
+
+      ['evdo', 'cdma'].forEach(function(type) {
+        test(type, function() {
+          mockHardwareSupportMode = {
+            [type]: true
+          };
+          panelModel = PanelModel(mockConn);
+          panelModel._voiceType = null;
+          assert.equal(panelModel.connectingMode, 'cdma');
+        });
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/operator_settings/models/roaming_preference_manager_test.js

@@ -0,0 +1,117 @@
+'use strict';
+
+suite('RoamingPreferenceManager', function() {
+  var RoamingPreferenceManager;
+  var mockConn;
+  var mockSettingshelper;
+  var mockRoamingPreference = 'mockRoamingPref';
+
+  var realMozMobileConnections;
+
+  var roamingPreferenceManager;
+
+  var modules = [
+    'panels/operator_settings/models/roaming_preference_manager'
+  ];
+
+  var map = {
+    '*': {
+      'shared/settings_helper': 'MockSettingsHelper'
+    }
+  };
+
+  setup(function(done) {
+    var requireCtx = testRequire([], map, function() {});
+
+    mockSettingshelper = {
+      get: function() {},
+      set: function() {}
+    };
+    define('MockSettingsHelper', function() {
+      return function() {
+        return mockSettingshelper;
+      };
+    });
+
+    mockConn = {
+      getRoamingPreference:
+        sinon.stub().returns(Promise.resolve(mockRoamingPreference)),
+      setRoamingPreference: function() {}
+    };
+    realMozMobileConnections = navigator.mozMobileConnections;
+    navigator.mozMobileConnections = [mockConn];
+
+    requireCtx(modules, (_RoamingPreferenceManager) => {
+      RoamingPreferenceManager = _RoamingPreferenceManager;
+      roamingPreferenceManager = RoamingPreferenceManager(mockConn);
+      done();
+    });
+  });
+
+  teardown(function() {
+    navigator.mozMobileConnections = realMozMobileConnections;
+  });
+
+  suite('initial state', function() {
+    suite('support setting roaming preference', function() {
+      test('preference', function(done) {
+        var doAssert = function() {
+          if (roamingPreferenceManager.preference !== null) {
+            assert.equal(roamingPreferenceManager.preference,
+              mockRoamingPreference);
+            done();
+          }
+        };
+        roamingPreferenceManager.observe('preference', doAssert);
+        doAssert();
+      });
+
+      test('_serviceId', function() {
+        assert.equal(roamingPreferenceManager._serviceId,
+          navigator.mozMobileConnections.indexOf(mockConn));
+      });
+    });
+
+    suite('does not support setting roaming preference', function() {
+      test('should throw an exception', function() {
+        assert.throw(() => {
+          RoamingPreferenceManager({});
+        }, Error);
+      });
+    });
+  });
+
+  suite('setRoamingPreference', function() {
+    var mockPreference = 'mockPreference';
+
+    setup(function() {
+      sinon.stub(mockConn, 'setRoamingPreference', function() {
+        return Promise.resolve();
+      });
+    });
+
+    test('setRoamingPreference should change to the setting value',
+      function(done) {
+        roamingPreferenceManager.setRoamingPreference(mockPreference).then(
+          function() {
+            assert.equal(roamingPreferenceManager.preference, mockPreference);
+        }).then(done, done);
+    });
+
+    test('the setting value should be stored using SettingsHelper',
+      function(done) {
+        var settingsHeplerGetCallback;
+        sinon.stub(mockSettingshelper, 'get', function(callback) {
+          settingsHeplerGetCallback = callback;
+        });
+        sinon.spy(mockSettingshelper, 'set');
+        roamingPreferenceManager.setRoamingPreference(mockPreference).then(
+          () => {
+            settingsHeplerGetCallback({});
+            assert.deepEqual(mockSettingshelper.set.args[0][0], {
+              '0': mockPreference
+            });
+        }).then(done, done);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/root/airplane_mode_item_test.js

@@ -0,0 +1,82 @@
+'use strict';
+
+suite('AirplaneModeItem', function() {
+  var map = {
+    '*': {
+      'shared/airplane_mode_helper': 'unit/mock_airplane_mode_helper'
+    }
+  };
+
+  var modules = [
+    'panels/root/airplane_mode_item',
+    'unit/mock_airplane_mode_helper'
+  ];
+
+  setup(function(done) {
+    var requireCtx = testRequire([], map, function() {});
+
+    requireCtx(modules, function(AirplaneModeItem, MockAirplaneModeHelper) {
+      var element = document.createElement('input');
+      element.type = 'checkbox';
+
+      this.element = element;
+      this.AirplaneModeItem = AirplaneModeItem;
+      this.MockAirplaneModeHelper = MockAirplaneModeHelper;
+      done();
+    }.bind(this));
+  });
+
+  test('when init is called, we would wait until APMhelper is ready',
+    function() {
+      this.sinon.stub(this.MockAirplaneModeHelper, 'ready');
+      var airplaneModeItem = this.AirplaneModeItem(this.element);
+      airplaneModeItem.init();
+      assert.isTrue(this.MockAirplaneModeHelper.ready.called);
+  });
+
+  test('when wificontext-ready event is received', function() {
+    var airplaneModeItem = this.AirplaneModeItem(this.element);
+    airplaneModeItem.handleEvent({
+      type: 'wificontext-ready'
+    });
+    assert.isFalse(airplaneModeItem._element.disabled);
+  });
+
+  test('when item is enabled, we would start observing change', function() {
+    this.sinon.stub(this.MockAirplaneModeHelper, 'addEventListener');
+    var airplaneModeItem = this.AirplaneModeItem(this.element);
+    airplaneModeItem._itemEnabled = false;
+    airplaneModeItem.enabled = true;
+    assert.isTrue(this.MockAirplaneModeHelper.addEventListener.called);
+  });
+
+  test('when item is enabled, we would stop observing change', function() {
+    this.sinon.stub(this.MockAirplaneModeHelper, 'removeEventListener');
+    var airplaneModeItem = this.AirplaneModeItem(this.element);
+    airplaneModeItem._itemEnabled = true;
+    airplaneModeItem.enabled = false;
+    assert.isTrue(this.MockAirplaneModeHelper.removeEventListener.called);
+  });
+
+  suite('when onAPMstateChange is triggered', function() {
+    var airplaneModeItem;
+    setup(function() {
+      airplaneModeItem = this.AirplaneModeItem(this.element);
+    });
+
+    ['enabled', 'disabled'].forEach(function(status) {
+      test('status is ' + status + ', let UI clickable', function() {
+        airplaneModeItem._onAPMStateChange(status);
+        assert.equal(this.element.checked, (status === 'enabled'));
+        assert.isFalse(this.element.disabled);
+      });
+    });
+
+    ['enabling', 'disabling'].forEach(function(status) {
+      test('status is ' + status + ', let UI unclickable', function() {
+        airplaneModeItem._onAPMStateChange(status);
+        assert.isTrue(this.element.disabled);
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/root/battery_item_test.js

@@ -0,0 +1,87 @@
+'use strict';
+
+suite('BatteryItem', function() {
+  var realL10n;
+  var modules = [
+    'shared_mocks/mock_l20n',
+    'panels/root/battery_item',
+  ];
+  var map = {
+    '*': {
+      'modules/battery': 'MockBattery'
+    }
+  };
+
+  suiteSetup(function(done) {
+    this.MockBattery = {
+      state: 'charging',
+      level: 10,
+      observe: function() {},
+      unobserve: function() {}
+    };
+
+    var requireCtx = testRequire([], map, function() {});
+    define('MockBattery', function() {
+      return this.MockBattery;
+    }.bind(this));
+
+    requireCtx(modules, function(MockL10n, BatteryItem) {
+      realL10n = document.l10n;
+      this.MockL10n = MockL10n;
+      document.l10n = MockL10n;
+
+      this.BatteryItem = BatteryItem;
+      done();
+    }.bind(this));
+  });
+
+  suiteTeardown(function() {
+    document.l10n = realL10n;
+  });
+
+  setup(function() {
+    this.element = document.createElement('div');
+    this.subject = this.BatteryItem(this.element);
+  });
+
+  test('when enabled = true', function() {
+    this.sinon.stub(this.MockBattery, 'observe');
+    this.sinon.stub(this.subject, '_boundRefreshText');
+    this.subject.enabled = true;
+
+    sinon.assert.called(this.subject._boundRefreshText);
+    sinon.assert.calledTwice(this.MockBattery.observe);
+    assert.equal(this.MockBattery.observe.args[0][0], 'level');
+    assert.equal(this.MockBattery.observe.args[0][1],
+      this.subject._boundRefreshText);
+    assert.equal(this.MockBattery.observe.args[1][0], 'state');
+    assert.equal(this.MockBattery.observe.args[1][1],
+      this.subject._boundRefreshText);
+  });
+
+  test('when enabled = false', function() {
+    this.sinon.stub(this.MockBattery, 'unobserve');
+    this.sinon.stub(this.subject, '_boundRefreshText');
+    // The default enabled value is false. Set to true first.
+    this.subject.enabled = true;
+    this.subject.enabled = false;
+
+    sinon.assert.calledTwice(this.MockBattery.unobserve);
+    assert.equal(this.MockBattery.unobserve.args[0][0], 'level');
+    assert.equal(this.MockBattery.unobserve.args[0][1],
+      this.subject._boundRefreshText);
+    assert.equal(this.MockBattery.unobserve.args[1][0], 'state');
+    assert.equal(this.MockBattery.unobserve.args[1][1],
+      this.subject._boundRefreshText);
+  });
+
+  suite('_boundRefreshText', function() {
+    test('should call to localize correctly', function() {
+      this.sinon.stub(this.MockL10n, 'setAttributes');
+      this.subject._boundRefreshText();
+      sinon.assert.calledWith(this.MockL10n.setAttributes, this.element,
+        'battery-level-percent',
+        sinon.match({level: this.MockBattery.level}));
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/root/bluetooth_item_test.js

@@ -0,0 +1,138 @@
+'use strict';
+
+suite('BluetoothItem', function() {
+  var realL10n;
+  var modules = [
+    'shared_mocks/mock_l20n',
+    'panels/root/bluetooth_item'
+  ];
+  var map = {
+    '*': {
+      'modules/settings_service': 'MockSettingsService',
+      'modules/bluetooth/bluetooth_context': 'MockBluetooth'
+    }
+  };
+
+  suiteSetup(function(done) {
+    this.MockSettingsService = {
+      navigate: function() {}
+    };
+
+    this.MockBluetooth = {
+      enabled: false,
+      numberOfPairedDevices: 0,
+      firstPairedDeviceName: null,
+      observe: function() {},
+      unobserve: function() {}
+    };
+
+    var requireCtx = testRequire([], map, function() {});
+    define('MockSettingsService', function() {
+      return this.MockSettingsService;
+    }.bind(this));
+
+    define('MockBluetooth', function() {
+      return this.MockBluetooth;
+    }.bind(this));
+
+    requireCtx(modules, function(MockL10n, BluetoothItem) {
+      realL10n = document.l10n;
+      this.MockL10n = MockL10n;
+      document.l10n = MockL10n;
+
+      this.BluetoothItem = BluetoothItem;
+      done();
+    }.bind(this));
+  });
+
+  suiteTeardown(function() {
+    document.l10n = realL10n;
+  });
+
+  setup(function() {
+    this.liElement = document.createElement('li');
+    this.element = document.createElement('div');
+    this.liElement.appendChild(this.element);
+    this.subject = this.BluetoothItem(this.element);
+  });
+
+  test('when enabled = true', function() {
+    this.sinon.stub(this.MockBluetooth, 'observe');
+    this.sinon.stub(this.subject, '_boundRefreshMenuDescription');
+
+    this.subject.enabled = true;
+    sinon.assert.called(this.subject._boundRefreshMenuDescription);
+    sinon.assert.calledTwice(this.MockBluetooth.observe);
+    assert.equal(this.MockBluetooth.observe.args[0][0], 'enabled');
+    assert.equal(this.MockBluetooth.observe.args[0][1],
+      this.subject._boundRefreshMenuDescription);
+    assert.equal(this.MockBluetooth.observe.args[1][0],
+      'numberOfPairedDevices');
+    assert.equal(this.MockBluetooth.observe.args[1][1],
+      this.subject._boundRefreshMenuDescription);
+  });
+
+  test('when enabled = false', function() {
+    this.sinon.stub(this.MockBluetooth, 'unobserve');
+    this.sinon.stub(this.subject, '_boundRefreshMenuDescription');
+    // The default enabled value is false. Set to true first.
+    this.subject.enabled = true;
+    this.subject.enabled = false;
+    sinon.assert.calledTwice(this.MockBluetooth.unobserve);
+    assert.equal(this.MockBluetooth.unobserve.args[0][0], 'enabled');
+    assert.equal(this.MockBluetooth.unobserve.args[0][1],
+      this.subject._boundRefreshMenuDescription);
+    assert.equal(this.MockBluetooth.unobserve.args[1][0],
+      'numberOfPairedDevices');
+    assert.equal(this.MockBluetooth.unobserve.args[1][1],
+      this.subject._boundRefreshMenuDescription);
+  });
+
+  suite('_boundRefreshMenuDescription > ', function() {
+    suite('when Bluetooth module enabled = true, ' +
+      'numberOfPairedDevices = 0', function() {
+      setup(function() {
+        this.MockBluetooth.enabled = true;
+        this.MockBluetooth.numberOfPairedDevices = 0;
+      });
+
+      test('should call to localize correctly', function() {
+        this.subject._boundRefreshMenuDescription();
+        assert.equal(this.element.getAttribute('data-l10n-id'),
+          'bt-status-nopaired');
+      });
+    });
+
+    suite('when Bluetooth module enabled = true, ' +
+      'numberOfPairedDevices = 3', function() {
+      var resultObj;
+      setup(function() {
+        this.MockBluetooth.enabled = true;
+        this.MockBluetooth.numberOfPairedDevices = 3;
+        this.MockBluetooth.firstPairedDeviceName = 'device-A1';
+        resultObj = {
+          name: this.MockBluetooth.firstPairedDeviceName,
+          n: this.MockBluetooth.numberOfPairedDevices - 1
+        };
+      });
+
+      test('should call to localize correctly', function() {
+        this.sinon.stub(this.MockL10n, 'setAttributes');
+        this.subject._boundRefreshMenuDescription();
+        sinon.assert.calledWith(this.MockL10n.setAttributes, this.element,
+          'bt-status-paired', sinon.match(resultObj));
+      });
+    });
+
+    suite('when Bluetooth module enabled = false', function() {
+      test('should call to localize correctly', function() {
+        // The default enabled value is false. Set to true first.
+        this.MockBluetooth.enabled = true;
+        this.MockBluetooth.enabled = false;
+        this.subject._boundRefreshMenuDescription();
+        assert.equal(this.element.getAttribute('data-l10n-id'),
+          'bt-status-turnoff');
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/root/language_item_test.js

@@ -0,0 +1,63 @@
+'use strict';
+
+suite('LanguageItem', function() {
+  var realL10n;
+  var realLanguageList;
+  var modules = [
+    'shared_mocks/mock_l20n',
+    'shared_mocks/mock_language_list',
+    'panels/root/language_item',
+  ];
+  var map = {
+    'panels/root/language_item': {
+      'shared/language_list': 'shared_mocks/mock_language_list'
+    }
+  };
+
+  suiteSetup(function(done) {
+    var requireCtx = testRequire([], map, function() {});
+
+    requireCtx(modules, function(MockL10n, MockLanguageList, LanguageItem) {
+      realL10n = document.l10n;
+      document.l10n = MockL10n;
+
+      realLanguageList = window.LanguageList;
+      window.LanguageList = MockLanguageList;
+
+      this.LanguageItem = LanguageItem;
+      done();
+    }.bind(this));
+  });
+
+  suiteTeardown(function() {
+    window.LanguageList = realLanguageList;
+  });
+
+  setup(function() {
+    this.element = document.createElement('div');
+    this.subject = this.LanguageItem(this.element);
+  });
+
+  test('when enabled = true', function() {
+    this.sinon.stub(this.subject, '_boundRefreshText');
+    this.sinon.stub(document, 'addEventListener');
+    this.subject.enabled = true;
+    sinon.assert.calledWith(this.subject._boundRefreshText);
+    sinon.assert.calledWith(document.addEventListener,
+      'DOMRetranslated', this.subject._boundRefreshText);
+  });
+
+  test('when enabled = false', function() {
+    this.sinon.stub(document, 'removeEventListener');
+    // The default enabled value is false. Set to true first.
+    this.subject._enabled = true;
+    this.subject.enabled = false;
+    sinon.assert.calledWith(document.removeEventListener,
+      'DOMRetranslated', this.subject._boundRefreshText);
+  });
+
+  test('_boundRefreshText', function() {
+    this.subject._boundRefreshText();
+    assert.equal(this.element.textContent, 'English (US)');
+  });
+});

gaia/apps/settings/test/unit/panels/root/nfc_item_test.js

@@ -0,0 +1,113 @@
+'use strict';
+
+suite('NFCItem', function() {
+  var realMozNfc;
+
+  var map = {
+    '*': {
+      'shared/settings_listener':'shared_mocks/mock_settings_listener'
+    }
+  };
+
+  var modules = [
+    'panels/root/nfc_item',
+    'shared_mocks/mock_settings_listener',
+  ];
+
+  setup(function(done) {
+    var requireCtx = testRequire([], map, function() {});
+
+    requireCtx(modules, (NFCItem, MockSettingsListener) => {
+      var div = document.createElement('div');
+      var checkbox = document.createElement('input');
+      checkbox.type = 'checkbox';
+      div.appendChild(checkbox);
+
+      this.div = div;
+      this.checkbox = checkbox;
+      this.NFCItem = NFCItem;
+      this.MockSettingsListener = MockSettingsListener;
+
+      realMozNfc = window.navigator.mozNfc;
+      window.navigator.mozNfc = {};
+
+      done();
+    });
+  });
+
+  teardown(function() {
+    window.navigator.mozNfc = realMozNfc;
+  });
+
+  test('is visible and initialized if mozNfc defined', function() {
+    var stubObserver = this.sinon.stub(this.MockSettingsListener, 'observe');
+    var stubAddListener = this.sinon.stub(this.checkbox, 'addEventListener');
+
+    var nfcItem = this.NFCItem({
+      nfcMenuItem: this.div,
+      nfcCheckBox: this.checkbox
+    });
+
+    assert.isFalse(this.div.hidden, 'hidden');
+    assert.deepEqual(nfcItem._checkbox, this.checkbox);
+
+    assert.isTrue(stubAddListener.calledOnce, 'addEventListener');
+    assert.equal(stubAddListener.firstCall.args[0], 'change');
+
+    assert.isTrue(stubObserver.calledOnce, 'observe');
+    assert.equal(stubObserver.firstCall.args[0], 'nfc.status');
+  });
+
+  test('setts checkbox to disabled on toggle change', function() {
+    var nfcItem = this.NFCItem({
+      nfcMenuItem: this.div,
+      nfcCheckBox: this.checkbox
+    });
+
+    var spyCheckboxChanged = this.sinon.spy(nfcItem, '_onCheckboxChanged');
+    this.checkbox.disabled = false;
+
+    this.checkbox.dispatchEvent(new CustomEvent('change'));
+    assert.isTrue(spyCheckboxChanged.calledOnce);
+    assert.isTrue(this.checkbox.disabled);
+  });
+
+  suite('NFC status changes', function() {
+    var nfcItem;
+    var stubNfcChanged;
+    var idleStatus = ['enabled', 'disabled'];
+    var transitionStatus = ['enabling', 'disabling'];
+
+    setup(function() {
+      nfcItem = this.NFCItem({
+        nfcMenuItem: this.div,
+        nfcCheckBox: this.checkbox
+      });
+      stubNfcChanged = this.sinon.spy(nfcItem, '_onNfcStatusChanged');
+    });
+
+    teardown(function() {
+      stubNfcChanged.restore();
+    });
+
+    idleStatus.forEach((status) => {
+      test('checkbox should be enabled when nfc.status ' + status, function() {
+        nfcItem._checkbox.disabled = true;
+
+        this.MockSettingsListener.mTriggerCallback('nfc.status', status);
+        assert.isTrue(stubNfcChanged.withArgs(status).calledOnce);
+        assert.isFalse(nfcItem._checkbox.disabled);
+      });
+    });
+
+    transitionStatus.forEach((status) => {
+      test('checkbox should be disabled when nfc.status ' + status, function() {
+        nfcItem._checkbox.disabled = false;
+
+        this.MockSettingsListener.mTriggerCallback('nfc.status', status);
+        assert.isTrue(stubNfcChanged.withArgs(status).calledOnce);
+        assert.isTrue(nfcItem._checkbox.disabled);
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/root/panel_test.js

@@ -0,0 +1,123 @@
+/* global loadBodyHTML, MockNavigatorSettings */
+'use strict';
+
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('RootPanel', function() {
+  var realSettings;
+  var realMobileConnections;
+  var panel;
+  var MockAirplaneModeItem;
+
+  var modules = [
+    'panels/root/panel',
+    'shared_mocks/mock_navigator_moz_settings'
+  ];
+  var map = {
+    '*': {
+      'modules/settings_service': 'unit/mock_settings_service',
+      'modules/settings_panel': 'MockSettingsPanel',
+      'panels/root/root': 'MockRoot',
+      'panels/root/airplane_mode_item': 'MockAirplaneModeItem',
+      'panels/root/themes_item': 'MockThemesItem',
+      'panels/root/addons_item': 'MockAddonsItem',
+      'panels/root/stk_item': 'MockStkItem',
+      'modules/bluetooth/version_detector': 'MockBluetoothVersionDetector'
+    }
+  };
+
+  setup(function(done) {
+    // Create a new requirejs context
+    var requireCtx = testRequire([], map, function() {});
+    var that = this;
+
+    loadBodyHTML('_root.html');
+
+    // Define MockSettingsPanel
+    define('MockSettingsPanel', function() {
+      return function(options) {
+        return {
+          init: options.onInit,
+          show: options.onShow,
+          beforeShow: options.onBeforeShow,
+          beforeHide: options.onBeforeHide,
+          hide: options.onHide,
+          uninit: options.onUninit,
+          _showSimItems: function() {},
+          _showDeveloperMenuItem: function() {}
+        };
+      };
+    });
+
+    // Define MockRoot
+    this.mockRoot = {
+      init: function() {}
+    };
+    define('MockRoot', function() {
+      return function() {
+        return that.mockRoot;
+      };
+    });
+
+    MockAirplaneModeItem = {
+      enabled: false
+    };
+    define('MockAirplaneModeItem', function() {
+      return function(element) {
+        return MockAirplaneModeItem;
+      };
+    });
+
+    define('MockThemesItem', function() {
+      return function(element) {
+        return {};
+      };
+    });
+
+    define('MockAddonsItem', function() {
+      return function(element) {
+        return {};
+      };
+    });
+
+    define('MockStkItem', function() {
+      return function(element) {
+        return {};
+      };
+    });
+
+    define('MockBluetoothVersionDetector', function() {
+      return {
+        getVersion: function() {}
+      };
+    });
+
+    requireCtx(modules, function(RootPanel) {
+      navigator.addIdleObserver = sinon.spy();
+      realMobileConnections = navigator.mozMobileConnections;
+      realSettings = navigator.mozSettings;
+      navigator.mozSettings = MockNavigatorSettings;
+
+      panel = RootPanel();
+      done();
+    });
+  });
+
+  teardown(function() {
+    navigator.mozSettings = realSettings;
+    navigator.mozMobileConnections = realMobileConnections;
+    document.body.innerHTML = '';
+  });
+
+  test('AirplaneModeItem is enabled on show', function() {
+    panel.init(document);
+    panel.show();
+    assert.isTrue(MockAirplaneModeItem.enabled);
+  });
+
+  test('AirplaneModeItem is disabled on uninit', function() {
+    panel.init(document);
+    panel.uninit();
+    assert.isFalse(MockAirplaneModeItem.enabled);
+  });
+});

gaia/apps/settings/test/unit/panels/root/root_test.js

@@ -0,0 +1,192 @@
+/* global MockNavigatorSettings */
+'use strict';
+
+require('/shared/test/unit/load_body_html_helper.js');
+
+suite('Root', function() {
+  var realMobileConnections;
+  var realSettings;
+  var panel;
+
+  var map = {
+    '*': {
+      'shared/lazyLoader': 'MockLazyLoader'
+    }
+  };
+  var modules = [
+    'panels/root/root',
+    'MockLazyLoader',
+    'shared_mocks/mock_navigator_moz_settings'
+  ];
+
+  setup(function(done) {
+    this.MockLazyLoader = {
+      load: function(scripts, callback) { setTimeout(callback); }
+    };
+
+    var requireCtx = testRequire([], map, function() {});
+    loadBodyHTML('_root.html');
+
+    define('MockLazyLoader', function() {
+      return this.MockLazyLoader;
+    }.bind(this));
+
+    requireCtx(modules, function(Root, MockLazyLoader, MockNavigatorSettings) {
+      realMobileConnections = navigator.mozMobileConnections;
+      realSettings = navigator.mozSettings;
+      navigator.mozSettings = MockNavigatorSettings;
+
+      panel = Root();
+      done();
+    });
+  });
+
+  teardown(function() {
+    navigator.mozSettings = realSettings;
+    navigator.mozMobileConnections = realMobileConnections;
+  });
+
+  suite('init', function() {
+    var fakeTimer;
+
+    setup(function() {
+      fakeTimer = sinon.useFakeTimers();
+      this.sinon.stub(panel, '_loadScripts');
+      panel.init(document.body);
+    });
+
+    teardown(function() {
+      fakeTimer.restore();
+    });
+
+    test('_loadScripts should be called', function() {
+      fakeTimer.tick();
+      assert.ok(panel._loadScripts.called);
+    });
+  });
+
+  suite('should show/hide nfc item correctly', function() {
+    var realNfc;
+    var nfcItem;
+
+    setup(function() {
+      realNfc = navigator.mozNfc;
+      nfcItem = document.querySelector('.nfc-settings');
+    });
+
+    teardown(function() {
+      navigator.mozNfc = realNfc;
+    });
+
+    test('nfc is available', function() {
+      navigator.mozNfc = {'aa': 'bb'};
+      panel.init(document.body);
+      assert.isFalse(nfcItem.hidden);
+    });
+
+    test('nfc is not available', function() {
+      navigator.mozNfc = null;
+      panel.init(document.body);
+      assert.isTrue(nfcItem.hidden);
+    });
+  });
+
+  suite('should show/hide sim items correctly', function() {
+    var callSettingsItem;
+    var dataConnectivityItem;
+    var messagingItem;
+    var simSecurityItem;
+    var simCardManagerItem;
+
+    test('no mobile connections', function() {
+      navigator.mozMobileConnections = null;
+      panel.init(document.body);
+      callSettingsItem = document.getElementById('call-settings');
+      dataConnectivityItem = document.getElementById('data-connectivity');
+      messagingItem = document.getElementById('messaging-settings');
+      simSecurityItem = document.getElementById('simSecurity-settings');
+      simCardManagerItem = document.getElementById('simCardManager-settings');
+      assert.isTrue(callSettingsItem.hidden);
+      assert.isTrue(dataConnectivityItem.hidden);
+      assert.isTrue(messagingItem.hidden);
+      assert.isTrue(simSecurityItem.hidden);
+      assert.isTrue(simCardManagerItem.hidden);
+    });
+
+    test('single sim', function() {
+      navigator.mozMobileConnections = {
+        length: 1
+      };
+      panel.init(document.body);
+      callSettingsItem = document.getElementById('call-settings');
+      dataConnectivityItem = document.getElementById('data-connectivity');
+      messagingItem = document.getElementById('messaging-settings');
+      simSecurityItem = document.getElementById('simSecurity-settings');
+      simCardManagerItem = document.getElementById('simCardManager-settings');
+      assert.isFalse(callSettingsItem.hidden);
+      assert.isFalse(dataConnectivityItem.hidden);
+      assert.isFalse(messagingItem.hidden);
+      assert.isFalse(simSecurityItem.hidden);
+      assert.isTrue(simCardManagerItem.hidden);
+    });
+
+    test('multiple sims', function() {
+      navigator.mozMobileConnections = {
+        length: 2
+      };
+      panel.init(document.body);
+      callSettingsItem = document.getElementById('call-settings');
+      dataConnectivityItem = document.getElementById('data-connectivity');
+      messagingItem = document.getElementById('messaging-settings');
+      simSecurityItem = document.getElementById('simSecurity-settings');
+      simCardManagerItem = document.getElementById('simCardManager-settings');
+      assert.isFalse(callSettingsItem.hidden);
+      assert.isFalse(dataConnectivityItem.hidden);
+      assert.isFalse(messagingItem.hidden);
+      assert.isTrue(simSecurityItem.hidden);
+      assert.isFalse(simCardManagerItem.hidden);
+    });
+  });
+
+  suite('should show/hide developer menu item correctly', function() {
+    var developerMenuItem;
+
+    setup(function() {
+      MockNavigatorSettings.mSetup();
+    });
+
+    teardown(function() {
+      MockNavigatorSettings.mTeardown();
+    });
+
+    test('developer menu is enabled', function(done) {
+      MockNavigatorSettings.mSet({
+        'developer.menu.enabled': true
+      });
+      panel.init(document.body);
+      developerMenuItem =
+        document.querySelector('[data-show-name="developer.menu.enabled"]');
+      panel._showDeveloperMenuItem().then(function() {
+        assert.isFalse(developerMenuItem.hidden);
+      }, function() {
+        // This function does not reject.
+        assert.isTrue(false);
+      }).then(done, done);
+    });
+
+    test('developer menu is disabled', function(done) {
+      MockNavigatorSettings.mSet({
+        'developer.menu.enabled': false
+      });
+      panel.init(document.body);
+      developerMenuItem =
+        document.querySelector('[data-show-name="developer.menu.enabled"]');
+      panel._showDeveloperMenuItem().then(function() {
+        assert.isTrue(developerMenuItem.hidden);
+      }, function() {
+        // This function does not reject.
+        assert.isTrue(false);
+      }).then(done, done);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/root/sim_securiy_item_test.js

@@ -0,0 +1,217 @@
+'use strict';
+
+suite('simSecurityItem', function() {
+  var modules = [
+    'shared_mocks/mock_simslot_manager',
+    'unit/mock_airplane_mode_helper',
+    'modules/sim_security',
+    'panels/root/sim_security_item',
+  ];
+
+  var map = {
+    '*': {
+      'shared/simslot_manager': 'shared_mocks/mock_simslot_manager',
+      'shared/airplane_mode_helper': 'unit/mock_airplane_mode_helper',
+      'modules/sim_security': 'MockSimSecurity'
+    }
+  };
+
+  var simSecurityItem;
+  var mockSIMSlotManager;
+  var mockAirplaneModeHelper;
+  var mockSimSecurity;
+
+  setup(function(done) {
+    var self = this;
+
+    define('MockSimSecurity', function() {
+      return {
+        addEventListener: function() {},
+        getCardLock: function() {}
+      };
+    });
+
+    var requireCtx = testRequire([], map, function() {});
+    requireCtx(modules, function(MockSIMSlotManager,
+      MockAirplaneModeHelper, MockSimSecurity ,SimSecurityItem) {
+        mockSIMSlotManager = MockSIMSlotManager;
+        mockAirplaneModeHelper = MockAirplaneModeHelper;
+        mockSimSecurity = MockSimSecurity;
+
+        self.sinon.stub(mockSIMSlotManager, 'get', function() {
+          return {
+            isAbsent: function() {
+              return false;
+            }
+          };
+        });
+
+        var element = document.createElement('div');
+        simSecurityItem = SimSecurityItem(element);
+        done();
+    });
+  });
+
+  suite('_updateUI', function() {
+    suite('if APM is on', function() {
+      setup(function() {
+        this.sinon.stub(mockAirplaneModeHelper, 'getStatus', function() {
+          return 'enabled';
+        });
+      });
+
+      test('properties would be set correctly', function(done) {
+        simSecurityItem._updateUI().then(function() {
+          assert.equal(simSecurityItem._element.style.fontStyle, 'italic');
+          assert.equal(simSecurityItem._element.getAttribute('data-l10n-id'),
+            'simCardNotReady');
+        }).then(done, done);
+      });
+    });
+
+    suite('if APM is off, and no simcard', function() {
+      setup(function() {
+        this.sinon.stub(mockAirplaneModeHelper, 'getStatus', function() {
+          return 'disabled';
+        });
+
+        simSecurityItem._activeSlot = {
+          simCard: {
+            cardState: null
+          }
+        };
+      });
+
+      test('properties would be set correctly', function(done) {
+        simSecurityItem._updateUI().then(function() {
+          assert.equal(simSecurityItem._element.style.fontStyle, 'italic');
+          assert.equal(simSecurityItem._element.getAttribute('data-l10n-id'),
+            'noSimCard');
+        }).then(done, done);
+      });
+    });
+
+    suite('if APM is off, and simcard is unknown', function() {
+      setup(function() {
+        this.sinon.stub(mockAirplaneModeHelper, 'getStatus', function() {
+          return 'disabled';
+        });
+
+        simSecurityItem._activeSlot = {
+          simCard: {
+            cardState: 'unknown'
+          }
+        };
+      });
+
+      test('properties would be set correctly', function(done) {
+        simSecurityItem._updateUI().then(function() {
+          assert.equal(simSecurityItem._element.style.fontStyle, 'italic');
+          assert.equal(simSecurityItem._element.getAttribute('data-l10n-id'),
+            'unknownSimCardState');
+        }).then(done, done);
+      });
+    });
+
+    suite('if APM is off, simcard is ready', function() {
+      setup(function() {
+        this.sinon.stub(mockAirplaneModeHelper, 'getStatus', function() {
+          return 'disabled';
+        });
+
+        simSecurityItem._activeSlot = {
+          simCard: {
+            cardState: 'normal'
+          }
+        };
+
+      });
+
+      test('and if pin is enabled', function(done) {
+        this.sinon.stub(mockSimSecurity, 'getCardLock', function() {
+          return Promise.resolve({
+            enabled: true
+          });
+        });
+
+        simSecurityItem._updateUI().then(function() {
+          assert.equal(simSecurityItem._element.style.fontStyle, 'normal');
+          assert.equal(simSecurityItem._element.getAttribute('data-l10n-id'),
+            'enabled');
+        }).then(done, done);
+      });
+
+      test('and if pin is disabled', function(done) {
+        this.sinon.stub(mockSimSecurity, 'getCardLock', function() {
+          return Promise.resolve({
+            enabled: false
+          });
+        });
+
+        simSecurityItem._updateUI().then(function() {
+          assert.equal(simSecurityItem._element.style.fontStyle, 'normal');
+          assert.equal(simSecurityItem._element.getAttribute('data-l10n-id'),
+            'disabled');
+        }).then(done, done);
+      });
+    });
+  });
+
+  suite('enabled item', function() {
+    setup(function() {
+      this.sinon.stub(mockAirplaneModeHelper, 'addEventListener');
+      this.sinon.stub(mockAirplaneModeHelper, 'removeEventListener');
+      this.sinon.stub(simSecurityItem, '_boundUpdateUI');
+    });
+
+    suite('wont do anything', function() {
+      test('if this is a DSDS device', function() {
+        this.sinon.stub(mockSIMSlotManager, 'isMultiSIM', function() {
+          return true;
+        });
+        simSecurityItem.enabled = true;
+        assert.isFalse(simSecurityItem._boundUpdateUI.called);
+      });
+
+      test('if there is no active slot', function() {
+        this.sinon.stub(mockSIMSlotManager, 'isMultiSIM', function() {
+          return true;
+        });
+        simSecurityItem._activeSlot = null;
+        simSecurityItem.enabled = true;
+        assert.isFalse(simSecurityItem._boundUpdateUI.called);
+      });
+
+      test('if internal state is the same with outter', function() {
+        this.sinon.stub(mockSIMSlotManager, 'isMultiSIM', function() {
+          return true;
+        });
+        simSecurityItem._activeSlot = {};
+        simSecurityItem._itemEnabled = true;
+        simSecurityItem.enabled = true;
+        assert.isFalse(simSecurityItem._boundUpdateUI.called);
+      });
+    });
+
+    suite('would do related works', function() {
+      setup(function() {
+        this.sinon.stub(mockSIMSlotManager, 'isMultiSIM', function() {
+          return false;
+        });
+        simSecurityItem._activeSlot = {};
+        simSecurityItem._itemEnabled = null;
+      });
+
+      test('if we are going to enable simSecurityItem', function() {
+        simSecurityItem.enabled = true;
+        assert.isTrue(simSecurityItem._boundUpdateUI.called);
+        assert.isTrue(mockAirplaneModeHelper.addEventListener.called);
+      });
+
+      test('if we are going to disable simSecurityItem', function() {
+        simSecurityItem.enabled = false;
+        assert.isTrue(mockAirplaneModeHelper.removeEventListener.called);
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/root/stk_item_test.js

@@ -0,0 +1,226 @@
+'use strict';
+/* global MockNavigatorSettings */
+requireApp('settings/shared/test/unit/load_body_html_helper.js');
+requireApp('settings/test/unit/mock_navigator_settings.js');
+
+suite('STK Item >', function() {
+  var modules = [
+    'panels/root/stk_item',
+    'shared_mocks/mock_l20n',
+    'shared_mocks/mock_stk_helper',
+    'shared_mocks/mock_dump',
+    'shared_mocks/mock_navigator_moz_icc_manager'
+  ];
+
+  var map = {
+    '*': {
+      'shared/intl/l20n' : 'shared_mocks/mock_l20n',
+      'shared/stk_helper': 'shared_mocks/mock_stk_helper'
+    }
+  };
+
+  var realL10n;
+  var realMozIccManager;
+  var realMozSettings;
+  var subject;
+  var fakeTimer;
+  var mockSTKHelper;
+
+  var dummySTKMenuEntries = {
+    'title': 'DummyOperator',
+    'items': [{
+      'identifier': 1,
+      'text': 'Dummy 1'
+    },
+    {
+      'identifier': 2,
+      'text': 'Dummy 2'
+    },
+    {
+      'identifier': 3,
+      'text': 'Dummy 3'
+    }],
+    'presentationType': 0
+  };
+
+  setup(function(done) {
+    var requireCtx = testRequire([], map, function() {});
+    requireCtx(modules, function(STKItem, MockL10n, MockSTKHelper,
+      MockDump, MockNavigatorMozIccManager) {
+        realMozSettings = navigator.mozSettings;
+        loadBodyHTML('./_root.html');
+        realL10n = document.l10n;
+        document.l10n = MockL10n;
+        realMozIccManager = navigator.mozIccManager;
+        navigator.mozIccManager = MockNavigatorMozIccManager;
+        mockSTKHelper = MockSTKHelper;
+
+        navigator.mozSettings = MockNavigatorSettings;
+
+        window.Settings = {
+          mozSettings: navigator.mozSettings
+        };
+
+        MockDump.mSuiteSetup();
+        fakeTimer = sinon.useFakeTimers();
+
+        subject = STKItem({
+          iccMainHeader: document.querySelector('#icc-mainheader'),
+          iccEntries: document.querySelector('#icc-entries')
+        });
+        fakeTimer.tick();
+
+        done();
+    });
+  });
+
+  teardown(function() {
+    document.l10n = realL10n;
+    navigator.mozIccManager = realMozIccManager;
+    navigator.mozSettings = realMozSettings;
+    MockNavigatorSettings.mTeardown();
+    fakeTimer.restore();
+  });
+
+  suite('Single SIM >', function() {
+    setup(function() {
+      MockNavigatorSettings.mTriggerObservers('icc.applications', {
+        settingValue: JSON.stringify({
+          '1': {
+            'iccId': '1111111111111',
+            'entries': dummySTKMenuEntries
+          }})});
+    });
+
+    test('One entry into the STK applications list', function() {
+      assert.equal(subject._elements.iccEntries.childElementCount, 1);
+    });
+
+    test('Operator name showed in the list', function() {
+      assert.equal(document.querySelector(
+        '#icc-entries li a').textContent, 'DummyOperator');
+    });
+
+    test('SIM number not showed in the list', function() {
+      assert.isNull(document.querySelector(
+        '#icc-entries li small'));
+    });
+  });
+
+  suite('Dual SIM >', function() {
+    setup(function() {
+      MockNavigatorSettings.mTriggerObservers('icc.applications', {
+        settingValue: JSON.stringify({
+          '1': {
+            'iccId': '1111111111111',
+            'entries': dummySTKMenuEntries
+          },
+          '2': {
+            'iccId': '2222222222222',
+            'entries': dummySTKMenuEntries
+          }})});
+    });
+
+    test('Two entries into the STK applications list', function() {
+      assert.equal(subject._elements.iccEntries.childElementCount, 2);
+    });
+
+    test('Operator name (SIM 1) showed in the list', function() {
+      assert.equal(document.querySelector(
+        '#icc-entries li span').textContent, 'DummyOperator');
+    });
+
+    test('SIM number (SIM 1) showed in the list', function() {
+      assert.equal(document.querySelector(
+        '#icc-entries li small').getAttribute('data-l10n-id'), 'sim1');
+    });
+
+    test('Operator name (SIM 2) showed in the list', function() {
+      assert.equal(document.querySelector(
+        '#icc-entries li:nth-child(2) span').textContent, 'DummyOperator');
+    });
+
+    test('SIM number (SIM 2) showed in the list', function() {
+      assert.equal(document.querySelector('#icc-entries li:nth-child(2) small').
+        getAttribute('data-l10n-id'), 'sim2');
+    });
+  });
+
+  suite('Icons >', function() {
+    var icons = [{
+      'pixels':[0xFFFFFFFF,0xFFFFFFFF,0xFFFFFFFF,0xFFFFFFFF,
+                0x000000FF,0x000000FF,0x000000FF,0x000000FF,
+                0xFFFFFFFF,0x000000FF,0xFFFFFFFF,0x000000FF,
+                0xFFFFFFFF,0x000000FF,0x000000FF,0xFFFFFFFF],
+      'codingScheme': 'basic',
+      'width': 4,
+      'height': 4
+    }];
+
+    function updateMenu(withIcons) {
+      if (withIcons) {
+        dummySTKMenuEntries.icons = icons;
+      } else {
+        delete dummySTKMenuEntries.icons;
+      }
+
+      MockNavigatorSettings.mTriggerObservers('icc.applications', {
+        settingValue: JSON.stringify({
+          '1': {
+            'iccId': '1111111111111',
+            'entries': dummySTKMenuEntries
+          },
+          '2': {
+            'iccId': '2222222222222',
+            'entries': dummySTKMenuEntries
+          }})});
+    }
+
+    setup(function() {
+      this.sinon.stub(mockSTKHelper, 'getFirstIconRawData', function(stkItem) {
+        return stkItem.icons && stkItem.icons.length > 0 ?
+          stkItem.icons[0] : null;
+      });
+    });
+
+    teardown(function () {
+      delete dummySTKMenuEntries.icons;
+    });
+
+    test('Icons should be rendered correctly', function() {
+      updateMenu(true);
+      assert.isDefined(subject._elements.iccEntries.dataset.customIcon);
+      assert.equal(document.querySelector('#icc-entries li:nth-child(1) span').
+        childElementCount, 1);
+      assert.equal(document.querySelector('#icc-entries li:nth-child(2) span').
+        childElementCount, 1);
+    });
+
+    test('Default icon should be rendered if no icons are defined', function() {
+      updateMenu();
+      assert.isUndefined(subject._elements.iccEntries.dataset.customIcon);
+      assert.equal(document.querySelector('#icc-entries li:nth-child(1) a').
+        dataset.icon, 'sim-toolkit');
+      assert.equal(document.querySelector('#icc-entries li:nth-child(2) a').
+        dataset.icon, 'sim-toolkit');
+      assert.isNull(
+        document.querySelector('#icc-entries li:nth-child(1) > span'),
+        'span with icon should not be added to the DOM');
+      assert.isNull(
+        document.querySelector('#icc-entries li:nth-child(2) > span'),
+        'span with icon should not be added to the DOM');
+    });
+
+    test('Update menu in ICC panel.', function() {
+      window.Settings.currentPanel = '#icc';
+      updateMenu(false);
+      assert.equal(window.Settings.currentPanel, '#root');
+    });
+
+    test('Update menu in other panel.', function() {
+      window.Settings.currentPanel = '#developer';
+      updateMenu(false);
+      assert.equal(window.Settings.currentPanel, '#developer');
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/root/storage_app_item_test.js

@@ -0,0 +1,84 @@
+'use strict';
+
+suite('AppStorageItem', function() {
+  var modules = ['panels/root/storage_app_item'];
+
+  var map = {
+    '*': {
+      'modules/app_storage': 'MockAppStorage',
+      'modules/storage_helper': 'MockStorageHelper'
+    }
+  };
+
+  suiteSetup(function(done) {
+    // Define MockAppStorage
+    this.MockAppStorage = {
+      isMock: true,
+      usedPercentage: 1,
+      totalSize: 1,
+      usedSize: 1,
+      freeSize: 1,
+      observe: function() {},
+      unobserve: function() {}
+    };
+
+    this.MockStorageHelper = {
+      showFormatedSize: function(element, l10nId, size) {return size;}
+    };
+
+    var requireCtx = testRequire([], map, function() {});
+    define('MockAppStorage', () => {
+      return this.MockAppStorage;
+    });
+
+    define('MockStorageHelper', () => {
+      return this.MockStorageHelper;
+    });
+
+    requireCtx(modules, StorageAppItem => {
+      this.StorageAppItem = StorageAppItem;
+      done();
+    });
+  });
+
+  setup(function() {
+    this.subject = this.StorageAppItem(document.createElement('div'));
+  });
+
+  test('when enabled = true', function() {
+    this.sinon.stub(this.MockAppStorage, 'observe');
+    this.sinon.stub(this.subject, '_updateAppFreeSpace');
+    this.sinon.stub(this.subject, '_boundUpdateAppFreeSpace');
+    this.subject.enabled = true;
+
+    sinon.assert.called(this.subject._updateAppFreeSpace);
+    sinon.assert.calledOnce(this.MockAppStorage.observe);
+    assert.isTrue(this.MockAppStorage.observe.calledWith('freeSize',
+      this.subject._boundUpdateAppFreeSpace));
+  });
+
+  test('when enabled = false', function() {
+    this.sinon.stub(this.MockAppStorage, 'unobserve');
+    this.sinon.stub(this.subject, '_updateAppFreeSpace');
+    this.sinon.stub(this.subject, '_boundUpdateAppFreeSpace');
+    // The default enabled value is false. Set to true first.
+    this.subject._enabled = true;
+    this.subject.enabled = false;
+
+    sinon.assert.calledOnce(this.MockAppStorage.unobserve);
+    assert.isTrue(this.MockAppStorage.unobserve.calledWith('freeSize',
+      this.subject._boundUpdateAppFreeSpace));
+  });
+
+  test('when current = false and enabled = false', function() {
+    this.sinon.stub(this.MockAppStorage, 'unobserve');
+    this.sinon.stub(this.subject, '_updateAppFreeSpace');
+    this.sinon.stub(this.subject, '_boundUpdateAppFreeSpace');
+    // set enabled value to false to let the further false set not action.
+    this.subject._enabled = false;
+    this.subject.enabled = false;
+
+    assert.isFalse(this.MockAppStorage.unobserve.called);
+    assert.isFalse(this.MockAppStorage.unobserve.called);
+  });
+});

gaia/apps/settings/test/unit/panels/root/themes_item_test.js

@@ -0,0 +1,148 @@
+'use strict';
+
+suite('ThemesItem', function() {
+
+  var modules = [
+    'panels/root/themes_item',
+    'unit/mock_apps_cache'
+  ];
+
+  var map = {
+    '*': {
+      'modules/apps_cache': 'unit/mock_apps_cache'
+    }
+  };
+
+  var themesItem;
+  var mockAppsCache;
+
+  setup(function(done) {
+    var self = this;
+    var requireCtx = testRequire([], map, function() {});
+
+    requireCtx(modules, function(ThemesItem, MockAppsCache) {
+      mockAppsCache = MockAppsCache;
+      self.sinon.stub(mockAppsCache, 'addEventListener');
+      self.sinon.stub(mockAppsCache, 'removeEventListener');
+
+      var element = document.createElement('div');
+      themesItem = ThemesItem(element);
+      done();
+    });
+  });
+
+  suite('enabled', function() {
+    setup(function() {
+      themesItem._enabled = false;
+      this.sinon.stub(themesItem, '_updateThemeSectionVisibility');
+      themesItem.enabled = true;
+    });
+    test('will call _updateThemeSectionVisibility', function() {
+      assert.isTrue(themesItem._updateThemeSectionVisibility.called);
+    });
+  });
+
+  suite('init', function() {
+    setup(function() {
+      this.sinon.stub(themesItem, '_updateThemeSectionVisibility');
+      // We assumed we did install two theme apps by default
+      mockAppsCache._apps = [
+        { manifest: { role: 'theme' } },
+        { manifest: { role: 'theme' } },
+        { manifest: { role: 'homescreen' } },
+      ];
+    });
+
+    test('we will do related works', function(done) {
+      themesItem.init().then(function() {
+        assert.equal(
+          mockAppsCache.addEventListener.getCall(0).args[1],
+            themesItem._boundUpdateThemes);
+
+        assert.equal(
+          mockAppsCache.addEventListener.getCall(1).args[1],
+            themesItem._boundUpdateThemes);
+
+        assert.isTrue(themesItem._updateThemeSectionVisibility.called);
+        assert.equal(themesItem._themeCount, 2);
+      }, function() {
+        // This callback should not be executed
+        assert.isTrue(false);
+      }).then(done, done);
+    });
+  });
+
+  suite('_isThemeApp', function() {
+    var themeApp = {
+      manifest: {
+        role: 'theme'
+      }
+    };
+
+    var homescreenApp = {
+      manifest: {
+        role: 'homescreen'
+      }
+    };
+
+    test('we can check whether this is theme app or not', function() {
+      assert.isTrue(themesItem._isThemeApp(themeApp));
+      assert.isFalse(themesItem._isThemeApp(homescreenApp));
+    });
+  });
+
+  suite('_updateThemes', function() {
+    setup(function() {
+      // We assumed we already installed one theme by default
+      themesItem._themeCount = 1;
+      this.sinon.stub(themesItem, '_updateThemeSectionVisibility');
+      this.sinon.stub(themesItem, '_isThemeApp').returns(true);
+    });
+
+    suite('received install event', function() {
+      setup(function() {
+        themesItem._updateThemes({ type : 'install' });
+      });
+
+      test('add themeCount and update visibility', function() {
+        assert.isTrue(themesItem._updateThemeSectionVisibility.called); 
+        assert.equal(themesItem._themeCount, 2);
+      });
+    });
+
+    suite('received uninstall event', function() {
+      setup(function() {
+        themesItem._updateThemes({ type : 'uninstall' });
+      });
+
+      test('add themeCount and update visibility', function() {
+        assert.isTrue(themesItem._updateThemeSectionVisibility.called); 
+        assert.equal(themesItem._themeCount, 0);
+      });
+    });
+  });
+
+  suite('_updateThemeSectionVisibility', function() {
+    suite('1 theme installed', function() {
+      setup(function() {
+        themesItem._themeCount = 1;
+        themesItem._updateThemeSectionVisibility();
+      });
+
+      test('we would hide section', function() {
+        assert.isTrue(themesItem._element.hidden);
+      });
+    });
+
+    suite('2 themes installed', function() {
+      setup(function() {
+        themesItem._themeCount = 2;
+        themesItem._updateThemeSectionVisibility();
+      });
+
+      test('we would show section', function() {
+        assert.isFalse(themesItem._element.hidden);
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/root/wifi_item_test.js

@@ -0,0 +1,81 @@
+/* global MockNavigatorMozWifiManager */
+'use strict';
+
+requireApp(
+  'settings/shared/test/unit/mocks/mock_navigator_moz_wifi_manager.js');
+
+suite('WifiItem', function() {
+  var subject;
+  var element;
+  var realWifiManager;
+
+  var map = {
+    '*': {
+      'modules/wifi_context': 'MockWifiContext'
+    }
+  };
+
+  var modules = [
+    'panels/root/wifi_item'
+  ];
+
+  setup(function(done) {
+    // Define MockAppStorage
+    this.MockWifiContext = {
+      isMock: true,
+      wifiStatusText: {id: 'disabled'},
+      addEventListener: function() {},
+      removeEventListener: function() {}
+    };
+
+    define('MockWifiContext', function() {
+      return this.MockWifiContext;
+    }.bind(this));
+
+    var requireCtx = testRequire([], map, function() {});
+    requireCtx(modules, function(WifiItem) {
+      realWifiManager = navigator.mozWifiManager;
+      navigator.mozWifiManager = MockNavigatorMozWifiManager;
+      MockNavigatorMozWifiManager.mSetup();
+      element = document.createElement('small');
+      subject = WifiItem(element);
+      done();
+    });
+  });
+
+  teardown(function() {
+    navigator.mozWifiManager = realWifiManager;
+  });
+
+  test('when enabled = true', function() {
+    this.sinon.stub(this.MockWifiContext, 'addEventListener');
+    this.sinon.stub(subject, '_boundUpdateWifiDesc');
+    subject.enabled = true;
+
+    sinon.assert.called(subject._boundUpdateWifiDesc);
+    this.MockWifiContext.addEventListener.calledWith(
+      'wifiStatusTextChange', subject._boundUpdateWifiDesc
+    );
+    // assert.isTrue(this.MockAppStorage.observe.calledWith('freeSize',
+      // this.subject._boundUpdateAppFreeSpace));
+  });
+
+  test('when enabled = false', function() {
+    this.sinon.stub(this.MockWifiContext, 'removeEventListener');
+    this.sinon.stub(subject, '_boundUpdateWifiDesc');
+    // The default enabled value is false. Set to true first.
+    subject._enabled = true;
+    subject.enabled = false;
+
+    this.MockWifiContext.removeEventListener.calledWith(
+      'wifiStatusTextChange', subject._boundUpdateWifiDesc
+    );
+  });
+
+  test('when _updateWifiDesc', function() {
+    this.sinon.spy(window, 'dispatchEvent');
+    subject._updateWifiDesc(element);
+
+    assert.ok(window.dispatchEvent.called);
+  });
+});

gaia/apps/settings/test/unit/panels/screen_lock/screen_lock_test.js

@@ -0,0 +1,76 @@
+suite('ScreenLock > ', function() {
+  'use strict';
+
+  var screenLock;
+  var modules = [
+    'shared_mocks/mock_settings_listener',
+    'panels/screen_lock/screen_lock',
+    'MockDialogService'
+  ];
+
+  var maps = {
+    '*': {
+      'shared/settings_listener': 'shared_mocks/mock_settings_listener',
+      'modules/dialog_service': 'MockDialogService'
+    }
+  };
+
+  setup(function(done) {
+    define('MockDialogService', function() {
+      return {
+        show: function() {}
+      };
+    });
+
+    testRequire(modules, maps, function(MockSettingsListener, ScreenLock,
+      MockDialogService) {
+        screenLock = ScreenLock();
+        screenLock.onInit({
+          panel: document.createElement('div'),
+          lockscreenEnable: document.createElement('div'),
+          passcodeEnable: document.createElement('div'),
+          passcodeEditButton: document.createElement('div')
+        });
+        done();
+    });
+  });
+
+  suite('navigation > ', function() {
+    setup(function() {
+      this.sinon.stub(screenLock, '_showDialog');
+    });
+    suite('when passcodeEnable is clicked', function() {
+      test('show confirm if passcodeEnabled is true', function() {
+        screenLock._settings.passcodeEnabled = true;
+        screenLock._elements.passcodeEnable.click();
+        assert.ok(screenLock._showDialog.calledWith('confirm'));
+      });
+      test('show create if passcodeEnabled is false', function() {
+        screenLock._settings.passcodeEnabled = false;
+        screenLock._elements.passcodeEnable.click();
+        assert.ok(screenLock._showDialog.calledWith('create'));
+      });
+    });
+    suite('when lockscreenEnable is clicked', function() {
+      test('show confirmLock if passcode and lockscreen both are enabled',
+        function() {
+          screenLock._settings.passcodeEnabled = true;
+          screenLock._settings.lockscreenEnabled = true;
+          screenLock._elements.lockscreenEnable.click();
+          assert.ok(screenLock._showDialog.calledWith('confirmLock'));
+        });
+      test('won\'t show confirmLock if one of them are disabled', function() {
+          screenLock._settings.passcodeEnabled = true;
+          screenLock._settings.lockscreenEnabled = false;
+          screenLock._elements.lockscreenEnable.click();
+          assert.isFalse(screenLock._showDialog.called);
+        });
+    });
+    suite('click on passcodeEditButton', function() {
+      test('show edit directly', function() {
+        screenLock._elements.passcodeEditButton.click();
+        assert.ok(screenLock._showDialog.calledWith('edit'));
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/screen_lock_passcode/panel_test.js

@@ -0,0 +1,434 @@
+suite('ScreenLockPasscode > ', function() {
+  'use strict';
+
+  var realMozSettings;
+  var screenLockPanel;
+  var PasscodeHelper;
+  var mockPromise;
+  var modules = [
+    'shared_mocks/mock_navigator_moz_settings',
+    'shared_mocks/mock_promise',
+    'panels/screen_lock_passcode/panel',
+    'shared/passcode_helper'
+  ];
+  var maps = {
+    '*': {
+      'modules/settings_service': 'unit/mock_settings_service',
+      'shared/passcode_helper': 'MockPasscodeHelper',
+      'modules/dialog_panel': 'MockDialogPanel'
+    }
+  };
+
+  suiteSetup(function() {
+    realMozSettings = window.navigator.mozSettings;
+  });
+
+  suiteTeardown(function() {
+    window.navigator.mozSettings = realMozSettings;
+  });
+
+  setup(function(done) {
+    var requireCtx = testRequire([], maps, function() {});
+
+    var MockPasscodeHelper = {
+      set: function() {},
+      check: function() {}
+    };
+    define('MockPasscodeHelper', function() {
+      return MockPasscodeHelper;
+    });
+
+    define('MockDialogPanel', function() {
+      // we directly pass out the whole options !
+      return function(options) {
+        options.cancel = function() {};
+        options.submit = function() {};
+        return options;
+      };
+    });
+
+    requireCtx(modules, function(MockNavigatorSettings, MockPromise,
+      ScreenLockPanel, MockPasscodeHelper) {
+        window.navigator.mozSettings = MockNavigatorSettings;
+        mockPromise = MockPromise;
+        PasscodeHelper = MockPasscodeHelper;
+        screenLockPanel = ScreenLockPanel();
+        screenLockPanel.onInit(getFakePanelElement());
+        done();
+    });
+  });
+
+  suite('when clicking on passcodeContainer', function() {
+    setup(function() {
+      this.sinon.stub(screenLockPanel._elements.passcodeInput, 'focus');
+      screenLockPanel._elements.passcodeContainer.click();
+    });
+
+    test('we would focus passcodeInput', function() {
+      assert.ok(screenLockPanel._elements.passcodeInput.focus.called);
+    });
+  });
+
+  suite('_checkPasscode > ', function() {
+    suiteSetup(function() {
+      screenLockPanel._passcodeBuffer = '';
+    });
+
+    setup(function() {
+      this.sinon.stub(screenLockPanel, '_showErrorMessage');
+      this.sinon.stub(screenLockPanel, '_hideErrorMessage');
+    });
+
+    suite('passcode is different', function() {
+      setup(function() {
+        this.sinon.stub(PasscodeHelper, 'check')
+          .returns(Promise.resolve(false));
+      });
+      test('we would show error message', function(done) {
+        screenLockPanel._checkPasscode().then(() => {
+          assert.ok(screenLockPanel._showErrorMessage.called);
+        }).then(done, done);
+      });
+    });
+
+    suite('passcode is the same', function() {
+      setup(function() {
+        this.sinon.stub(PasscodeHelper, 'check')
+          .returns(Promise.resolve(true));
+      });
+      test('we would hide error message', function(done) {
+        screenLockPanel._checkPasscode().then(() => {
+          assert.ok(screenLockPanel._hideErrorMessage.called);
+        }).then(done, done);
+      });
+    });
+  });
+
+  suite('_onPasscodeInputKeypress > ', function() {
+    var cachedSetOptions;
+    var cachedSetPromise;
+    // var cachedSetResolve;
+
+    setup(function() {
+      this.sinon.stub(screenLockPanel, '_showErrorMessage');
+      this.sinon.stub(screenLockPanel, '_showDialogInMode');
+      this.sinon.stub(screenLockPanel, '_updatePassCodeUI');
+      this.sinon.stub(screenLockPanel, 'cancel');
+
+      this.sinon.stub(window.navigator.mozSettings, 'createLock', function() {
+        return {
+          set: function(options) {
+            cachedSetOptions = options;
+            cachedSetPromise = new mockPromise();
+            return cachedSetPromise;
+          }
+        };
+      });
+    });
+
+    suite('basic check > ', function() {
+      suite('only accepts events from the keypad', function() {
+        var fakeEvent;
+        setup(function() {
+          fakeEvent = {
+            preventDefault: sinon.spy()
+          };
+        });
+
+        test('numbers', function() {
+          fakeEvent.keyCode = 0;
+          screenLockPanel._onPasscodeInputKeypress(fakeEvent);
+          assert.ok(fakeEvent.preventDefault.called);
+        });
+
+        test('backspace', function() {
+          fakeEvent.keyCode = 8;
+          screenLockPanel._onPasscodeInputKeypress(fakeEvent);
+          assert.ok(fakeEvent.preventDefault.called);
+        });
+
+        test('others', function() {
+          fakeEvent.keyCode = 100;
+          screenLockPanel._onPasscodeInputKeypress(fakeEvent);
+          assert.ok(fakeEvent.preventDefault.notCalled);
+        });
+      });
+    });
+
+    suite('create/new lock > ', function() {
+      suite('with right passcode', function() {
+        setup(function() {
+          // we would add one more 0 (charCode = 48)
+          screenLockPanel._passcodeBuffer = '0000000';
+          screenLockPanel._mode = 'create';
+          screenLockPanel._onPasscodeInputKeypress({
+            charCode: 48,
+            keyCode: 0,
+            preventDefault: function() {}
+          });
+        });
+        test('enable button', function() {
+          assert.isFalse(screenLockPanel._elements.submitButton.disabled);
+        });
+      });
+
+      suite('with wrong passcode', function() {
+        setup(function() {
+          // we would add one more 1 (charCode = 49)
+          screenLockPanel._passcodeBuffer = '0000000';
+          screenLockPanel._mode = 'create';
+          screenLockPanel._onPasscodeInputKeypress({
+            charCode: 49,
+            keyCode: 0,
+            preventDefault: function() {}
+          });
+        });
+        test('show error message, clean passcodeBuffer', function() {
+          assert.ok(screenLockPanel._showErrorMessage.called);
+          assert.equal(screenLockPanel._passcodeBuffer, '');
+        });
+      });
+    });
+
+    suite('confirm > ', function() {
+      suite('with right passcode', function() {
+        setup(function() {
+          var promise = new mockPromise();
+          this.sinon.stub(screenLockPanel, '_checkPasscode')
+            .returns(promise);
+          // we would add one more 0 (charCode = 48)
+          screenLockPanel._passcodeBuffer = '000';
+          screenLockPanel._mode = 'confirm';
+          screenLockPanel._onPasscodeInputKeypress({
+            charCode: 48,
+            keyCode: 0,
+            preventDefault: function() {}
+          });
+          promise.mFulfillToValue(true);
+          cachedSetPromise.mFulfillToValue(true);
+        });
+        // check resolve promise here
+        test('passcode is turned off', function() {
+          assert.deepEqual(cachedSetOptions, {
+            'lockscreen.passcode-lock.enabled': false
+          });
+        });
+        test('we would back to screenLock', function() {
+          assert.ok(screenLockPanel.cancel.called);
+        });
+      });
+
+      suite('with wrong passcode', function() {
+        setup(function() {
+          var promise = new mockPromise();
+          this.sinon.stub(screenLockPanel, '_checkPasscode')
+            .returns(promise);
+          // we would add one more 0 (charCode = 48)
+          screenLockPanel._passcodeBuffer = '000';
+          screenLockPanel._mode = 'confirm';
+          screenLockPanel._onPasscodeInputKeypress({
+            charCode: 48,
+            keyCode: 0,
+            preventDefault: function() {}
+          });
+          promise.mFulfillToValue(false);
+        });
+        test('we would reset passcodeBuffer', function() {
+          assert.equal(screenLockPanel._passcodeBuffer, '');
+        });
+      });
+    });
+
+    suite('confirmLock > ', function() {
+      suite('with right passcode', function() {
+        setup(function() {
+          var promise = new mockPromise();
+          this.sinon.stub(screenLockPanel, '_checkPasscode')
+            .returns(promise);
+          // we would add one more 0 (charCode = 48)
+          screenLockPanel._passcodeBuffer = '000';
+          screenLockPanel._mode = 'confirmLock';
+          screenLockPanel._onPasscodeInputKeypress({
+            charCode: 48,
+            keyCode: 0,
+            preventDefault: function() {}
+          });
+          promise.mFulfillToValue(true);
+          cachedSetPromise.mFulfillToValue(false);
+        });
+        test('passcode and lockscreen are turned off', function() {
+          assert.deepEqual(cachedSetOptions, {
+            'lockscreen.enabled': false,
+            'lockscreen.passcode-lock.enabled': false
+          });
+        });
+        test('we would back to screenLock', function() {
+          assert.ok(screenLockPanel.cancel.called);
+        });
+      });
+
+      suite('with wrong passcode', function() {
+        setup(function() {
+          var promise = new mockPromise();
+          this.sinon.stub(screenLockPanel, '_checkPasscode')
+            .returns(promise);
+          // we would add one more 0 (charCode = 48)
+          screenLockPanel._passcodeBuffer = '000';
+          screenLockPanel._mode = 'confirmLock';
+          screenLockPanel._onPasscodeInputKeypress({
+            charCode: 48,
+            keyCode: 0,
+            preventDefault: function() {}
+          });
+          promise.mFulfillToValue(false);
+        });
+        test('we would reset passcodeBuffer', function() {
+          assert.equal(screenLockPanel._passcodeBuffer, '');
+        });
+      });
+    });
+
+    suite('edit > ', function() {
+      suite('with right passcode', function() {
+        setup(function() {
+          var promise = new mockPromise();
+          this.sinon.stub(screenLockPanel, '_checkPasscode')
+            .returns(promise);
+          // we would add one more 0 (charCode = 48)
+          screenLockPanel._passcodeBuffer = '000';
+          screenLockPanel._mode = 'edit';
+          screenLockPanel._onPasscodeInputKeypress({
+            charCode: 48,
+            keyCode: 0,
+            preventDefault: function() {}
+          });
+          promise.mFulfillToValue(true);
+        });
+        test('we would do a lot', function() {
+          assert.ok(screenLockPanel._updatePassCodeUI.called);
+          assert.ok(screenLockPanel._showDialogInMode.calledWith('new'));
+          assert.equal(screenLockPanel._passcodeBuffer, '');
+        });
+      });
+
+      suite('with wrong passcode', function() {
+        setup(function() {
+          var promise = new mockPromise();
+          this.sinon.stub(screenLockPanel, '_checkPasscode')
+            .returns(promise);
+          // we would add one more 0 (charCode = 48)
+          screenLockPanel._passcodeBuffer = '000';
+          screenLockPanel._mode = 'edit';
+          screenLockPanel._onPasscodeInputKeypress({
+            charCode: 48,
+            keyCode: 0,
+            preventDefault: function() {}
+          });
+          promise.mFulfillToValue(false);
+        });
+        test('we would reset passcodeBuffer', function() {
+          assert.equal(screenLockPanel._passcodeBuffer, '');
+        });
+      });
+    });
+  });
+
+  suite('onBeforeShow > ', function() {
+    setup(function() {
+      this.sinon.stub(screenLockPanel, '_showDialogInMode');
+    });
+
+    suite('if users left panel by home', function() {
+      setup(function() {
+        screenLockPanel._leftApp = true;
+        screenLockPanel.onBeforeShow({}, 'create');
+      });
+
+      test('we would not re-show dialog again', function() {
+        assert.isFalse(screenLockPanel._showDialogInMode.called);
+      });
+    });
+
+    suite('if users left panel by back button', function() {
+      setup(function() {
+        screenLockPanel._leftApp = false;
+        screenLockPanel.onBeforeShow({}, 'create');
+      });
+
+      test('we would re-show dialog again', function() {
+        assert.isTrue(screenLockPanel._showDialogInMode.called);
+      });
+    });
+  });
+
+  suite('onHide > ', function() {
+    var realDocumentHidden = document.hidden;
+    var isLeavingByHomeButton = true;
+
+    setup(function() {
+      Object.defineProperty(document, 'hidden', {
+        configurable: true,
+        get: function() {
+          return isLeavingByHomeButton;
+        }
+      });
+
+      screenLockPanel._mode = 'edit';
+      screenLockPanel._passcodeBuffer = '012';
+    });
+
+    teardown(function() {
+      Object.defineProperty(document, 'hidden', {
+        configurable: true,
+        get: function() {
+          return realDocumentHidden;
+        }
+      });
+    });
+
+    test('we won\'t clean up the buffer if users click on home key',
+      function() {
+        isLeavingByHomeButton = true;
+        screenLockPanel.onHide();
+        assert.equal(screenLockPanel._passcodeBuffer, '012');
+    });
+
+    test('we will clean up the buffer if users leave by clicking button',
+      function() {
+        isLeavingByHomeButton = false;
+        screenLockPanel.onHide();
+        assert.equal(screenLockPanel._passcodeBuffer, '');
+    });
+  });
+
+  function getFakePanelElement() {
+    var fakePanel = document.createElement('div');
+
+    var gaiaHeader = document.createElement('gaia-header');
+    var h1 = document.createElement('h1');
+    gaiaHeader.appendChild(h1);
+
+    var passcodeInput = document.createElement('input');
+    passcodeInput.classList.add('passcode-input');
+    var passcodeContainer = document.createElement('div');
+    passcodeContainer.classList.add('passcode-container');
+
+    var submitButton = document.createElement('button');
+    submitButton.type = 'submit';
+    var submitButtonText = document.createElement('span');
+    submitButton.appendChild(submitButtonText);
+
+    for (var i = 0; i < 8; i++) {
+      var passcodeDigit = document.createElement('div');
+      passcodeDigit.classList.add('passcode-digit');
+      fakePanel.appendChild(passcodeDigit);
+    }
+
+    fakePanel.appendChild(gaiaHeader);
+    fakePanel.appendChild(passcodeInput);
+    fakePanel.appendChild(passcodeContainer);
+    fakePanel.appendChild(submitButton);
+
+    return fakePanel;
+  }
+});

gaia/apps/settings/test/unit/panels/simcard_manager/sim_ui_model_test.js

@@ -0,0 +1,97 @@
+'use strict';
+
+suite('SimUIModel', function() {
+  var fakeSimcard;
+  var fakeSimcardIndex = 0;
+
+  setup(function(done) {
+    testRequire([
+      'panels/simcard_manager/sim_ui_model'
+    ], {}, function(SimUIModel) {
+      fakeSimcard = SimUIModel(fakeSimcardIndex);
+      done();
+    });
+  });
+
+  suite('SimCard.getInfo > ', function() {
+    test('can getInfo successfully', function() {
+      assert.isObject(fakeSimcard.getInfo());
+    });
+  });
+
+  suite('SimCard.setState > ', function() {
+
+    suite('nosim state > ', function() {
+      setup(function() {
+        fakeSimcard.setState('nosim');
+      });
+
+      test('set state to nosim successfully', function() {
+        var cardInfo = fakeSimcard.getInfo();
+        assert.isFalse(cardInfo.enabled);
+        assert.isTrue(cardInfo.absent);
+        assert.isFalse(cardInfo.locked);
+        assert.equal(cardInfo.name.id, 'simWithIndex');
+        assert.equal(cardInfo.name.args.index, fakeSimcardIndex + 1);
+        assert.equal(cardInfo.number, '');
+        assert.equal(cardInfo.operator.id, 'noSimCard');
+      });
+    });
+
+    suite('locked state > ', function() {
+      setup(function() {
+        fakeSimcard.setState('locked');
+      });
+
+      test('set state to lock successfully', function() {
+        var cardInfo = fakeSimcard.getInfo();
+        assert.isFalse(cardInfo.enabled);
+        assert.isFalse(cardInfo.absent);
+        assert.isTrue(cardInfo.locked);
+        assert.equal(cardInfo.name.id, 'simWithIndex');
+        assert.equal(cardInfo.name.args.index, fakeSimcardIndex + 1);
+        assert.equal(cardInfo.number, '');
+        assert.equal(cardInfo.operator.id, 'sim-pin-locked');
+      });
+    });
+
+    suite('blocked state > ', function() {
+      setup(function() {
+        fakeSimcard.setState('blocked');
+      });
+
+      test('set state to blocked successfully', function() {
+        var cardInfo = fakeSimcard.getInfo();
+        assert.isTrue(cardInfo.enabled);
+        assert.isTrue(cardInfo.absent);
+        assert.isFalse(cardInfo.locked);
+        assert.equal(cardInfo.name.id, 'noSimCard');
+        assert.equal(cardInfo.number, '');
+        assert.equal(cardInfo.operator, null);
+      });
+    });
+
+    suite('normal state > ', function() {
+      var fakeNumber = '0123456789';
+      var fakeOperator = 'chunghwa telecom';
+
+      setup(function() {
+        fakeSimcard.setState('normal', {
+          number: fakeNumber,
+          operator: fakeOperator
+        });
+      });
+
+      test('set state to normal successfully', function() {
+        var cardInfo = fakeSimcard.getInfo();
+        assert.isTrue(cardInfo.enabled);
+        assert.isFalse(cardInfo.absent);
+        assert.isFalse(cardInfo.locked);
+        assert.equal(cardInfo.name.id, 'simWithIndex');
+        assert.equal(cardInfo.name.args.index, fakeSimcardIndex + 1);
+        assert.equal(cardInfo.number, fakeNumber);
+        assert.equal(cardInfo.operator.text, fakeOperator);
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/simcard_manager/simcard_manager_test.js

@@ -0,0 +1,565 @@
+/* global MockNavigatorMozMobileConnections, MockNavigatorMozIccManager,
+   MockL10n*/
+'use strict';
+
+requireApp(
+  'settings/shared/test/unit/mocks/mock_navigator_moz_icc_manager.js');
+requireApp(
+  'settings/shared/test/unit/mocks/mock_navigator_moz_mobile_connections.js');
+requireApp(
+  'settings/shared/test/unit/mocks/mock_navigator_moz_settings.js');
+require('/shared/test/unit/mocks/mock_l20n.js');
+
+suite('SimCardManager > ', function() {
+  var realL10n;
+  var realMozMobileConnections;
+  var realMozIccManager;
+  var mockSimSettingsHelper;
+  var mockAirplaneModeHelper;
+  var mockMobileOperator;
+  var mockSimUIModel;
+  var simcardManager;
+  var map = {
+    '*': {
+      'shared/sim_settings_helper': 'shared_mocks/mock_sim_settings_helper',
+      'shared/airplane_mode_helper': 'unit/mock_airplane_mode_helper',
+      'shared/mobile_operator': 'shared_mocks/mock_mobile_operator',
+      'panels/simcard_manager/sim_ui_model': 'unit/mock_sim_ui_model'
+    }
+  };
+
+  suiteSetup(function() {
+    realMozMobileConnections = window.navigator.mozMobileConnections;
+    window.navigator.mozMobileConnections = MockNavigatorMozMobileConnections;
+
+    realMozIccManager = window.navigator.mozIccManager;
+    window.navigator.mozIccManager = MockNavigatorMozIccManager;
+
+    realL10n = document.l10n;
+    document.l10n = MockL10n;
+  });
+
+  suiteTeardown(function() {
+    window.navigator.mozMobileConnections = realMozMobileConnections;
+    window.navigator.mozIccManager = MockNavigatorMozIccManager;
+    document.l10n = realL10n;
+  });
+
+  setup(function(done) {
+    // add a mobile connection to make it DSDS
+    MockNavigatorMozMobileConnections.mAddMobileConnection();
+
+    testRequire([
+      'shared_mocks/mock_sim_settings_helper',
+      'unit/mock_airplane_mode_helper',
+      'shared_mocks/mock_mobile_operator',
+      'unit/mock_sim_ui_model',
+      'panels/simcard_manager/simcard_manager'
+    ], map, function(MockSimSettingsHelper,
+      MockAirplaneModeHelper, MockMobileOperator, MockSimUIModel,
+      SimcardManager) {
+
+      mockSimSettingsHelper = MockSimSettingsHelper;
+      mockAirplaneModeHelper = MockAirplaneModeHelper;
+      mockMobileOperator = MockMobileOperator;
+      mockSimUIModel = MockSimUIModel;
+
+      simcardManager = new SimcardManager({
+        simCardContainer: document.createElement('div'),
+        simCardTmpl: document.createElement('div'),
+        simSettingsHeader: document.createElement('header'),
+        simSettingsList: document.createElement('ul'),
+        outgoingCallSelect: document.createElement('select'),
+        outgoingMessagesSelect: document.createElement('select'),
+        outgoingDataSelect: document.createElement('select')
+      });
+      done();
+    });
+  });
+
+  teardown(function() {
+    MockNavigatorMozMobileConnections.mTeardown();
+  });
+
+  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 = simcardManager._elements.outgoingDataSelect;
+
+      // inject options into select element
+      [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);
+      });
+
+      this.sinon.stub(select, 'addEventListener');
+      this.sinon.stub(mockSimSettingsHelper, '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(mockSimSettingsHelper.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(done) {
+        // the confirm takes a promised l10n value so we need to delay the
+        // check.
+        Promise.resolve().then(() => {
+          assert.equal(select.selectedIndex, 0);
+          assert.isFalse(mockSimSettingsHelper.setServiceOnCard.called);
+          done();
+        });
+      });
+    });
+
+    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(done) {
+        assert.equal(select.selectedIndex, 1);
+        Promise.resolve().then(() => {
+          assert.isTrue(mockSimSettingsHelper.setServiceOnCard.called);
+          done();
+        });
+      });
+    });
+  });
+
+  suite('init > ', function() {
+    setup(function() {
+      // we need them for later testing
+      this.sinon.stub(simcardManager, '_initSimCardsInfo');
+      this.sinon.stub(simcardManager, '_initSimCardManagerUI');
+      this.sinon.stub(simcardManager, '_addCardStateChangeEventOnIccs');
+      this.sinon.stub(simcardManager, '_addAirplaneModeChangeEvent');
+      this.sinon.stub(simcardManager, '_addVoiceChangeEventOnConns');
+      this.sinon.stub(simcardManager, '_addOutgoingDataSelectEvent');
+      this.sinon.stub(simcardManager._elements.outgoingCallSelect,
+        'addEventListener');
+      this.sinon.stub(simcardManager._elements.outgoingMessagesSelect,
+        'addEventListener');
+      simcardManager.init();
+    });
+
+    test('is event binded successfully', function() {
+      var outgoingCall =
+        simcardManager._elements.outgoingCallSelect;
+      var outgoingMessages =
+        simcardManager._elements.outgoingMessagesSelect;
+
+      assert.equal(outgoingCall.addEventListener.lastCall.args[0],
+        'change');
+      assert.equal(outgoingMessages.addEventListener.lastCall.args[0],
+        'change');
+    });
+
+    test('is UI inited successfully', function() {
+      assert.isTrue(simcardManager._initSimCardsInfo.called);
+      assert.isTrue(simcardManager._initSimCardManagerUI.called);
+      assert.isTrue(simcardManager._addCardStateChangeEventOnIccs.called);
+      assert.isTrue(simcardManager._addAirplaneModeChangeEvent.called);
+      assert.isTrue(simcardManager._addVoiceChangeEventOnConns.called);
+    });
+  });
+
+  suite('_initSimCardsInfo > ', function() {
+    setup(function() {
+      this.sinon.stub(simcardManager, '_updateCardState');
+      simcardManager._initSimCardsInfo();
+    });
+
+    test('simcards info are inited', function() {
+      assert.equal(simcardManager._simcards.length,
+        window.navigator.mozMobileConnections.length);
+      assert.isTrue(simcardManager._updateCardState.called);
+    });
+  });
+
+  suite('_updateCardState > ', function() {
+    var fakeRightIccId = '12345';
+
+    setup(function() {
+      initCards(1);
+      simcardManager._simcards[0]._state = '';
+    });
+
+    suite('no iccId, we can\'t get icc instance > ', function() {
+      setup(function() {
+        simcardManager._updateCardState(0, undefined);
+      });
+
+      test('simcard will be nosim', function() {
+        assert.equal(simcardManager._simcards[0]._state, 'nosim');
+      });
+    });
+
+    suite('in airplane mode, we will make UI nosim > ', function() {
+      setup(function() {
+        simcardManager._isAirplaneMode = true;
+        simcardManager._updateCardState(0, fakeRightIccId);
+      });
+
+      test('simcard will be nosim', function() {
+        assert.equal(simcardManager._simcards[0]._state, 'nosim');
+      });
+    });
+
+    suite('not in airplane mode and with right iccId > ', function() {
+      setup(function() {
+        simcardManager._isAirplaneMode = false;
+        simcardManager._updateCardState(0, fakeRightIccId);
+      });
+
+      test('simcard will be normal', function() {
+        assert.equal(simcardManager._simcards[0]._state, 'normal');
+      });
+    });
+
+    suite('not in airplane mode and with right iccId but locked > ',
+      function() {
+        var fakeLockedIccId = '123456789';
+
+        suiteSetup(function() {
+          window.navigator.mozIccManager.addIcc(fakeLockedIccId, {
+            'cardState' : 'pinRequired'
+          });
+        });
+
+        suiteTeardown(function() {
+          window.navigator.mozIccManager.removeIcc(fakeLockedIccId);
+        });
+
+        setup(function() {
+          simcardManager._isAirplaneMode = false;
+          simcardManager._updateCardState(0, fakeLockedIccId);
+        });
+
+        test('simcard will be locked', function() {
+          assert.equal(simcardManager._simcards[0]._state, 'locked');
+        });
+    });
+  });
+
+  suite('_getSim related methods > ', function() {
+    setup(function() {
+      initCards(2);
+    });
+
+    suite('getSimCardsCount > ', function() {
+      suite('empty cards', function() {
+        setup(function() {
+          simcardManager._simcards = [];
+        });
+
+        test('empty cards return correctly', function() {
+          assert.equal(simcardManager._getSimCardsCount(), 0);
+        });
+      });
+
+      suite('2 cards', function() {
+        test('2 card returns correctly', function() {
+          assert.equal(simcardManager._getSimCardsCount(), 2);
+        });
+      });
+    });
+
+    suite('getSimCardInfo > ', function() {
+      test('getSimCardInfo(0) correctly', function() {
+        assert.isObject(simcardManager._getSimCardInfo(0));
+      });
+
+      test('getSimCardInfo(1) correctly', function() {
+        assert.isObject(simcardManager._getSimCardInfo(1));
+      });
+    });
+
+    suite('getSimCard', function() {
+      test('getSimCard(0) correctly', function() {
+        assert.isObject(simcardManager._getSimCard(0));
+      });
+
+      test('getSimCard(1) correctly', function() {
+        assert.isObject(simcardManager._getSimCard(1));
+      });
+    });
+  });
+
+  suite('_updateSimCardUI > ', function() {
+    // we will use this to track how many doms got updated
+    var calledDoms = [];
+    var cardDom;
+    var nameDom;
+    var numberDom;
+    var operatorDom;
+
+    var defaultName = {
+      id: 'simWithIndex',
+      args: {
+        index: 1
+      }
+    };
+    var defaultNumber = '0123456789';
+    var defaultOperator = 'Taiwan telecom';
+    var defaultCardSelector = '.sim-card-0';
+    var defaultNameSelector = '.sim-card-0 .sim-card-name';
+    var defaultNumberSelector = '.sim-card-0 .sim-card-number';
+    var defaultOperatorSelector = '.sim-card-0 .sim-card-operator';
+
+    setup(function() {
+      initCards(1);
+      Object.defineProperty(simcardManager._elements, 'simCardContainer', {
+        value: {
+          querySelector: function(selector) {
+            var dom;
+
+            if (selector.match(/checkbox/g)) {
+              dom = document.createElement('input');
+              dom.type = 'checkbox';
+            } else {
+              dom = document.createElement('div');
+            }
+            dom.dataset.selector = selector;
+            calledDoms.push(dom);
+            return dom;
+          }
+        }
+      });
+
+      simcardManager._updateSimCardUI(0);
+      cardDom = calledDoms[0];
+      nameDom = calledDoms[1];
+      numberDom = calledDoms[2];
+      operatorDom = calledDoms[3];
+    });
+
+    test('cardDom is queried correctly', function() {
+      assert.equal(cardDom.dataset.selector, defaultCardSelector);
+    });
+
+    test('name is queried correctly', function() {
+      assert.equal(nameDom.dataset.selector, defaultNameSelector);
+    });
+
+    test('number is queried correctly', function() {
+      assert.equal(numberDom.dataset.selector, defaultNumberSelector);
+    });
+
+    test('operator is queried correctly', function() {
+      assert.equal(operatorDom.dataset.selector, defaultOperatorSelector);
+    });
+
+    test('cardDom maps to the right class', function() {
+      // reflecting to default MockSimCard status
+      var cardDomStatus = cardDom.classList.toString();
+
+      assert.isTrue(/enabled/.test(cardDomStatus));
+      assert.isFalse(/absent/.test(cardDomStatus));
+      assert.isFalse(/locked/.test(cardDomStatus));
+    });
+
+    test('name is updated correctly', function() {
+      assert.equal(nameDom.getAttribute('data-l10n-id'), defaultName.id);
+    });
+
+    test('number is updated correctly', function() {
+      assert.equal(numberDom.textContent, defaultNumber);
+    });
+
+    test('operator is updated correctly', function() {
+      assert.equal(operatorDom.textContent, defaultOperator);
+    });
+  });
+
+  suite('_initSimCardManagerUI > ', function() {
+    setup(function() {
+      this.sinon.stub(simcardManager, '_initSimCardsUI');
+      this.sinon.stub(simcardManager, '_updateSelectOptionsUI');
+      this.sinon.stub(simcardManager, '_updateSimCardsUI');
+      this.sinon.stub(simcardManager, '_updateSimSettingsUI');
+      simcardManager._initSimCardManagerUI();
+    });
+
+    test('all related methods are exectued', function() {
+      assert.ok(simcardManager._initSimCardsUI.called);
+      assert.ok(simcardManager._updateSelectOptionsUI.called);
+      assert.ok(simcardManager._updateSimCardsUI.called);
+      assert.ok(simcardManager._updateSimSettingsUI.called);
+    });
+  });
+
+  suite('_updateSelectOptionUI > ', function() {
+    var selectedIndex = 1;
+    var fakeSelect;
+
+    setup(function() {
+      initCards(2);
+      simcardManager._simcards[0]._absent = false;
+      simcardManager._simcards[1]._absent = false;
+      fakeSelect = document.createElement('select');
+    });
+
+    test('if storageKey is outgoingCall, we would add "always ask" option',
+      function() {
+        simcardManager._updateSelectOptionUI('outgoingCall',
+          selectedIndex, fakeSelect);
+        assert.equal(fakeSelect.length, 3);
+    });
+
+    test('if storageKey is outgoingMessages, we would add "always ask" option',
+      function() {
+        simcardManager._updateSelectOptionUI('outgoingMessages',
+          selectedIndex, fakeSelect);
+        assert.equal(fakeSelect.length, 3);
+    });
+
+    test('if storageKey is outgoingData, we won\'t add "always ask" option',
+      function() {
+        simcardManager._updateSelectOptionUI('outgoingData',
+          selectedIndex, fakeSelect);
+        assert.equal(fakeSelect.length, 2);
+    });
+  });
+
+  suite('_updateSimSettingsUI > ', function() {
+    setup(function() {
+      initCards(2);
+    });
+
+    suite('two sims are absent and not in airplane mode > ', function() {
+      setup(function() {
+        simcardManager._simcards[0]._absent = true;
+        simcardManager._simcards[1]._absent = true;
+        simcardManager._isAirplaneMode = false;
+        simcardManager._isAirplaneMode = false;
+        simcardManager._updateSimSettingsUI();
+      });
+
+      test('we will hide sim settings section', function() {
+        assert.isTrue(simcardManager._elements.simSettingsHeader.hidden);
+        assert.isTrue(simcardManager._elements.simSettingsList.hidden);
+      });
+    });
+
+    suite('two sims are absent but in airplane mode > ', function() {
+      setup(function() {
+        simcardManager._simcards[0]._absent = true;
+        simcardManager._simcards[1]._absent = true;
+        simcardManager._isAirplaneMode = true;
+        simcardManager._isAirplaneMode = true;
+        simcardManager._updateSimSettingsUI();
+      });
+
+      test('we will hide sim settings section', function() {
+        assert.isTrue(simcardManager._elements.simSettingsHeader.hidden);
+        assert.isTrue(simcardManager._elements.simSettingsList.hidden);
+      });
+    });
+
+    suite('one sim is absent but in airplane mode > ', function() {
+      setup(function() {
+        simcardManager._simcards[0]._absent = false;
+        simcardManager._simcards[1]._absent = true;
+        simcardManager._isAirplaneMode = true;
+        simcardManager._isAirplaneMode = true;
+        simcardManager._updateSimSettingsUI();
+      });
+      test('we will hide sim settings section', function() {
+        assert.isTrue(simcardManager._elements.simSettingsHeader.hidden);
+        assert.isTrue(simcardManager._elements.simSettingsList.hidden);
+      });
+    });
+
+    suite('one sim is absent but not in airplane mode > ', function() {
+      setup(function() {
+        simcardManager._simcards[0]._absent = false;
+        simcardManager._simcards[1]._absent = true;
+        simcardManager._isAirplaneMode = false;
+        simcardManager._isAirplaneMode = false;
+        simcardManager._updateSimSettingsUI();
+      });
+      test('we will show sim settings section', function() {
+        assert.isFalse(simcardManager._elements.simSettingsHeader.hidden);
+        assert.isFalse(simcardManager._elements.simSettingsList.hidden);
+      });
+    });
+  });
+
+  suite('We can change options when simcard is blocked', function() {
+    var fakeLockedIccId = '123456789';
+
+    setup(function() {
+      sinon.stub(simcardManager, '_updateCardStateWithUI');
+      sinon.stub(simcardManager, '_updateSelectOptionsUI');
+
+      window.navigator.mozIccManager.addIcc(fakeLockedIccId, {
+        'cardState' : 'permanentBlocked'
+      });
+
+      simcardManager._addChangeEventOnIccByIccId(fakeLockedIccId);
+
+      var callback = window.navigator.mozIccManager.getIccById(
+        fakeLockedIccId
+      )._eventListeners.cardstatechange[0];
+      callback();
+    });
+
+    suiteTeardown(function() {
+      window.navigator.mozIccManager.removeIcc(fakeLockedIccId);
+    });
+
+    test('change successfully', function() {
+      assert.isTrue(simcardManager._updateCardStateWithUI.called);
+      assert.isTrue(simcardManager._updateSelectOptionsUI.called);
+    });
+  });
+
+  // helpers
+  function initCards(count) {
+    simcardManager.simcards = [];
+    for (var i = 0; i < count; i++) {
+      var card = mockSimUIModel(i);
+      simcardManager._simcards.push(card);
+    }
+  }
+});

gaia/apps/settings/test/unit/panels/simpin/simpin_test.js

@@ -0,0 +1,386 @@
+'use strict';
+
+require('/shared/js/component_utils.js');
+require('/shared/elements/gaia_switch/script.js');
+
+suite('SimPin > ', function() {
+  var simpin;
+  var map = {
+    '*': {
+      'shared/airplane_mode_helper': 'MockAirplaneModeHelper',
+      'shared/simslot_manager': 'MockSIMSlotManager',
+      'shared/toaster': 'MockToaster',
+      'modules/dialog_service': 'MockDialogService',
+      'modules/sim_security': 'MockSimSecurity'
+    }
+  };
+
+  setup(function(done) {
+    this.MockAirplaneModeHelper = {
+
+    };
+
+    this.MockSIMSlotManager = {
+      isMultiSIM: function() {}
+    };
+
+    this.MockToaster = {
+      showToast: function() {}
+    };
+
+    this.MockDialogService = {
+      show: function() {
+        return Promise.resolve();
+      }
+    };
+
+    this.MockIccManager = {
+      getIccById: function() {}
+    };
+
+    this.MockSimSecurity = {
+      getCardLock: function() {}
+    };
+
+    define('MockAirplaneModeHelper', () => {
+      return this.MockAirplaneModeHelper;
+    });
+
+    define('MockSIMSlotManager', () => {
+      return this.MockSIMSlotManager;
+    });
+
+    define('MockToaster', () => {
+      return this.MockToaster;
+    });
+
+    define('MockDialogService', () => {
+      return this.MockDialogService;
+    });
+
+    define('MockIccManager', () => {
+      return this.MockIccManager;
+    });
+
+    define('MockSimSecurity', () => {
+      return this.MockSimSecurity;
+    });
+
+    var requireCtx = testRequire([], map, function() {});
+    requireCtx(['panels/simpin/simpin'], (SimPin) => {
+      simpin = SimPin({
+        dialog: document.createElement('div'),
+        simPinTmpl: document.createElement('div'),
+        simPinContainer: document.createElement('div'),
+        simPinHeader: document.createElement('div')
+      });
+
+      simpin.iccManager = this.MockIccManager;
+      done();
+    });
+  });
+
+  suite('initSimPinBack > ', function() {
+    suite('single sim > ', function() {
+      setup(function() {
+        this.sinon.stub(this.MockSIMSlotManager, 'isMultiSIM').returns(false);
+        simpin.initSimPinBack();
+      });
+      test('href is #root', function() {
+        var href = simpin._elements.simPinHeader.dataset.href;
+        assert.equal(href, '#root');
+      });
+    });
+    suite('dual sim > ', function() {
+      setup(function() {
+        this.sinon.stub(this.MockSIMSlotManager, 'isMultiSIM').returns(true);
+        simpin.initSimPinBack();
+      });
+      test('href is #sim-manager', function() {
+        var href = simpin._elements.simPinHeader.dataset.href;
+        assert.equal(href, '#sim-manager');
+      });
+    });
+  });
+
+  suite('initSimPinsUI > ', function() {
+    var viewSpy;
+
+    setup(function() {
+      viewSpy = this.sinon.spy();
+      simpin.simPinView = viewSpy;
+    });
+
+    suite('in single sim structure', function() {
+      setup(function() {
+        simpin.conns = [{}];
+        this.sinon.stub(this.MockSIMSlotManager, 'isMultiSIM').returns(false);
+
+        simpin.initSimPinsUI();
+      });
+
+      test('init SimPinsUI successfully, we won\'t put SIM [n] PIN on UI',
+        function() {
+          var firstCallArgs = viewSpy.getCall(0).args[0];
+          assert.equal(firstCallArgs.simIndex, '0');
+          assert.equal(firstCallArgs.simPinArgs,
+            '{"index":""}');
+      });
+    });
+
+    suite('in dsds structure', function() {
+      setup(function() {
+        simpin.conns = [{}, {}];
+        this.sinon.stub(this.MockSIMSlotManager, 'isMultiSIM').returns(true);
+
+        simpin.initSimPinsUI();
+      });
+
+      test('init SimPinsUI successfully', function() {
+        var firstCallArgs = viewSpy.getCall(0).args[0];
+        assert.equal(firstCallArgs.simIndex, '0');
+        assert.equal(firstCallArgs.simPinArgs, '{"index":1}');
+
+        var secondCallArgs = viewSpy.getCall(1).args[0];
+        assert.equal(secondCallArgs.simIndex, '1');
+        assert.equal(secondCallArgs.simPinArgs, '{"index":2}');
+      });
+    });
+  });
+
+  suite('updateSimPinUI > ', function() {
+    var cachedDoms = {};
+
+    setup(function() {
+      simpin.conns = [{}, {}];
+
+      // clean them at first
+      cachedDoms = {};
+      // make sure we will return right DOMs
+      this.sinon.stub(simpin._elements.simPinContainer, 'querySelector',
+        function(key) {
+          var dom;
+          var type;
+          if (key.match(/gaia-switch/)) {
+            dom = document.createElement('gaia-switch');
+            type = 'checkbox';
+          }
+          else {
+            dom = document.createElement('div');
+            type = 'div';
+          }
+          cachedDoms[type] = dom;
+          return dom;
+      });
+    });
+
+    suite('icc has no cardState (maybe in airplane mode) > ', function() {
+      setup(function() {
+        this.sinon.stub(this.MockIccManager, 'getIccById').returns({
+          cardState: null
+        });
+        test('checkbox will be disabled, div will be hidden', function(done) {
+          simpin.updateSimPinUI(0).then(function() {
+            assert.ok(cachedDoms.checkbox.disabled);
+            assert.ok(cachedDoms.div.hidden);
+          }).then(done, done);
+        });
+      });
+    });
+
+    suite('icc has cardState, but not in airplane mode > ', function() {
+      setup(function() {
+        this.sinon.stub(this.MockSimSecurity, 'getCardLock', function() {
+          return Promise.resolve({
+            enabled: true
+          });
+        });
+
+        this.sinon.stub(this.MockIccManager, 'getIccById').returns({
+          cardState: 'normal'
+        });
+
+        simpin.isAirplaneMode = false;
+      });
+
+      test('will get right icc, and change UI', function(done) {
+        simpin.updateSimPinUI(0).then(function() {
+          assert.isFalse(!!cachedDoms.checkbox.disabled);
+          assert.isTrue(cachedDoms.checkbox.checked);
+          assert.isFalse(cachedDoms.div.hidden);
+        }).then(done, done);
+      });
+    });
+
+    suite('icc has cardState, but in airplane mode > ', function() {
+      setup(function() {
+        this.sinon.stub(this.MockIccManager, 'getIccById').returns({
+          cardState: 'normal'
+        });
+        simpin.isAirplaneMode = true;
+      });
+
+      test('checkbox will be disabled and div will be hidden', function(done) {
+        simpin.updateSimPinUI(0).then(function() {
+          assert.ok(cachedDoms.checkbox.disabled);
+          assert.ok(cachedDoms.div.hidden);
+        }).then(done, done);
+      });
+    });
+  });
+
+  suite('changeSimPin > ', function() {
+    setup(function() {
+      this.sinon.stub(this.MockToaster, 'showToast');
+      this.sinon.stub(this.MockDialogService, 'show').returns(
+        Promise.resolve({ type: 'submit' }));
+    });
+
+    test('in single sim', function(done) {
+      this.sinon.stub(this.MockSIMSlotManager, 'isMultiSIM').returns(false);
+      simpin.changeSimPin(0).then(() => {
+        var toastArgs = this.MockToaster.showToast.getCall(0).args[0];
+        assert.equal(toastArgs.messageL10nId, 'simPinChangedSuccessfully');
+      }).then(done, done);
+    });
+
+    test('in multi sim', function(done) {
+      this.sinon.stub(this.MockSIMSlotManager, 'isMultiSIM').returns(true);
+      simpin.changeSimPin(0).then(() => {
+        var toastArgs = this.MockToaster.showToast.getCall(0).args[0];
+        assert.equal(toastArgs.messageL10nId,
+          'simPinChangedSuccessfullyWithIndex');
+        assert.equal(toastArgs.messageL10nArgs.index, 1);
+      }).then(done, done);
+    });
+  });
+
+  suite('checkSimPin > ', function() {
+    var fakeCheckbox = {
+      checked: true
+    };
+
+    setup(function() {
+      simpin.conns = [{}, {}];
+      this.sinon.stub(simpin, 'updateSimPinUI');
+      fakeCheckbox.checked = true;
+    });
+
+    suite('pukRequired >', function() {
+      setup(function() {
+        this.sinon.stub(this.MockIccManager, 'getIccById').returns({
+          cardState: 'pukRequired'
+        });
+      });
+
+      test('if submit, we will set values', function(done) {
+        this.sinon.stub(this.MockDialogService, 'show').returns(
+          Promise.resolve({ type: 'submit' }));
+        simpin.checkSimPin(fakeCheckbox, 0).then(() => {
+          assert.equal(fakeCheckbox.checked, true);
+          assert.isTrue(simpin.updateSimPinUI.called);
+        }).then(done, done);
+      });
+
+      test('if cancel, we will undo operations', function(done) {
+        this.sinon.stub(this.MockDialogService, 'show').returns(
+          Promise.resolve({ type: 'cancel' }));
+        simpin.checkSimPin(fakeCheckbox, 0).then(() => {
+          assert.equal(fakeCheckbox.checked, false);
+          assert.isTrue(simpin.updateSimPinUI.called);
+        }).then(done, done);
+      });
+    });
+
+    suite('other cardstates with checkbox enabled', function() {
+      setup(function() {
+        this.sinon.stub(this.MockIccManager, 'getIccById').returns({
+          cardState: 'normal'
+        });
+        fakeCheckbox.checked = true;
+      });
+
+      test('if submit, we will do following works', function(done) {
+        this.sinon.stub(this.MockDialogService, 'show').returns(
+          Promise.resolve({ type: 'submit' }));
+
+        simpin.checkSimPin(fakeCheckbox, 0).then(() => {
+          var args = this.MockDialogService.show.getCall(0).args[1];
+          assert.equal(args.method, 'enable_lock');
+          assert.isTrue(simpin.updateSimPinUI.called);
+        }).then(done, done);
+      });
+
+      test('if cancel, we will undo operations', function(done) {
+        this.sinon.stub(this.MockDialogService, 'show').returns(
+          Promise.resolve({ type: 'cancel' }));
+
+        simpin.checkSimPin(fakeCheckbox, 0).then(() => {
+          var args = this.MockDialogService.show.getCall(0).args[1];
+          assert.equal(args.method, 'enable_lock');
+          assert.equal(fakeCheckbox.checked, false);
+          assert.isTrue(simpin.updateSimPinUI.called);
+        }).then(done, done);
+      });
+    });
+
+    suite('other cardstates with checkbox disabled', function() {
+      setup(function() {
+        this.sinon.stub(this.MockIccManager, 'getIccById').returns({
+          cardState: 'normal'
+        });
+        fakeCheckbox.checked = false;
+      });
+
+      test('if submit, we will do following works', function(done) {
+        this.sinon.stub(this.MockDialogService, 'show').returns(
+          Promise.resolve({ type: 'submit' }));
+
+        simpin.checkSimPin(fakeCheckbox, 0).then(() => {
+          var args = this.MockDialogService.show.getCall(0).args[1];
+          assert.equal(args.method, 'disable_lock');
+          assert.isTrue(simpin.updateSimPinUI.called);
+        }).then(done, done);
+      });
+
+      test('if cancel, we will undo operations', function(done) {
+        this.sinon.stub(this.MockDialogService, 'show').returns(
+          Promise.resolve({ type: 'cancel' }));
+
+        simpin.checkSimPin(fakeCheckbox, 0).then(() => {
+          var args = this.MockDialogService.show.getCall(0).args[1];
+          assert.equal(args.method, 'disable_lock');
+          assert.equal(fakeCheckbox.checked, true);
+          assert.isTrue(simpin.updateSimPinUI.called);
+        }).then(done, done);
+      });
+    });
+  });
+
+  suite('addChangeEventOnIccByIccId > ', function() {
+    var fakeIcc = {};
+    setup(function() {
+      fakeIcc.addEventListener = this.sinon.spy();
+      this.sinon.stub(this.MockIccManager, 'getIccById').returns(fakeIcc);
+      simpin.addChangeEventOnIccByIccId(1234);
+    });
+
+    test('with icc', function() {
+      assert.ok(fakeIcc.addEventListener.called);
+    });
+  });
+
+  suite('getCardIndexByIccId > ', function() {
+    setup(function() {
+      simpin.conns = [{iccId: '123'}, {iccId : '456'}];
+    });
+
+    test('with wrong iccId', function() {
+      assert.isUndefined(simpin.getCardIndexByIccId('789'));
+    });
+
+    test('with right iccId', function() {
+      assert.equal(simpin.getCardIndexByIccId('123'), 0);
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/simpin_dialog/simpin_dialog_test.js

@@ -0,0 +1,236 @@
+/* global MockL10n */
+'use strict';
+
+require('/shared/test/unit/mocks/mock_l20n.js');
+
+suite('SimPinDialog > ', function() {
+
+  var simPinDialog;
+  var mockSettingsUtils;
+  var mockDialogService;
+
+  var modules = [
+    'panels/simpin_dialog/simpin_dialog',
+    'modules/settings_utils',
+    'modules/dialog_service'
+  ];
+
+  var map = {
+    '*': {
+      'modules/settings_utils': 'unit/mock_settings_utils',
+      'modules/dialog_service': 'MockDialogService'
+    }
+  };
+  
+  setup(function(done) {
+    define('MockDialogService', function() {
+      return {
+        alert: function() {}
+      };
+    });
+
+    document.l10n = MockL10n;
+
+    var requireCtx = testRequire([], map, function() {});
+    requireCtx(modules, function(SimPinDialog, MockSettingsUtils,
+      MockDialogService) {
+        mockSettingsUtils = MockSettingsUtils;
+        mockDialogService = MockDialogService;
+
+        simPinDialog = new SimPinDialog({
+          pinInput: createInput(),
+          pukInput: createInput(),
+          newPinInput: createInput(),
+          confirmPinInput: createInput(),
+          dialogDone: createButton(),
+          triesLeftMsg: createDiv(),
+          errorMsg: createDiv(),
+          errorMsgHeader: createDiv(),
+          errorMsgBody: createDiv()
+        });
+        done();
+    });
+  });
+
+  suite('_handleCardLockError > ', function() {
+    test('if no lockType, close dialog', function() {
+      var needToCloseDialog = simPinDialog._handleCardLockError({
+        lockType: '',
+        error: {
+          retryCount: 3
+        }
+      });
+      assert.isTrue(needToCloseDialog);
+    });
+
+    test('if retryCount is not less equal than 0, show message', function() {
+      this.sinon.stub(simPinDialog, '_showMessage');
+      this.sinon.stub(simPinDialog, '_showRetryCount');
+      var needToCloseDialog = simPinDialog._handleCardLockError({
+        lockType: 'pin',
+        error: {
+          name: 'IncorrectPassword',
+          retryCount: 4
+        }
+      });
+
+      assert.isFalse(needToCloseDialog);
+      assert.isTrue(simPinDialog._showMessage.called);
+      assert.isTrue(simPinDialog._showRetryCount.called);
+    });
+
+    test('if retryCount is 0 and the lockType is pin, close ' +
+      'dialog and leave this to system app', function() {
+        var needToCloseDialog = simPinDialog._handleCardLockError({
+          lockType: 'pin',
+          error: {
+            name: 'IncorrectPassword',
+            retryCount: 0
+          }
+        });
+        assert.isTrue(needToCloseDialog);
+    });
+
+    ['fdn', 'pin2'].forEach(function(lockType) {
+      test('if retryCount is 0 and the lockType is ' + lockType +
+        ', we will ask users to put puk2', function() {
+          this.sinon.stub(simPinDialog, '_initUI');
+          var needToCloseDialog = simPinDialog._handleCardLockError({
+            lockType: lockType,
+            error: {
+              name: 'IncorrectPassword',
+              retryCount: 0
+            }
+          });
+          assert.isFalse(needToCloseDialog);
+          assert.isTrue(simPinDialog._initUI.calledWith('unlock_puk2'));
+      });
+    });
+
+    test('if retryCount is 0 and the lockType is un-recognizable,' +
+      'then we will just close the dialog', function() {
+        var needToCloseDialog = simPinDialog._handleCardLockError({
+          lockType: 'i_dont_know',
+          error: {
+            retryCount: 0
+          }
+        });
+        assert.isTrue(needToCloseDialog);
+    });
+  });
+
+  suite('_updateDoneButtonState > ', function() {
+    test('in change_pin mode, but length of pinInput is less than 4',
+      function() {
+        simPinDialog._mode = 'change_pin';
+        simPinDialog._elements.pinInput.value = '1';
+        simPinDialog._updateDoneButtonState();
+        assert.isTrue(simPinDialog._elements.dialogDone.disabled);
+    });
+
+    test('in change_pin mode, but length of newPinInput is less than 4',
+      function() {
+        simPinDialog._mode = 'change_pin';
+        simPinDialog._elements.pinInput.value = '1234';
+        simPinDialog._elements.newPinInput.value = '1';
+        simPinDialog._updateDoneButtonState();
+        assert.isTrue(simPinDialog._elements.dialogDone.disabled);
+    });
+
+    test('in change_pin mode, but length of confirmPinInput is less than 4',
+      function() {
+        simPinDialog._mode = 'change_pin';
+        simPinDialog._elements.pinInput.value = '1234';
+        simPinDialog._elements.newPinInput.value = '5678';
+        simPinDialog._elements.confirmPinInput.value = '1';
+        simPinDialog._updateDoneButtonState();
+        assert.isTrue(simPinDialog._elements.dialogDone.disabled);
+    });
+
+    test('in change_pin mode, ' +
+      'but length of confirmPinInput & newPinInput is different', function() {
+        simPinDialog._mode = 'change_pin';
+        simPinDialog._elements.pinInput.value = '1234';
+        simPinDialog._elements.newPinInput.value = '5678';
+        simPinDialog._elements.confirmPinInput.value = '567';
+        simPinDialog._updateDoneButtonState();
+        assert.isTrue(simPinDialog._elements.dialogDone.disabled);
+    });
+
+    test('in change_pin mode, ' +
+      'and length of confirmPinInput & newPinInput is the same', function() {
+        simPinDialog._mode = 'change_pin';
+        simPinDialog._elements.pinInput.value = '1234';
+        simPinDialog._elements.newPinInput.value = '5678';
+        simPinDialog._elements.confirmPinInput.value = '5679';
+        simPinDialog._updateDoneButtonState();
+        assert.isFalse(simPinDialog._elements.dialogDone.disabled);
+    });
+
+    test('in pin mode, and length of pinInput is less than 4', function() {
+      simPinDialog._mode = 'pin';
+      simPinDialog._elements.pinInput.value = '1';
+      simPinDialog._updateDoneButtonState();
+      assert.isTrue(simPinDialog._elements.dialogDone.disabled);
+    });
+
+    test('in pin mode, but length of pinInput is >= 4', function() {
+      simPinDialog._mode = 'pin';
+      simPinDialog._elements.pinInput.value = '1234';
+      simPinDialog._updateDoneButtonState();
+      assert.isFalse(simPinDialog._elements.dialogDone.disabled);
+    });
+
+    test('in puk mode, and length of pukInput is less than 4', function() {
+      simPinDialog._mode = 'puk';
+      simPinDialog._elements.pukInput.value = '1';
+      simPinDialog._updateDoneButtonState();
+      assert.isTrue(simPinDialog._elements.dialogDone.disabled);
+    });
+
+    test('in puk mode, but length of pukInput is >= 4', function() {
+      simPinDialog._mode = 'puk';
+      simPinDialog._elements.pukInput.value = '1234';
+      simPinDialog._updateDoneButtonState();
+      assert.isFalse(simPinDialog._elements.dialogDone.disabled);
+    });
+
+    test('in unknown mode, but length of pukInput is >= 4', function() {
+      this.sinon.stub(window.console, 'error');
+      simPinDialog._mode = 'unknown_mode';
+      simPinDialog._updateDoneButtonState();
+      assert.isTrue(window.console.error.called);
+    });
+  });
+
+  suite('_clean > ', function() {
+    test('make sure all states would be cleaned', function() {
+      simPinDialog.clear();
+
+      assert.isTrue(simPinDialog._elements.errorMsg.hidden);
+      assert.isTrue(simPinDialog._elements.triesLeftMsg.hidden);
+      assert.equal(simPinDialog._elements.errorMsgHeader.textContent, '');
+      assert.equal(simPinDialog._elements.errorMsgBody.textContent, '');
+      assert.equal(simPinDialog._elements.triesLeftMsg.textContent, '');
+      assert.equal(simPinDialog._elements.pinInput.value, '');
+      assert.equal(simPinDialog._elements.pukInput.value, '');
+      assert.equal(simPinDialog._elements.newPinInput.value, '');
+      assert.equal(simPinDialog._elements.confirmPinInput.value, '');
+    });
+  });
+
+  function createInput() {
+    var input = document.createElement('input');
+    input.type = 'text';
+    return input;
+  }
+
+  function createButton() {
+    var button = document.createElement('button');
+    return button;
+  }
+
+  function createDiv() {
+    return document.createElement('div');
+  }
+});

gaia/apps/settings/test/unit/panels/sound/slider_handler_test.js

@@ -0,0 +1,298 @@
+/* global SettingsListener*/
+'use strict';
+
+suite('Sound > SliderHandler', function() {
+  var sliderHandler;
+  var realMozSettings;
+  var dom = document.createElement('li');
+
+  var modules = [
+    'shared_mocks/mock_navigator_moz_settings',
+    'shared_mocks/mock_settings_listener',
+    'panels/sound/slider_handler'
+  ];
+  var maps = {
+    '*': {
+      'shared/settings_listener': 'shared_mocks/mock_settings_listener',
+      'modules/settings_cache': 'unit/mock_settings_cache'
+    }
+  };
+
+  setup(function(done) {
+    testRequire(modules, maps, function(
+      MockNavigatorSettings, MockSettingsListener, module) {
+        window.SettingsListener = MockSettingsListener;
+        // mock mozSettings
+        realMozSettings = navigator.mozSettings;
+        window.navigator.mozSettings = MockNavigatorSettings;
+        sliderHandler = module();
+        done();
+    });
+  });
+
+  teardown(function() {
+    window.navigator.mozSettings = realMozSettings;
+  });
+
+  suite('initiation', function() {
+    setup(function() {
+      this.sinon.stub(SettingsListener, 'observe');
+      this.sinon.stub(dom, 'addEventListener');
+    });
+
+    test('we would get correct channelType', function() {
+      sliderHandler.init(dom, 'content');
+      assert.equal(sliderHandler._channelType, 'content');
+    });
+
+    test('we would get correct toneURL', function() {
+      sliderHandler.init(dom, 'content');
+      assert.equal(sliderHandler._toneURL,
+        '/shared/resources/media/notifications/notifier_firefox.opus');
+
+      sliderHandler.init(dom, 'alarm');
+      assert.equal(sliderHandler._toneURL,
+        '/shared/resources/media/alarms/ac_awake.opus');
+
+      sliderHandler.init(dom, 'notification');
+      assert.equal(sliderHandler._toneURL,
+        '/shared/resources/media/ringtones/ringer_firefox.opus');
+    });
+
+    test('we would get correct toneKey', function() {
+      sliderHandler.init(dom, 'content');
+      assert.equal(sliderHandler._toneKey, 'media.ringtone');
+
+      sliderHandler.init(dom, 'alarm');
+      assert.equal(sliderHandler._toneKey, 'alarm.ringtone');
+
+      sliderHandler.init(dom, 'notification');
+      assert.equal(sliderHandler._toneKey, 'dialer.ringtone');
+    });
+
+    test('we would observe channelKey', function() {
+      sliderHandler.init(dom, 'content');
+      assert.ok(SettingsListener.observe.calledWith(
+        sliderHandler._channelKey, '', sliderHandler._boundSetSliderValue));
+    });
+
+    test('we would call addEventListener on element', function() {
+      sliderHandler.init(dom, 'content');
+      assert.ok(dom.addEventListener.calledWith('touchstart'));
+      assert.ok(dom.addEventListener.calledWith('input'));
+      assert.ok(dom.addEventListener.calledWith('touchend'));
+    });
+
+    test('we would get correct previous value', function() {
+      sliderHandler.init(dom, 'content');
+      sliderHandler._setSliderValue(4);
+      assert.equal(sliderHandler._previous, 4);
+
+      sliderHandler._setSliderValue(8);
+      assert.equal(sliderHandler._previous, 4);
+    });
+  });
+
+  suite('_stopTone', function() {
+    setup(function() {
+      this.sinon.stub(sliderHandler._player, 'pause');
+      this.sinon.stub(sliderHandler._player, 'removeAttribute');
+      this.sinon.stub(sliderHandler._player, 'load');
+      sliderHandler._stopTone();
+    });
+
+    test('we would call player operations', function() {
+      assert.ok(sliderHandler._player.pause.called);
+      assert.ok(sliderHandler._player.removeAttribute.calledWith('src'));
+      assert.ok(sliderHandler._player.load.called);
+    });
+  });
+
+  suite('_setupTone', function() {
+    var fakeBlob;
+
+    setup(function() {
+      fakeBlob = new Blob([], {type: 'audio/ogg'});
+      this.sinon.stub(URL, 'createObjectURL');
+      sliderHandler._player = {
+        load: sinon.stub(),
+        play: sinon.stub(),
+        mozAudioChannelType: 'fakeChannelType'
+      };
+    });
+
+    suite('_setupTone with channelType: content', function() {
+      setup(function() {
+        sliderHandler._channelType = 'content';
+      });
+
+      test('we would call player operations', function() {
+        sliderHandler._setupTone(fakeBlob);
+        assert.ok(URL.createObjectURL.calledWith(fakeBlob));
+        assert.ok(sliderHandler._player.load.called);
+        assert.equal(sliderHandler._player.loop, true);
+      });
+
+      test('we would not change play mozAudioChannelType', function() {
+        var originalChannelType = sliderHandler._player.mozAudioChannelType;
+        sliderHandler._setupTone(fakeBlob);
+        assert.equal(sliderHandler._player.mozAudioChannelType,
+          originalChannelType);
+      });
+    });
+
+    suite('_setupTone with channelType: alarm', function() {
+      setup(function() {
+        sliderHandler._channelType = 'alarm';
+        sliderHandler._setupTone(fakeBlob);
+      });
+
+      test('we would change play mozAudioChannelType when ' +
+        'channelType is not content', function() {
+          assert.equal(sliderHandler._player.mozAudioChannelType,
+            sliderHandler._channelType);
+      });
+    });
+  });
+
+  suite('_touchStartHandler', function() {
+    setup(function() {
+      this.sinon.stub(SettingsListener, 'unobserve');
+      this.sinon.stub(sliderHandler, '_stopTone');
+      this.sinon.stub(sliderHandler, '_getToneBlob');
+      sliderHandler._touchStartHandler();
+    });
+
+    test('we would make sure properties are set', function() {
+      assert.isTrue(sliderHandler._isTouching);
+      assert.isTrue(sliderHandler._isFirstInput);
+    });
+
+    test('we would call _stopTone', function() {
+      assert.ok(sliderHandler._stopTone.called);
+    });
+
+    test('we would unobserve channelKey', function() {
+      assert.ok(SettingsListener.unobserve.calledWith(
+        sliderHandler._channelKey, sliderHandler._boundSetSliderValue));
+    });
+
+    test('we would call _getToneBlob', function() {
+      assert.ok(sliderHandler._getToneBlob.called);
+    });
+  });
+
+  suite('_setVolume', function() {
+    setup(function() {
+      sliderHandler.init(dom, 'content');
+      this.sinon.stub(sliderHandler._player, 'play');
+    });
+
+    test('we would not play tone if no volume change', function() {
+      sliderHandler._element.value = 5;
+      sliderHandler._previous = 5;
+      sliderHandler._setVolume();
+      assert.isFalse(sliderHandler._player.play.called);
+    });
+
+    test('we would play tone if volume is changed', function() {
+      sliderHandler._element.value = 5;
+      sliderHandler._previous = 4;
+      sliderHandler._setVolume();
+      assert.ok(sliderHandler._player.play.called);
+    });
+
+  });
+
+  suite('_inputHandler', function() {
+    setup(function() {
+      this.clock = sinon.useFakeTimers();
+      this.sinon.spy(window, 'clearTimeout');
+      this.sinon.spy(window, 'setInterval');
+      this.sinon.spy(window, 'setTimeout');
+      this.sinon.stub(sliderHandler, '_setVolume');
+      this.sinon.stub(sliderHandler, '_stopTone');
+      this.sinon.stub(SettingsListener, 'observe');
+    });
+
+    teardown(function() {
+      this.clock.restore();
+    });
+
+    test('we would make sure _isFirstInput is unset', function() {
+      sliderHandler._isFirstInput = true;
+      sliderHandler._inputHandler();
+      assert.isFalse(sliderHandler._isFirstInput);
+    });
+
+    test('we would skip this function if is not FirstInput', function() {
+      sliderHandler._isFirstInput = false;
+      sliderHandler._inputHandler();
+      assert.isFalse(window.setInterval.called);
+    });
+
+    test('we would call _setVolume', function() {
+      sliderHandler._isFirstInput = true;
+      sliderHandler._inputHandler();
+      assert.ok(sliderHandler._setVolume.called);
+    });
+
+    test('we would call setInterval', function() {
+      sliderHandler._isFirstInput = true;
+      sliderHandler._inputHandler();
+      assert.ok(window.setInterval.calledOnce);
+    });
+
+    test('we would call setTimeout', function() {
+      sliderHandler._isFirstInput = true;
+      sliderHandler._inputHandler();
+      assert.ok(window.setTimeout.calledOnce);
+    });
+
+    test('we would still call setTimeout if is not FirstInput', function() {
+      sliderHandler._isFirstInput = false;
+      sliderHandler._inputHandler();
+      assert.ok(window.setTimeout.calledOnce);
+    });
+
+    test('we would observe channelKey', function() {
+      sliderHandler._inputHandler();
+      this.clock.tick(1000);
+      assert.ok(SettingsListener.observe.calledWith(
+        sliderHandler._channelKey, '', sliderHandler._boundSetSliderValue));
+    });
+
+    test('we would call _stopTone', function() {
+      sliderHandler._inputHandler();
+      this.clock.tick(1000);
+      assert.ok(sliderHandler._stopTone.called);
+    });
+  });
+
+  suite('_touchEndHandler', function() {
+    setup(function() {
+      this.sinon.spy(window, 'clearInterval');
+      this.sinon.stub(sliderHandler, '_setVolume');
+
+      sliderHandler._intervalID = 123;
+      sliderHandler._isTouching = true;
+      sliderHandler._touchEndHandler();
+    });
+
+    teardown(function() {
+      window.clearInterval.restore();
+    });
+
+    test('we would make sure _isTouching is unset', function() {
+      assert.isFalse(sliderHandler._isTouching);
+    });
+
+    test('we would call _setVolume', function() {
+      assert.ok(sliderHandler._setVolume.called);
+    });
+
+    test('we would call clearInterval', function() {
+      assert.ok(clearInterval.calledWith(sliderHandler._intervalID));
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/sound/tone_manager_test.js

@@ -0,0 +1,328 @@
+'use strict';
+
+suite('Sound > ToneManager', function() {
+  var toneManager;
+  var realL10n, realTelephony, realMozSettings, realMozActivity;
+  var mockSettingsListener, mockSettingsCache, mockForwardLock;
+  var dom = document.createElement('div');
+  var mockElements = {
+    toneSelector: dom,
+    alertToneSelection: dom,
+    ringToneSelection: dom,
+    ringer: dom,
+    vibrationSetting: dom,
+    manageTones: dom
+  };
+  var modules = [
+    'shared_mocks/mock_navigator_moz_telephony',
+    'shared_mocks/mock_l20n',
+    'shared_mocks/mock_navigator_moz_settings',
+    'shared_mocks/mock_settings_listener',
+    'unit/mock_settings_cache',
+    'shared_mocks/mock_omadrm_fl',
+    'shared_mocks/mock_moz_activity',
+    'panels/sound/tone_manager'
+  ];
+  var maps = {
+    '*': {
+      'shared/settings_listener': 'shared_mocks/mock_settings_listener',
+      'modules/settings_cache': 'unit/mock_settings_cache',
+      'shared/omadrm/fl': 'shared_mocks/mock_omadrm_fl'
+    }
+  };
+
+  setup(function(done) {
+    testRequire(modules, maps, function(
+      MockNavigatorMozTelephony, MockL10n,
+      MockNavigatorSettings, MockSettingsListener,
+      MockSettingsCache, MockForwardLock, MockMozActivity, module) {
+        toneManager = module();
+        mockSettingsListener = MockSettingsListener;
+        mockSettingsCache = MockSettingsCache;
+        mockForwardLock = MockForwardLock;
+        // mock l10n
+        realL10n = document.l10n;
+        document.l10n = MockL10n;
+        // mock navigator.mozTelephony
+        realTelephony = navigator.mozTelephony;
+        window.navigator.mozTelephony = MockNavigatorMozTelephony;
+        // mock mozSettings
+        realMozSettings = navigator.mozSettings;
+        window.navigator.mozSettings = MockNavigatorSettings;
+
+        realMozActivity = window.MozActivity;
+        window.MozActivity = MockMozActivity;
+        window.MozActivity.mSetup();
+        done();
+    });
+  });
+
+  teardown(function() {
+    document.l10n = realL10n;
+    window.navigator.mozTelephony = realTelephony;
+    window.navigator.mozSettings = realMozSettings;
+    window.MozActivity.mTeardown();
+    window.MozActivity = realMozActivity;
+  });
+
+  suite('initiation', function() {
+    setup(function() {
+      this.sinon.stub(toneManager, '_configureTones');
+      this.sinon.stub(toneManager, '_handleTones');
+      toneManager.init(mockElements);
+    });
+
+    test('we would set _elements from param', function() {
+      assert.equal(mockElements, toneManager._elements);
+    });
+
+    test('we would call _configureTones and _handleTones in init',
+      function() {
+        assert.ok(toneManager._configureTones.called);
+        assert.ok(toneManager._handleTones.called);
+    });
+  });
+
+  suite('_configureTones', function() {
+    var mockTelephony;
+    setup(function() {
+      mockTelephony = navigator.mozTelephony;
+    });
+
+    teardown(function() {
+      navigator.mozTelephony = mockTelephony;
+    });
+
+    test('we would push alerttone by default in tones list', function() {
+      navigator.mozTelephony = null;
+      toneManager.init(mockElements);
+      assert.equal(toneManager._tones.length, 1);
+      assert.equal(toneManager._tones[0].pickType, 'alerttone');
+    });
+
+    test('If device support telephony API, show the section for ringtones',
+      function() {
+        navigator.mozTelephony = {};
+        toneManager.init(mockElements);
+        assert.equal(toneManager._tones.length, 2);
+        assert.equal(toneManager._tones[1].pickType, 'ringtone');
+    });
+  });
+
+  suite('_renderTone', function() {
+    var tone, result;
+    var fakeBlob = new Blob([], {type: 'audio/ogg'});
+    var secret = 'fakesecret';
+    setup(function() {
+      tone = {
+        pickType: 'alerttone',
+        settingsKey: 'notification.ringtone',
+        allowNone: true,
+        button: dom,
+        desc: dom
+      };
+      result = {
+        l10nID: '',
+        name: '',
+        blob: fakeBlob,
+        id: ''
+      };
+      this.sinon.stub(toneManager, '_setRingtone');
+      this.sinon.stub(window, 'alert');
+      this.sinon.spy(mockForwardLock, 'unlockBlob');
+    });
+
+    teardown(function() {
+      tone.button.textContent = null;
+      tone.button.removeAttribute('data-l10n-id');
+    });
+
+    suite('is playable', function() {
+      setup(function() {
+        this.sinon.stub(toneManager, '_isPlayableTone', function() {
+          return Promise.resolve(true);
+        });
+      });
+
+      test('ForwardLock is called when blob mime is matched', function() {
+        mockForwardLock.mSetupMimeSubtype('ogg');
+        toneManager._renderTone(tone, result, secret);
+        assert.equal(tone.button.dataset.l10nId, 'saving-tone');
+        assert.ok(mockForwardLock.unlockBlob.calledWith(secret, fakeBlob));
+      });
+
+      test('ForwardLock is not called when blob mime is not matched',
+        function() {
+          mockForwardLock.mSetupMimeSubtype('mp3');
+          toneManager._renderTone(tone, result, secret);
+          assert.equal(tone.button.dataset.l10nId, 'saving-tone');
+          assert.isFalse(mockForwardLock.unlockBlob.calledWith(secret,
+            fakeBlob));
+      });
+
+      test('_setRingtone is called when tone is playable', function(done) {
+        toneManager._renderTone(tone, result, secret).then(() => {
+          assert.isTrue(toneManager._setRingtone.calledWith(
+            tone.settingsKey, result.l10nID,
+            result.name, result.blob, result.id));
+        }).then(done, done);
+      });
+    });
+
+    suite('is not playable', function() {
+      setup(function() {
+        this.sinon.stub(toneManager, '_isPlayableTone', function() {
+          return Promise.resolve(false);
+        });
+      });
+
+      test('alert is called when tone is playable', function(done) {
+        toneManager._renderTone(tone, result, secret).then(() => {
+          assert.isTrue(toneManager._isPlayableTone.called);
+          assert.isTrue(window.alert.called);
+          assert.isFalse(toneManager._setRingtone.called);
+        }).then(done, done);
+      });
+
+      test('textContent is set to origin name ' +
+        'when data-l10n-id is not found', function(done) {
+          tone.button.textContent = 'test';
+          toneManager._renderTone(tone, result, secret).then(() => {
+            assert.isTrue(window.alert.called);
+            assert.isFalse(toneManager._setRingtone.called);
+            assert.equal(tone.button.getAttribute('data-l10n-id'), null);
+            assert.equal(tone.button.textContent, 'test');
+          }).then(done, done);
+      });
+
+      test('textContent is set to data-l10n-id ' +
+        'when data-l10n-id is found', function(done) {
+          var toneId = 'fake-tone';
+          tone.button.textContent = 'test';
+          tone.button.setAttribute('data-l10n-id', toneId);
+          toneManager._renderTone(tone, result, secret).then(() => {
+            assert.isTrue(window.alert.called);
+            assert.isFalse(toneManager._setRingtone.called);
+            assert.equal(tone.button.getAttribute('data-l10n-id'), toneId);
+            assert.equal(tone.button.textContent, 'test');
+          }).then(done, done);
+      });
+    });
+  });
+
+  suite('_pickTone', function() {
+    var tone;
+    var secret = 'fakesecret';
+    var fakeBlob = new Blob([], {type: 'audio/ogg'});
+    setup(function() {
+      this.clock = sinon.useFakeTimers();
+      tone = {
+        pickType: 'alerttone',
+        settingsKey: 'notification.ringtone',
+        allowNone: true,
+        button: dom,
+        desc: dom
+      };
+      this.sinon.spy(toneManager, '_setRingtone');
+      this.sinon.stub(toneManager, '_renderTone');
+      this.sinon.stub(window, 'alert');
+    });
+
+    teardown(function(){
+      this.clock.restore();
+    });
+
+    test('pick activity is called', function() {
+      window.MozActivity.successResult = { blob: fakeBlob };
+      toneManager._pickTone(tone, '123', secret);
+      this.clock.tick(100);
+      assert.equal(window.MozActivity.calls[0].name, 'pick');
+      assert.equal(window.MozActivity.calls[0].data.includeLocked, true);
+      assert.equal(window.MozActivity.calls[0].data.type, tone.pickType);
+      assert.equal(window.MozActivity.calls[0].data.allowNone, true);
+    });
+
+    test('generally blob is exist, _setRingtone and alert are not called',
+      function(done) {
+        window.MozActivity.successResult = { blob: fakeBlob };
+        toneManager._pickTone(tone, '123', secret);
+        this.clock.tick(100);
+        Promise.resolve().then(() => {
+          assert.isFalse(window.alert.called);
+          assert.isFalse(toneManager._setRingtone.called);
+          assert.isTrue(toneManager._renderTone.calledWith(
+            tone, window.MozActivity.successResult, secret));
+          done();
+        });
+    });
+
+    test('_setRingtone is called while blob is not exist and ' +
+      'tone.allowNone is true', function(done) {
+        window.MozActivity.successResult = {};
+        toneManager._pickTone(tone, '123', secret);
+        this.clock.tick(100);
+        Promise.resolve().then(() => {
+          assert.isFalse(window.alert.called);
+          assert.isTrue(toneManager._setRingtone.called);
+          assert.isFalse(toneManager._renderTone.called);
+          done();
+        });
+    });
+
+    test('alert is called while blob is not exist and ' +
+      'tone.allowNone is false', function(done) {
+        var tone2 = {
+          pickType: 'alerttone',
+          settingsKey: 'notification.ringtone',
+          allowNone: false,
+          button: dom
+        };
+        window.MozActivity.successResult = {};
+        toneManager._pickTone(tone2, '123', secret);
+        this.clock.tick(100);
+        Promise.resolve().then(() => {
+          assert.isTrue(window.alert.called);
+          assert.isFalse(toneManager._setRingtone.called);
+          assert.isFalse(toneManager._renderTone.called);
+          done();
+        });
+    });
+  });
+
+  suite('_handleTones', function() {
+    var nameKey = 'notification.ringtone.name';
+    setup(function() {
+      toneManager._tones = [{
+        pickType: 'alerttone',
+        settingsKey: 'notification.ringtone',
+        allowNone: true, // Allow "None" as a choice for alert tones.
+        button: dom,
+        desc: dom
+      }];
+      this.sinon.spy(mockSettingsCache, 'getSettings');
+      this.sinon.spy(mockForwardLock, 'getKey');
+      this.sinon.stub(toneManager, '_pickTone');
+      mockSettingsCache.mockSettings({'notification.ringtone.id': 'demo'});
+      toneManager._handleTones();
+    });
+
+    teardown(function() {
+      navigator.mozSettings.mTeardown();
+      mockSettingsCache.mTeardown();
+    });
+
+    test('we would set button textContent in SettingsListener', function() {
+      mockSettingsListener.mCallbacks[nameKey]('classic');
+      assert.equal(toneManager._tones[0].button.textContent, 'classic');
+    });
+
+    test('we would click button and make sure _pickTone is called', function() {
+      toneManager._tones[0].button.dispatchEvent(new CustomEvent('click'));
+      assert.ok(mockSettingsCache.getSettings.called);
+      assert.ok(mockForwardLock.getKey.called);
+      mockForwardLock.getKey.args[0][0]();
+      assert.ok(toneManager._pickTone.calledWith(toneManager._tones[0],
+        'demo'));
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/sound/volume_manager_test.js

@@ -0,0 +1,57 @@
+'use strict';
+
+suite('Sound > VolumeManager', function() {
+  var volumeManager;
+  var dom = document.createElement('li');
+
+  var modules = [
+    'panels/sound/volume_manager'
+  ];
+
+  var maps = {
+    '*': {
+      'panels/sound/slider_handler': 'MockSliderHandler'
+    }
+  };
+
+  setup(function(done) {
+    var that = this;
+    // Define MockSliderHandler
+    this.MockSliderHandler = {
+      init: function(element, type) {}
+    };
+    define('MockSliderHandler', function() {
+      return function() {
+        return that.MockSliderHandler;
+      };
+    });
+
+    testRequire(modules, maps, function(module) {
+      volumeManager = module();
+      done();
+    });
+  });
+
+  suite('initiation', function() {
+    setup(function() {
+      this.sinon.spy(this.MockSliderHandler, 'init');
+    });
+
+    test('we would call _sliderHandler for each item',
+      function() {
+        var element = {
+          media: dom,
+          notification: dom,
+          alarm: dom
+        };
+        volumeManager.init(element);
+        assert.ok(this.MockSliderHandler.init.calledThrice);
+        assert.ok(this.MockSliderHandler.init.calledWith(
+          volumeManager._elements.media, 'content'));
+        assert.ok(this.MockSliderHandler.init.calledWith(
+          volumeManager._elements.notification, 'notification'));
+        assert.ok(this.MockSliderHandler.init.calledWith(
+          volumeManager._elements.alarm, 'alarm'));
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/themes/themes_test.js

@@ -0,0 +1,279 @@
+'use strict';
+/* global MockNavigatorSettings, MockManifestHelper */
+
+require('/shared/js/component_utils.js');
+require('/shared/elements/gaia_radio/script.js');
+require('/shared/test/unit/mocks/mock_navigator_moz_settings.js');
+require('/shared/test/unit/load_body_html_helper.js');
+require('/shared/test/unit/mocks/mock_manifest_helper.js');
+
+suite('Themes > ', function() {
+  var mockManifestHelper;
+  var themes;
+
+  var realNavigatorSettings;
+  var selectedTheme;
+
+  var mock_app1 = {
+    manifest: {
+      name: 'Theme Green',
+      type: 'certified',
+      role: 'theme'
+    },
+    manifestURL: 'app://app1ManifestUrl/manifest.webapp'
+  };
+
+  var mock_app2 = {
+    manifest: {
+      name: 'Theme Red',
+      type: 'certified',
+      role: 'theme'
+    },
+    manifestURL: 'app://app2ManifestUrl/manifest.webapp'
+  };
+
+  var mock_app3 = {
+    manifest: {
+      name: 'Theme Blue',
+      type: 'certified',
+      role: 'theme'
+    },
+    manifestURL: 'app://app3ManifestUrl/manifest.webapp'
+  };
+
+  var mock_app4 = {
+    manifest: {
+      name: 'Theme Fake',
+      type: 'certified'
+    },
+    manifestURL: 'app://app4ManifestUrl/manifest.webapp'
+  };
+
+  var mock_app5 = {
+    manifest: {
+      name: 'Theme Blue',
+      type: 'privileged',
+      role: 'theme'
+    },
+    manifestURL: 'app://app5ManifestUrl/manifest.webapp'
+  };
+
+  var mock_app6 = {
+    manifest: {
+      name: 'My Theme',
+      type: 'privileged',
+      role: 'theme'
+    },
+    manifestURL: 'app://mythemeapp/manifest.webapp'
+  };
+
+  var mock_app7 = {
+    manifest: {
+      name: 'My faulty Theme',
+      type: 'privileged',
+      role: 'theme'
+    },
+    manifestURL: 'app://myfaultythemeapp/manifest.webapp'
+  };
+
+  var modules = [
+    'panels/themes/themes',
+    'unit/mock_apps_cache'
+  ];
+
+  var maps = {
+    'panels/themes/themes': {
+      'shared/manifest_helper': 'MockManifestHelper',
+      'modules/settings_cache': 'MockSettingsCache',
+      'modules/apps_cache': 'unit/mock_apps_cache'
+    }
+  };
+
+  var wallpaper = {
+    'homescreen': '/path/to/wallpaper.png'
+  };
+
+  var fakeResponses = {
+    'app://mythemeapp/wallpaper.json': {
+      'status': 200,
+      'response': wallpaper
+    },
+    'app://mythemeapp/path/to/wallpaper.png': {
+      'status': 200,
+      'response': 'FAKEBLOB'
+    },
+    'app://myfaultythemeapp/path/to/wallpaper.png': {
+      'status': 402,
+      'response': 'error'
+    }
+  };
+
+  function failOnPromiseRejected(reason) {
+    assert.isTrue(false, 'Promise rejected ' + reason);
+  }
+
+  suiteSetup(function(done) {
+    selectedTheme = mock_app2.manifestURL;
+    realNavigatorSettings = navigator.mozSettings;
+    navigator.mozSettings = MockNavigatorSettings;
+
+    loadBodyHTML('./_themes.html');
+
+    MockNavigatorSettings.mSettings['theme.selected'] = selectedTheme;
+
+    var self = this;
+    this.MockSettingsCache = {
+      'cache': {
+        'theme.selected': selectedTheme
+      }
+    };
+    define('MockSettingsCache', function() {
+      return self.MockSettingsCache;
+    });
+
+    define('MockManifestHelper', function() {
+      return MockManifestHelper;
+    });
+
+    testRequire(modules, maps, function(Themes, AppsCache) {
+      AppsCache._apps = [mock_app1, mock_app2, mock_app3, mock_app4, mock_app5,
+       mock_app6, mock_app7];
+      mockManifestHelper = MockManifestHelper;
+      themes = Themes();
+      themes.onInit(document.body);
+      themes.onBeforeShow();
+      done();
+    });
+  });
+
+  suiteTeardown(function() {
+    document.body.innerHTML = '';
+
+    navigator.mozSettings = realNavigatorSettings;
+    realNavigatorSettings = null;
+  });
+
+  suite('Themes list >', function() {
+    var refapps = [mock_app3, mock_app1, mock_app2];
+
+    test('All themes should be listed', function() {
+      var listItems = document.getElementsByTagName('li');
+      assert.equal(listItems.length, refapps.length);
+    });
+
+    test('Themes should be listed alphabetically', function() {
+      var themeNames = document.getElementsByTagName('label');
+      for (var i = 0; i < refapps.length; i++) {
+        assert.equal(themeNames[i].innerHTML, refapps[i].manifest.name);
+      }
+    });
+
+    test('Current theme should be checked', function() {
+      var rule = 'gaia-radio[value="' + selectedTheme + '"]';
+      var node = document.querySelector(rule);
+      assert.equal(node.checked, true);
+    });
+
+    test('MozSettings should be updated on theme change', function() {
+      themes.setTheme(refapps[0].manifestURL);
+      assert.equal(MockNavigatorSettings.mSettings['theme.selected'],
+        refapps[0].manifestURL);
+    });
+  });
+
+  suite('Themes manipulation >', function() {
+    var realXHR = window.XMLHttpRequest;
+    var lastXHRCall;
+
+    suiteSetup(function() {
+      window.XMLHttpRequest = function(){
+        this.status = 0;
+      };
+      window.XMLHttpRequest.prototype.send = function() {
+        var response = fakeResponses[this.url];
+        if (!response) {
+          this.status = 400;
+        } else {
+          this.status = response.status;
+          this.response = response.response;
+        }
+        this.onload();
+      };
+      window.XMLHttpRequest.prototype.open = function(method, url) {
+        this.url = url;
+        lastXHRCall = url;
+      };
+
+      themes._selectedTheme = mock_app6.manifestURL;
+    });
+
+    suiteTeardown(function() {
+      window.XMLHttpRequest = realXHR;
+    });
+
+    suite('set Theme > ', function() {
+      setup(function() {
+        themes._selectedTheme = mock_app5.manifestURL;
+      });
+
+      test('setting a theme', function(done) {
+        themes.setTheme(mock_app6.manifestURL).then(function() {
+          assert.equal(navigator.mozSettings.mSettings['theme.selected'],
+            mock_app6.manifestURL);
+          assert.equal(themes._selectedTheme, mock_app6.manifestURL);
+        }, failOnPromiseRejected).then(done, done);
+      });
+    });
+
+    suite('rollback Theme >', function() {
+      setup(function(done) {
+        themes.setTheme(mock_app6.manifestURL).then(function() {},
+          failOnPromiseRejected).then(done, done);
+      });
+      test('a faulty theme rollback to the previous theme', function(done) {
+        this.sinon.spy(themes, 'rollbackTheme');
+        themes.setTheme(mock_app7.manifestURL).then(function() {
+          // We called rollbackTheme and previous theme is selected
+          assert.isTrue(themes.rollbackTheme.calledOnce);
+          assert.equal(navigator.mozSettings.mSettings['theme.selected'],
+            mock_app6.manifestURL);
+          assert.equal(themes._selectedTheme, mock_app6.manifestURL);
+        }, failOnPromiseRejected).then(done, done);
+      });
+    });
+
+    suite('Wallpaper >', function() {
+      test('Getting a wallpaper path', function(done) {
+        themes._selectedTheme = 'app://mythemeapp/manifest.webapp';
+        themes.getWallpaperPath().then(function(path) {
+          assert.equal(lastXHRCall, 'app://mythemeapp/wallpaper.json');
+          assert.equal(path, wallpaper.homescreen);
+        }, failOnPromiseRejected).then(done, done);
+      });
+
+      test('Getting wallpaper blob', function(done) {
+        themes._selectedTheme = 'app://mythemeapp/manifest.webapp';
+        themes.loadWallpaper(wallpaper.homescreen).then(function(blob) {
+          assert.equal('FAKEBLOB', blob);
+          assert.equal(lastXHRCall, 'app://mythemeapp/path/to/wallpaper.png');
+        }, failOnPromiseRejected).then(done, done);
+      });
+
+      test('Setting wallpaper', function(done) {
+        themes.setWallpaper('BLOB').then(function(data) {
+          assert.equal(data['wallpaper.image'],
+            'BLOB');
+        }, failOnPromiseRejected).then(done, done);
+      });
+
+      test('Saving data', function(done) {
+        themes.setWallpaper('BLOB').then(
+          themes.saveConfig.bind(themes)
+        ).then(function() {
+          assert.equal(MockNavigatorSettings.mSettings['wallpaper.image'],
+           'BLOB');
+        }, failOnPromiseRejected).then(done, done);
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/usb_storage/usb_transfer_test.js

@@ -0,0 +1,265 @@
+/* global MockAsyncStorage */
+'use strict';
+
+suite('start testing > ', function() {
+  var realGetDeviceStorages;
+
+  var MockSettingsListener;
+  var MockDialogService;
+  var MockMediaStorage;
+  var usbTransfer;
+
+  var MODE_UMS = 1;
+  var MODE_UMS_UNPLUG = 2;
+  var MODE_MTP = 3;
+  var PROTOCOL_UMS = '0';
+  var PROTOCOL_MTP = '1';
+
+  var modules = [
+    'panels/usb_storage/usb_transfer'
+  ];
+  var map = { //mock map
+    '*': {
+      'modules/settings_cache': 'unit/mock_settings_cache',
+      'shared/settings_listener': 'MockSettingsListener',
+      'modules/dialog_service': 'MockDialogService',
+      'shared/async_storage': 'unit/mock_async_storage',
+      'modules/media_storage': 'MockMediaStorage'
+    }
+  };
+  var checkbox = document.createElement('input');
+  var radio = document.createElement('input');
+  var desc = document.createElement('detail');
+
+  setup(function(done) {
+    var requireCtx = testRequire([], map, function() {});
+
+    MockDialogService = {
+      show: function() {},
+      confirm: function() {}
+    };
+    define('MockDialogService', function() {
+      return MockDialogService;
+    });
+
+    MockSettingsListener = {
+      observe: function() {},
+      getSettingsLock: function() {}
+    };
+    define('MockSettingsListener', function() {
+      return MockSettingsListener;
+    });
+
+    // Define MockMediaStorage
+    MockMediaStorage = {
+      volumeState: 'available',
+      freeSize: 1,
+      observe: function() {},
+      unobserve: function() {}
+    };
+    define('MockMediaStorage', function() {
+      return MockMediaStorage;
+    });
+
+    requireCtx(modules, function(usb_transfer) {
+      realGetDeviceStorages = window.navigator.getDeviceStorages;
+      window.navigator.getDeviceStorages = sinon.stub().returns([{
+        canBeShared: true
+      }]);
+
+      usbTransfer = usb_transfer();
+      done();
+    });
+  });
+
+  teardown(function() {
+    window.navigator.getDeviceStorages = realGetDeviceStorages;
+  });
+
+  suite('initialization', function() {
+    setup(function() {
+      this.sinon.stub(usbTransfer, '_configProtocol');
+      this.sinon.stub(MockSettingsListener, 'observe');
+      usbTransfer.init({
+        usbEnabledCheckBox: checkbox,
+        usbEnabledInfoBlock: desc,
+        protocols: [radio, radio]
+      }, {
+        usbHotProtocolSwitch: false
+      });
+    });
+
+    test('init', function() {
+      var keyUmsEnabled = 'ums.enabled';
+      var keyTransferProtocol = 'usb.transfer';
+
+      assert.isFalse(usbTransfer._usbHotProtocolSwitch);
+      assert.ok(MockSettingsListener.observe.calledWith(keyTransferProtocol));
+      assert.ok(MockSettingsListener.observe.calledWith(keyUmsEnabled));
+    });
+  });
+
+  // mode 0 is disabled, should be filtered by _configProtocol
+  suite('_changeMode', function() {
+    setup(function() {
+      this.sinon.stub(usbTransfer, '_setMode');
+    });
+
+    test('mode 1 + protocol ums', function() {
+      usbTransfer._changeMode(MODE_UMS, PROTOCOL_UMS);
+      assert.ok(!usbTransfer._setMode.called);
+    });
+
+    test('mode 2 + protocol ums', function() {
+      usbTransfer._changeMode(MODE_UMS_UNPLUG, PROTOCOL_UMS);
+      assert.ok(!usbTransfer._setMode.called);
+    });
+
+    test('mode 3 + protocol ums', function() {
+      usbTransfer._changeMode(MODE_MTP, PROTOCOL_UMS);
+      assert.ok(usbTransfer._setMode.calledWith(MODE_UMS));
+    });
+
+    test('mode 1 + protocol mtp', function() {
+      usbTransfer._changeMode(MODE_UMS, PROTOCOL_MTP);
+      assert.ok(usbTransfer._setMode.calledWith(MODE_MTP));
+    });
+
+    test('mode 2 + protocol mtp', function() {
+      usbTransfer._changeMode(MODE_UMS_UNPLUG, PROTOCOL_MTP);
+      assert.ok(usbTransfer._setMode.calledWith(MODE_MTP));
+    });
+
+    test('mode 3 + protocol mtp', function() {
+      usbTransfer._changeMode(MODE_MTP, PROTOCOL_MTP);
+      assert.ok(!usbTransfer._setMode.called);
+    });
+
+    suite('mode 3 + protocol ums + partial ums support', function() {
+      var mockPromise;
+      setup(function() {
+        usbTransfer._partialUmsSupport = true;
+      });
+
+      test('should rollback to mtp when the user cancel it', function(done) {
+        var mockLock = {
+          set: sinon.stub()
+        };
+        this.sinon.stub(MockSettingsListener, 'getSettingsLock')
+          .returns(mockLock);
+
+        mockPromise = new Promise((resolve) => {
+          resolve({ type: 'cancel'});
+        });
+        this.sinon.stub(MockDialogService, 'show').returns(mockPromise);
+        usbTransfer._changeMode(MODE_MTP, PROTOCOL_UMS);
+        assert.ok(MockDialogService.show.called);
+        mockPromise.then(function() {
+          assert.deepEqual(mockLock.set.args[0][0], {
+            'usb.transfer': PROTOCOL_MTP
+          });
+        }).then(done, done);
+      });
+
+      test('should set to ums correctly when the user confirms',
+        function(done) {
+          mockPromise = new Promise((resolve) => {
+            resolve({ type: 'submit'});
+          });
+          this.sinon.stub(MockDialogService, 'show').returns(mockPromise);
+          usbTransfer._changeMode(MODE_MTP, PROTOCOL_UMS);
+          assert.ok(MockDialogService.show.called);
+          mockPromise.then(function() {
+          assert.ok(usbTransfer._setMode.calledWith(MODE_UMS));
+        }).then(done, done);
+      });
+    });
+
+    suite('_umsCheckboxChange', function() {
+      test('should show turn on warning dialog at first time', function() {
+        MockAsyncStorage.setItem({'ums-turn-on-warning': true});
+        this.sinon.spy(MockAsyncStorage, 'getItem');
+        this.sinon.stub(MockDialogService, 'confirm').returns(Promise.resolve({
+          type: 'submit'
+        }));
+
+        var checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.checked = true;
+        usbTransfer._umsCheckboxChange({
+          target: checkbox
+        });
+
+        assert.ok(MockAsyncStorage.getItem.calledWith('ums-turn-on-warning'));
+        assert.ok(MockDialogService.confirm.calledWith('ums-confirm'));
+      });
+    });
+
+    suite('_umsEnabledHandler', function() {
+      test('should disable protocol selections when ums enabled and ' +
+        'media volume state is shared', function() {
+        usbTransfer.init({
+          usbEnabledCheckBox: checkbox,
+          usbEnabledInfoBlock: desc,
+          protocols: [radio, radio]
+        }, {
+          usbHotProtocolSwitch: false
+        });
+        MockMediaStorage.volumeState = 'shared';
+        usbTransfer._umsEnabledHandler(true);
+
+        assert.ok(usbTransfer._elements.usbEnabledCheckBox.checked);
+        assert.isTrue(usbTransfer._elements.protocols[0].disabled);
+        assert.isTrue(usbTransfer._elements.protocols[1].disabled);
+      });
+
+      test('should enable protocol selections when ums enabled but ' +
+        'media volume state is not shared', function() {
+        usbTransfer.init({
+          usbEnabledCheckBox: checkbox,
+          usbEnabledInfoBlock: desc,
+          protocols: [radio, radio]
+        }, {
+          usbHotProtocolSwitch: false
+        });
+        MockMediaStorage.volumeState = 'available';
+        usbTransfer._umsEnabledHandler(true);
+
+        assert.ok(usbTransfer._elements.usbEnabledCheckBox.checked);
+        assert.isFalse(usbTransfer._elements.protocols[0].disabled);
+        assert.isFalse(usbTransfer._elements.protocols[1].disabled);
+      });
+
+      test('should enable protocol selections when ums disabled', function() {
+        usbTransfer.init({
+          usbEnabledCheckBox: checkbox,
+          usbEnabledInfoBlock: desc,
+          protocols: [radio, radio]
+        }, {
+          usbHotProtocolSwitch: false
+        });
+        usbTransfer._umsEnabledHandler(false);
+
+        assert.isFalse(usbTransfer._elements.usbEnabledCheckBox.checked);
+        assert.isFalse(usbTransfer._elements.protocols[0].disabled);
+        assert.isFalse(usbTransfer._elements.protocols[1].disabled);
+      });
+
+      test('protocol selections should selectable when ' +
+        'usbHotProtocolSwitch is true', function() {
+        usbTransfer.init({
+          usbEnabledCheckBox: checkbox,
+          usbEnabledInfoBlock: desc,
+          protocols: [radio, radio]
+        }, {
+          usbHotProtocolSwitch: true
+        });
+        usbTransfer._umsEnabledHandler(true);
+
+        assert.ok(usbTransfer._elements.usbEnabledCheckBox.checked);
+        assert.isFalse(usbTransfer._elements.protocols[0].disabled);
+        assert.isFalse(usbTransfer._elements.protocols[1].disabled);
+      });
+    });
+  });
+});

gaia/apps/settings/test/unit/panels/wifi/wifi_network_list_test.js

@@ -0,0 +1,75 @@
+requireApp(
+  'settings/shared/test/unit/mocks/mock_navigator_moz_wifi_manager.js');
+
+suite('WiFi Network List >', function() {
+  'use strict';
+
+  var wifiAvailableNetworksDiv = document.createElement('ul');
+  var scanItemDiv = document.createElement('li');
+  wifiAvailableNetworksDiv.appendChild(scanItemDiv);
+
+  var wifiNetworkList;
+  var mockWifiHelper;
+  var elements = {
+    wifiAvailableNetworks: wifiAvailableNetworksDiv,
+    infoItem: {},
+    scanItem: scanItemDiv,
+    wifiItem: {}
+  };
+
+  suiteSetup(function(done) {
+    var map = {
+      '*': {
+        'modules/dialog_service': 'unit/mock_dialog_service',
+        'modules/wifi_utils': 'unit/mock_wifi_utils',
+        'shared/wifi_helper': 'shared_mocks/mock_wifi_helper',
+        'modules/wifi_context': 'unit/mock_wifi_context'
+      }
+    };
+
+    var modules = [
+      'panels/wifi/wifi_network_list',
+      'shared/wifi_helper'
+    ];
+
+    testRequire(modules, map, function(WifiNetworkList, MockWifiHelper) {
+      wifiNetworkList = WifiNetworkList(elements);
+      mockWifiHelper = MockWifiHelper;
+
+      sinon.stub(window.performance);
+      done();
+    });
+  });
+
+  suite('scan >', function() {
+    test('should sort network by signal levels and ssid names', function() {
+      sinon.stub(wifiNetworkList, 'clear');
+      sinon.stub(mockWifiHelper, 'getAvailableAndKnownNetworks', function() {
+        var self = this;
+        return {
+          result: [
+            { ssid: 'ssid5', security: ['WPA-PSK'], relSignalStrength: 20 },
+            { ssid: 'ssid4', security: ['WPA-EAP'], relSignalStrength: 100 },
+            { ssid: 'ssid3', security: ['WPA-EAP'], relSignalStrength: 80 },
+            { ssid: 'ssid2', security: ['WPA-EAP'], relSignalStrength: 60 },
+            { ssid: 'ssid1', security: ['WPA-EAP'], relSignalStrength: 60 }
+          ],
+          set onsuccess(callback) {
+            self._cb.onsuccess.push(callback);
+          },
+          set onerror(callback) {
+            self._cb.onerror.push(callback);
+          }
+        };
+      });
+      wifiNetworkList.scan();
+      mockWifiHelper._cb.onsuccess.forEach((cb) => {
+        cb();
+      });
+      assert.deepEqual(
+        Object.getOwnPropertyNames(wifiNetworkList._index),
+        ['ssid3', 'ssid4', 'ssid1', 'ssid2', 'ssid5']
+      );
+    });
+  });
+});