Protractor timeout must be set to >30 seconds when using auth

[ghost]

Version info

Angular: 5.0.1

Firebase: 4.6.2

AngularFire: 5.0.0-rc.3

Other (e.g. Ionic/Cordova, Node, browser, operating system): Node 6.12, Chrome 62

How to reproduce these conditions

Steps to set up and reproduce

1. Start a new angular project & add angularfire2
2. Run e2e tests (ng e2e). It should complete successfully within a second.
3. Add AngularFireModule.initializeApp() & AngularFireAuthModule to NgModule in app.module.ts
4. Add constructor(public af: AngularFireAuth) {} line to AppComponent class.

Expected behavior

Executing e2e tests again should complete successfully

Actual behavior

Executing e2e tests produces following output:

[13:34:26] I/update - chromedriver: chromedriver_2.33 up to date
[13:34:26] I/launcher - Running 1 instances of WebDriver
[13:34:26] I/direct - Using ChromeDriver directly...
Jasmine started

  sc App
    ✗ should display welcome message
      - Failed: Timed out waiting for asynchronous Angular tasks to finish after 11 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
      While waiting for element with locator - Locator: By(css selector, app-root h1)
        (Session info: chrome=62.0.3202.94)
        (Driver info: chromedriver=2.33.506106 (8a06c39c4582fbfbab6966dbb1c38a9173bfb1a2),platform=Mac OS X 10.12.6 x86_64)
          at WebDriverError (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/error.js:27:5)
          at ScriptTimeoutError (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/error.js:203:5)
          at Object.checkLegacyResponse (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/error.js:505:15)
          at parseHttpResponse (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/http.js:509:13)
          at doSend.then.response (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/http.js:440:13)
          at process._tickCallback (internal/process/next_tick.js:109:7)
      From: Task: Protractor.waitForAngular() - Locator: By(css selector, app-root h1)
          at Driver.schedule (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/webdriver.js:816:17)
          at ProtractorBrowser.executeAsyncScript_ (/Users/sbark/Documents/ap3/clients/sc/node_modules/protractor/lib/browser.ts:609:24)
          at angularAppRoot.then (/Users/sbark/Documents/ap3/clients/sc/node_modules/protractor/lib/browser.ts:643:23)
          at ManagedPromise.invokeCallback_ (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:1366:14)
          at TaskQueue.execute_ (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:2970:14)
          at TaskQueue.executeNext_ (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:2953:27)
          at asyncRun (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:2813:27)
          at /Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:676:7
          at process._tickCallback (internal/process/next_tick.js:109:7)Error
          at ElementArrayFinder.applyAction_ (/Users/sbark/Documents/ap3/clients/sc/node_modules/protractor/lib/element.ts:482:23)
          at ElementArrayFinder.(anonymous function) [as getText] (/Users/sbark/Documents/ap3/clients/sc/node_modules/protractor/lib/element.ts:96:21)
          at ElementFinder.(anonymous function) [as getText] (/Users/sbark/Documents/ap3/clients/sc/node_modules/protractor/lib/element.ts:873:14)
          at AppPage.getParagraphText (/Users/sbark/Documents/ap3/clients/sc/e2e/app.po.ts:9:43)
          at UserContext.<anonymous> (/Users/sbark/Documents/ap3/clients/sc/e2e/app.e2e-spec.ts:12:17)
          at /Users/sbark/Documents/ap3/clients/sc/node_modules/jasminewd2/index.js:112:25
          at new ManagedPromise (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:1067:7)
          at ControlFlow.promise (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:2396:12)
          at schedulerExecute (/Users/sbark/Documents/ap3/clients/sc/node_modules/jasminewd2/index.js:95:18)
          at TaskQueue.execute_ (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:2970:14)
          at TaskQueue.executeNext_ (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:2953:27)
          at asyncRun (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:2860:25)
          at /Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:676:7
          at process._tickCallback (internal/process/next_tick.js:109:7)
      From: Task: Run it("should display welcome message") in control flow
          at UserContext.<anonymous> (/Users/sbark/Documents/ap3/clients/sc/node_modules/jasminewd2/index.js:94:19)
          at /Users/sbark/Documents/ap3/clients/sc/node_modules/jasminewd2/index.js:64:48
          at ControlFlow.emit (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/events.js:62:21)
          at ControlFlow.shutdown_ (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:2565:10)
          at shutdownTask_.MicroTask (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:2490:53)
          at MicroTask.asyncRun (/Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:2619:9)
          at /Users/sbark/Documents/ap3/clients/sc/node_modules/selenium-webdriver/lib/promise.js:676:7
          at process._tickCallback (internal/process/next_tick.js:109:7)
      From asynchronous test:
      Error
          at Suite.<anonymous> (/Users/sbark/Documents/ap3/clients/sc/e2e/app.e2e-spec.ts:10:3)
          at Object.<anonymous> (/Users/sbark/Documents/ap3/clients/sc/e2e/app.e2e-spec.ts:3:1)
          at Module._compile (module.js:570:32)
          at Module.m._compile (/Users/sbark/Documents/ap3/clients/sc/node_modules/ts-node/src/index.ts:392:23)
          at Module._extensions..js (module.js:579:10)
          at Object.require.extensions.(anonymous function) [as .ts] (/Users/sbark/Documents/ap3/clients/sc/node_modules/ts-node/src/index.ts:395:12)
          at Module.load (module.js:487:32)
          at tryModuleLoad (module.js:446:12)
          at Function.Module._load (module.js:438:3)
          at Module.require (module.js:497:17)
          at require (internal/module.js:20:19)

**************************************************
*                    Failures                    *
**************************************************

1) sc App should display welcome message
  - Failed: Timed out waiting for asynchronous Angular tasks to finish after 11 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
  While waiting for element with locator - Locator: By(css selector, app-root h1)

Executed 1 of 1 spec (1 FAILED) in 12 secs.
[13:34:42] I/launcher - 0 instance(s) of WebDriver still running
[13:34:42] I/launcher - chrome #01 failed 1 test(s)
[13:34:42] I/launcher - overall: 1 failed spec(s)
[13:34:42] E/launcher - Process exited with error code 1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Workaround

Set allScriptsTimeout to 35000 & defaultTimeoutInterval to 60000 in protractor.conf.js. Since tests stat after 30 seconds.

Root cause

The AngularFireAuth class subscribes for onAuthStateChanged() and onIdTokenChanged() when it is created. The firebase auth code initializes state and starts RedirectAuthEventProcessor timer. All this is done in the angular zone causing it to block protractor till the timer is fired after 30 seconds.

Fix

This should be fixed in AngularFire by subscribing to observers outside the angular zone. Sadly my Rx foo is not good enough to provide a patch to make this change.

[davideast]

Hey @surajbarkale-dolby!

This is an outstanding issue with Auth and Protractor.We could solve it by running certain parts of Auth outside of the Angular zone but it's going to take some time to flesh out.

I'll look into it and see what I can do.

[codediodeio]

@surajbarkale-dolby Another workaround is this community maintained plugin: https://www.npmjs.com/package/protractor-testability-plugin. Your specs may finish before Firebase, but you can use browser.sleep(...); as needed. Not an ideal solution, but just FYI.

[surajbarkale]

Hi @codediodeio, do you have any examples of protractor-testability-plugin used for firebase? I am not sure on how to filter out setInterval() calls made by firebase using this plugin. Since user must be logged in do perform any action in the app, I can not bypass auth completely.

[jamesdaniels]

Underlying cause is the same as #1347, closing this one