Cypress Popup in E2E Testing

[stravid87]

Description

When completing E2E testing, cypress does not allow for testing of popups. Obviously this is a problem given that the oAuth flow of signing in with Lyer8 involves a pop up. Therefore, this issue is about figuring out how to test the Layer8 OAuth flow programmatically so as to simulate the Lyaer8 pop up.

Acceptance Criteria

A Cypress test suite can run the entire flow of user login to WGP followed by Login with layer8 and then clicking of "getNextPoem"

Time Estimate

July 1 to 8

[DeeStarks]

• Having tried to test through the popup and not being successful, I'm proceeding to make direct API calls to the backend to handle the oAuth2 authentication
• I'm wondering if there's a way to launch the popup with the "Login with Layer8" button and extract the authURL that came from the backend without launching the popup. I think it'll be good to test the UI to the least-testable component before disconnecting from the UI to the server (if this starts taking much time and I'm yet to figure it out, I'll go for the easy route)
• The first thing I'm trying is using the cy.wait command with the cy.intercept to intercept the request after the button is clicked, then with the response, which should include the authURL, I'll programmatically visit it, provide it with the necessary information, and see what next steps will come after that (Source: https://docs.cypress.io/api/commands/intercept#Using-the-yielded-object)
• I've just hit a strange problem:
  • When the loginWithLayer8Popup function is called, the first request is to get the auth URL from the backend
  • I'm spying on it but Cypress claimed the request never occurred
  • Taking a look at the steps in the Cypress portal, that request indeed wasn't sent. Instead, it makes the POST request which is several steps away on line 110

    Perhaps the async...await has anything to do with this? I'm going to check on that

• I could not figure out how to solve that problem so I went on to directly send the request to the backend, which also now opens a new problem: Data transmitting from the interceptor to the backend is encrypted. Sending the request from cypress means that there's no encryption that's going to happen like the layer_interceptor.fetch would do, which means that the only way to get that to work is by reinventing the wheel and implementing the data encryption and decryption as in layer8_interceptor and that might not be a good idea, because we'll also need to figure out how to handle initialization of the tunnel
• I figured out the problem with the first approach and could intercept and get the response from the backend. I forgot that the interceptor makes POST requests for all requests to the proxy server. But now, I'm back to the problem of decryption, the response intercepted are encrypted and I'm now trying to think of how that can be bypassed
• I've come to the conclusion that directly calling and sending data to the backend won't work because all data are encrypted. We're trying to prevent exactly issues like that. If a user transfers their data, we're guaranteeing safe delivery and no interception by any "sophisticated" tool (just like the cypress) that can perform any magic to peep or send any data in place of a real user
• The only solution I can see at this point is through the popup because only WGP has access to native layer8 HTTP interfaces

[stravid87]

Pop up now accessible through hard coding

Next Step July 8 - 15

• [ ] Popup now needs to redirect BACK to the front end now that it is accessible through hardcoding
• [ ] Once redirected, try getting poems 1, 2, 3 as an authenticated layer8 user "wgp" & "password"
• [ ] incorporate automate the e2e flow

[DeeStarks]

• By hardcoding the popup, I've now been able to access the OAuth server. But again, another issue lingers - the Authorize redirection back to the callback doesn't happen. I'm currently figuring out why and seeing if there are solutions, using these resources from Github and Cypress
• I came up with a new solution by including another button in the WGP frontend to redirect to layer8 sign-in. Now, there are two options, to use the popup or redirect. So now in the test, we use the redirect to test the OAuth flow and we no longer have to do hardcoding of URLs
• While this seems to work, another issue has shown itself - getting the client ID and secret. Currently, this can only be copied from the layer8 dashboard. The hard-coded one in the server.js won't match the actual one, so I'm in the middle of figuring out a way to get them