prescottprue / cypress-firebase

Cypress plugin and custom commands for testing Firebase projects
MIT License
271 stars 50 forks source link

bug(auth): slow performance of auth process with react-redux-firebase #213

Open alexandermckay opened 3 years ago

alexandermckay commented 3 years ago

Describe the bug When using cypress-firebase with react-redux-firebase the auth process takes a minimum of 5 seconds. There is an enormous length of time between the @@reactReduxFirebase/AUTHENTICATION_INIT_FINISHED action being fired and the next action @@reactReduxFirebase/LOGIN/@@reactReduxFirebase/AUTH_EMPTY_CHANGE being triggered. This delay does not exist when using plain Chrome.

The only way I have been able to get my tests to pass is to increase defaultCommandTimeout to 10000, which is not ideal. I have tried my tests on two different internet speeds (8mbs/14mbs) and the results were almost identical. Additionally, if I open up the dev server in plain chrome rather than in a cypress test the auth process is <0.3s. I am confused as to why running the process through cypress instead of chrome increases the time the process takes by >10 times.

To Reproduce Steps to reproduce the behavior:

To make this issue easier to replicate I have created a repo here.

Expected behavior/code For the@@reactReduxFirebase/AUTH_EMPTY_CHANGE call to fire in the same amount of time in plain Chrome/ cypress controlled Chrome. The two screenshots below were taken on the same computer, about 10 seconds apart.

Chrome - 00.27 seconds

Screen Shot 2020-10-27 at 1 39 01 pm

Cypress - 05.67 seconds

Screen Shot 2020-10-27 at 1 40 49 pm
alexandermckay commented 3 years ago

@prescottprue

prescottprue commented 3 years ago

@alexandermckay thanks for the repro, I'll try to look into it this weekend - wondering if it has to due with when the app boots up vs when the form is being filled out

Something of note is that this should only really impact tests for your authentication - other tests you should be able to be using cy.login which auths the user with a custom token so you don't have to go through the login UI each time (aligned with Cypress best practices)

alexandermckay commented 3 years ago

@prescottprue I am using cy.login for a majority of my tests. However, this still takes ~5 seconds to execute the @@reactReduxFirebase/LOGIN redux action.

Love the library by the way!

alexandermckay commented 3 years ago

@prescottprue did you get a chance to look at the issue over the weekend?

prescottprue commented 3 years ago

I haven't yet, had some stuff come up. Quick question though, are you by chance using Firestore? From the actions in your screenshot, I am assuming you are since I see redux-firestore - if so have you set experimentalForceLongPolling = true; in your config?

I ask because there is a known issue with Firestore taking a long time with Cypress due to how web channels are being used, but enabling long polling in Firestore seems to fix that issue. That said, not sure that it would impact the speed at which the auth action is dispatched 🤔

jonespen commented 3 years ago

Just chiming in here, I had a similiar issue, and resolved it using experimentalAutoDetectLongPolling: true instead of experimentalForceLongPolling: true after reading this issue. Seems like experimentalAutoDetectLongPolling might become default, so perhaps the docs should be updated to use this instead?

alexandermckay commented 3 years ago

@jonespen what is performance like for your firestore emulator updates?

If I, for example, trigger a onClick={() => firestore.set({collection: 'posts', doc: 'foo'}, {title: 'Bar'})} call from my front-end during an E2E test, it takes ~3000ms before I am able to confirm the change has occurred with a cy.callFirestore('get', 'posts/foo').

Is that a typical wait time for you? If I am running the same test manually in Chrome rather than through Cypress the change occurs (practically) instantaneously.

@prescottprue what sort of wait times could be considered normal for cy.login + for changes triggered by front-end actions to create/update firestore?

prescottprue commented 3 years ago

A note on the issue @jonespen mentioned - I usually only enable the Firestore option when window.Cypress is defined (i.e. browser is the Cypress env)

@alexandermckay I don't see things take nearly that long at all - mine are often sub-second. So normal times for cy.login and changes: should be no more than a few seconds, and even that is "slow". Are you using either of the above mentioned config options with Firestore?

prescottprue commented 3 years ago

Ping - wondering if folks are still experiencing this with the mentioned config options enabled

prescottprue commented 2 years ago

@alexandermckay and @jonespen Is anyone still experiencing this? I've had trouble replicating and the posted replication is no longer a valid link.