- Removes callback flicker when there is no pending redirect.

- Adds the ability to use spinners instead of progress bars. This is used only for the nascar screen.
- Updates Readme for customizing country selector.

PiperOrigin-RevId: 207748692
Change-Id: Iaebc5cd3a514fb065e4c901dc00348755daf2bab

Author: wti806

README.md

@@ -217,8 +217,8 @@ for a more in-depth example, showcasing a Single Page Application mode.
 
 When redirecting back from accountchooser.com or Identity Providers like Google
 and Facebook, `start()` method needs to be called to finish the sign-in flow.
-If it requires a user interaction to start the initial sign-in process, you need to 
-check if there is a pending redirect operation going on on page load to check whether `start()` 
+If it requires a user interaction to start the initial sign-in process, you need to
+check if there is a pending redirect operation going on on page load to check whether `start()`
 needs to be called.
 
 To check if there is a pending redirect operation to complete a sign-in attempt,

javascript/ui/element/elementtesthelper.js

@@ -44,10 +44,12 @@ firebaseui.auth.ui.element.ElementTestHelper = function(name) {
 /**
  * Sets the component to test.
  * @param {goog.ui.Component} c The component to test.
+ * @return {!firebaseui.auth.ui.element.ElementTestHelper}
  */
 firebaseui.auth.ui.element.ElementTestHelper.prototype.setComponent =
     function(c) {
   this.component = c;
+  return this;
 };
 
 

javascript/ui/page/base.js

@@ -27,6 +27,7 @@ goog.require('firebaseui.auth.ui.element.infoBar');
 goog.require('firebaseui.auth.ui.element.progressDialog');
 goog.require('firebaseui.auth.ui.mdl');
 goog.require('goog.dom');
+goog.require('goog.dom.classlist');
 goog.require('goog.events.Event');
 goog.require('goog.object');
 goog.require('goog.soy');
@@ -199,12 +200,18 @@ firebaseui.auth.ui.page.Base.prototype.startProcessing_ = function() {
   // pages that load quickly do not display the indicator.
   var self = this;
   this.inProcessing_ = true;
+  // Check whether component uses default progress bar or spinner for busy
+  // indicator.
+  var useSpinner =
+      goog.dom.classlist.contains(self.getElement(), 'firebaseui-use-spinner');
   this.showProcessingTimeout_ = window.setTimeout(function() {
     if (!self.getElement() || self.busyIndicator_ !== null) {
       return;
     }
     self.busyIndicator_ = goog.soy.renderAsElement(
-        firebaseui.auth.soy2.element.busyIndicator, null, null,
+        firebaseui.auth.soy2.element.busyIndicator,
+        // Pass whether a spanner is to be used instead of a progress bar.
+        {useSpinner: useSpinner}, null,
         self.getDomHelper());
     self.getElement().appendChild(self.busyIndicator_);
     firebaseui.auth.ui.mdl.upgrade(self.busyIndicator_);

javascript/ui/page/callback_test.js

@@ -23,14 +23,24 @@ goog.require('firebaseui.auth.ui.page.Callback');
 goog.require('firebaseui.auth.ui.page.PageTestHelper');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
+goog.require('goog.testing.MockClock');
 goog.require('goog.testing.jsunit');
 
 
+var mockClock;
 var root;
 var component;
+var pageTestHelper = new firebaseui.auth.ui.page.PageTestHelper()
+    // Callback already has a progress bar. No need to use
+    // executePromiseRequest.
+    .excludeTests('testExecutePromiseRequest_')
+    .registerTests();
 
 
 function setUp() {
+  // Set up clock.
+  mockClock = new goog.testing.MockClock();
+  mockClock.install();
   root = goog.dom.createDom(goog.dom.TagName.DIV);
   document.body.appendChild(root);
   component = new firebaseui.auth.ui.page.Callback();
@@ -39,6 +49,9 @@ function setUp() {
 
 
 function tearDown() {
+  // Tear down clock.
+  mockClock.tick(Infinity);
+  mockClock.reset();
   component.dispose();
   goog.dom.removeNode(root);
 }
@@ -51,7 +64,6 @@ function testCallback_getPageId() {
 
 function testCallback_pageEvents() {
   // Run page event tests.
-  var pageTestHelper = new firebaseui.auth.ui.page.PageTestHelper();
   // Dispose previously created container since test must run before rendering
   // the component in docoument.
   component.dispose();

javascript/ui/page/emailchangerevoke_test.js

@@ -25,22 +25,30 @@ goog.require('firebaseui.auth.ui.page.EmailChangeRevoke');
 goog.require('firebaseui.auth.ui.page.PageTestHelper');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
+goog.require('goog.testing.MockClock');
+goog.require('goog.testing.events');
 goog.require('goog.testing.jsunit');
 
 
+var mockClock;
 var root;
 var component;
 var formTestHelper = new firebaseui.auth.ui.element.FormTestHelper().
     excludeTests('testOnLinkClick_', 'testOnLinkEnter_').
     registerTests();
 var infoBarTestHelper =
     new firebaseui.auth.ui.element.InfoBarTestHelper().registerTests();
+var pageTestHelper =
+    new firebaseui.auth.ui.page.PageTestHelper().registerTests();
 
 var updateClicked;
 var onClick;
 
 
 function setUp() {
+  // Set up clock.
+  mockClock = new goog.testing.MockClock();
+  mockClock.install();
   updateClicked = false;
   onClick = function() {
     updateClicked = true;
@@ -58,10 +66,14 @@ function setUp() {
   // Reset previous state of form helper.
   formTestHelper.resetState();
   infoBarTestHelper.setComponent(component);
+  pageTestHelper.setClock(mockClock).setComponent(component);
 }
 
 
 function tearDown() {
+  // Tear down clock.
+  mockClock.tick(Infinity);
+  mockClock.reset();
   component.dispose();
   goog.dom.removeNode(root);
 }
@@ -78,7 +90,6 @@ function testEmailChangeRevoke_resetPassword() {
 
 function testEmailChangeRevoke_pageEvents() {
   // Run page event tests.
-  var pageTestHelper = new firebaseui.auth.ui.page.PageTestHelper();
   // Dispose previously created container since test must run before rendering
   // the component in document.
   component.dispose();

javascript/ui/page/emailmismatch_test.js

@@ -25,20 +25,27 @@ goog.require('firebaseui.auth.ui.page.EmailMismatch');
 goog.require('firebaseui.auth.ui.page.PageTestHelper');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
+goog.require('goog.testing.MockClock');
 goog.require('goog.testing.jsunit');
 goog.require('goog.userAgent');
 
 
+var mockClock;
 var root;
 var component;
 // Test helper for submit button and secondary link.
 var formTestHelper =
     new firebaseui.auth.ui.element.FormTestHelper().registerTests();
 var tosPpTestHelper =
     new firebaseui.auth.ui.element.TosPpTestHelper().registerTests();
+var pageTestHelper =
+    new firebaseui.auth.ui.page.PageTestHelper().registerTests();
 
 
 function setUp() {
+  // Set up clock.
+  mockClock = new goog.testing.MockClock();
+  mockClock.install();
   root = goog.dom.createDom(goog.dom.TagName.DIV);
   document.body.appendChild(root);
   // Render email mismatch page with test helper onSubmit and onLinkClick
@@ -57,12 +64,16 @@ function setUp() {
   component.render(root);
   formTestHelper.setComponent(component);
   tosPpTestHelper.setComponent(component);
+  pageTestHelper.setClock(mockClock).setComponent(component);
   // Reset previous state of form helper.
   formTestHelper.resetState();
 }
 
 
 function tearDown() {
+  // Tear down clock.
+  mockClock.tick(Infinity);
+  mockClock.reset();
   component.dispose();
   goog.dom.removeNode(root);
 }
@@ -81,7 +92,6 @@ function testInitialFocus() {
 
 function testEmailMismatch_pageEvents() {
   // Run page event tests.
-  var pageTestHelper = new firebaseui.auth.ui.page.PageTestHelper();
   // Dispose previously created container since test must run before rendering
   // the component in docoument.
   component.dispose();

javascript/ui/page/federatedlinking_test.js

@@ -26,10 +26,12 @@ goog.require('firebaseui.auth.ui.page.FederatedLinking');
 goog.require('firebaseui.auth.ui.page.PageTestHelper');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
+goog.require('goog.testing.MockClock');
 goog.require('goog.testing.jsunit');
 goog.require('goog.userAgent');
 
 
+var mockClock;
 var root;
 var component;
 var formTestHelper = new firebaseui.auth.ui.element.FormTestHelper().
@@ -39,9 +41,14 @@ var infoBarTestHelper =
     new firebaseui.auth.ui.element.InfoBarTestHelper().registerTests();
 var tosPpTestHelper =
     new firebaseui.auth.ui.element.TosPpTestHelper().registerTests();
+var pageTestHelper =
+    new firebaseui.auth.ui.page.PageTestHelper().registerTests();
 
 
 function setUp() {
+  // Set up clock.
+  mockClock = new goog.testing.MockClock();
+  mockClock.install();
   root = goog.dom.createDom(goog.dom.TagName.DIV);
   document.body.appendChild(root);
   component = new firebaseui.auth.ui.page.FederatedLinking(
@@ -58,10 +65,14 @@ function setUp() {
   formTestHelper.resetState();
   infoBarTestHelper.setComponent(component);
   tosPpTestHelper.setComponent(component);
+  pageTestHelper.setClock(mockClock).setComponent(component);
 }
 
 
 function tearDown() {
+  // Tear down clock.
+  mockClock.tick(Infinity);
+  mockClock.reset();
   component.dispose();
   goog.dom.removeNode(root);
 }
@@ -79,7 +90,6 @@ function testInitialFocus() {
 
 function testFederatedLinking_pageEvents() {
   // Run page event tests.
-  var pageTestHelper = new firebaseui.auth.ui.page.PageTestHelper();
   // Dispose previously created container since test must run before rendering
   // the component in docoument.
   component.dispose();

javascript/ui/page/notice_test.js

@@ -32,10 +32,12 @@ goog.require('firebaseui.auth.ui.page.PasswordResetSuccess');
 goog.require('firebaseui.auth.ui.page.UnrecoverableError');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
+goog.require('goog.testing.MockClock');
 goog.require('goog.testing.jsunit');
 goog.require('goog.userAgent');
 
 
+var mockClock;
 var root;
 var component;
 var formTestHelper = new firebaseui.auth.ui.element.FormTestHelper().
@@ -45,9 +47,14 @@ var infoBarTestHelper =
     new firebaseui.auth.ui.element.InfoBarTestHelper().registerTests();
 var tosPpTestHelper =
     new firebaseui.auth.ui.element.TosPpTestHelper().registerTests();
+var pageTestHelper =
+    new firebaseui.auth.ui.page.PageTestHelper().registerTests();
 
 
 function setUp() {
+  // Set up clock.
+  mockClock = new goog.testing.MockClock();
+  mockClock.install();
   root = goog.dom.createDom(goog.dom.TagName.DIV);
   document.body.appendChild(root);
   component = new firebaseui.auth.ui.page.PasswordRecoveryEmailSent(
@@ -63,10 +70,14 @@ function setUp() {
   formTestHelper.resetState();
   infoBarTestHelper.setComponent(component);
   tosPpTestHelper.setComponent(component);
+  pageTestHelper.setClock(mockClock).setComponent(component);
 }
 
 
 function tearDown() {
+  // Tear down clock.
+  mockClock.tick(Infinity);
+  mockClock.reset();
   component.dispose();
   goog.dom.removeNode(root);
 }
@@ -84,7 +95,6 @@ function testInitialFocus() {
 
 function testPasswordRecoveryEmailSent_pageEvents() {
   // Run page event tests.
-  var pageTestHelper = new firebaseui.auth.ui.page.PageTestHelper();
   // Dispose previously created container since test must run before rendering
   // the component in docoument.
   component.dispose();

javascript/ui/page/pagetesthelper.js

@@ -21,7 +21,11 @@ goog.provide('firebaseui.auth.ui.page.PageTestHelper');
 goog.setTestOnly('firebaseui.auth.ui.page.PageTestHelper');
 
 goog.require('firebaseui.auth.EventDispatcher');
+goog.require('firebaseui.auth.ui.element.ElementTestHelper');
 goog.require('firebaseui.auth.ui.page.Base');
+goog.require('goog.Promise');
+goog.require('goog.dom');
+goog.require('goog.dom.classlist');
 goog.require('goog.events');
 
 
@@ -32,13 +36,17 @@ var page = firebaseui.auth.ui.page;
 /**
  * Initializes page test helper.
  * @constructor
+ * @extends {firebaseui.auth.ui.element.ElementTestHelper}
  */
 page.PageTestHelper = function() {
+  page.PageTestHelper.base(this, 'constructor', 'Page');
   this.entered_ = false;
   this.exited_ = false;
   this.enteredEvent_ = null;
   this.exitedEvent_ = null;
 };
+goog.inherits(
+    page.PageTestHelper, firebaseui.auth.ui.element.ElementTestHelper);
 
 
 /**
@@ -150,4 +158,54 @@ page.PageTestHelper.prototype.runTests = function(component, container) {
   this.assertExited(component.getPageId());
   this.resetState();
 };
+
+
+/**
+ * @param {!goog.testing.MockClock} clock The mock clock to use for testing.
+ * @return {!page.PageTestHelper} THe current page test helper instance.
+ */
+page.PageTestHelper.prototype.setClock = function(clock) {
+  this.mockClock = clock;
+  return this;
+};
+
+
+/**
+ * Tests executePromiseRequest and the busy indicators that gets displayed.
+ * @return {!goog.Promise} Promise that resolves when the test completes.
+ * @private
+ */
+page.PageTestHelper.prototype.testExecutePromiseRequest_ = function() {
+  var root = this.component.getContainer();
+  var resolveBusyIndicator;
+  var pending = new goog.Promise(function(resolve, reject) {
+    resolveBusyIndicator= resolve;
+  });
+  var p = this.component.executePromiseRequest(
+      function() {
+        return pending;
+      },
+      [],
+      function() {},
+      function(error) {});
+  this.mockClock.tick(500);
+  var elements =
+      goog.dom.getElementsByClass('firebaseui-busy-indicator', root);
+  assertEquals(1, elements.length);
+  var busyIndicator = elements[0];
+  if (goog.dom.classlist.contains(root.firstChild, 'firebaseui-use-spinner')) {
+    // Confirm mdl-spinner used instead of mdl-progress.
+    assertTrue(goog.dom.classlist.contains(busyIndicator, 'mdl-spinner'));
+  } else {
+    // Confirm mdl-progress bar used instead of mdl-spinner.
+    assertTrue(goog.dom.classlist.contains(busyIndicator, 'mdl-progress'));
+  }
+  // Resolve pending task.
+  resolveBusyIndicator();
+  return p.then(function() {
+    // Busy indicator should be removed when promise resolves.
+    assertEquals(0, goog.dom.getElementsByClass(
+        'firebaseui-busy-indicator', root).length);
+  });
+};
 });